新建立的了一个交流群，欢迎在工作的开发者，尤其是VUE和小程序的同志们 771402271

好久没更新博客，确实是自己已经懒癌晚期，最近毕业刚工作3个月，公司开发一直在用Vue，自己个人也比较喜欢这个框架，今天就对自己学习到和用到的知识点作一些总结，希望能帮到大家。

Vue

　　知道Vue也一定听说过react 和 angular ，相对于这两个框架来说，Vue很轻量，打包后体积只有20K+，同时学习起来也比较简单，Vue借鉴了两个框架的很多优点。当然框架没有说最好，只有最适合，建议多学习尝试。

　　众所周知Vue是一个MVVM框架，这里的MVVM指的仅仅是前端，和后端无关。在MVVM框架中，视图和数据不能直接通信，而是通过中间人ViewModel，ViewModel它可以监听到数据的变化，然后通知视图做更新。同时它也可以监听到视图在改变，使数据改变。我们看下面的例子就大概懂了。

举例：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         // 这是我们的View 视图
  1.  　　　 <p  id="app">{{ message }}</p> 
    　　　　<input type="text" v-model="message"/> //输入框，绑定了数据message
  1.     </body>
  2.     <script src="js/vue.js"></script>   // 引入vue 自行下载
  3.     <script>
  4.         //  这是我们的Model
  5.         var obj = {
  6.             message: 'Hello World!'
  7.         }
  8.         // 声明一个 Vue 实例 ，即 "ViewModel"，实例中传入一个对象，用来连接 View 与 Model
  9.         new Vue(
  10.             el: '#app',    // 将id为app的dom节点放进来，即建立了与视图view的连接。
  11.             data: obj　　　　// 将obj放入到实例的data属性中, 此时建立与数据model的连接。
  1.  　　　　})
        // 这样就可以同时监听view和model了， 当更改message的时候，view会自动改变，同时当我们更改文本框的值的时候，会发现P标签里的值也在同时改变，这个时候就是view被监听使model改变。 这就实现了数据的双向绑定。
  1.  </script> 
  2.  
  3. </html>

常用语法

# 文本插值

  1. // 绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
  2. <span>Message: {{ msg }}</span>
  3. <span v-text="msg"></span>  // 也可以用指令的方式

#常用指令

指令 (Directives) 是带有 v- 前缀的特殊属性。其实就是一种命令，或者是规则。

v-if    v-else-if    v-else: 满足某个条件的时候显示。

  1.    <body>
  2.         <div id="app">
  3.             <h1 v-if="age > 50">Yes!</h1>  //当年龄大于50的时候才渲染这个标签
  4.          　　<h1 v-else-if="age > 20 && age < 50">{{age}}</h1> // 当年龄大于20且小于50的时候渲染当前标签
  5. 　　　　　　 <h1 v-else>Yes!</h1> // 其他的情况渲染此标签
  6.         </div>
  7.     </body>
  8.  
  9.     <script>
  10.         var vm = new Vue({
  11.             el: '#app',
  12.             data: {
  13.                 age: 80
  14.             }
  15.         })
  16.     </script>
  17.  
  18. // v-if 可单独使用，也可和v-else-if v-else 一起使用，来控制不同情况下的视图。

v-show：简单的切换 display:block 和 none, 和 v-if不同。带有v-show的元素始终会被渲染

  1. <h1 v-show="yes">Yes!</h1> // 如果yes为真就显示，为假就不显示
  2.  
  3.  var vm = new Vue({
  4.             el: '#app',
  5.             data: {
  6.                 yes: true
  7.             }
  8.         })

总结： v-show适用于两种状态的切换，v-if适用于条件判断。

v-for指令：用于循环

  1. <div id="app">
  2. <todo-item v-for="item in groceryList" >{{item.text }}</todo-item>
  3. </div>
  4.  
  5. var app7 = new Vue({
  6.     el: '#app',
  7.     data: {
  8.         groceryList: [
  9.             { id: 0, text: '蔬菜' },
  10.             { id: 1, text: '奶酪' },
  11.             { id: 2, text: '随便其他什么人吃的东西' }
  12.         ]
  13.     }
  14.    })

v-bind指令

v-bind指令可以在后面带一个参数，中间用冒号隔开，这个参数一般是HTML的属性，比如v-bind:class ,可缩写为:class，这个class和原来的class 并不冲突。

  1. .show{
    　　display: block;
    }
    <h1 class="center"  v-bind:class="yes ? show : off">Yes!</h1> // 如果yes为真就添加名为show的class，反之添加off
  2.  
  3.  var vm = new Vue({
  4.             el: '#app',
  5.             data: {
  6.                 yes: true
  7.             }
  8.         })

v-on指令

专门用于绑定事件的指令，用法和v-blind差不多，比如添加点击事件< a v-on:click="方法名 / 执行语句"> ，可直接缩写为@click，可直接绑定一个方法，也可以直接使用内联语句

 #修饰符

修饰符 修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，指明一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件的时候阻止默认事件：

  1. <form v-on:submit.prevent="onSubmit"></form>

#计算属性computed：在正常情况下，代码中可以直接进行简单的运算，但是如果太多就显得难以维护。而计算属性就是将这个逻辑提取出来，专门来维护。如下例子：

  1. <div id="example">
  2.   {{ message.split('').reverse().join('') }}
  3. </div>
  1. <div id="example">
  2.   <p>{{ message }}"</p>
  3.  <p>{{ reversedMessage}}"</p>
  4. </div>
  5. var vm = new Vue({
  6.   el: '#example',
  7.   data: {
  8.     message: 'Hello'
  9.   },
  10.   computed: {
  11.     reversedMessage: function () {
  12.       return this.message.split('').reverse().join('')
  13.     }
  14.   }
  15. })

#方法methods：可实现和计算属性一样的功能

  1. <div id="example">
  2.   <p>{{ message }}"</p>
  3.  <p>{{ reversedMessage}}"</p>
  4. </div>
  5. var vm = new Vue({
  6.   el: '#example',
  7.   data: {
  8.     message: 'Hello'
  9.   },
  10.   methods: {
  11.    reversedMessage: function () {
  12.      return this.message.split('').reverse().join('')
  13.    }
  14.  }
  15. })

方法和计算属性区别：

计算属性存在缓存，只有依赖的变量发现改变的时候才会重新求值，如上，只有message发生改变才会重新求值，而methods每次渲染都会重新执行。所以要根据业务来选择。

#观察watch 

只有一个一个监听数据，只要这个数据发生变化，就会在返回两个参数，第一个是当前的值，第二个是变化前的值，每当变化的时候，则会触发函数体的里的逻辑行为，来进逻辑后续操作

  1. watch: {   监听message的变化，若改变执行以下语句
  2.     message(new,old) {
  3.         //要执行的语句
  4.     }
  5. }

#过滤器

过滤器在开发中会经常用到，比如我们要显示一个日期，但是后端给我们的数据是像这样的3463782000时间戳，我们就必须做以下转换。例如：

  1. {{ message | date}}  // date在这里就是个过滤器。实际上就是一个函数，函数的第一个参数就是 | 前面的message，也就是说message会被当做参数传入到date函数中进行处理，返回的结果就是最终显示的结果，注意过滤器函数都必须有返回值。
  2.  
  3. new Vue({
  4.   filters: {
  5.    　　 date: function (date, fmt) {
  6.       　　if (!date) {
  7.         　　return 'timestamp can not be null or undefined';
  8.       　　}
  9.     　　date = new Date(date);
  10.     　　if (isNaN(date.getFullYear())) {
  11.         　　return 'dateError';
  12.     　　}
  13.     　　if (/(y+)/.test(fmt)) {
  14.         　　fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
  15.     　　}
  16.     　　const o = {
  17.         　　'M+': date.getMonth() + 1,
  18.         　　'd+': date.getDate(),
  19.         　　'h+': date.getHours(),
  20.         　　'm+': date.getMinutes(),
  21.         　　's+': date.getSeconds()
  22.    　　 };
  23.     　　for (const k in o) {
  24.         　　if (new RegExp(`(${k})`).test(fmt)) {
  25.             　　const str = o[k] + '';
  26.             　　fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
  27.         　　}
  28.     　　}
  29.     　　return fmt;
  30.     }
  31.   }
  32. })
  33.  
  34. //  过滤器也可以串联.如 {{message | filterA | filterB}}  message会当做参数传给filterA，处理完返回的结果又会当做参数传入filterB，处理完返回的就是最终结果了
  36.   过滤器分全局和局部。全局就是整个项目都可以用到，具体自行百度。

#混合mixins：

我们知道vue实例中会传入一个对象，里面有方法，计算属性等，假如有两个vue实例，他们有很多公用的东西，那么就可以用到混合了，混合可以当做一个Vue实例，同时它又可以和任何一个

对象进行组合。如下： am 和 vm 都需要使用方法foo,这个时候就可以声明一个混合来复用。

  1. var mixin = {  // 声明一个混合
  2.   methods: {
  3.     foo: function () {
  4.       console.log('foo')
  5.     }
  6.   }
  7. }
  8.  
  9. var vm = new Vue({
  10.   mixins: [mixin],   // 引用混合
  11.   methods: {
  12.     bar: function () {
  13.       console.log('bar')
  14.     }
  15.   }
  16. })
  17.  
  18. var am = new Vue({
  19.   mixins: [mixin],
  20.   methods: {
  21.     conflicting: function () {
  22.       console.log('from self')
  23.     }
  24.   }
  25. })
#给一个对象注册一个不存在的属性
假如我们需要监听对象下某个不存在的属性，那么我们可以通过set去创建。
全局注册： vue.set(item, 'checked', true)   item.checked = true
局部注册： this.$set(item, 'checked', true)

 #组件之间的通信

组件的基础就暂且不说了，看官方也能懂，直接说下通信，组件之间，有时候需要传递数据或者数据的状态，比如我这边点了按钮，需要父组件得到并且做出一定的改变。所以组件之间需要通信。

这个时候就分三种情况：父组件传递消息给子组件， 子组件传递消息给父组件，兄弟组件之间通信

1 父组件传递数据给子组件：props

  1. 父组件
  2. <child message="hello!"></child>  // 子组件在父组件内被调用，message是来自于父组件的数据，直接以属性的形式传递
  1. 子组件 需要声明props属性来接收数据，数据可以和data里的数据一样使用
  2. Vue.component('child', {
  3.   // 声明 props
  4.   props: ['message'],
  5. })

2  子组件传递信息给父组件：例：当点击按钮时，通知父组件

  1. 父组件
  2.  
  3. <div id="counter-event-example">
  4.   <p>{{ total }}</p>
  5.   <button-counter v-on:increment="incrementTotal"></button-counter>   // 子组件调用被监听派发出的时间increment,监听到后调用incrementTotal方法
  6.   <button-counter v-on:increment="incrementTotal"></button-counter>
  7. </div>
  8.  
  9. new Vue({
  10.   el: '#counter-event-example',
  11.   data: {
  12.     total: 0
  13.   },
  14.   methods: {
  15.     incrementTotal: function () {  //若传递过来有数据，可以直接接收incrementTotal(value)
  16.       this.total += 1
  17.     }
  18.   }
  19. })
  1. 子组件：
    Vue.component('button-counter', {
  2.   template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
  3.   data: function () {
  4.     return {
  5.       counter: 0
  6.     }
  7.   },
  8.   methods: {
  9.     incrementCounter: function () {
  10.       this.counter += 1
  11.       this.$emit('increment')   // 派发事件increment，第二个参数可以是想传递的数据  比如 this.$emit('increment', 1)
  12.     }
  13.   },
  14. })
  1. 注意： 在子组件中不要直接更改props的值，不推荐也不支持，想要用可以直接赋值给一个变量，或者用计算属性，如果需要改变父组件这个值怎么办呢，就可以利用watch监听传来的props数据，然后把这个数据赋给一个变量，
    这样我们就可以操作这个变量，再$emit派发事件把想要改变的数据传给父组件，父组件再监听。
  3. 3 兄弟组件通信
  1. var bus = new Vue()  声明Vue实例
  2.  
  3. bus.$emit('id-selected', 1)   // 派发事件和数据
  4.  
  5. bus.$on('id-selected', function (id) {  // 监听事件，并在回调函数中，接受传来的数据。
  6.   // ...
  7. })
  1.  

先说到这里。。。。。

Vue使用总结的更多相关文章

  1. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  2. wepack+sass+vue 入门教程（三）

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  3. wepack+sass+vue 入门教程（二）

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  4. wepack+sass+vue 入门教程（一）

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  5. Vue + Webpack + Vue-loader 系列教程（2）相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  6. Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

  7. 关于Vue.js 2.0 的 Vuex 2.0，你需要更新的知识库

    应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...

  8. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

  9. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  10. 初探Vue

    Vue.js(读音/vju:/,类似于view),是近来比较火的前端框架,但一直没有怎么具体了解.实现过,就知道个啥的MVVM啦,数据驱动啦,等这些关于Vue的虚概念. 由于最近,小生在公司中,负责开 ...

随机推荐

  1. HTML <area><map>标签及在实际开发中的应用

    之前,我一直以为HTML <area>是一个鸡肋HTML,估计到了HTML5时代会被废弃的命.但是,最近一查资料,乖乖了个咚,不仅没被废弃,反而发展了,新增了一些标签属性,例如rel,me ...

  2. 详解HTTPS加速原理

    HTTPS是什么? http叫超文本传输协议,使用TCP端口80,默认情况下数据是明文传送的,数据可以通过抓包工具捕获到,因此在interner上,有些比较重要的站点的http服务器需要使用PKI(公 ...

  3. ionic项目ios真机部署（不需开发者账号）

    ionic项目ios真机部署(不需开发者账号) 安装ionic和cordova npm install -g ionic npm install -g cordova 创建一个新项目 ionic st ...

  4. 结对作业1----基于flask框架的四则运算生成器

    011.012结对作业 coding地址:https://coding.net/u/nikochan/p/2nd_SE/git 一.作业描述 由于上次作业我没有按时完成,而且庞伊凡同学编程能力超棒,所 ...

  5. 团队作业9--测试与发布（Beta版）

    Beta版本测试报告 1.在测试过程中总共发现了多少Bug?每个类别的Bug分别为多少个? a. 修复的bug: 写入SD存储卡文件权限问题 页面正确跳转 及 部分页面闪退的问题 b. 不能重现的bu ...

  6. 201521123095 《Java程序设计》第3周学习总结

    ,1. 本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识组织起来.请使用纸笔或者下面的工具画出本周学习到的知识点.截图或者拍照上传. 2. 书面 ...

  7. 201521123014 《Java程序设计》第2周学习总结

    1. 本周学习总结 (1)类Scanner 一个可以使用正则表达式来解析基本类型和字符串的简单文本扫描器. -例如以下代码使用户能够从System.in 中读取一个数: Scanner sc = ne ...

  8. Java课设 彩票购买抽奖程序 个人博客

    一.团队课程设计博客链接 http://www.cnblogs.com/lyq063/p/7072507.html 二.自己的代码提交记录截图 三.自己负责模块或任务详细说明 用户注册信息的存储和登录 ...

  9. 201521123020 《Java程序设计》第9周学习总结

    1.本周学习总结 2. 书面作业 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什么)?应如何避免? 答:数组越界:不需要 ...

  10. Java多线程高并发学习笔记(一)——Thread&Runnable

    进程与线程 首先来看百度百科关于进程的介绍: 进程是一个具有独立功能的程序关于某个数据集合的一次运行活动.它可以申请和拥有系统资源,是一个动态的概念,是一个活动的实体.它不只是程序的代码,还包括当前的 ...