昨天开始学习vue框架，至于昨天为什么没写。原因有很多，其中之一就是，没听懂。。
然后痛定思痛，在摆了一晚上以后，开始认真学习：
首先什么是vue，在官网的定义中，是一种渐进式的js框架，至于什么是渐进式啥的，这些专业用词其实dark不必理解，我们就只用清楚，vue是一个库，可以跟jQuery类比，但他的功能要远超jQuery。
vue，是一种结合了视图（html）进行的编程，它不再局限于仅仅在<script>中编写脚本代码，而是结合了html语言，来使得编程更加高效，便捷。
（开始写这个之前，简易初学者不要直接使用，而是搞明白vue对象的基础模板，以及vue的基本运作）
vue基础指令
我认为自己不算学的非常拔尖的，但也肯定不算是差，我会用自己的理解来写如何使用理解所有指令，所以有写的不对的，望指教。
视图输出指令 v-text和v-html
该指令可以直接代替dom中的innerHtml和innerText，用来输出数据，并替换标签内容。
视图代码：
<div v-text="name">---------------</div>
<div v-html="name">---------------</div>
vue代码：
var vm = new Vue({
el:'#app',
data:{
msg:'欢迎vue.js学习',
name:"<h3>这个是小明<h3>"
}
})
这里说一下还有个v-pre，显示默认视图，不挂载，大家可以试试，猜猜对标的是什么dom功能
视图属性操作指令 v-bind
这里是一个对使用dom操作至今的我一个大考验，我估计也是不少人接触vue的第一个不习惯的地方。
v-bind 学过jq的应该有印象bind方法，这里可以想一下，是对属性进行vue功能的绑定（感觉写的有点抽象，不理解的直接跳过）。这里上代码展示一下这是什么：
视图代码：
<input type="button" value="按钮" v-bind:title="msg">
<input type="button" value="按钮2" v-bind:title="1+1">
<input type="button" value="按钮3" v-bind:title="msg + '6666'">
<input type="button" value="按钮4" v-bind:title="msg + title">
vue代码：
var vm = new Vue({
el:'#app',
data:{
msg:'欢迎vue.js学习',
title:"8888"
}
})
v-bind可以直接缩写为： 没错这里不是少写了，就是可以直接缩写为一个【：】
这里应该就能初步感觉到vue所谓的视图结合到底是什么感觉了，这里可以直接在html中进行计算，字符串拼接等。
视图方法绑定指令 v-on
在传统的dom操作中，为某个元素绑定方法，需要获取元素，然后进行编写调用。vue提供了更加便捷的方法。
指令代码：
<button type="button" v-on:click="num++" >按钮 +1</button>
<button type="button" @click="num++" >按钮 +1</button>
这里同样v-on可以缩写为@
视图数据双向绑定指令 v-model
该指令用于为视图绑定vue数据，通过视图操作可以反向修改vue中的数据（这里可以理解为value属性的升级版）
<input type="text" v-model="value">
<select v-model="selectname" >
<option value="第一个值">2</option>
<option value="第二个值">1</option>
</select>
<h2>{{selectname}}</h2>
视图渲染指令 v-for
该指令是通过基于vue数据而进行的视图渲染指令，也是通过遍历的方法，对绑定元素内的节点进行循环渲染，直到vue数据的length
<p v-for="(item,index) in lists">值：{{item}} --- 下标：{{index}}</p>
这里要注意一个问题：不在根元素上使用v-for。不然会出现报错
视图元素显示指令 v-show和v-if
该指令应该是相当易懂且便捷吧，通过是否满足条件来确定是否显示该元素，这两者的区别，就在v-show是通过对元素添加display:none来隐藏元素；而v-if是通过增删元素来确定元素的显示或隐藏。
v-if 指令 每次触发重新删除与添加元素，消耗性能。频繁切换效果不推荐使用
v-show 指令 通过样式display控制显示与隐藏，初始化消耗性能。如果隐藏标签永远不显示不推荐使用
<h1 v-if="flag">这个是v-if指令</h1>
<h1 v-show="flag">这个是v-show指令</h1>
v-if相关指令 v-if v-else-if v-else
这里就是if语法的使用嘛，在同一级中会遵从if语法的机制来判断是否显示元素
<div v-if="flag == 'a'">
A --------------------
</div>
<div v-else-if="flag == 'b'">
B --------------------
</div>
<div v-else-if="flag == 'c'">
C --------------------
</div>
<div v-else>
not A/B/C --------------------
</div>
视图预显示指令 v-clock
在元素vue内容加载完成前，会展示v-clock设置的样式
css代码：
[v-clock]{
display: none;
}
视图代码：
<h1 v-clock>{{ msg }}</h1>
视图限制渲染指令 v-once
这里相当容易理解，就是绑定的元素只允许渲染一次，之后无论触发什么事件，都无法更改已经渲染的内容
<h1 v-once>{{ msg }}</h1>
<button @click="msg='修改数据'">修改按钮</button>
这里还剩一个指令：v-slot，但这个好像跟vue后面的内容有关，这里先不写，日后补上。。然后指令的内容就写完了，写完之后呢。。自我感觉是真的写的敷衍，不过要说操作的话，与其看我这个，不如看官方的使用文档。过两天应该会开个新文章专门写一下vue操作于dom操作的区别，这里暂且就这样吧。
