vue\初识

vue特点：

• 渐进式框架：可以和原有的库（jq）并存
• MVVM：解耦视图层和数据层
• 组件复用(类似react-router?)
• 可实现前端路由(类似react-router?)
• 状态管理（类似redux?）
• 虚拟dom(联想到了react diff算法的三大策略…)

Vue VS React:

• 组件渲染优化：react需要使用纯组件或者shouldComponentUpdata来控制子组件是否需要被渲染，vue能精准知道哪个组件确实需要被更新，不需要花费开发者的精力去思考到底应该更新哪个组件。
• react单向绑定 vue双向绑定
• 生态：react更加繁荣

代码规范:
代码缩进两个空格，会更加规范

• 插值操作：
  Mustache语法：(在标签内容写，有很多种写法)
  <span>{{message}}</span>
<span>{{message + name}}</span>
<span>{{message}}, 李亚男</span>
<span>{{message + “ ” + name}}</span>
<span>{{message}} {{name}}</span>
<span>{{value * 2}}</span>
  相关指令：
  v-once：当数据改变时，不会将新的数据渲染到视图层
  v-html：将服务器返回的带有html标签的字符串解析成html<h2 v-html="url"></h2>
v-text：<h2 v-text="message">闪光灯</h2>，此语句会覆盖掉“闪光灯”等词，一般使用mustache语法，不使用v-text
  v-pre：不会将大括号解析成mustache语法，而是直接将双大括号显示为字符串放在视图层
  v-cloak：防止mastache从展示‘{{}}’到vue创建后展示真正的变量之间的界面抖动
  v-bind：
  (1)动态绑定属性，这里不用mustache语法，<img v-bind:src="image"/>添加v-bind后就可以使src里面的内容被绑定,语法糖：<img :src="image"/>
  (2)动态绑定class：
  对象语法：<h2 :class="{className1: boolean, className2: boolean}">{{message}}</h2>改变布尔值来决定是否添加指定的class。

//对象语法的补充，可以使用函数来写class
<h2 :class="getClasses()">{{message}}</h2>
methods: {
	getClasses: function(){
		return { className1: this.boolean1, className2: this.boolean2} ;
	}
}

数组语法：

<h2 :class="['className1', 'className2']">{{message}}</h2>
<h2 :class="[className1', 'className2]">{{message}}</h2>