复习次数 :✔
1.1 vue优势
1.2 vue环境
直接在idea的插件搜vue.js,然后下载。
接着创建一个空项目,并添加模块。然后,创建一个html文件。
1.3 vue例子
完整的html代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层-->
<h1 id="bottom-h">
{{message2}}
</h1>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script> <!--CDN,视图层和数据层的中间件-->
<script>
var vm = new Vue({
el: "#bottom-h", /*绑定id*/
/*model层*/
data: {
message :"hello!",
message2:"nihao!"
}
});
</script>
</body>
</html>
运行结果如下:
1.4 注意点
其中,使用CDN来安装和管理vue的依赖:
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
注意点:
1.创建Vue对象:var vm = new Vue(); 其中,Vue的V是大写的,然后在小括号里面写花括号;
2.花括号里有el和data属性;
3.el用来绑定id,"#id名";
4.data用来存储数据,作为model层,格式是:data:{key = "xxx"},如果存在两个key,用逗号隔开;
5.el和data用逗号隔开;
6.在视图层(view层)用{{key}}来接收数据;
1.5 通过网页,不刷新改变视图层的值
打开网页,点击console:
输入vm.key名 = "修改的内容",然后回车,即可改变视图层的数据:
这里的key是message。