Vue学习记录

从今天起要开始学习Vue框架了芜湖~当然Vue所包含的东西很多，没有写到的地方会做一个持续的补充和不断的说明！首先来看Vue的优点
Vue.js

体积小
更高的运行效率：基于虚拟dom，一种可以预先通过JS进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。
双向数据绑定：让开发者不用再去操作DOM对象，把更多的精力投入到业务逻辑上
生态丰富，学习成本低：市场上拥有大量成熟，稳定的基于vue.js的ui框架，常用组件，能实现快速开发。
声明式渲染

Vue的核心是一个允许采用简洁的语法来声明式地将数据渲染进DOM地系统每一个Vue应用都需要通过实例化Vue实现：var vm = new Vue({})。当一个Vue实例被创建时，他向Vue的响应式系统中加入了其data对象中能够找到的所有属性，当这些属性的值发生改变时，html视图将也会发生相应的变化。
```
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
  message: 'Hello Vue!'
},
methods:{}
})
//输出"Hello Vue!"
```
el：element元素，data：用于保存数据，在试图中声明了哪些变量，就需要在data注册变量并赋初值,methods用于定义的函数，可以用return来返回函数值，{{ }}用来输出对象属性和函数返回值，是最常见的数据绑定形式。
注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。

v-指令

vue.js官方给自己的定为是数据模板引擎，并给出了一套渲染数据的指令。指令是以v-开头定，作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，可以将其视为特殊的HTML特性，也就是attribute。当表达式的值改变时，相应地将某些行为应用到DOM上。
vue常用指令有：v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令等等。

使用v-html指令用于输出html代码：

<div id="app">
  <div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
  message: '<h1>菜鸟教程</h1>'
}
})
</script>

更改HTML属性中的值应使用v-bind：

<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}">
  v-bind:class 指令
</div>
</div>
<script>
new Vue({
  el: '#app',
data:{
    use: false
}
});
</script>

v-if:v-if后面可以是一个表达式或者也可以返回true/false

<div id="app-3">
 <p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
 el: '#app-3',
 data: {
   seen: true
 }
})

条件与循环

v-for指令可以绑定数组的数据来渲染一个项目列表，类似于JS中的遍历，其数据类型可以是Array，Object,number,string.
v-for必须使用特定的语法(item,index) in items, index是索引，可以省略。item是为当前遍历元素提供别名(可以起别的名字)
```
<div id="app-4">
<ol>
  <li v-for="todo in todos">//todo为上文所提到的item
    {{ todo.text }}
  </li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
  todos: [
    { text: ***习 JavaScript' },
    { text: ***习 Vue' },
    { text: '整个牛项目' }
  ]
}
})
```
组件化应用构建
组件系统是Vue的另一个重要概念，因为它是一种抽象，允许我们使用小型，独立和通常可复用的组件构建大型应用。