基本用法
一、引入介绍vue.js
二、创建实例
- 创建Vue对象实例，执行配置对象：
- el 指定dom标签容器的选择器
- data：指定初始化状态数据的对象/函数（返回一个对象）
三、显示
四、看代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 最基本的用法</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: '哈喽 美女 ！！！'
}
})
</script>
</body>
</html>
五、解释
- Vue在后面做了大量的工作，现在数据和DOM已经建立了关联，在id="app"的div中的所有元素都是响应式的，我们可以这样确认一下：
- 用浏览器打开这个html页面，打开浏览器的JavaScript控制台，修改app.mgs='哈喽 帅哥！！！'，或者app.$data.msg='哈喽 帅哥！！！'，这时就能看到页面的” 哈喽 美女！！！“ 就变成了 ”哈喽 帅哥！！！“