<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="./Vue-a.js"></script><!-- 引入vue库最好在head中，放在body里面可能会出现抖屏的情况-->
</head>
<body>
<div id="root">
<h1 v-text="msg"></h1><!--v-text是指令，msg表示变量,也可以使用v-html-->
<div v-on:click="handleClick">
{{msg}}
</div>
</div>
<script>
new Vue({
el:"#root",<!-- 挂载点 -->
template:'<h1>hello {{msg}}</h1>',《模板，可以直接放在挂载点中，也可以放在vue的实例中》
data: {
msg:" world"
}
methods:{
handClick:function(){
this.msg="1234";
}
}
})
</script>
</body>
</html>
知识点：
1、挂载点指的是vue实例中el所对应的元素的ID。
2、模板指的是挂载点内部的内容
3、实例中包含挂载点和模板，将模板和挂载点放在vue的实例中，vue会结合模板和挂载点，生成展示的内容，并展示挂载点中。
4、插值表达式的表现形式：{{datashuju}}
5、v-text与v-html的区别在于：v-text会将内容转义，v-html不会转义内容。
6、修改数据可以不用去通过元素去修改，可以直接通过数据修改。
7、事件绑定的简写可以直接用@符号，直接将v-on替换成@，一般开放情况下使用的都是@符号。
8、绑定时间的方法：先在挂载点插入需要进行的事件v-on:click="handleClick"或者@click="handleClick"，在实例中增加methods:{事件名：funtion(){修改的内容}}
608
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
