“This is the 16th day of my participation in the Gwen Challenge.

Function name (); otherwise, it will be parsed as a variable

<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>
Copy the code

Page effect:

HTML renders correctly:

2. V-bind: Vue does not parse the syntax of strings and uses V-bind to bind variables

Baidu cannot be used to jump, and an error is reported, which requires 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"
        }, // All variables are stored in data
        methods: {changeName: function(e){
                this.name = e.target.value; }}})</script>
Copy the code

Effect: Click a label to jump to Baidu

As you can see, the a tag renders correctly:

V-bind :href=”link” v-bind:href=”link”

3. V-once: The value is initialized and does not change with subsequent changes

<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>
Copy the code

Effect: The content of the first h1 is still CCY, unchanged by sayName



If the positions of two h1’s are switched, v-once will still change the content, because the initialization is already the changed name, and v-once can only prevent subsequent changes in the value



4. V-html: Render strings as DOM, not recommended, unsafe

Data with AN HTML tag is treated only as a string:

data:{
        name:"ccy".link:"https://www.baidu.com".html:
    }
Copy the code
<p>{{html}}</p>
Copy the code



Using v – HTML:

<p v-html="html"></p>
Copy the code

Effect: