<!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>