vue的基本使用

1）导入vue.js的script脚本文件
可以前往 https://staticfile.org/ 下载vue.js或者引入在线cdn
也可以前往 https://www.bootcdn.cn/ 下载vue.js或者引入在线cdn
2）在页面中声明一个将要被vue所控制的DOM区域
3）创建vm实例对象（vue实例对象）

<body><!--2.在页面中声明一个将要被vue所控制的DOM区域--><div id="test">helloVue{{info}}</div><!--1.导入vue脚本文件-->
<script src="../vue/vue.js"></script>
<script>//3.创建vm实例对象（vue实例对象)const vm = new Vue({//3.1指定当前vm实例要控制的哪个区域el: '#test',//3.2指定model数据源data: {info: '我爱学习！'}})
</script>
</body>

vue的调试工具

配置chrom浏览器中的vue-devtools
自行下载vue-devtools插件（谷歌商店无法访问，但可以访问极简插件进行下载，百度搜索极简插件）
下载完成后打开谷歌浏览器，右上角找到扩展程序那一栏，将下载好的插件拖动进去即可。

开启vue-devtools插件后，如果谷歌浏览器运行了vue项目，打开f12则可以看到控制台有vue这一节点。

vue的指令

指令（Directives) 是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。

vue中的指令按照不同的用途可以分为如下6大类:
1)内容渲染指令
2)属性绑定指令
3)事件绑定指令
4)双向绑定指令
5)列表渲染指定

注意：指令是vue开发中最基础、最常用、最简单的知识点。

1.内容渲染指令

内容渲染指令用来辅助开发者渲染DOM元素的文本内容。常用的内容渲染指令有如下3个:

v-text （缺点：会覆盖原有的内容
{{}} （实际开发中用的最多，只是内容的占位符，不会覆盖原有内容
v-html （可以把带标签的字符串，渲染成真正的HTML内容)

v-text
用法示例

<body><div id='test'><!-- 把username对应的值，渲染到第一个h标签中 --><h3 v-text="username"></h3><!-- 把gender对应的值，渲染到第二个p标签中 --><!-- 注意：第二个p标签中，默认的文本'性别'会被gender的值覆盖 --><h3 v-text="gender">性别</h3></div><script src="../vue/vue.js"></script><script>let app = new Vue({el: '#test',data: {username:'张三',gender:'男',}})</script>
</body>

注意: v-text会覆盖元素内默认的值。

{{}} 语法
vue提供的{{}}语法，专门用来解决v-text会覆盖默认文本内容的问题。这种{{}}语法的专业名称是插值表达式（Mustache)

<body><!--{{}}z学名mustache胡子语法，里面可以写变量或者简单的表达式，也可以使用一些函数api和三元表达式 --><!--{{numberr + 1}}  {{ok?'yes':'no'}} {{message.split('').reverse().join('')}}--><div id="test">helloVue{{info+info}}<h3>{{count * 2}}</h3></div><script src="../vue/vue.js"></script><script>let app = new Vue({el: '#test',data: {info: '我爱学习！',count: 100}})</script>
</body>

v-html
v-text指令和插值表达式只能渲染纯文本内容。如果要把包含HTML标签的字符串渲染为页面的HTML元素，则需要用到v-html这个指令

<body><div id="test"><h3>{{url}}</h3><!-- 会覆盖原有的内容 但是可以识别html的标签 --><h3 v-html='url'>111</h3></div><script src="../vue/vue.js"></script><script>let app = new Vue({el: '#test',data: {info: '我爱学习！',count: 100,url: '<a href="http://www.baidu.com">百度</a>'}})</script>
</body>

el使用搞得注意点，建议挂载根元素，当出现多个同名标签时，只会生效第一个。

拓展

v-once 指令
用法:

<body><div id="test"><h3>{{info}}</h3><h3 v-once>{{info}}</h3><!-- v-once不会根据下面数据变化而变化 --></div>
</body>
<script src="../vue/vue.js"></script>
<script>let app = new Vue({el: '#test',data: {info: '我爱学习！',count: 100}})
</script>

v-pre指令

<body><div id="test"><h3>{{info}}</h3><h3 v-pre>{{info}}</h3><!-- v-pre跳过vue的编译 即使data里面定义了 info 还是显示{{info}} --></div>
</body>
<script src="../vue/vue.js"></script>
<script>let app = new Vue({el: '#test',data: {info: '我爱学习!',count: 100,url: '<a href="http://www.baidu.com">百度</a>'}})
</script>

v-cloak 使用
vue 使用{{}}语法加载数据的时候，如果浏览器性能不好会出现 {{info}}一闪而过再变成‘我爱学习’
这时候使用v-cloak,让他没有完全加载vue之前，display为none不显示，加载完毕后这个属性会被自动删除
就可以解决上面问题。

<head><!--其他设置代码省略--><style>[v-cloak] {display: none;}</style>
</head><body><div id="test"><h3>{{info}}</h3><h3 v-cloak>{{info}}</h3></div>
</body>
<script src="../vue/vue.js"></script>
<script>//在vue解析之前，div有个v-cloak属性，解析后会被删除//可以根据这个特点设置相应的样式let app = new Vue({el: '#test',data: {info: '我爱学习！',count: 100,url: '<a href="http://www.baidu.com">百度</a>'}})
</script>

2.属性绑定指令

如果需要为元素的属性动态绑定属性，则需要用到v-bind属性绑定指令。用法示例如下:

<body><div id="test"><!-- 无效，不解析 --><img src="{{imgUrl}}" alt='' /><img src="imgUrl" alt='' /><!-- 正确用法 --><img v-bind:src="imgUrl" alt="" /><!-- 还能绑定其他属性 --><a v-bind:href="aHref" target='_blank'>百度</a><!-- 语法糖  简写 直接用: --><a :href="aHref" target='_blank'>百度22</a></div>
</body>
<script src="../vue/vue.js"></script>
<script>let app = new Vue({el: '#test',data: {info: '我爱学习！',count: 100,url: '<a href="http://www.baidu.com">百度</a>',imgUrl: 'http://i0.hdslb.com/bfs/article/a2b6f6d45c650bf555a1882bb423c067a70fc739.jpg',aHref: 'http://www.baidu.com'}})
</script>

2.1 v-bind绑定class数组语法

<body><div id="test"><!-- 带单引号是字符串，不带单引号是变量 --><!-- 这种用法很少 --><h3 class="title" :class="['font','color']"></h3><h3 class="title" :class="[font,color]"></h3></div>
</body>
<script src="../vue/vue.js"></script>
<script>let app = new Vue({el: '#test',data: {color: 'color',info: '我爱学习！',font: 'ffff'}})
</script>

2.3 v-bind动态绑定class对象语法

<style>.color {color: red;}.fontSize {font-size: 30px;}</style>
</head><body><div id="test"><!-- 不仅可以使用 --><!-- <h3 :class="color">{{info}}</h3> --><!-- 还能控制样式是否激活 --><!-- 还能用原来的class添加固定的属性，v-bind不会将它覆盖 --><!-- <h3 class="title" :class="{color:isColor,fontSize:isFontSize}">{{info}}</h3> --><!-- 觉得类太长可以写一个方法丢进去 --><h3 class="title" :class="getClass()">{{info}}</h3><button @click="changeColor">变色</button><button @click="changeSize">变大</button></div>
</body>
<script src="../vue/vue.js"></script>
<script>let app = new Vue({el: '#test',data: {color: 'color',info: '我爱学习！',isColor: false,isFontSize: false},methods: {changeColor: function() {this.isColor = !this.isColor;},changeSize: function() {this.isFontSize = !this.isFontSize;},getClass: function() {return {color: this.isColor,fontSize: this.isFontSize}}}})
</script>

2.4 v-bind动态绑定style对象语法

body><div id="test"><!--  驼峰和引号两种写法都可以--><!-- 对象语法 --><h3 :style="{'font-size':'40px'}">{{info}}</h3><h3 :style="{fontSize:'40px'}">{{info}}</h3><h3 :style="{fontSize:setFontSize}">{{info}}</h3><h3 :style="{fontSize:setFont+'px'}">{{info}}</h3><!-- 数组语法 --><h3 :style="[font1,font2]">{{info}}</h3></div>
</body>
<script src="../vue/vue.js"></script>
<script>let app = new Vue({el: '#test',data: {info: '我爱学习',setFontSize: '100px',setFont: 100,font1: {fontSize: '30px',color: 'red'},font2: {background: 'green'}},methods: {}})
</script>

3. 计算属性

3.1 计算属性的基本操作

<body><div id="test"><!-- 原来的做法 --><h3>{{firstName}} {{lastName}}</h3><h3>{{firstName+' ' +lastName}}</h3><!-- 第一种方法methods --><h3>{{getFullName()}}</h3><!-- 第二个方法 计算属性 计算后显示 --><h3>{{fullName}}</h3></div>
</body>
<script src="../vue/vue.js"></script>
<script>let app = new Vue({el: '#test',data: {firstName: 'icy',lastName: 'akuya'},//计算属性，尽量按属性取名字computed: {fullName: function() {return this.firstName + this.lastName}},methods: {getFullName: function() {return this.firstName + this.lastName}}})
</script>

3.2 计算属性的set和get

<body><div id="test"><h3>{{fullName}}</h3></div>
</body>
<script src="../vue/vue.js"></script>
<script>let app = new Vue({el: '#test',data: {firstName: 'icy',lastName: 'akuya'},//计算属性，尽量按属性取名字computed: {// fullName: function() {//     return this.firstName + this.lastName// }//原来的完整写法fullName: {set: function(newName) {const name = newName.split(' ')this.firstName = name[0]this.lastName = name[1]},get: function() {return this.firstName + ' ' + this.lastName}}},methods: {getFullName: function() {return this.firstName + this.lastName}}})
</script>

3.3 计算属性和methods对比

<body><div id="test"><h3>{{fullName}}</h3><h3>{{fullName}}</h3><h3>{{fullName}}</h3><h3>----------</h3><h3>{{getFullName()}}</h3><h3>{{getFullName()}}</h3><h3>{{getFullName()}}</h3></div>
</body>
<script src="../vue/vue.js"></script>
<script>let app = new Vue({el: '#test',data: {firstName: 'icy',lastName: 'akuya'},//计算属性只会调用一次然后会会缓存，methods则每次都会调用computed: {fullName: function() {console.log('计算属性')return this.firstName + this.lastName}},methods: {getFullName: function() {console.log('method方法')return this.firstName + this.lastName}}})
</script>

3.4 计算属性的复杂操作

<body><div id="test"><h3>书本的总价格:{{allPrice}}</h3></div>
</body>
<script src="../vue/vue.js"></script>
<script>let app = new Vue({el: '#test',data: {firstName: 'icy',lastName: 'akuya',books: [{id: 001,name: '从入门到入土',price: 100}, {id: 001,name: '从入门到入土',price: 100}, {id: 001,name: '从入门到入土',price: 100}, {id: 001,name: '从入门到入土',price: 100}]},//计算属性，尽量按属性取名字computed: {fullName: function() {return this.firstName + this.lastName},allPrice: function() {let i = 0,result = 0for (i in this.books) {result += this.books[i].price}return result}},methods: {getFullName: function() {return this.firstName + this.lastName}}})
</script>

4. 事件绑定指令

vue提供了v-on 事件绑定指令，用来辅助程序员为DOM元素绑定事件监听。

4.1 v-on基本使用

<body><div id="test"><h3>计数器:{{count}}</h3><!-- <button v-on:click='count++'>+</button><button v-on:click='count--'>-</button> --><button @click='add'>+</button><button @click='sub'>-</button></div>
</body>
<script src="../vue/vue.js"></script>
<script>const obj = {name: '张三',sex: 'boy'}const app = new Vue({el: '#test',data: {count: 0,obj: obj},methods: {add: function() {console.log('add被执行');this.count++;},sub: function() {console.log('sub被执行');this.count--;}}})
</script>

4.2 v-on 参数问题

<body><div id="test"><!-- 两种写法，一种省略括号，一种不省略括号 --><!-- 省略括号的前提, 1.在监听事件中2.函数不需要传参数--><button @click='print()'>button1</button><button @click='print'>button2</button><!-- 如果方法需要一个参数，但是我们省略了括号 ,浏览器会将生成的 event对象作为参数传入进这个方法--><button @click='print2'>button2</button><!--如果方法需要两个参数，一个为abc，一个为event参数 不加括号，会把event赋值给abc，后面的event为undefined并且报错加括号写一个参数或者写（'abc',event)会报错event未定义 $event固定写法正确写法 前面加一个$符号，表示返回浏览器当前点击的对象--><button @click="print3('abc',$event)">button4</button></div>
</body>
<script src="../vue/vue.js"></script>
<script>const app = new Vue({el: '#test',data: {count: 0},methods: {add() {console.log('add被执行');this.count++;},sub() {console.log('sub被执行');this.count--;},print() {console.log('aaaaaaaaaa');},print2(aaa) {console.log('-------', aaa);},print3(abc, event) {console.log(abc, event);}}})function myFun(index) {console.log('-----', index);}myFun(); //undefined
</script>

4.3 v-on修饰符

<body><div id="test"><!--   .stop 修饰符的使用 --><!-- 这样写会产生冒泡，点击button的时候，div的点击事件也被执行 --><!-- <div @click='divClick'>aaaaaa<button @click='btnClick'>按钮1</button></div> --><!-- 如何阻止冒泡事件，vue里面可以添加修饰符，使用.stop则可以阻止冒泡事件 --><div @click='divClick'>aaaaaa<!-- 阻止按钮的冒泡事件 --><button @click.stop='btnClick'>按钮1</button></div><br><!-- 2.阻止默认事件   .prevent --><!-- 点击提交表单会默认提交，我们这里让它不提交，手动提交(未介绍) （这个一般用来阻止鼠标右键默认 --><form action="baidu.com"><input type="submit" value='提交' @click.prevent='submit'></form><!-- 3.键盘监听事件 --><br><!-- 键盘抬起触发 --><!-- <input type='text' @keyup="keyUp">键盘事件</input> --><!-- 按下enter键触发 --><input type='text' @keyup.enter="keyUp">键盘事件</input><!-- 修饰符 键代码 --><input type='text' @keyup.13="keyUp">键盘事件</input><!-- 4.once修饰符的使用 --><button @click.once='btnClick'>once修饰符</button></div>
</body>
<script src="../vue/vue.js"></script>
<script>const app = new Vue({el: '#test',data: {},methods: {divClick() {console.log('divClick');},btnClick() {console.log('btnClick');},submit() {console.log('提交界面');},keyUp() {console.log('键盘事件');}}})
</script>

5. 双向绑定属性

vue提供了v-model双向数据绑定指令，用来辅助开发者在不操作DOM的前提下，快速获取表单的数据。

5.1 v-model基本使用

<body><div id='test'><!-- v-model双向绑定表单数据改变message的值，表单的message也要改变改变表单message的值，message本身的值也会发生改变 --><input type='text' v-model='message'> {{message}}<!-- v-model原理 --><!-- 用其他方式实现双向绑定 change里可以不加参数，默认把event传过去如果带参数需要带 $event--><input type="text" :value="message" @input='change'><!-- 不用写方法里使用方法3 --><input type="text" :value="message" @input="message = $event.target.value"></div>
</body>
<script src='../vue/vue.js'></script>
<script>const app = new Vue({el: '#test',data: {message: 'hello world',info: '蔡强yyds',hobby: ['game', 'girls', 'monney']},methods: {change(event) {this.message = event.target.value}}})
</script>

5.2 v-model 结合radio使用

<body><div id='test'><label for="male"><!-- 要保证两个单选按钮是互斥的 需要加name值，但如果v-model 绑定了同一个变量，也可以使单选按钮互斥，这时候可以删除name --><!-- 默认值问题原生input绑定默认值 需要使用属性 checked 使得该单选按钮默认选中使用了v-model绑定数据后 ，checked属性失效那么设置默认值只需要把v-model绑定的属性 在data里面设置默认值就好--><input type="radio" id="male" value='男' v-model='sex'>男</label><label for="female"> <input type="radio" id="female" value='女' v-model='sex'>女</label><h3>{{sex}}</h3></div>
</body>
<script src='../vue/vue.js'></script>
<script>const app = new Vue({el: '#test',data: {info: '蔡强yyds',hobby: ['game', 'girls', 'monney'],sex: '男',}})
</script>

5.3 v-model 结合checkbox使用

body><div id='test'><!-- checkbox-----单选框,可以使用布尔值来控制 --><label for="agree"><input type="checkbox" id='agree' v-model='isAgree'>同意</label><div><button :disabled='!isAgree'>下一步</button></div><!-- checkbox-----多选框 --><h3>请选择您的爱好：</h3><label for="sing"><input type="checkbox" id='sing' value='唱' v-model='hobbies'>唱</label><label for="dance"><input type="checkbox" id='dance' value='跳' v-model='hobbies'>跳</label><label for="rap"><input type="checkbox" id='rap' value='rap' v-model='hobbies'>rap</label><label for="basketBall"><input type="checkbox" id='basketBall' value='篮球' v-model='hobbies'>篮球</label><h3>您选择的爱好是:{{hobbies}}</h3></div>
</body>
<script src='../vue/vue.js '></script>
<script>const app = new Vue({el: '#test ',data: {info: '蔡强yyds ',hobby: ['game ', 'girls ', 'monney '],isAgree: false,hobbies: [],}})
</script>

5.4 v-model 结合select使用

<body><div id='test'><!--只能选1个 --><select v-model='husband'><option value="迪卢克">迪卢克</option><option value="钟离">钟离</option><option value="公子">公子</option></select><h3>您选择的是：{{husband}}</h3><!-- 可以选多个  往属性后面加 mutiple按住ctrl可以多选 --><select v-model='husbands' multiple><option value="迪卢克">迪卢克</option><option value="钟离">钟离</option><option value="公子">公子</option></select><h3>您选择的是：{{husbands}}</h3><!-- input绑定值（数据源 ）--><label v-for="(item,index) in originHusbands" :for='index'><input type="checkbox" :id="index" :value="item" v-model='husbands'>{{item}}</label></div>
</body>
<script src='../vue/vue.js'></script>
<script>const app = new Vue({el: '#test',data: {husband: '钟离',husbands: [],originHusbands: ['钟离', '迪卢克', '公子', '凯亚', '雷泽'],},})
</script>

5.5 v-model修饰符

<body><div id='test'><!-- 这里插一条防止忘记，v-on的修饰符.stop阻止冒泡事件.prevent 阻止默认事件 --><!--1. lazy v-model修饰符 可以让input框的双向绑定在用户敲回车，或者input失去焦点时在把数据绑定 --><label for=""><input type="text" v-model.lazy="info">{{info}}</label><!-- 2. number v-model修饰符 因为input的特殊性，输入的值都会被转换成String--><label for=""><input type="number" v-model.number='age'>{{age}}---{{typeof age}}</label><br><!-- 3. trim 去除字符串的空格(去除前后空格，不包括中间的空格)  v-model修饰符 --><input type="text" v-model.trim="name"><h3>{{name}}</h3></div>
</body>
<script src='../vue/vue.js'></script>
<script>const app = new Vue({el: '#test',data: {info: '蔡强yyds',hobby: ['game', 'girls', 'monney'],age: 0,name: 'fafafa'}})
</script>

6. 条件渲染指令

6.1 v-if的基本用法

<body><div id="test"><!-- 写死，内容不显示 --><div v-if='false'>{{info}}</div><!-- 通过控制让内容显示 --><div v-if='isShow'>{{info}}<div>1111111</div><div>1111111</div><div>1111111</div><div>1111111</div></div></div>
</body>
<script src="../vue/vue.js"></script>
<script>const app = new Vue({el: '#test',data: {info: '我爱学习！',isShow: true},methods: {}})
</script>

6.2 v-if和v-else结合使用

<body><div id="test"><!-- 通过控制让内容显示 --><div v-if='isShow'>{{info}}<div>1111111</div><div>1111111</div><div>1111111</div><div>1111111</div></div><h3 v-else>当v-if为false时候，显示我</h3></div>
</body>
<script src="../vue/vue.js"></script>
<script>const app = new Vue({el: '#test',data: {info: '我爱学习！',isShow: true},methods: {}})
</script>

6.3 v-if和v-else-if

<body><div id="test"><!-- 第一种方法演示 v-if 和v-else-if --><h3 v-if="score>=90">优秀</h3><h3 v-else-if="score>=80">良好</h3><h3 v-else-if="score>=60">及格</h3><h3 v-else>不及格</h3><!-- 第二种写法，推荐写法 --><h3>{{result}}</h3></div>
</body>
<script src="../vue/vue.js"></script>
<script>const app = new Vue({el: '#test',data: {info: '我爱学习！',isShow: true,score: 90},methods: {},computed: {result() {let scoreResult = ''if (this.score >= 90) {scoreResult = '优秀'} else if (this.score >= 80) {scoreResult = '良好'} else if (this.score >= 60) {scoreResult = '及格'} else {scoreResult = '不及格'}return scoreResult}}})
</script>

6.4 v-show的基本使用

<body><!-- v-if 和 v-show的区别当isShow为false时候v-if的元素将不存在于DOM中，相当于删除了v-show的元素则相当于设置了 display:none，但是元素本身还存在于dom中 --><div id="test"><h3 v-if='isShow' id='v_if'>{{info}}</h3><h3 v-show='isShow' id='v_show'>{{info}}</h3></div>
</body>
<script src="../vue/vue.js"></script>
<script>const app = new Vue({el: '#test',data: {info: '我爱学习！',isShow: true},methods: {}})
</script>

7. 循环遍历指令

7.1 v-for遍历数组

<body><div id="test"><ul><!-- v-for中的item可以自己定义 ，用i也可以 --><li v-for="item in names">{{item}}</li><li v-for="(item,index) in names">{{index+1}}.{{item}}</li></ul></div>
</body>
<script src="../vue/vue.js"></script>
<script>const app = new Vue({el: '#test',data: {info: '蔡强yyds',hobby: ['game', 'girls', 'monney'],names: ['蔡强', '叶世文', '刘强', 'icy']}})
</script>

7.2 v-for遍历对象

<body><div id="test"><ul><!-- v-for中的item可以自己定义 ，用i也可以 --><!-- 获取对象的键值 --><li v-for='(value,key) in obj'>{{key}}:{{value}}</li><!-- 获取对象的键值 和 下标（很少用） --><li v-for='(value,key,index) in obj'>{{index}}-{{key}}:{{value}}</li></ul></div>
</body>
<script src="../vue/vue.js"></script>
<script>const app = new Vue({el: '#test',data: {info: '蔡强yyds',hobby: ['game', 'girls', 'monney'],names: ['蔡强', '叶世文', '刘强', 'icy'],obj: {name: '蔡强',age: 22,sex: 'female'}}})
</script>

7.3 v-for使用过程中添加key

key 的注意事项
1）key的值只能是字符串或数字类型
2）key的值必须具有唯一性（即key的值不能重复)
3）建议把数据id属性的值作为key的值，因为id属性的值具有唯一性
4）使用index值作当做key的值没有任何意义，因为index值不具有唯一性
5）建议使用v-for指令时一定要指定key的值（既能提升性能，又能防止列表状态紊乱）

<body><div id="test"><ul><!-- v-for中的item可以自己定义 ，用i也可以 --><li v-for="item in names">{{item}}</li><!-- key必须保证唯一性，可以传入id --><!-- 往数组中间插入东西的操作 arr.splice(2,0,'F')表示在第二个位置后插入F,一定要写0arr.splice(2,4) 表示删除数组2-4下标的值 --><li v-for="(item,index) in names" :key='item'>{{index+1}}.{{item}}</li></ul></div>
</body>
<script src="../vue/vue.js"></script>
<script>const app = new Vue({el: '#test',data: {info: '蔡强yyds',hobby: ['game', 'girls', 'monney'],names: ['蔡强', '叶世文', '刘强', 'icy']}})
</script>

Vue2.0教程（二） vue指令学习相关推荐

给初学者的RxJava2.0教程(二)：【线程控制】
CSD转载地址:http://blog.csdn.net/qq_23179075/article/details/79256089 作者:Season_zlc 链接:https://www.jians ...
Vue2.0开发之——Vue基础用法-内容渲染指令(16)
一概述指令的概念内容渲染指令介绍二指令的概念指令(Directives)是vue为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构 vue中的指令按照不同的用途,可以分为如下6大类 ...
vue指令学习——vue基本用法
1 内容渲染指令作用:用来辅助开发者渲染DOM元素的文本内容 v-text {{}} v-html v-text:会覆盖标签内原有的内容(不常用) <p v-text="userna ...
Linux系统（二）- 指令学习2
~~~~ 前言 mkdir 基本语法选项 -p rmdir 基本语法 -p选项 rm 基本语法选项 -r 选项 -f 选项 -i stat man 基本语法在线手册介绍选项 number 选项 ...
Vue2.0开发之——Vue基础用法-事件绑定$event(20)
一概述事件参数对象 $event表示事件参数对象event 事件修饰符二事件参数对象 2.1 说明在原生的 DOM 事件绑定中,可以在事件处理函数的形参处,接收事件参数对象 event 2. ...
Vue2.0开发之——Vue基础用法-axios(29)
一概述 axios-使用axios发起基本的Get请求 axios-结合async和await调用axios axios-使用解构赋值 axios-基于axios.get和axios.post发起请 ...
从零开始搭建Vue2.0项目(二)之集成axios
文章目录
vue2.0自学教程(一)：走进vue2.0大观园
人狠话不多,咱直入主题吧! 开发软件: Visual Studio Code 支持环境: nodejs+windows 版本: vue2.0 1.初识vue vue是一个前端框架,使用MVVM(Mod ...
vue2.0 element学习
1,bootstrap和vue2.0结合使用 vue文件搭建好后,引入jquery和bootstrap 我采用的方式为外部引用在main.js内部直接导入用vue-cli直接安装jquery和bo ...

Vue2.0教程（二） vue指令学习