vue框架入门笔记（速成vue）

vue4小时速成课

  • 概述
  • 一、vue基础
    • 1. vue简介
    • 2. 第一个vue程序
    • 3. el挂载点
    • 4. data数据对象
  • 二、本地应用
    • 1. v-text
    • 2. v-html
    • 3. v-on
    • 4. 计数器
    • 5. v-show
    • 6. v-if
    • 7. v-bind
    • 8. 图片切换
    • 9. v-for
    • 10. v-model
    • 8. 小黑记事本
  • 三、网络应用
    • 1. axios基本使用
    • 2. axios+vue
    • 3. 天知道
  • 四、vue进阶学习
    • 1、计算属性computed
    • 2、插槽slot（*不建议学）

概述

学习vue的目的主要是为了完成毕业设计的前端页面编写，所以学的比较粗糙，主要是为了vue入门，观看的教学链接是：
黑马程序员vue前端基础教程-4个小时带你快速入门vue
【狂神说Java】Vue最新快速上手教程通俗易懂

一、vue基础

1. vue简介

  • 一个js框架
  • 简化Dom操作
  • 响应式数据驱动
    数据发生变化，则页面上的数据显示也会随之发生变化。

2. 第一个vue程序

vue官方文档：https://cn.vuejs.org/
开发工具： webstorm

步骤

  1. 导入vue
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  1. 创建vue实例对象，设置el、data属性
  • el：选择元素
    本例选择id为app的元素。
  • data：vue实例使用的数据
    本例包含一个值为’Hello Vue!'的message变量。
<script>var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}})
</script>
  1. 使用vu提供的模板语法渲染数据
    {{}}用于获取vue实例中的数据，使用方式{{变量名}}。
	<div id="app">{{ message }}</div>

first_demo.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>第一个vue程序</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div id="app">{{ message }}</div>
</body>
<script>var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}})
</script>
</html>

网页效果
第一个vue程序

3. el挂载点

  1. 作用范围
    data作用域范围在el挂载点命中标签的内部。
  2. 选择器
    可以使用选择器，但是推荐id选择器。
  3. 支持标签
    除了body、html以外，所有的双标签都支持挂载。

el挂载点.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>el挂载点</title>
</head>
<body>
{{message}}<div class="app">{{message}}<span>{{message}}</span></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>var app = new Vue({// el: '#app',el: '.app',data: {message: '秋秋要加油呀'}})
</script>
</html>

网页效果
el挂载点

4. data数据对象

  1. 简单对象
    {{变量名}}
  2. 复杂对象
    {{对象名.变量名}}
  3. 数组
    {{数组名[下标]}}

data数据对象.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>data数据对象</title>
</head>
<body>
<div id="app">{{message}}<h2>{{school.name}} {{school.mobile}}</h2><ul><li>{{compus[0]}}</li><li>{{compus[1]}}</li><li>{{compus[2]}}</li><li>{{compus[3]}}</li></ul>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>var app = new Vue({el: "#app",data:{message: '秋秋要加油呀！',//对象school:{name: "chocho",mobile: '123456'},//数组compus:['航空港', '龙泉', '人南', '青羊']}})
</script>
</body>
</html>

网页效果
data数据对象

二、本地应用

vue网页效果不是使用操作dom元素实现的，而是使用vue指令实现。

1. v-text

  1. 作用
    设置标签文本值。
  2. 使用
  • 添加属性的方式
<h2 v-text="变量名"></h2>
  • 插值表达式方式
<h2>{{变量名}}</h2>
  • 拼接的方式
<h2 v-text="变量名+‘chocho’"></h2>
<h2>{{变量名+‘chocho’}}</h2>

data数据对象.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-text</title><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div id="app"><h2 v-text="message + '@'">xyg</h2><h2 v-text="info + '@'">xyg</h2><h2>{{info + '@'}}xyg</h2></div>
</body>
<script>var app = new Vue({el: '#app',data: {message: '秋秋要加油呀!',info: '梦公主好帅鸭！'}})
</script>
</html>

网页效果
v-text

2. v-html

  1. 作用
    设置标签的innerHTML。
  2. 使用
    若需要在内部渲染html效果，使用v-html；若不需要渲染html效果，则使用v-text。

data数据对象.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-html</title><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div id="app"><p v-html="content"></p><p v-text="content"></p></div>
</body>
<script>var app = new Vue({el: '#app',data: {//content: '秋秋要加油呀!'content: '<a href="http://www.baidu.com">百度</a>'}})
</script>
</html>

网页效果
v-html

3. v-on

  1. 作用
    为元素绑定事件。
  2. 使用
    在需要绑定事件的元素上添加属性v-on，指明事件与对应的方法：
<input type='button' value='xxx' v-on:click='方法'>
<input type='button' value='xxx' v-on:mouseenter='方法'>
<input type='button' value='xxx' v-on:dbclick='方法'><!--其中v-on:可以使用@替换-->
<input type='button' value='xxx' @click='方法'>
<input type='button' value='xxx' @mouseenter='方法'>
<input type='button' value='xxx' @dbclick='方法'>

方法写在vue实例的methods属性中：

var app = new Vue({el: '#app',data: {},methods:{doIt: function(){//函数逻辑}}})

v-on.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-on</title><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div id="app"><!--传递自定义参数，事件修饰符 --><input type="button" value="v-on指令" @click="doIt(666)"><input type="text" @keyup.enter="sayHi"><!--vue修改数据方式：this.变量名--><h2 @click="changeFood">{{food}}</h2></div>
</body>
<script>var app = new Vue({el: '#app',data: {food: "可乐鸡翅"},methods:{doIt: function (p1) {alert("做It" + p1);},changeFood: function () {console.log(this.food);this.food += "好好吃！";},sayHi: function () {alert("吃了没？");}}})
</script>
</html>

网页效果
v-on
事件修饰符
传递参数

4. 计数器

  1. 功能
    如图所示，
    计数器

  2. 功能分析
    点击左侧，则数字-1，若数字=0，则提示不能再减少了。
    点击右侧，则数字+1。
    使用vue实现，只需要对左右两侧绑定点击事件，当点击左侧，则将data中的变量-1，vue会自动渲染到页面上，若数字=0，则提示信息；当点击右侧，则将data中的变量+1。

  3. 代码实现
    计数器.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>计数器</title><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div id="app"><!--计数器功能区--><div class="input-num"><button @click="sub">  -  </button><span>{{num}}</span><button @click="add">  +  </button></div></div>
</body>
<script>var app = new Vue({el: '#app',data: {num: 1},methods: {//加法add: function () {//console.log("add");if(this.num < 10){this.num++;}else {alert("最大值啦！")}},//减法sub: function () {//console.log("sub");if(this.num > 0){this.num--;}else {alert("最小值啦！")}}}})
</script>
</html>

网页效果
计数器效果

5. v-show

  1. 作用
    根据表达式真假，对元素进行显示和隐藏。
    *通过操纵元素样式（display:none;）来实现显示/隐藏

  2. 代码实现
    v-show.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-show</title><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div id="app"><input type="button" value="和公主躲猫猫！" @click="changeIsShow"><img src="./img/梦公子.jpg" alt="" v-show="isShow" style="width: 200px"><img src="./img/梦公子.jpg" alt="" v-show="age>=18" style="width: 200px"></div>
</body>
<script>var app = new Vue({el: '#app',data: {isShow: false,age: 19},methods:{changeIsShow: function () {this.isShow = !this.isShow;}}})
</script>
</html>

网页效果
v-show

6. v-if

  1. 作用
    根据表达式真假，对元素进行显示和隐藏。
    *通过操纵dom元素来实现显示/隐藏。
    *由于操纵dom元素消耗较大，因此如果是需要频繁切换的元素，则使用v-show，反之使用v-if。

  2. 代码实现
    v-if.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-if</title><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app"><input type="button" value="和公主躲猫猫！" @click="changeIsShow"><img src="./img/梦公子.jpg" alt="" v-if="isShow" style="width: 200px">
</div>
</body>
<script>var app = new Vue({el: '#app',data: {isShow: false,},methods:{changeIsShow: function () {this.isShow = !this.isShow;}}})
</script>
</html>

网页效果v-if

7. v-bind

  1. 作用
    动态设置元素的属性。

  2. 代码实现
    v-bind.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-bind</title><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><style>/*设置样式*/.active{border: 1px solid purple;}</style>
</head>
<body><div id="app"><img v-bind:src="imgSrc" alt="" style="width: 200px"><!--v-bind:简写为:--><img :src="imgSrc" alt="" style="width: 200px" :title="imgTitle" :class="{active:isActive}" @click="toggleActive"></div>
</body>
<script>var app = new Vue({el: '#app',data: {imgSrc: './img/梦公子.jpg',imgTitle: '梦公子',isActive: false},methods:{toggleActive: function () {this.isActive = !this.isActive;}}})
</script>
</html>

网页效果
v-bind

8. 图片切换

  1. 功能
    用户点击左右切换图片，当切换到最左侧/右侧图片时，则隐藏箭头。

  2. 功能分析
    点击切换图片的本质是改变的图片src属性，图片的地址使用数组存储；显示以及隐藏图片则是对箭头的display进行操作。

  3. 代码实现

图片切换.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片切换</title><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div id="app"><div class="center"><h2 class="title">梦公主</h2><!--左箭头--><span @click="prev" v-show="index!=0"> < </span><!--图片--><img :src="imgArr[index]" alt="" style="width: 200px"><!--右箭头--><span @click="next" v-show="index<imgArr.length-1"> > </span></div></div>
</body>
<script>var app = new Vue({el: '#app',data: {imgArr: ["./img/梦.jpg","./img/梦1.jpg","./img/梦2.jpg","./img/梦3.jpg","./img/梦4.jpg","./img/梦公子.jpg"],index: 0},methods:{//上一张prev: function () {this.index--;//console.log(this.index);},//下一张next: function () {this.index++;//console.log(this.index);}}})
</script>
</html>

网页效果
图片切换

9. v-for

  1. 作用
    根据数据生成列表结构。

  2. 代码实现
    v-for.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-for</title><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div id="app"><ul><!--循环的是li标签，因此v-for添加在这里--><li v-for="(item,index) in arr" :title="item">【{{index+1}}】{{item}}</li><input type="button" @click="add" value="添加数据"><input type="button" @click="remove" value="删除数据"><h2 v-for="(item,index) in objArr">我叫{{item.name}}</h2></ul></div>
</body>
<script>var app = new Vue({el: '#app',data: {arr: [1, 2, 3, 4, 5],objArr:[{name:"chocho"},{name:"anchor"}]},methods:{//增加数据add: function () {this.objArr.push({name:"xyg"});},//删除数据remove: function () {//默认移除第一个元素this.objArr.shift();}}})
</script>
</html>

网页效果
v-for

10. v-model

  1. 作用
    双向数据绑定（需要和表单元素一起使用）。
  2. 代码实现
    v-model.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-model</title><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div id="app"><input type="button" value="修改数据" @click="setM"><input type="text" v-model="message" @keyup.enter="getM"><h2>{{message}}</h2></div>
</body>
<script>var app = new Vue({el: '#app',data: {message: "chocho"},methods:{getM: function () {alert(this.message);},setM: function () {this.message = "哎呀哎呀";}}})
</script>
</html>

网页效果
set
get

8. 小黑记事本

  1. 功能
  • 新增回车新增事件
  • 显示显示事件列表
  • 删除点击删除事件
  • 统计事件条数显示
  • 清空清空事件， 隐藏且会隐藏底部标签
  1. 功能分析
  • 新增+显示
    生成列表结构（v-for+数组）
    获取用户输入（v-model）
    回车新增数据（v-on.enter）
  • 删除
    点击删除指定内容（v-on+splice）
  • 统计
    统计数据个数（数组长度v-text）
  • 清空
    清空所有数据（v-on+清空数组）
  • 隐藏
    当页面没有数据时隐藏（v-if/v-show）
  1. 代码实现
    小黑记事本.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>小黑记事本</title><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><!--主体区域--><section id="todoapp"><!--输入框--><header class="header"><h1>小黑记事本</h1><input type="text" v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off"placeholder="请输入任务" class="new-todo"></header><!--列表区域--><section class="main"><ul class="todo-list"><li class="todo" v-for="(item,index) in list"><div class="view"><span class="index" >{{index+1}}.</span><label for="">{{item}}</label><button @click="remove(index)" class="destroy">x</button></div></li></ul></section><!--统计和清空--><footer v-if="list.length>0" class="footer"><span class="todo-count"><strong>{{list.length}}</strong>条</span><button class="clear-completed" @click="clearArr">Clear</button></footer></section><!--底部--><footer class="info"></footer>
</body>
<script>var app = new Vue({el: '#todoapp',data: {list: ["写代码", "微服务", "打豆豆", "撸猫"],inputValue: "认真吃饭，好好生活"},methods:{//新增add: function () {this.list.push(this.inputValue);},remove: function (index) {//console.log("删除");this.list.splice(index, 1);},clearArr: function () {this.list = [];}}})
</script>
</html>

网页效果

  • 新增+显示+删除+统计
    记事本
  • 清空+隐藏
    记事本

三、网络应用

1. axios基本使用

  1. 作用
    网络请求库。
  2. 使用方法
//引入axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>//get请求
//第一个回调函数在请求响应后触发
//第二个回调函数在请求失败后触发
axios.get(地址?参数).then(function(response){},function(err){})//post请求
axios.post(地址,参数对象).then(function(response){},function(err){})
  1. 代码实现
    axios.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>axios</title>
</head>
<body><input type="button" value="get请求" class="get"><input type="button" value="post请求" class="post">
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>/*接口1:随机笑话请求地址: http://localhost:8080/api/joke/list请求方法:get请求参数:num(笑话条数,数字)响应内容:随机笑话*/document.querySelector(".get").onclick = function () {axios.get("http://localhost:8080/api/joke/list?num=1").then(function (response) {console.log(response.data);}, function (error) {console.log("失败了");console.log(error);});},/*接口2:用户注册请求地址:http://localhost:8080/api/user/reg请求方法:post请求参数:username(用户名，字符串)响应内容:注册成功或失败*/document.querySelector(".post").onclick = function () {axios.post("http://localhost:8080/api/user/reg",{username: "chocho"}).then(function (response) {console.log(response.data);}, function (error) {console.log("失败了");console.log(error);});}
</script>
</html>

Java后端：接口

package com.chocho.webcompilecore.controller;import com.chocho.webcompilecore.util.Msg;
import org.springframework.web.bind.annotation.*;/*** Created by chocho on 2022/1/24.*/
@RestController
@RequestMapping("/api")
public class VueTestController {@GetMapping("/joke/list")public Msg getJokeList(@RequestParam("num") Integer num){if(num <= 0){return Msg.fail();}String jokes[] = new String[num];for(int i = 0; i < num; i++){jokes[i] = "讲个笑话" + i;}return Msg.success().add("jokes", jokes);}@PostMapping("/user/reg")public Msg register(@RequestBody String username){if(username == null || "".equals(username)){return Msg.fail();}else{return Msg.success();}}
}

Java后端解决跨域问题

package com.chocho.webcompilecore.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;/*** 实现基本的跨域请求* Created by chocho on 2022/1/25.*/
@Configuration
public class CorsConfig {@Beanpublic CorsFilter corsFilter() {final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();final CorsConfiguration corsConfiguration = new CorsConfiguration();/*是否允许请求带有验证信息*/corsConfiguration.setAllowCredentials(true);/*允许访问的客户端域名*/corsConfiguration.addAllowedOrigin("*");/*允许服务端访问的客户端请求头*/corsConfiguration.addAllowedHeader("*");/*允许访问的方法名,GET POST等*/corsConfiguration.addAllowedMethod("*");urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);return new CorsFilter(urlBasedCorsConfigurationSource);}
}

网页效果
axios

2. axios+vue

  1. 注意事项
  • axios中的this已经改变，因此需要先将this存在that中，再调用axios，这样后面的数据访问才不会出错。
  1. 代码实现
    axios_vue.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>axios_vue</title><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body><div id="app"><input type="button" value="获取笑话" @click="getJoke"><p>{{joke}}</p></div>
</body>
<script>var app = new Vue({el: '#app',data: {joke: "很好笑的笑话"},methods:{/*接口3:随机笑话请求地址:http://localhost:8080/api/joke请求方法:get请求参数:无响应内容:一条随机笑话*/getJoke: function () {var that = this;//在axios中this改变了axios.get("http://localhost:8080/api/joke").then(function (response) {//console.log(response.data.data.joke);that.joke = response.data.data.joke;}, function (error) {})}}})
</script>
</html>

网页效果
随机笑话

3. 天知道

  1. 功能
    天知道
  • 回车查询
    输入城市查询天气
  • 点击查询
  1. 功能分析

  • 回车查询
    用户输入城市名称（v-model）
    回车发送查询到服务器（@keyup.enter+axios.get）
    服务器返回天气渲染页面（v-for）

  • 点击查询
    点击事件（@click）
    查询数据
    渲染数据

  1. 代码实现
    main.js
/*接口:天气请求地址:http://localhost:8080/api/weather请求方法:get请求参数:city响应内容:天气信息1、点击回车2、查询数据3、渲染数据
*/
var app = new Vue({el: '#app',data: {city: "",weatherList: []},methods:{searchWeather: function () {var that = this;//console.log("天气查询");axios.get("http://localhost:8080/api/weather?city=" + this.city).then(function (response) {//console.log(response.data);that.weatherList = response.data.data.weatherList;}).catch(function (error) {})},changeCity: function (city) {//1.修改城市this.city = city;//2.查询天气this.searchWeather();}}
})

天知道.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>天知道</title>
</head>
<body><div id="app"><div class="search_form"><div class="form_group"><input v-model="city" @keyup.enter="searchWeather" type="text" class="input_txt" placeholder="请输入查询的天气"><button class="input_sub">搜索</button></div><div class="hot_key"><a href="javascript:;" @click="changeCity('北京')">北京</a><a href="javascript:;" @click="changeCity('上海')">上海</a><a href="javascript:;" @click="changeCity('广州')">广州</a><a href="javascript:;" @click="changeCity('深圳')">深圳</a></div></div><ul class="weather_list"><li v-for="w in weatherList"><div class="info_type"><span class="iconfont">{{w.type}}</span></div><div class="info_temp"><b>{{w.low}}</b>~<b>{{w.high}}</b></div><div class="info_date"><span>{{w.date}}</span></div></li></ul></div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--自定义js-->
<script src="./js/main.js"></script>
</html>

网页效果
天知道

四、vue进阶学习

1、计算属性computed

  1. 作用
    computed，使用vm.属性名调用，用于将不经常变化的计算结果缓存起来，以节约系统开销。
    注意：methods与computed中的方法名重名，则优先运行methods中的方法。

2、插槽slot（*不建议学）

  1. 定义
    用于实现动态网页。

  2. 代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>插槽slot</title>
</head>
<body><div id="app"><todo><todo-p slot="todo-p" :title="title"></todo-p><todo-li slot="todo-li" v-for="item in todoItems" :item="item"></todo-li></todo></div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>//定义vue组件Vue.component("todo", {//模板template: '<div><slot name="todo-p"></slot><ul><slot name="todo-li"></slot></ul></div>'});//数据组件Vue.component('todo-p', {props: ['title'],template: '<p>{{title}}</p>'});Vue.component('todo-li', {props: ['item'],template: '<li>{{item}}</li>'});var vm = new Vue({el: "#app",data: {title: '书籍列表',todoItems: ['Java', 'Linux', 'Python']}});
</script>
</html>

Published by

风君子

独自遨游何稽首 揭天掀地慰生平