vue Day2

2.指令与模版

2.1 什么是指令

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

2.2 HTML模版

2.2.1 html模版

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

2.2.2 插值

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

  作用：替换实例上的属性值，当值改变时，插值内容处会自动更新

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

• 属性：使用v-bind进行绑定，可以响应变化
• 使用javascript表达式：写简单的表达式

2.3 字符串模版

2.3.1template

• template选项对象的属性
• 模版将会替换挂载的元素。挂载的内容将被忽略
• 根节点只能有一个
  

外层只能有一个div

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

<div id="demo">
<script type="x-template" id="temp">
    

        hello
        hi</span>
    div>
script>
<div>
<script>
    var vm = new Vue({
            el:'#demo',
            data:obj,
            template:"#temp"
    })
script>

2.4 模版-render函数

2.4.1 render函数

渲染函数

 render(h){
    return h{
        'div',
        {class:'message'},
        ['hello world']
    }
 }

解析后：

<div class="message">
    hello world
div>

render:选项对象的属性
createElement（标签名，[数据对象]，子元素）;
子元素为文本或数组

2.4.2 数据对象属性

class:{}, //绑定class，和'v-bind:class' 一样的API
style:{},  //绑定样式，和'v-bind:style'一样的API
attrs:{},   //添加行间属性
domProps:{} //DOM元素属性
on:{}      //绑定事件

nativeOn:{},   //监听原生事件
directives:{},  //自定义指令
scopedSlots:{},  //slot作用域
slot:{},           //定义slot名称
key:"key",    //给元素添加唯一标示
ref:"ref"         //引用信息

render(createElement){
    return createElement(
        'ul',
        {
            class:{
                bg:ture
            },
            style:{
                fontSize:"50px"
            },
            attrs:{
                abc:"miaov"
            },
            domProps:{
                innerHTML:"
我是html
"
            }
        }
    )
}