vue刨坑（二）

vue实例

vue实例

每一个应用都是通过vue这个构造函数创建根实例（root instance）,启动 new vue（选项对象）

需要传入选项对象，对象包含挂载元素，数据，模板，方法等。

• el:挂载元素选择器 string|htmlelement
• data:代理数据 object|function
• methods:定义方法 object

vue代理data数据

每个vue实例都会代理其data对象所有的属性，这些被代理的属性是响应的。新添加的属性不具备响应功能，改变后不会更新视图。

vue实例自身属性和方法

暴露自身的属性和方法，已$开头 例如:$el $data

声明式渲染

命令式

需要以具体代码表达在哪里（where）做什么（what），如何实现（how）

声明式

只需要声明在哪里（where）做什么（what），而无需关心如何实现（how）

//eg1:如下为命令式：
var arr=[1,2,3,4];
var newArr=[];
for (var i = 0; i < arr.length; i++) {
newArr.push(arr[i]2)
}
console.log(newArr);//2,4,6,8
//eg2：如下为声明式
var arr=[1,2,3,4,5];
var newArr=arr.map(function(item){
return item2;
})
console.log(newArr);//2,4,6,8,10
在vue中，就是采用的声明式渲染方式，只要明确挂载元素和data值就好，复杂的赋值过程vm帮你实现了。

{{message}}

指令

是一种特殊的自定义行间属性
指令的职责就是当其表达式的值改变时，相应的某些行为应用到DOM上
在vue中，指令以V-开头

Vue中的内置指令

• v-bind 动态的绑定数据，简写为 :
• v-on 绑定事件监听器，简写为@
• v-text 更新数据，会覆盖已有结构
• v-html 可以解析数据中的HTML
• v-show 根据值得真假，切换元素的display属性
• v-if 根据值得真假,切换元素会被销毁、重建
• v-else 条件都不符合渲染
• v-else-if多条件进行判断，为真则渲染
• v-for基于原数据多次渲染元素或模板块
• v-model在表单控件元素上创建双向数据绑定
• v-pre跳过元素和子元素的编译过程
• v-once只渲染一次，随后数据更新不重新渲染

模板

HTML模板

基于DOM的模板，模板都是有效的可解析的HTML

{{true?'yes':'no'}}