腾讯十天Vue.js课程之二：指令与模版_vue2怎么保持keyname内容原样输出-CSDN博客

本文链接：https://blog.csdn.net/xiaotututuer/article/details/70195744

指令

什么是指令？

是一种特殊的行间属性
指令的职责就是当其表达式的值改变时，相应的将某些行为应用到DOM（文档对象模型）上。
在Vue中，指令以v-开头。

Vue.js提供了一些常用的内置指令
v-if指令

v-show指令

v-else指令

v-for指令

v-bind指令动态地绑定数据，简写为:

v-on指令绑定事件监听器，简写为@

v-model指令

详见点击打开链接

HTML模版

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

插值

插值是Vue用来实现使用数据绑定的一种方式,在Vue中常用的方式如下:

文本插值

使用"Mustache"语法(双括号 {{keyName}} 语法直接输出与键名匹配的键值),实现文本插值对数据的基本绑定: 在解析过程中Mustache标签会被相应数据对象的属性的值替换,每当这个属性变化时它也会更新.
代码段:

<div id="msg">
<p>{{msg}}</p>
</div>

<script>
var msg = new Vue({
el:"#msg",
data:{
msg:"This is a message."
}
})

</script>

如果这时通过控制台,运行:
msg.$data.msg = "This is a new message"
这时你会发现页面中的文本会跟着发生变化.
插值与数据彼此关联,数据更新引发插值更新.如果只想进行单次插值,可以向如下使用:

<span>This will never change: {{* msg}}</span>

原始HTML

使用三括号的Mustache,进行原始HTML输出(这是Mustache的语法 {{{keyName}}}会保持内容原样输出)

<div id="vueHtml">
{{{vueHtml}}}
</div>

<script>
var vueHtml = new Vue({
el:"#vueHtml",
data:{
vueHtml:"<p>这段文字会原样输出HTML代码</p>"
}
})
</script>

HTML属性:

Mustache标签( {{keyName}} 会直接输出与键名匹配的键值的特性)可以用在html属性内:

<div id="component">
<div id="item-{{id}}"></div>
</div>

<script>
var comp = new Vue({
el:"#component",
data:{
'id':"val1"
}
});
</script>

插值来自 li4065的Vue深入解析-插值,绑定与指令

字符串模版

template字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符串模版</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--模版-->
<div id="demo">
    <span>miaov ke tang</span>
</div>
<script type="x-template" id="temp">

    <div>hello{{abc}}</div>;//只能有一个根节点
</script>
<script>
    //        数据
    let obj = {
        html: "<div>hello,miaov</div>",
        abc: 1,
    };
    var vm = new Vue({
        el: "#demo",
        data: obj,
        template:"#temp"//替换挂载的元素
    });

</script>
</body>
</html>

模版-render函数

render函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符串模版</title>
    <style>
        .bg{
            background-color: yellow;
        }
    </style>
    <script src="js/vue.js"></script>
</head>
<body>
<!--模版-->
<div id="demo">

</div>
<script>
    //        数据
    let obj = {
        html: "<div>hello,miaov</div>",
        abc: 1,
    };
    var vm = new Vue({
        el: "#demo",
        data: obj,
        render(createElement){
            return createElement(
                "ul",
                {
                    class:{
                        bg:true
                    },
                    style:{
                        fontSize: "50px",
                    },
                    attrs:{
                        abc:"miaov"
                    },
                    domProps:{
                        innerHTML:"<li>我是HTML</li>"
                    }
                },
                [
                    createElement("li",1),
                    createElement("li",2),
                    createElement("li",3),
                ]
            )
        }
    });

</script>
</body>
</html>