优秀的前端框架vue，原理剖析与实战技巧总结【干货满满】（一）：https://developer.aliyun.com/article/1497228
Vue指令系统的常用指令
在jquery中，我们有很多标签操作方法，找标签，获取标签，生成标签，在标签里面塞文本等等。这些现在都可以用vue的指令系统来实现
指令 (Directives) 是带有“v-”前缀的特殊属性。每一个指令在vue中都有固定的作用。
在vue中，提供了很多指令，常用的有：v-html、v-text、v-if、v-model、v-for等等。
v-text
以文本字符串方式显示指令 (Directives) 是带有“v-”前缀的特殊属性。每一个指令在vue中都有固定的作用。
在vue中，提供了很多指令，常用的有：v-html、v-text、v-if、v-model、v-for等等。
v-text
以文本字符串方式显示
使用v-text方式，也是以字符串方式展示，v-text= 属性名。它和{{}}做的事情是一样的
如果想把v-text放到 其他标签中，直接加进去就可以
里面可以用js的语法
v-html
如果M那里是html标签，想展示成标签效果，可以使用v-html
就展示成了a链接效果
v-if 和v-show
vue中提供了两个指令可以用于判断是否要 显示元素，分别是v-if和v-show。
<!-- 这里表示num如果大于20，浏览器就展示a链接，否则不显示。根据判断的布尔结果值来判断--> <a href="http://www.baidu.com" v-if="num >20">百度</a>
现在啥也没显示
把num的值改为21，浏览器就展示了a链接
可以结合v-else-if v-else
把num的值改为20
数据一旦发生变化，视图就会自动发生变化，这就是数据驱动视图,以后视图的效果都是通过数据来控制的
动态生成和动态添加，页面需要渲染，页面渲染开销大，效率比较低，所以频繁的显示，不显示，使用动态的隐藏和展示v-show
v-show
标签元素： <h1 v-show="ok">Hello!</h1> data数据： data:{ ok:false // true则是显示，false是隐藏 }
满足条件就显示，不满足就隐藏
把num的值改为9
看到标签display:none 被隐藏，并不是删除
v-show可以直接等于布尔值，决定显示还是隐藏
简单总结v-if和v-show
v-show后面不能v-else或者v-else-if
v-show隐藏元素时，使用的是display:none来隐藏的，而v-if是直接从HTML文档中移除元素[DOM操作中的remove]
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
操作属性v-bind
做动态标签属性
格式： <标签名 :标签属性="data属性"></标签名> <!-- v-bind:动态的标签属性控制，简写: -->
显示wifi密码效果：配合v-on事件绑定
v-on 绑定事件 v-on:事件名称= ‘函数’ 简写 @事件名称= ‘函数’
语法：<button v-on:click="showp">{{msg}}</button> 可以简写：<button @click="showp">{{msg}}</button> <!-- v-on:事件名称简写 @事件名称 --> <div id="app" > <!-- <input :type="tt"><button v-on:click="show">{{msg}}</button>--> <input :type="tt"><button @click="show">{{msg}}</button> </div>
<script src="vue.js"></script> <!--另起一个script标签来写我们的js--> <script> // 首先先实例化一个vue对象，里面传一些参数 let vm = new Vue({ el:'#app', // 此时表示通过vue语法来控制id为app的标签，在这个标签范围内可以使用vue语法，css的选择器都可以用 //可以单体模式，省略function data(){ return { // xxattr:'ss', tt:'password', msg:'显示密码' } }, //methods里面写方法，使用单体模式，methods里面的方法，this指的就是vue对象 methods:{ show(){ if (this.tt === 'password'){ this.tt ='text'; this.msg = '隐藏密码'; }else { this.tt ='password'; this.msg = '显示密码'; } } } }) </script>
v-on 也可以直接操作数据，进行js运算
v-on控制数据属性的方式 <button v-on:click="num++">按钮</button> <!-- v-on 是vue1.x版本的写法 --> <button @click="num+=5">按钮2</button>
1. 使用@事件名来进行事件的绑定 语法： <h1 @click="num++">{{num}}</h1> 2. 绑定的事件的事件名，全部都是js的事件名： @submit ---> onsubmit @focus ---> onfocus
商品动态加减示例
<div id="app" > <button @click="num+=1">+1</button> <input type="text" :value="num"> <button @click="num-=1">-1</button> </div>
如果不控制，可以减到负数，所以通过方法控制下。遇到复杂的逻辑处理时，要给指定各方法做
<script> // 首先先实例化一个vue对象，里面传一些参数 let vm = new Vue({ el:'#app', // 此时表示通过vue语法来控制id为app的标签，在这个标签范围内可以使用vue语法 //可以单体模式，省略function data(){ return { num: 10 } }, //里面写方法 methods:{ jian() { if (this.num > 0) { this.num -= 1 } } } }) </script>
v-model双向数据绑定
v-model数据双向绑定，实现改一个标签的数据，其他标签使用相同属性的字段也同步被修改 代表着这些标签value的属性值，所以取值更快捷了
凡是用户输入数据的地方都可以使用
input select textarea等都可以使用
修改input标签value的值，vue中的data属性值也会发生变化
修改vue中的data属性值，input标签value的值也会发生变化 双向绑定的，双向变化
使用v-model时，如果是用中文输入法输入中文，一般在没有选定词组前，也就是拼音阶段，Vue是不会更新数据的，当敲下汉字时才会触发更新。如果希望总是实时更新，可以使用@input代替v-model
单选按钮上使用
单选按钮在单独使用时，不需要v-model，直接使用v-bind绑定一个布尔类型的值，为真时选中，为否时不选。
好了，本章先讲到这里，相信到这里，很多小伙伴已经掌握到了vue的一些基本用法，后续我们还会持续更新vue更多，更高阶的用法，感兴趣的朋友不妨点赞关注，后面继续体验vue的强大。
