Vue2.x内部指令
Vue2.x入门教程——Axis
大家好！ 这是我第一次学习Vue.js，学习教材和资料来源于技术胖，很感谢他。此博客作为学习记录，欢迎入门的伙伴一起学习交流。若有偏颇之处，请大佬谅解和指正！
Day 1 - - - 内部指令
简介：Vue.js是典型的MVVM模式（Model-View-ViewModel），引入cdn的js，官网上寻找哦。
1.第一个最简单的实例（Hello world！）
如下面的代码：
Document
Hello world
{{message}}
上述代码实现view-----viewModel-------model的(单向）绑定。结果如下：
2.下面介绍常用指令：
2.1 （v-if）,( v-else ),（v-show）
v-if：判断是否加载html的DOM，比如我们模拟一个用户登录状态，在用户登录后现实用户名称。
v-else：接着v-if，无需再绑定数据源（model）。
v-show：调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。此例中若v-show的数据源isAuthor：是false则display属性为none，是true则display属性为block。
Document
v-if&v-else&v-show
v-if:您好，Axis！
v-else:请登录
v-show:您好，我是Axis！
2.2 （v-for）
v-for:它是循环渲染一组data中的数组，v-for 指令需要以 item in items 形式的特殊语法，items 是源数据数组，item是数组元素迭代的别名。
此指令建议多加练习，增加自己的理解，做了才能真正掌握哦！
Document
v-for实例
{{item}}
上面实例实现 div 里的 li 的 for遍历渲染，效果图如下：
接下来看一个基于上述数组的v-for实例（排序）
Document
v-for实例2
{{item}}
效果图如下：
其中用到几个属性：computed，这个是Vue里的一个计算属性，以后学到详细解释再补充，大家理解是怎么用的就好。比如这个例子中，用来对items进行排序，sort（fn）里用到自定义的排序函数，这个经常用到，大家要记住。（技术胖说的）
接下来看一个复杂一些的实例（对象循环输出）
Document
v-for实例3
{{index+1}}--{{student.name}}--{{student.ages}}
上述代码结果：
其中自定义排序数组对象函数，需要理解，有不懂的可以留言，我尽力解答哈~
2.3（v-text）
相信到这里，大家理解了mvvm模式，这边就直接将数据源直接放入viewmodel里，偷个懒哈~
我们已经会在html中输出data中的值了，我们已经用的是{{message}},这种情况是有弊端的，就是当我们网速很慢或者javascript出错时，会暴露我们的{{message}}。Vue给我们提供的v-text,就是解决这个问题的。
Document
v-text&v-html
效果图如顶部实例1，因为网速良好，也暂时没出现什么问题，看不出v-text的优势，大家先了解咯。
2.4（v-on）
此案例实现点击button加减分（1分），增加input框，取其值v-model（下一节介绍）绑定，实现输入后按下enter键得到加减任意分结果。
v-on实例
本场比赛得分:{{score}}
2.5 （v-model）
v-model指令，我理解为绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。
建议认真观看技术胖视频教程，这边不作详细解释了。
v-model实例
Hello world
原始文本信息:{{message}}
文本框绑定
v-model:
v-model.lazy:
v-model.number:
v-model.trim:
文本域
多选框绑定一个值
多选框绑定数组
{{web_names}}
单选框绑定
您选择的性别是:{{sex}}
上述代码效果图如下：
2.6 （v-bind）
这个指令用于，绑定上的属性值属性 attribute 进行动态赋值。
v-bind实例
v-bind实例
上述代码效果如下：
最后再介绍几个其他指令：（v-pre&v-cloak&v-once）
v-pre&v-cloak&v-once
其他指令实例
v-pre:{{message}}---显示代码内容
v-cloak:{{message}}---渲染完成后，才显示！
v-once:{{message}}---只加载第一次，可以视为静态
{{message}}
上述代码效果如下：
总结：今天的学习记录，Vue的常用指令和原理理解，明天早上补一下注释，哈哈哈，当做复习啦！最后膜拜一下技术胖和我们的尤大神~！
ps：注释已补完，还有不懂的，请留言哦，我尽力哈~！