Vue_0.2 Vue指令

什么是Vue指令

在vue中提供了了一一些对于⻚页面面 + 数据的更更为方方便便的输出,这些操作就叫做指令, 以v-xxx表示。
比如html⻚页面面中的属性 `<div v-xxx ></div>`;比如在angular中 以ng-xxx开头的就叫做指令;
在vue中 以v-xxx开头的就叫做指令,指令中封装了了一一些DOM行行行为, 结合属性作为一一个暗号, 暗
号有对应的值,根据不不同的值,框架会进行相关DOM操作,和数据的绑定。

v-text 和 v-html

    {{}}和v-text的作用是一样的 都是插入值 直接渲染 innerText
    v-html既能插入值 又能插入标签 innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>指令之v-text和v-html</title>
</head>
<body>
    <div id='app'>
        <h1>{{ msg }}</h1>
        <h2 v-text='msg'></h2>
        <div v-html='htmlMsg'></div>
    </div>
    <script src="./vue.js"></script>
    <script>
        // {{}}和v-text的作用是一样的 都是插入值 直接渲染 innerText
        // v-html既能插入值 又能插入标签 innerHTML
        new Vue({
            el:'#app',
            data:{
                msg:"插入标签",
                htmlMsg:'<h3>小马哥</h3>'
            }
        })
    </script>
</body>
</html>

版权声明:除特别注明外,本站所有文章均为王晨曦个人站点原创

转载请注明:出处来自王晨曦个人站点 » Vue_0.2 Vue指令

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注