前言
记录平时学到的知识，标题写的大气一点，也算是给自己一点鼓励，希望在技术这条路可以远走越远，路越走越宽~
文中代码地址
PS：如果对你有一点帮助，请顺手给个小星星哦，鼓励我继续写下去~
引入的文件文件说明
vue.js——开发版本：包含完整的警告和调试模式
vue.min.js——生产版本：删除了警告，进行了压缩
1、内部指令
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
1.1 v-if & v-show
v-if
v-if:是vue的一个内部指令，必须将它添加到一个元素上。v-if根据条件判断是否加载对应元素的DOM。
v-else 指令来表示 v-if 的“else 块”。v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
v-else-if，顾名思义，充当v-if的“else-if块”，可以连续使用。类似于v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
Hello World!
v-if & v-else & v-show
v-if
v-else-if
v-else
v-show
v-if支持template元素
v-show不支持template元素>
v-show
- v-show：是另一个用于根据条件展示元素的指令。
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
注意，v-show 不支持
元素,也不支持 v-else。
v-if 和v-show的区别：
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-show 就简单得多，不管初始条件是什么，元素总是会被渲染，即元素会始终渲染并保持在DOM中，并且只是简单地基于 CSS 进行切换。
v-show不支持template元素，作用在template元素上没有效果，v-if则支持。
一般来说，v-if 有更高的切换开销（根据条件对元素进行创建...销毁...创建...销毁），而 v-show 有更高的初始渲染开销（不管条件是否为true，，元素都会被渲染并保存在DOM中）。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
1.2 v-for指令：解决模板循环问题
用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
需要注意的是，你需要那个html标签循环，v-for就写在那个标签上面。
基本用法：
V-for 案例
v-for指令用法
-
{{item}}
排序：
运行上面代码，可以看到浏览器顺利的输出了定义的数组，但是如果想在输出之前对定义的数组进行一些操作，例如：给定义的数组排个序，则可以使用Vue的computed:属性。
var app = new Vue({
......
computed:{
sortItems:function(){
return this.items.sort(sortNumber);
}
}
})
function sortNumber(a,b){
return a-b
}
在computed里新声明了一个对象sortItems，如果不重新声明延用data里面定义的数组items则会报错，原因是这样会污染原来定义的数据源，这是Vue不允许的，所以要重新声明一个对象。
对象循环输出：
先定义个数组，数组里边是对象数据
students: [
{name: 'Andy', age: 18},
{name: 'Tony', age: 17},
{name: 'Alen', age: 35},
{name: 'zaishuiyixia', age: 25}
]
在模板中输出
-
{{student.name}} - {{student.age}}
加入索引序号：
//数组对象方法排序:
function sortByKey(array,key){
return array.sort(function(a,b){
var x=a[key];
var y=b[key];
return ((xy)?1:0));
});
}
有了数组的排序方法，在computed中进行调用排序
sortStudent:function(){
return sortByKey(this.students,'age');
}
完整代码：
v-for
v-for实例
-
{{item}}
-
{{index+1}}: {{student.name}}-{{student.age}}
1.3 v-text & v-html指令
Vue中数据绑定的形式是使用“Mustache”语法 (双大括号) 的文本插值：
Message: {{ msg }}
使用这种语法是有弊端的，就是当速很慢或者javascript出错时，浏览器会先显示{{xxx}}。Vue提供的v-text，就是解决这个问题的。
{{message}}
如果在javascript中写有html标签，用v-text是输出不出来的，这时候我们就需要用v-html标签了。
双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，就需要使用v-html 指令。 需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。 完整代码：
v-text & v-html实例
v-text & v-html实例
{{message}} ==
1.4 v-on指令
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
使用绑定事件监听器，编写一个加分减分的程序：
v-on实例
v-on实例
本场比赛得分：{{score}}
v-on 还有一种简单的写法，就是用@代替。
除了绑定click之外，还可以绑定其它事件，比如键盘回车事件v-on:keyup.enter,现在增加一个输入框，然后绑定回车事件，回车后把文本框里的值加到我们的count上。 绑定事件写法：
javascript代码：
onEnter:function(){
this.count=this.count+parseInt(this.secondCount);
}
因为文本框的数字会默认转变成字符串，所以我们需要用parseInt()函数进行整数转换。
1.5 v-model
v-model指令，可简单的理解为绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的在表单控件或者组件上创建双向绑定 、 。
使用限制，应该用于表单控件或者组件上：
、
单选框绑定
你选择的性别是：{{sex}}