Vue指令v-bind、v-once、v-html

“这是我参与更文挑战的第16天，活动详情查看： 更文挑战”

1.双大括号里可以写变量/函数/js表达式，复杂的if等代码不能写
写函数时，需要带上小括号：函数名()，否则会被当作变量来解析

<div id="app">
    <input type="text" v-on:input="changeName">
    <h1>{{name + 123}}</h1>
    <h1>{{sayName()}}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            name:"ccy",
        },
        methods:{
            sayName: function(){
                return this.name
            }
        }
    })
</script>

页面效果：

html渲染正确：

2.v-bind: vue不会分析字符串里的语法，使用v-bind绑定变量

a标签的href就不能通过{{}}来链接：
<a href="{{link}}">baidu</a>不能实现点击跳转，且会报错
需要接用指令v-bind：

<div id="app">
    <input type="text" v-on:input="changeName">
    <h1>{{name}}</h1>
    <a v-bind:href="link">baidu</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            name:"ccy",
            link:"https://www.baidu.com"
        }, // 变量均存储在data中
        methods:{
            changeName: function(e){
                this.name = e.target.value;
            }
        }
    })
</script>

效果：点击a标签，跳转到百度
可以看到，a标签渲染是正确的：

v-bind可以省略，直接写冒号以及之后的内容，
v-bind:href="link"可以缩写成：:href="link"

3.v-once：使用初始化的值，不随后续变化而变化

<div id="app">
    <h1 v-once>{{name}}</h1>
    <h1>{{sayName()}}</h1>
    <a v-bind:href="link">baidu</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            name:"ccy",
            link:"https://www.baidu.com"
        }, 
        methods:{
            sayName: function(){
                this.name = "ccy1"
                return this.name
            }
        }
    })
</script>

效果：第一个h1的内容依然是ccy，没有被sayName改变

如果两个h1的位置交换，设置v-once也依然会改变内容，因为此时的初始化已经是改变后的name了，v-once只能防止后续改变的值

4.v-html：将字符串当作dom渲染，不建议，不安全
data中写了html标签也只会被当作字符串处理：

data:{
        name:"ccy",
        link:"https://www.baidu.com",
        html:"<a href='https://baidu.com'>百度一下</a>"
    }

<p>{{html}}</p>

使用v-html：

<p v-html="html"></p>

效果：