Vue简单介绍以及常用方法总结

一、 Vue.js 是什么？

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
简单的 API 实现响应的数据绑定和组合的视图组件。

二、与其他框架对比

React 和 Vue

相似之处：

1. 使用 Virtual DOM

   1. 提供了响应式（Reactive）和组件化（Composable）的视图组件。

   2. 将注意力集中保持在核心库，伴随于此，有配套的路由和负责处理全 局状态管理的库。

Angular 和 Vue

1. vue 的一些语法和 Angular 的很相似（例如 v-if vs ng-if）。因为 Angular 是 Vue 早期开发的灵感来源。然而，Angular 中存在的许多问题，在 Vue 中已经得到解决。

2. Vue1.x版本可以认为就是简单的ng ，没有了controller的概念，直接通过el绑定视图模块

3. Vue2.x版本（当前版本）1、更好的性能；2、组件化

三、vue的常用指令

---

1、 v-xxx2、属性绑定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对象使用httpVue.http.get('/someUrl', [options]).then(successCallback, errorCallback);Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);// 在一个Vue实例内使用$httpthis.$http.get('/someUrl', [options]).then(successCallback, errorCallback).catch(e=>console.log(e));this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);