vue- text type instruction

Text expression

Interpolation expression {}
v-text
v-html
v-once

Vue early experience

A new space projects, the introduction of vue.js file. Write the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1、导入Vue的包-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<!--这个div区域就是MVVM中的 View-->
<div id="div1">
    {{name}}
</div>
</body>

<script>
    // 2、创建一个Vue的实例
    //new出来的对象就是MVVM中的 View Module（调度者）
    var myVue = new Vue({
        el: '#div1', //当前vue对象将接管上面的div1区域
        data: {//data就是MVVM中的 module
            name: 'smyhvae'
        }
    });
</script>
</html>

If we type in the console myVue.$data.name = 'haha', the page will automatically update the name of values. Mean, when we modify the data directly to the data, the page will be updated automatically, without having to operate DOM.

Interpolation expression {}

The data show a page in one of the most commonly used syntax {{}}

 <p>{{msg}}</p>

    let vm = new Vue({
        el: '#app',
        data: {
            msg: 'hello vue'
        }
    })

Whenever, when the data changes msg, msg P label will automatically update

{{}}On javascript expression (an expression produces a value) support interpolated expressions can not put a sentence

    {{ num +1 }}

    {{ ok ? 'YES' : 'NO' }}  // 三目运算符

    {{ name == 'a' ? 'true' : 'false' }}

Error demonstration Statement

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

v-text

v-text render the data variables to the specified element

    <p v-text='msg'></p>

The difference between interpolation and expression of v-text

  <!-- 差值表达式 -->
  <p>content:++++++{{name}}------</p>

  <!-- v-text -->
  <p v-text="name">------++++++</p>

The difference between 1 : interpolation expression will replace this placeholder own, does not cover the entire contents of the elements but if the network will slow flicker problem, you need to use v-cloak fixes flicker
difference 2 : v-text overrides the entire contents of the element, but there is no flicker problem, because he is on the property

Actually, the second line of code, as long as the browser is not yet resolved to v-text="name"time, will be displayed ------++++++; if the parsing v-text="name"time, directly replace the value of the name ------++++++.

v-html

v-textRendering is the plain text content, v-htmlwill be parsed into html elements
Note: Using the v-html rendering data can be very dangerous because it can easily lead to XSS (cross site scripting) attacks, using the time to be careful, be able to use {{} } v-text or not implemented using the v-html.


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


    data: {
        msg: '<h1>我是一个大大的h1标题</h1>'
    }

v-html Caution : have scoped style does not act on the element has a v-html files in a single assembly, because the HTML that is not part of the treated vue template compiler, 解决办法replaced CSS Modulesor additional use of a 全局 style 元素manual set the scope of strategy similar BEM.

v-once

Only render elements and components once. Subsequent re-rendered elements / components and all its child nodes will be treated as static content and skip. This update can be used to optimize performance (using low frequency)

  <p v-once> {{ msg }}</p>

Tenth _web

Released three original articles · won praise 0 · Views 255

Private letter concerns