Vue.js学习笔记(二)

Vue指令：

v-bind 动态的绑定数据 ，简写为：
v-on 绑定事件监听器，简写为@
v-text 更新数据，会覆盖已有结构
v-html 可以解析数据中的html结构
v-show 根据值的真假切换元素的display属性
v-if 根据值的真假，切换元素会被销毁、重建
v-else-if 多条件判断，为真则渲染
v-else 条件都不符合渲染
v-for 基于源数据多次渲染元素或模板块
v-model 在表单控件元素上创建双向数据绑定
v-pre 路过元素和子元素的编译过程，如果该结点没有指令，用此指令可以回忆编译
v-once 只渲染一次，随后数据更新不重新渲染
v-cloak 不显示，直到编译结束

模板

HTML模板：

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

插值：

• 文本：使用’Mustache’语法，(即双大括号)
• 作用：替换实例上的属性值，当值改变时，插值内容会自动更新
• 原生的html:双大括号输出的是文本，不会解析html
• 属性：使用v-bind进行绑定，可以响应变化
• 使用javascript表达式：写简单的表达式，即最简单的表达式，一般最多用三目即可

字符串模板：

template:str (权重较高)

• 模版将会替换挂载的元素。挂载元素的内容都将被忽略。
• 根结点只能有一个
• 也可以把结构写在

<script type='x-template' id='template'>
    <div></div>     //正常写html
</script>

然后在Vue实例中设置 template:’#template’

render函数：

var vm = new Vue({
    el:'#demo',
    data:{
    message:‘hello world'
    },
    render(createElement){
        return createElement(
            'ul',
            {   //本参数与参数中的参数都是可选的
                class: { bg:true,red:false },  
                //前面是css的class名，后面的是显示与否
                style:{fontSize:'50px',color:'red'},
                attrs:{},
                domProps:{
                    innerHTML:'<li></li>'    
                //元素优先级高于下面那个数组中创建的标签
                }，
                on:{}
            },
            [
                createElemnt('li',message),
                createElemnt('li',message),
                createElemnt('li',message)
            ]
        );
    }
});