vue获取el样式_复习之Vue的模板语法

第一种，插值表达式

欣欣：复习之Vue插值表达式​zhuanlan.zhihu.com

前面已经介绍过了，下面直接看例子：

    <div id="app">
        <!-- 这里表示被vue控制的区域 -->
        <span> {{ msg }} </span>
    </div>

    <script>
        const vm = new Vue({
            el: '#app', // 控制id为app的元素
            data: {
                msg: 'aaa'
            }
        })
    </script>

第二种，v-text

更新元素的 textContent

    <div id="app">
        <!-- 这里表示被vue控制的区域 -->
        <span v-text="msg"></span>
    </div>

    <script>
        const vm = new Vue({
            el: '#app', // 控制id为app的元素
            data: {
                msg: 'v-text'
            }
        })
    </script>

v-text 和 插值表达式 的区别是什么？

v-text替换元素中所有的文本，插值表达式只替换自己，不清空元素内容。如：

    <div id="app">
        <!-- 这里表示被vue控制的区域 -->
        <div> ---{{ msg }} </div>
        <span v-text="msg + 1111"> --- </span>
    </div>

    <script>
        const vm = new Vue({
            el: '#app', // 控制id为app的元素
            data: {
                msg: 'v-text'
            }
        })
    </script>

v-text 优先级高于 {{ }} 。如：

    <div id="app">
        <!-- 这里表示被vue控制的区域 -->
        <span v-text="msg + 1111"> {{ msg }} </span>
    </div>

    <script>
        const vm = new Vue({
            el: '#app', // 控制id为app的元素
            data: {
                msg: 'v-text'
            }
        })
    </script>

第三种，v-html

更新元素的innerHTML

    <div id="app">
        <!-- 这里表示被vue控制的区域 -->
        <span v-html="msg"></span>
    </div>

    <script>
        const vm = new Vue({
            el: '#app', // 控制id为app的元素
            data: {
                msg: 'v-html'
            }
        })
    </script>

v-html 的内容按普通 HTML 插入，不会作为 Vue 模板进行编译。如：

    <div id="app">
        <!-- 这里表示被vue控制的区域 -->
        <span v-html="msg"></span>
    </div>

    <script>
        const vm = new Vue({
            el: '#app', // 控制id为app的元素
            data: {
                msg: '<h1>html</h1>'
            }
        })
    </script>

注意：在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。

v-text 和 v-html 的区别是什么？

1. 设置文本替换时，两者都会把指定节点下的所有子节点也一并替换掉。

2. v-text 会获取所有元素的内容，包括 ```<script>``` 和 ```<style> ```元素，然而 innerText 不会。

3. v-html 受 CSS 样式的影响，并且不会返回隐藏元素的文本，而 v-text 会。

4. 由于 v-html 受 CSS 样式的影响，它会触发重排（reflow），但 v-text 不会。

5. v-html 不是标准制定出来的 api，而是IE引入的，所以对IE支持更友好。v-text虽然作为标准方法但是只支持IE8+以上的浏览器，在最新的浏览器中，两个都可以使用。

6. 综上，使用 v-text 比使用 v-html 更好，这也是从性能的角度考虑的。

    <div id="app">
        <!-- 这里表示被vue控制的区域 -->
        <div v-text="msg + 1"></div>
        <span v-html="msg + 2"></span>
    </div>

    <script>
        const vm = new Vue({
            el: '#app', // 控制id为app的元素
            data: {
                msg: '<h1>文本</h1>'
            }
        })
    </script>