Video 7 V-text: The binding text, which is replaced by the binding of the same attribute value name in data as v-text, which is written inside the tag. It can also be written outside of the tag, with two curly braces around it, called interpolation. V-text can also be used for logical expressions, such as string concatenation

<div id="app"> <h2 v-text="message+'! <h2 > <h2 v-text="infor+'! "> </h2> <h2>{{message+'! </h2> </div> <! -- Development environment version, Contains the help command line warning -- > < script SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > < script > var app = new Vue ({ El :"#app", data:{message:" dark horse programmer!!" , infor:" Front end and Mobile Section "}})Copy the code

Video 8 V-HTML: Parsing the HTML, that is, setting the innerTHML of the element. V-text can only parse text, and v-HTML binding data must be HTML structure.

<div id="app"> <p v-text="content"></p> <a v-html="content"></a> </div> <! -- Development environment version, Contains the help command line warning -- > < script SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > < script > var app = new Vue ({ El: "# app," data: {/ / content: "dark horse programmer" content: "< a href =" http://qiuzhe.top/ "> wisdom clouds < / a >"}})Copy the code

Video 9 V-on: Bind event, such as click event, mouse move event, double click event format: V-on: event name = method name, write the method in vue instance Methods, define the method, bind the logic in the method. You can also use the shorthand @ event name. Get the data in data by this keyword, that is, this. Data name.

<div id="app"> <input type="button" value=" click "v-on:click="doIt"> <input type="button" value=" @click="doIt" Type = "button" value = "double click" @ dblclick = "doIt" > < h2 @ click = "changeFood" > {{Food}} < / h2 > < / div > <! -- Development environment version, Contains the help command line warning -- > < script SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > < script > var app = new Vue ({ El: "# app," data: {the Food: "broccoli scrambled eggs"}, the methods: {doIt: function () {alert (" do It ")}, changeFood:function(){ // console.log(this.Food); This. Food+=" Yummy!" } } }) </script>Copy the code

Video 10 example: counter function: again between 1 and 10 count, less than 0 prompt minimum, greater than 10 prompt maximum code: a minus button, a plus button, intermediate data display plus or minus one

Tag data, data binding. Methods, event definition binding, if-else logic in event binding, Alert, web prompt pop-up

<div id="app"> <button @click="sub">-</button> <p>{{num}}</p> <button @click="add">+</button> </div> <! -- Development environment version, Contains the help command line warning -- > < script SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > < script > var app = new Vue ({ Function (){if(this.num>0){this.num--} else{alert(" #app", data:{num:"1"}, methods:{sub:function(){this.num>0){this.num--} else{alert(" #app", data:{num:"1"}) }}, add:function(){if(this.num<10){this.num++} else{alert(" Max! ) } } } }) </script>Copy the code