一、 Vue.js 是什么?
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
简单的 API 实现响应的数据绑定和组合的视图组件。
二、与其他框架对比
React 和 Vue
相似之处:
使用 Virtual DOM
提供了响应式(Reactive)和组件化(Composable)的视图组件。
将注意力集中保持在核心库,伴随于此,有配套的路由和负责处理全 局状态管理的库。
Angular 和 Vue
vue 的一些语法和 Angular 的很相似(例如 v-if vs ng-if)。因为 Angular 是 Vue 早期开发的灵感来源。然而,Angular 中存在的许多问题,在 Vue 中已经得到解决。
Vue1.x版本可以认为就是简单的ng ,没有了controller的概念,直接通过el绑定视图模块
- Vue2.x版本(当前版本)1、更好的性能;2、组件化
三、vue的常用指令
1、 v-xxx
2、属性绑定v-bind 缩写 ‘:’
<a v-bind:href="url"></a> 给标签绑定属性 :属性名 =" 属性值";
<!-- 缩写 -->
<a :href="url"></a>
3、事件绑定 v-on 缩写 ‘@’
<a v-on:click="doSomething"></a> 给标签绑定事件 @事件名 = " 方法名()";
<!-- 缩写 -->
<a @click="doSomething"></a>
4、v-mode => mvvm (model=> view view=>model) 实现数据和视图的双向绑定
5、v-for <li v-for="(ele,index) in listdata" key="index">
for in 循环
6、v-text ="val" 渲染数据 渲染的速度比{{val}} 这种方式要快,可以提高用户体验;
7、v-cloak 给标签加上 <p v-cloak>{{val}}</p>
配合样式 [v-cloak]{display:none} 也可以达到 v-text 的效果;初始加载页面时使之不显示;
8、v-html 安全数据绑定,可以解析html 标签
9、v-pre 不会解析数据(使用较少)
10、v-show 是否显示(配合样式 display:none)
11、v-if 判断是否生成标签 效果同v-show 相同 但实现原理不同,v-if 实现显示或隐藏的效果慢与v-show
四、过滤器
//全局定义
Vue.filter('reverseMsg',function(value){
return value.split('').reverse().join('');
});
new Vue({
el:"#box",
data:{
message:"msg"
},
filters:{
//局部定义
reverseMsg:function(value){
return value.split('').reverse().join('')+"2";
}
}
})
计算属性
new Vue({
el:"#box",
data:{
message:"msg"
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
watch( 一般执行异步操作或开销较大的操作)
new Vue({
el:"#box",
data:{
message:"msg"
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
vue-resource(支持 jsonp)
// 基于全局Vue对象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
// 在一个Vue实例内使用$http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback).catch(e=>console.log(e));
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);