Vue基础篇
第二章 数据绑定和第一个vue应用
2.1 vue实例和数据的绑定
2.1.1 实例与数据
vue创建是通过构造函数vue就可以创建一个vue的根实例
<script>
var app= new Vue({
el: '#app',
data() {
return {
count:0
}
})
</script>
在浏览器控制台访问数据可以通过app.$el访问挂载的节点
app.count可以访问和修改数据app.count=8代表修改数据值为8
此时页面视图也会随之发生改变。
2.1.2 vue生命周期
比较常用的生命周期钩子有：
created 实例创建完成之后调用，此阶段完成了数据的观测
但是尚未挂载，$el还不可以用
场景：需要初始化一些数据是比较有用
mounted el挂载到实例上时调用,一般我们的第一个业务逻辑会在这里开始。
beforeDestroy 实例销毁之前调用,主要是解绑一些使用addEventListener监听的事件
<script>
var app = new Vue({
el: document.getElementById('app'),
data() {
return {
items: [{
id: 1,
name: 'html'
},
{
id: 2,
name: 'css'
},
{
id: 3,
name: 'js'
},
],
count: 0
}
},
created() {
console.log(this.count);
},
mounted() {
console.log(this.$el);
}
})
</script>
2.1.3 vue插值与表达式
vue使用双大括号来插值
<body>
<div id="app">
{{date}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: document.getElementById('app'),
data() {
return {
date: new Date()
}
},
mounted() {
var _this=this;
this.timer=setInterval(function(){
_this.date=new Date()
},1000);
},
beforeDestroy(){
if(this.timer){
clearInterval(this.timer)
}
}
})
</script>
</body>
1.使用了v-pre可以跳过对元素的编译
<span v-pre>{{date}}</span> 页面显示结果为{{date}}
不会对{{}}内的内容进行编译
2.{{}}不仅仅是可以进行数据的绑定，而且可以使用js表达式进行简单的运算
三元运算等等。
提到运算，在原生微信小程序开发中也能够在{{}}内进行三木运算
<body>
<div id="app">
{{date}}
<p>{{number/10}}</p>
<p>{{isOK?'确定':'取消'}}</p>
<p>{{text.split(',').reverse().join(',')}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: document.getElementById('app'),
data() {
return {
date: new Date(),
number:100,
isOK:false
text:'123,456'
}
}
})
</script>
</body>
显示结果为 10 取消 456,123
2.1.4 过滤器
vue.js支持在{{}}插值的尾部添加一个管道符'|'对数据进行过滤
经常用于格式化文本，比如字母全部大写，货币千位使用逗号分隔符等。
<body>
<div id="app">
{{date|formatDate}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var padDate = function (value) {
return value < 10 ? '0' + value : value;
}
var app = new Vue({
el: document.getElementById('app'),
data() {
return {
date: new Date()
}
},
filters: {
formatDate: function (value) {
var date = new Date(value);
var year = date.getFullYear();
var month = padDate(date.getMonth() + 1);
var day = padDate(date.getDate());
var hours = padDate(date.getHours());
var minutes = padDate(date.getMinutes());
var seconds = padDate(date.getSeconds());
return year + '-' + month + '-' + day + '-' + hours + ':' + minutes + ':' + seconds
}
},
mounted() {
var _this = this;
this.timer = setInterval(function () {
_this.date = new Date()
}, 1000);
},
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer)
}
}
})
</script>
</body>
通过以上过滤的方法能够将时间进行格式处理，将时间位数为1位的进行前面补0
最终返回一个正确的时间格式。
2.2 指令与事件
指令(Directives)是vue.js模板中常见的一项重要功能，它带有前缀v-，比如v-for，v-if，v-html，v-pre等，指令的主要职责是当其表达式的值发生改变时,相应的将某些行为应用到DOM上。
vue内置了许多指令，例如v-bind用于动态更新html元素上的属性,直白来讲就是用于绑定动态数据。
v-on用于绑定事件监听器
<body>
<div id="app">
<div> <p v-if="show">切换</p></div>
<button @click="handler()">按钮</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var padDate = function (value) {
return value < 10 ? '0' + value : value;
}
var app = new Vue({
el: document.getElementById('app'),
data() {
return {
date: new Date(),
show:true
}
},
methods: {
handler() {
this.show=!this.show
},
}
})
</script>
</body>
点击按钮可以来回切换一个标签的显示与消失。
2.3 语法糖
语法糖是指在不影响功能的情况下，添加某种方法实现同样的效果,从而方便程序开发。
vue.js的v-bind和v-on指令都提供了语法糖，也可以说是缩写，比如v-bind
可以省略v-bind直接写一个":"
v-on也可以直接写用"@"来缩写。
<img :src="url" alt="">
<button @click="handler()">按钮</button>
