vue内置指令/模板

责编:menVScode 2017-11-05 22:41 阅读(985)

        指令

        指令:是一种特殊的自定义行间属性,指令的职责就是当其表达式的值改变时,相应的地将某些行为应用到DOM上。

        在Vue中,指令以 v- 开头。

        内置指令

v-bind:动态的绑定数据。简写为 :
v-text:更新数据,会覆盖已有结构。
v-show:根据值的真假,切换元素的display属性。
v-else-if:多条件判断,为真则渲染。
v-if:根据值的真假,切换元素会被销毁、重建。
v-else:条件都不符合渲染。
v-for:基于源数据多次渲染元素或模板块。
v-pre:跳过元素和子元素的编译过程。
v-cloak:隐藏未编译的Mustache语法,css中设置 [v-cloak]{ display:none }
v-on:绑定事件的监听器,简写 @。
v-html:可以解析数据中的html结构。
v-model:在表单控件元素上创建双向数据绑定。
v-once:只渲染一次,随后数据更新不重新渲染。


        模板

        html模板:基于DOM的模板,模板都是可解析的有效的HTML。

        插值方式

        文本:使用“Mustache”语法(双大括号){{ value }},作用是替换实例上的属性值,当值改变时,插值内容处就会自动更新。

        原生的html:双大括号输出的是文本,不会解析html。

        属性:使用v-bind进行绑定,可以响应变化。

        使用javascript表达式:写简单的表达式,比如:三元表达式,3+4。注意不能写语句。

<body>
    <!--模板-->
    <div id="demo" :custom="abc">
       {{ true ? "yes" : "no" }}
        <div v-html="html"></div>
        <div>{{html}}</div>
        <!-- 直接页面上输出:<div>hello,miaov</div> -->
    </div>
    <script>
        //数据
        let obj = {
            html:"<div>menvscode.com</div>",
            abc:1
        }

        var vm = new Vue({
            el:"#demo",
            data:obj
        });
    </script>
</body>

        

        字符串模板

        template字符串,template选项对象的属性,模板将会替换挂载的元素。挂载元素的内容都将被忽略。

        根节点只能有一个。

<!--模板-->
<div id="demo">
    <span>menvscode.com</span>
</div>
<script>
    //数据
    let obj = { abc:1 };

    var str = `<div>hello,{{abc}},
    <span>mvc</span>
    </div>`;

    var vm = new Vue({
        el:"#demo",
        data:obj,
        template:str
    });
</script>

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

<!--模板-->
<div id="demo">
    <span>mvc</span>
</div>
<script type="x-template" id="temp">
    <div>
        hello,{{abc}},
        <span>mvc前端网</span>
    </div>
</script>
<script>
    //数据
    let obj = {
        html:"<div>hello,menvscode.com</div>",
        abc:1
    };

    var vm = new Vue({
        el:"#demo",
        data:obj,
        template:"#temp"
    });
</script>


        模板-render函数

        render函数执行过程,已经很接近浏览器编译的过程。render 选项对象的属性:createElement( 标签名,[数据对象],子元素 )。

        数据对象属性

class: {}    绑定class,和 v-bind:class 一样的API
style: {}    绑定style,和 v-bind:style 一样的API
attrs: {}    添加行间属性(自定义属性)
domProps: {}    DOM元素属性
on: {}    绑定事件

nativeOn: {}    监听原生事件
directives: {}    自定义指令
scopedSlots: {}    slot作用域
slot: {}    定义slot名称
key: "key"    给元素添加唯一标示
ref: "ref"    引用信息
<div id="demo"></div>
<script>
    //数据
    let obj = { abc:1 };

    var vm = new Vue({
        el:"#demo",
        data:obj,
        render(createElement){
            var obj = createElement(
                "ul",
                {
                    class: {
                        bg:true
                    },
                    style:{
                        fontSize:"50px"
                    },
                    attrs:{
                        abc:"menvscode"
                    },
                    domProps:{
                        // innerHTML:"<li>我是html---domProps</li>"
                    }
                },
                [
                    createElement("li",1),
                    createElement("li",2),
                    createElement("li",3)
                ]
            ); 
            console.log( obj ); 
            return obj;
        }
    });

QQ截图20171106213204

标签: 指令 vue 模板
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码