美文网首页前端开发
03第一个Vue实例 2019-07-28

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

作者: 小沙坨 | 来源:发表于2019-07-28 16:38 被阅读0次

一、知识点总结

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>

相关文章

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

    一、知识点总结 1、VUE引入的方式 引入本地Vue文件 通过CDN文件的方式 2、将用