Vue 实例和数据绑定
- 通过构造函数 Vue 就可以创建一个 Vue 的根实例，并启动 Vue 应用。
Vue 实例是使用 Vue 的入口。
HTML
<div id="app">
{{message}}
</div>
JavaScript
var app = new Vue({
// element，用于指定页面中已经存在的 DOM 元素，挂载到 DOM 中，也可以是 css
el: '#app',
// 可以声明应用内需要双向绑定的数据
data: {
message: 'Vue 学习开始了'
}
})
- 必不可少的一个选项是
el。el 用于指定页面中已存在的 DOM 元素来挂载 Vue 实例，可以是标签，也可以是 CSS 语法。 - 通过 Vue 实例的
data选项，可以声明需要双向绑定的数据。建议所有会用到的数据都在 data 中声明。 - 挂载成功后，我们可以通过
app.$el来访问该元素。
i. 访问 Vue 实例的属性：app.$+ 选项名，例如app.$data
ii. 访问 data 的属性：app.+ 属性名，例如app.message
生命周期钩子
created 在实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，$el 还不可用。需要初始化处理一些数据时会比较有用。
mounted el 挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。
beforeDestroy 实例销毁之前调用。主要用来解绑一些使用 addEventListener 监听的事件等。
文本插值和表达式
使用双大括号 {{}} 是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来。
在 {{}} 中除了简单的绑定属性值外，还可以使用 JavaScript 表达式进行简单的运算、三元运算等。
只支持单个表达式，不支持语句和流控制。
过滤器
Vue 支持在 {{}} 插值的尾部添加 | 对数据进行过滤，常用于格式化文本，如字母全部大写、货币千位分隔符等。
过滤的规则是自定义的，通过给 Vue 实例添加选项 filters 来设置。
过滤器可以串联 {{ data | filter1 | filter2 | ··· }}
过滤器可以传参数 {{ data | filter(a, b) }}，a、b 作为 filters 中过滤规则函数的第二、第三个参数（第一个参数是要过滤的 data）
HTML
<div id="dateApp">
{{date | formatDate}}
</div>
JavaScript
var app = new Vue({
el: '#dateApp',
data: {
date: new Date()
},
mounted(){
var timer = setInterval(() => {
this.date = new Date()
}, 1000)
},
beforeDestroy(){
clearInterval(this.timer)
},
filters: {
formatDate(value){
var date = new Date(value)
var year = date.getFullYear()
var month = plusDate(date.getMonth() + 1)
var day = plusDate(date.getDay())
var hour = plusDate(date.getHours())
var minute = plusDate(date.getMinutes())
var second = plusDate(date.getSeconds())
return year + '年' + month + '月' + day + '日 ' + hour + '时' + minute + '分' + second + '秒'
}
}
})
var plusDate = function(value){
if (value < 10) {
value = '0' + value
}
return value
}
指令
v-text 解析文本，和 {{}} 作用一样。
v-html 解析 HTML
v-bind 动态更新 HTML 元素上的属性，如 id、class 等
v-on 绑定事件监听器
语法糖
指在不影响功能的情况下，添加某种简介方法实现同样的效果，从而更加方便程序开发。
v-bind 可简写成 :
v-on 可简写成 @
网友评论