Vue.js的组件和模板

1、Vue的内置指令

1. v-bind

v-bind主要用于绑定DOM元素属性（attribute），

即元素属性实际的值是有vm实例中的data属性提供的。

例如：

2、v-bind可以简写为“：”，

上述例子可以简写为<span :cotomId="id">

实现效果如下：

3、2. v-on

绑定事件监听器，简写为@。

4、3.v-html

v-html，参数类型为string，

作用为更新innerHTML，

接受的字符串不会进行编译等操作，

按普通HTML处理

代码如下

5、模板

html模板

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

插值

文本：使用“Mustache”语法（双大括号）{{value}}

    作用：替换实例上的属性值，

    当值改变时，插值内容就会自动更新

原生的html：双大括号输出的是文本，不会解析html

属性：使用v-bind进行绑定，可以响应变化

使用JavaScript表达式：可以写简单的表达式

字符串模板

template字符串

        template选项对象的属性

        模板将会替换挂在元素。挂在元素的内容都将被忽略。

代码如下

6、根节点只能有一个

将html结构写在一对script标签中，设置type="X-template"

7、写在script标签中，还是比较局限，

如果别的文件也是这个结构的时候，

这个就不能重复使用。

模板render函数

render函数

  render 选项对象的属性

  createElement(标签名,{数据对象},[子元素]);

  子元素为文本或者数组

还是来一段代码演示