一、知识点总结
1、VUE引入的方式
-
引入本地Vue文件
-
通过CDN文件的方式
2、将用<script>引用的vue放在head中,可以避免抖屏的现象
3、初始化Vue
var app=new Vue({
})
4、el
用于接管页面上的某一个元素,和哪一个dom节点进行绑定,el挂载点。
<div id="app">
{{message}}
</div>
<script>
var app=new Vue({
el:"#app" //挂载点
})
</script>
5、data
用于数据的绑定
6、双向绑定
数据绑定使用双花括号{{ }},具体事例如下所示:
<div id="app">
{{message}}
</div>
<script>
var app=new Vue({
el:"#app",
data:{
message:"Hello Vue"
}
})
</script>
二、第一个Vue实例DEMO
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
var app=new Vue({
el:"#app",
data:{
message:"Hello Vue"
}
})
</script>
</body>
</html>