之前都在用layui做项目，今后我将使用vue。
vue官网：https://cn.vuejs.org/ 文档：https://cn.vuejs.org/v2/guide/ Github：https://github.com/vuejs/vue
vue的特点 Vue的核心库只关注视图层，Vue的目标是通过尽可能简单的 API 实现响应的数据绑定，在这一点上Vue.js类似于后台的模板语言。Vue也可以将界面拆分成一个个的组件，通过组件来构建界面，然后用自动化工具来生成单页面(SPA - single page application)系统。
引入veu.js <script src="https://cdn.jsdelivr.net/npm/vue"></script>
Vue实例 每个Vue应用都是通过实例化一个新的Vue对象开始的：
window.onload = function(){ var vm = new Vue({ el:'#app', data:{message:'hello world!'} }); } ...... <div id="app">{{ message }}</div>其中，el属性对应一个标签，当vue对象创建后，这个标签内的区域就被vue对象接管，在这个区域内就可以使用vue对象中定义的属性和方法。
数据与方法
当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其data对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。还可以在Vue实例中定义方法，通过方法来改变实例中data对象中的数据，数据改变了，视图中的数据也改变。
window.onload = function(){ var vm = new Vue({ el:'#app', data:{message:'hello world!'}, methods:{ fnChangeMsg:function(){ this.message = 'hello Vue.js!'; } } }); } ...... <div id="app"> <p>{{ message }}</p> <button @click="fnChangeMsg">改变数据和视图</button> </div>模板语法指的是如何将数据放入html中，Vue.js使用了基于 HTML的模板语法，允许开发者声明式地将DOM绑定至底层 Vue 实例的数据。所有 Vue.js的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
插入值 <span>Message: {{ msg }}</span>
在标签的属性中插入值 <a v-bind:href="url" v-bind:title='tip'>?链接</a>
插入的值当中还可以写表达式
{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <a v-bind:href="url">链接文字</a>指令 指令 (Directives) 是带有“v-”前缀的特殊属性。指令属性的值预期是单个JavaScript表达式，指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。常见的指令有v-bind、v-if、v-on。
<!-- 根据ok的布尔值来插入/移除 <p> 元素 --> <p v-if="ok">是否显示这一段</p> <!-- 监听按钮的click事件来执行fnChangeMsg方法 --> <button v-on:click="fnChangeMsg">按钮</button>简写方式
<!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a> <!-- 完整语法 --> <button v-on:click="fnChangeMsg">按钮</button> <!-- 缩写 --> <button @click="fnChangeMsg">按钮</button>使用v-bind指令来设置元素的class属性或者sytle属性，它们的属性值可以是表达式，vue.js在这一块做了增强，表达式结果除了是字符串之外，还可以是对象或者数组。
class绑定 对象语法
可以给v-bind:class传一个对象，以动态的切换class
<div class="static" v-bind:class="{active:isActive,'text-danger':hasError }"></div> // data属性值如下 data: { isActive: true, hasError: false }渲染效果：
也可以给v-bind:class传一个对象引用
data属性值可以写成：
data: { classObject: { active: true, 'text-danger': false } }数组语法
可以给v-bind:class传一个数组，以应用一个 class 列表
<div v-bind:class="[activeClass, errorClass]"></div> ...... data: { activeClass: 'active', errorClass: 'text-danger' }渲染效果
如果你也想根据条件切换列表中的 class，可以用三元表达式：
不过，当有多个条件class时这样写有些繁琐。所以在数组语法中也可以使用对象语法：
style绑定
对象语法
<div v-bind:style="{color: activeColor, fontSize: fontSize + 'px' }"></div> // data数据如下： data: { activeColor: 'red', fontSize: 30 }也可以给v-bind:style传一个对象引用
<div v-bind:style="styleObject"></div> data数据如下： data: { styleObject: { color: 'red', fontSize: '13px' } }数组语法
v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：
通过条件指令可以控制元素的创建(显示)或者销毁(隐藏)，常用的条件指令如下：
v-if
v-if可以控制元素的创建或者销毁 <h1 v-if="ok">Yes</h1>
v-else v-else指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
<div v-if="Math.random() > 0.5"> Now you see me </div> <div v-else> Now you don't </div>v-else-if v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：
<div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div>v-show
另一个用于根据条件展示元素的选项是 v-show 指令。用法和v-if大致一样，但是它不支持v-else,它和v-if的区别是，它制作元素样式的显示和隐藏，元素一直是存在的： <h1 v-show="ok">Hello!</h1>
列表渲染 v-for 通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象，v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
变量数组
<ul id="example-1"> <li v-for="item in items"> {{ item}} </li> </ul> // vue对象创建如下： var example1 = new Vue({ el: '#example-1', data: { items: ['foo','bar'] } }) // 如果想加上索引值，可以加上第二个参数 <ul id="example-2"> <li v-for="(item, index) in items"> {{ index }} - {{ item.message }} </li> </ul>遍历对象
也可以用 v-for 通过一个对象的属性来迭代
<ul id="v-for-object"> <li v-for="value in object"> {{ value }} </li> </ul>如果想加上对象属性名，可以加上第二个参数
<ul id="v-for-object"> <li v-for="(value,key) in object"> {{ key }}-{{ value }} </li> </ul>exit(⛱)
