共计 1494 个字符，预计需要花费 4 分钟才能阅读完成。
一、vue 实例和数据绑定
1、引入 vue 的代码
<script src=”https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js”></script>
2、创造 vue 的实例
通过构造函数 Vue 就可以创建一个 Vue 的根实例，并启动 Vue 应用 — 入口
var app =new Vue({
el:”,
data:{
}
})
必不可少的一个选项就是 el。el 用于指定一个页面中己存在的 DOM 元素来挂载 Vue 实例, 可以是标签。也可以是 css 语法
通过 Vue 实例的 data 选项，可以声明应用内需要双向绑定的数据。建议所有会用到的数据都预先在 data 内 声明，这样不至于将数据散落在业务逻辑中，难以维护。也可以指向一个已经有的变量
3、访问数据方式
访问 vue 实例元素
app.$el
访问 data 元素的属性
直接 app. 属性名，如 app.msg
二、生命周期钩子
1、created
实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，$el 还不可用。需要初始化处理一些数据时会比较有用，
2、mounted
el 挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。相当于 $(document).ready()— 刚刚挂载
3、beforeDestroy
实例销毁之前调用。主要解绑一些使用 addEventListener 监听的事件，定时器等。举例
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
</head>
<body>
<div id=”app2″>
{{msg}}
</div>
<script src=”https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js”></script>
<script>
var app=new Vue({// 通过构造函数新建一个 vue 的实例，
el:”#app2″,// 用于挂载页面上已经存在的 dom 元素
data:{
msg:”vue 学习开始了 ”
},
created:function(){
alert(‘ 我是 vue 实例，已经创建完成，但还未挂载到 dom 上 ’)
},
mounted:function(){
alert(‘ 我是 vue 实例，已经挂载到 dom’)
}
})
console.log(app.$data) // 访问 vue 实例的属性
console.log(app.msg) // 访问 data 元素的属性
//vue 实例就是 vue 应用的一个入口，传递
</script>
</body>
</html>
三、文本插值和表达式
1、语法：
使用双大括号（Mustache 语法）“{{}}”是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来，
2、用法
在{{}}中，除了简单的绑定属性值外，还可 以使用 JavaScript 表达式进行简单的运算、三元运算等
3、实例
Vue .js 只支持单个表达式，不支持语句和流控制。{{6+6 *3}}— 可以进行简单的运算 {{6<3 ? msg :a}}— 可以用三元运算符 <br>{{if(6>3){}}—– 注意：文本插值的形式，其中不能书写表达式, 支持单个表达式
4、注意
{{var a = 6}}– 也是多行表达式 —-var a ;a = 6;〈！一这是语旬，不是表达式 一〉
