Vue实例和数据绑定
通过Vue可以创造出一个Vue的实例
var app = new Vue({
el:'',
data:{
}
})
-
el是必须的，用于指定一个已经存在的DOM元素来挂载Vue实例。 - 通过
data选项，可以声明应用内需要的双向绑定的数据。 - 挂载成功后，可以通过
app.$el
来访问该元素。同时Vue也提供了很多实例的属性和方法。
如果访问data的属性，可以直接
app.msg
生命周期钩子
-
createdVue实例创建完成后调用，完成对数据的观测工作，但是尚未挂载，$el并不可用。可用于对数据的初始化工作。 -
mounted挂载到实例上后马上调用，一般用于处理第一个业务逻辑。 -
beforeDestroy实例销毁前调用，一般用于addEventListener监听事件。
文本插值与表达式
语法:使用双大括号( Mustache 语法)“{{}}”是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来，
用法：{{-----}}除了可以绑定属性外，还可以使用JS的表达式进行一些简单的运算、三元运算
Tips：Vue只支持单个的表达式，不支持语句和控制流。
{{1+2*3}}进行简单运算
{{6<7?msg:a}}进行三元运算
{{var a = 6}}也是多行表达式
var a ;a = 6;
过滤器
Vue.支持在{{---}}插值的尾部添加一小管道符 “ | ” 对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。
过滤的规则是自定义的， 通过给 Vue 实例添加选项 filters 来设置
过滤器：{{ data | filter1 |filter2}}
{{date | formatDate(66,99)}}
中的第一个和第二个参数，分别对应过滤器的第二个和
第三个参数。第一个参数是data
指令和事件
指令（ Directives ）是 Vue 模板中最常用的一项功能，它带有前缀 v－，能帮我们快速完成DOM操作。循环渲染。
v-text:—————解析文本 和{{ }} 作用一样
v-html:————— 解析html
v-bind:—————–v-bind 的基本用途是动态更新 HTML 元素上的属性，比如 id 、class 等。
v-on:——————它用来绑定事件监听器
语法糖
语法糖是指在不影响功能的情况下 ， 添加某种简洁方法实现同样的效果 ， 从而更加方便程
序开发。
v-bind——> : (冒号)
v-on ——> @
一些题目
-
代码实战：
要求：
渲染文本到页面
渲染HTML到页面
动态绑定属性（任意属性均可）
绑定一个事件
必须使用到过滤器
上述要求必须使用到，v-text,v-html,v-bind,v-on,过滤器，内容不限，场景不限，旨在对本节课的指令事件进行练习.
代码：https://github.com/shlroland/vue.js-2rd-demo/blob/master/index.html
-
请用代码写出一个包含el和data选项的vue实例,并挂载到页面中id为app的div上。
<div id="app">
{{msg}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
msg: '我是msg',
}
})
</script>
-
第一次页面加载会触发哪几个钩子？
beforeCreate//触发
created//实例完成后调用
beforeMount//触发
mounted//挂载到实例上调用
