1. MVVM模式
Vue采用MVVM(Model-View-ViewModel)模式实现，MVVM模式由MVC演变而来当View层变化时，会自动更新到ViewModel层，反之亦然，View层与ViewModel层通过双向绑定建立连接。
MVVM模型
2. Vue实例
<!-- 一个简单的Vue实例 -->
<html>
<head>
<meta charset="utf-8">
<title>Vue-test</title>
</head>
<body>
<div id="app">
<input type="text" v-model="name" placeholder="Your name">
<h1>Hello, {{name}}</h1>
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
new Vue({
el:'#app', //用于指定一个页面中已经存在的DOM元素，这里使用页面的总id
data: {
name: '',
}
})
</script>
</body>
</html>
3. 生命周期钩子
生命周期钩子是Vue中的一类函数：每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
一个典型的Vue实例生命周期如下图所示：
Vue实例生命周期
这其中的
beforeCreate，created等即为Vue中的生命周期钩子。常用的钩子函数有：
-
created实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，$el还不可用。需要初始化处理一些数据时比较有用； -
mountedel挂载到实例上之后调用，一般我们的第一个业务逻辑会从这里开始； -
beforeDestory实例销毁之前调用。主要用于解绑一些使用addEventListener监听的事件等。
<!-- created与mounted的执行顺序 -->
<body>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data: {
name: 'Taegan',
},
created: function() {
console.log("created:" + this.name);
},
mounted: function() {
console.log("mounted:" + this.name);
}
})
</script>
</body>
执行结果
4. v-html与v-pre
-
v-html用于输出HTML文本； -
v-pre用于显示{{}}标签；
5. 过滤器
Vue支持在{{}}插值的尾部添加一个管道符|对数据进行过滤，常用于格式化文本，如字母大小写、货币千位逗号分隔等。
过滤的规则时自定义的，通过给Vue实例添加选项filters来设置，如可以对时间进行格式化处理：
<!-- 实时显示当前时间，每秒更新，并以过滤器格式化时间格式 -->
<body>
<div id="app">
<!-- 添加过滤器 -->
{{date | formatDate}}
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
//处理时间格式，在月份、日期、小时等时间，小于10时前面补0
var padDate = function(value) {
return value < 10 ? "0"+value : value;
}
new Vue({
el:'#app',
data: {
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: function() {
var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
this.timer = setInterval(function() {
_this.date = new Date();
}, 1000); //setInterval方法按照指定的周期调用函数
},
beforeDestory: function() {
if (this.timer) {
clearInterval(this.timer); //在Vue实例销毁前，清除定时器
}
},
})
</script>
</body>
过滤器也可以串联，也可以接受参数。
6. v-bind 与 v-on
-
v-bind用于动态更新HTML元素上的属性：
<!-- v-bind基本用法 -->
<body>
<div id="app">
<a v-bind:href="url">绑定a标签href属性</a>
<img v-bind:src="imgUrl">
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
url: "https://cn.vuejs.org/",
imgUrl: "https://cn.vuejs.org/images/logo.png"
}
})
</script>
</body>
-
v-on用于绑定事件监听器，如点击事件v-on:click：
<!-- v-on基本用法 -->
<body>
<div id="app">
<p v-if="show">这是一段显隐的文本</p>
<button v-on:click = "handleClose">{{message}}</button>
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
show: true,
message: "隐藏",
},
methods: {
handleClose: function() {
this.show = !this.show;
if (this.show) {
this.message = "隐藏";
} else {
this.message = "显示";
}
}
}
})
</script>
</body>
v-bind的语法糖为:，v-on的语法糖为@；
参考
- 《Vue.js实战》
网友评论