03第一个Vue实例 2019-07-28

一、知识点总结

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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。