2、指令和模板

---

title: 2、指令和模板
date: 2017-07-26 09:19:40
tags: vue笔记

---

指令

什么是指令

指令是一种特殊的自定义行间属性，指令的职责就是当其表达式的值改变时，响应的将某些行为应用到DOM上，在Vue中，指令以v-开头。以v-bind指令为例：

<div id="app">
    <!--v-bind是指令，作用是动态的绑定数据，简写为':'，id是它的参数-->
    <span v-bind:id="{{ id }}">{{ message }}</span>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        message: 'hello,Vue!',
        id:'123'
    }
})

还有很多常用指令可以查看官网的API。

模板

Vue中有三种模板可以使用，html模板、字符串模板(template)、render函数。

html模板

基于DOM的模板，只要是有效的可解析的html就可以。

html模板的插值

插值就是写在 { {} } 内部的内容。有以下四种情况可以使用：

1. 文本：就是 { {key} }，替换实例上的data里的属性值，插值内容会自动更新。

2. 原生的html： 上面 { {} } 输出的是文本，不会解析html，如果在data中有html: '<div>hello Vue</div>'这样的数据，直接{ {html} }只会将其当做文本而不是html元素。如果需要被当做dom渲染，需要在父元素设置v-html="html"。

3. 行内的属性：使用v-bind进行绑定，可以响应变化。

4. 使用javascript表达式：{ {} }内部可以写简单的表达式(不要写复杂语句)，可以写比如{ { true?'yes':'noe' } }或者{ {'data'+message} }，如果复杂的就写到计算属性中去。

字符串模板(template)

template是Vue实例中的选项的一个属性。

模板将会替换挂载的元素，挂载元素的内容都将被忽略，根节点只能有一个，也可以将html结构写在一对<script>标签中，设置type="X-template"

字符串的方式

替换挂载元素：

<div id="demo1">
    <span>hi Vue</span>
</div>

var str = '<span>{{ message ]}}</span>'
new Vue({
    el: '#demo1',
    data:{
        message: 'hello Vue'
    },
    template:str
})

最终页面会显示hello Vue，会将新渲染的字符串模板替换掉原来的元素

需要注意的是：根节点只能有一个，var str = '<span>{ {message} }</span><span>11</span>'这种写法是错误的，因为最外层的根节点只能是一个。只能去包含别的元素，比如var str = '<span>{ {message} }<span>11</span></span>'这样就是对的。

script标签的方式

这种模板也可以写在<script>标签中，就和平时用的模板文件是相同的。

<script type="X-template" id="temp">
    <span>
        {{ message }}
        <span>11<span>
    </span>
</script>

new Vue({
    el: '#demo1',
    data:{
        message: 'hello Vue'
    },
    template: '#temp'
})

render函数

render是Vue实例中的属性，在写组件会经常使用。

通过上面字符串方式创建的元素不会直接放到页面上，而是要通过render函数编辑，虚拟DOM树到真实DOM树就是通过render实现的。

render函数需要传入createElement参数，用这个参数创建模板并return。createElement也是一个方法。

第一个参数是要创建模板的根元素。

第二个参数是可选参数，表示该根元素上的属性，这里的属性遵循的是指令的规则而不是普通DOM中的写法。其中类名是class、样式属性是style、自定义属性是attrs、绑定事件时on、dom元素属性是domProps。其中dom元素属性不是标签里的属性，而是元素对象身上的。就好比length一样。

第三个参数是数组，数组的元素是模板中的子元素。同样使用createElement创建。

var vm = new Vue({
    el: '#demo',
    data: {
        class: true
    },
    render: function(createElement){
        return createElement(
            'ul',       // 根元素
            {       
                class: {       // 这里的属性是遵循v-bind:class而不是dom中的那种class。
                    bg: true   // 添加class名为bg
                },
                style: {     // 设置行内样式,也是和v-bind:style一样的
                    fontSize: '50px'
                },
                attrs: {    // 设置自定义属性
                    abc: 'miaov'
                },
                domProps: {   
                    innerHTML: '<li>我是html</li>'      // 这里创建了innerHTML相当于是ul.innerHTML='<li>我是html</li>'，下面数组里的那些就会被覆盖了
                },
                on: {
                    // 这里绑定事件，和v-on是一样的
                }
            },
            [       // 子元素写在数组里，
                createElement('li',1),
                createElement('li',2),
                createElement('li',3)
            ]
        )
    }
})