<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!--根据慕课网DellLee老师讲解的vue2.5入门课程笔记,视频地址: https://www.imooc.com/learn/980--> <!--1 这里的{{}}称之为 插值表达式--> <h1>hello {{msg}}</h1> <!--2 v-text是Vue中的一个指令,这个指令代表h1中的内容是Vue实例中text变量的内容--> <div v-text="text"></div> <!--3 v-text与v-html的区别是:v-text不会解析html,v-html 会解析html--> <div v-html="text"> </div> <!--4 v-on:代表在这个模板上绑定一个事件,绑定什么事件,就在v-on:后面添加具体的事件--> <!--4.1 具体的事件是写在实例methods方法里--> <div v-on:click="handleClick('ddss')"> {{context}} </div> <!--4.2 v-on可以简写为@--> <div @click="handleClick('ddss')"> {{context}} </div> <!--Vue吸引人的地方就是:我们不是面向DOM编程,而是面向数据编程--> </div> <script> var app = new Vue({ el: '#app', data: { msg: '5555', text: '<span style="color:red">5555</span>', context: 'hello', }, methods: { handleClick: function (a) { // alert(a);//'ddss' this.context = "2222"; } } }); </script> </body> </html>