一、什么是Vue？
Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js借鉴了Angular以及React的一些核心思想，综合各自的长处进行了操作以及性能等方面的优化，进而打造出一款性能更优，学习更容易的MVVM框架。
它的作者是：尤雨溪
二、vue的基础语法
每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的
Var vm=new Vue({})
基础属性：
el:获取执行vue的dom元素－初始化范围
data ： 存储数据
methods ：执行的方法
1)绑定数据
{{}} 或者 v-text=“” 只能绑定纯文本
绑定html angular中 ng-bind-html vue中 v-html
表达式 在{{}}中 +-*/ 直接可用 三木运算一样可用
2）事件绑定
v-on:click=“” 或者 @click＝“”
绑定事件 －－事件中有event对象 函数参数为 $event
操作数据 通过this操作
3)其他指令
```
ref="a" 通过 this.$refs.a 拿到该元素
v-model 实时拿到input框的值 需要在data里初始化一下
v-for=“item in list” 循环 item循环到的数组值
v-for=“(item,key) in list” key循环到的下标index
v-model=“” 表单元素value 不可直接{{}}获取，需在vue初始化设置一下
v-if 布尔值 为true 代表节点消失
V-if 与 v-else-if v-else 可以构成判断
V-show布尔值 为true 代表节点设置了display:none属性
无v-hide (不要任意猜测)
V-once 一次渲染
```
三、行间样式设置
```
v-bind:style=“{ color: activeColor, fontSize: fontSize + ‘px’ }”
data: {
activeColor: 'red',
fontSize: 30
}
```
v-bind:style的对象语法十分直观——看着非常像 CSS，其实它是一个JavaScript对象
数组样式形式设置
```
v-bind:style=“[styleObjectA, styleObjectB]”
data: {
styleObjectA: {
color: 'red'
},
styleObjectB: {
fontSize: '30px'
}
}
```
类名设置
```
1) v-bind:class=“{‘class-a’:isa,‘class-b’:isb}”
```
Isa isb 值为true 添加相应类名
为false 不添加类名对象形式设置
对象形式设置
```
<div :class="classobj"></div>
classobj:{active:true,
'class-a':true,'
class-b':true}
```
绑定属性 v-bind:id=“data内的属性值” 或者 :id=“data内的属性值” 两种方法
（src title class name等属性写法一样）
计算属性 放在computed:{//函数} 效率高 methods设置效率低
1.在模板中表达式非常便利，但是它们实际上只用于简单的操作。
2.模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。
在 Vue.js 中，你可以通过 computed 选项定义计算属性
监听
```
第一种写法vm.$watch(‘’,function( newvalue,oldvalue){ })
第二种写法 直接在vue初始化中通过
watch｛msg:function(newvalue,oldvalue){}｝
```
过滤器
```
Vue.filter(‘过滤器名字’,function(value){
return //具体操作
})
Vue2.0自定义过滤器,vue1.0提供内置
```
获取数据
1. 应用fetch或axios 获取数据 axios 是vue2.0
插件网址 https://github.com/mzabriskie/axios
需要引入 axios。js
Eg:get方式
```
var _that=this; /*注意this的作用域*/
axios.get(url)
.then(function (response) {
console.log(response.data.result);
_that.list=response.data.result;
})
.catch(function (error) {
console.log(error);
});
```
