vue 第二天（常用指令及插值语法）

Dear 丶 2022-11-03 05:43 145阅读 0赞

# vue 第二天（常用指令及插值语法） #

## 插值语法 ##

### 1、Mustache语法 ###

<div id="vue_one">
        <h1>{ { site}}</h1>
        <h1>{ { one + 1}}</h1>
        <h1>{ { one + site}}</h1>
        <h1>{ { one +"-"+ site}}</h1>
        <h1>{ { one}},{ { site}}</h1>
    </div>
    <script type="text/javascript">
        const vm = new Vue({ 
            el: '#vue_one',
            data: { 
                site: "1234",
                one: 2
            }
        })
    </script>

### 2、v-once 只能执行一次，不能被修改 ###

<div id="vue_one">
        <h1>{ { site}}</h1>
        <h1 v-once>{ { site}}</h1>
    </div>
    <script type="text/javascript">
        const vm = new Vue({ 
            el: '#vue_one',
            data: { 
                site: "我的第一个vue程序",
            }
        })
    </script>

### 3、v-html 格式化格式可以写带有标签的格式（如有必须别用，会造成xxs安全问题） ###

<div id="vue_one">
        <h1>{ { site}}</h1>
        <h1 v-html="site"></h1>
    </div>
    <script type="text/javascript">
        const vm = new Vue({ 
            el: '#vue_one',
            data: { 
                site: "<a href='http://www.baidu.com'>我是百度</a>",
            }
        })
    </script>

### 4、v-text 覆盖原有标签里面的text文本 ###

<div id="vue_one">
        <h1>{ { site}},123</h1>
        <h1 v-text="site">123</h1>
    </div>
    <script type="text/javascript">
        const vm = new Vue({ 
            el: '#vue_one',
            data: { 
                site: "1234",
            }
        })
    </script>

### 5、v-pre 格式化最初的样子（原本的语法） ###

<div id="vue_one">
        <h1>{ { site}}</h1>
        <h1 v-pre>{ { site}}</h1>
    </div>
    <script type="text/javascript">
        const vm = new Vue({ 
            el: '#vue_one',
            data: { 
                site: "1234",
            }
        })
    </script>

### 6、v-cloak 插值表达式存在的问题"闪动",并定义style样式 ###

`花开一千年,花落一千年,花叶永不见`