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 item*2;
})
console.log(newArr);//2,4,6,8,10

在vue中，就是采用的声明式渲染方式，只要明确挂载元素和data值就好，复杂的赋值过程vm帮你实现了。

<div id='demo'>
    <span>{{message}}</span>
</div>
<script src='vue.js'></script>
<script>
// 数据
let obj={
    message:'hello vue',
    id:'123'
}
// 声明式渲染
var vm= new Vue({
    el:'#demo',
    data:obj
})
console.log(vm.$data)
</script>

指令

是一种特殊的自定义行间属性

指令的职责就是当其表达式的值改变时，相应的某些行为应用到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

<div id='demo'>
<div v-html="html" :custom='abc'></div>
{{true?'yes':'no'}}
</div>
<script src='vue.js'></script>
<script>
// 数据
let obj={
    html:'<div>hello vue.js</div>',
    abc:'123'
}
// 声明式渲染
var vm= new Vue({
    el:'#demo',
    data:obj
})

插值

• 文本：使用‘mustache’语法{{value}}
• 作用：替换实例上的属性值，当值改变时，插值内容处会自动更新
• 原生的HTML：双大括号输出的是文本，不会解析HTML
• 属性：可以使用v-bind 绑定，可以响应变化。
• 使用javascript表达式：写简单地表达式

字符串模板

template模板

<div id='demo'>
<div v-html="html" :custom='abc'></div>
</div>
<script src='vue.js'></script>
<script>
// 数据
let obj={
    html:'<div>hello vue.js</div>',
    abc:'123'
}
var str='<div>hello,{{abc}}</div>'
// 声明式渲染
var vm= new Vue({
    el:'#demo',
    data:obj,
    template:str
})

页面显示 hello,123

• template选项对象属性
• 模板将会替换挂载的元素，挂载元素的内容将被忽略
• 根节点只能有一个
• 将HTML结构写在一对script标签中，设置type="x-template"

模板render函数

• render选项对象的属性
• createElement(标签名,[数据对象],子元素);其中子元素为文本或按钮。