演讲分享第二十四期--《Vue.js的简单使用》

  高度、深度、温度
这里是一个有情怀，有温暖的地方
----中科软长沙项目组

本次组织演讲分享者肖芳清
今天想要分享的是vue.js的简单使用。从三个方面进行简述：简介、兼容性、语法。
Vue.js（读音 /vju/，类似于 view）是一套构建用户界面的渐进式框架。
渐进式代表的含义是：主张最少。渐进式的含义，我的理解是：没有多做职责之外的事。
比如说，Angular，它两个版本都是强主张的，如果使用它
第一：必须使用它的模块机制
第二：必须使用它的依赖注入
第三：必须使用它的特殊形式定义组件（当然这一点每个视图框架都有，难以避免）
综上所述Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。
再比如React，它也有一定程度的主张，它的主张主要是函数式编程的理念，比如说，你需要知道什么是副作用，什么是纯函数，如何隔离副作用。它的侵入性看似没有Angular那么强，主要因为它是软性侵入。

每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。
Vue可能有些方面是不如React、Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
关于vue.js的引入使用：

01
独立版本
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用  标签引入。
Vue 会被注册为一个全局变量。

02
使用CDN方法

国内还没发现哪一家比较好，目前还是建议下载到本地。
Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
cdnjs :https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

03
NPM方法
本次分享不涉及（如有兴趣可参考：https://www.runoob.com/vue2/vue-install.html）
对于兼容性这方面， Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5特性。但它支持所有兼容 ECMAScript 5 的浏览器。
由于vue对于浏览器的版本有一定的要求，所以在在VUE的实例开发中，了解到银行项目、政府项目都会使用到版本比较老的浏览器，所以在实际开发中，如果是此类用户，建议使用其他前端框架，如互联网公司项目。或对浏览器无特定要求项目等。

Vue的语法：
每个 Vue 应用都需要通过实例化 Vue 来实现。
语法格式如下：
var vm = new Vue({
  // 选项
})
而{{ }} 是用于输出对象属性和函数返回值
简单的例子说明：

url : {{url}}
{{details()}}

var vm = new Vue({
el: '#vue_det',
data: {
         url: "楷林国际"
   },
methods: {
         details: function() {
         return  this.url+ " - 是地址！";
      }
   }
})

简单说明：
Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_det，在 div 元素中：

这意味着改动全部在以上指定的 div 内，div 外部不受影响。
接下来定义数据对象：
data 用于定义属性，实例中有属性为：url
methods 用于定义的函数，可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。

url : {{url}}
{{details()}}

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。
指令是带有 v- 前缀的特殊属性:
例如v-if，这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
“v-if”

内容

参数
参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性
在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
“v-bind”

地址描述

下面讲一下vue的计算属性：
计算属性关键词: computed。
声明了一个计算属性 reversedMessage 。
vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。
computed vs methods的区别
我们可以使用 methods 来替代 computed，效果上两个都是一样的，除了关键字的区别，还有就是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行
下面我写了一个例子能比较明显的了解到两者之间的区别，这里既有computed也有methods，并且连续调用两次，

原始字符串: {{ message }}
测试computed与method区别
computed(依赖缓存)
计算后反转字符串: {{ reversedMessage }}
计算后反转字符串: {{ reversedMessage }}
method(不依赖缓存，使用一次更新一次)
计算后反转字符串: {{ reversedMessage2() }}
计算后反转字符串: {{ reversedMessage2() }}

varcnt=1;
varvm = new Vue({
el: '#app',
data: {
      message: '在线呼叫！'
   },
computed: {
         // 计算属性的 getter
         reversedMessage: function () {
         // `this` 指向 vm 实例
         cnt+=1;
         returncnt+this.message.split('').reverse().join('')
         }
   },
   methods: {
      reversedMessage2: function () {
      cnt+=1;
      returncnt+this.message.split('').reverse().join('')
      }
   }
})

运行后可以清晰的看到cnt这个参数在computed调用两次之后它的数值是未发生变化的而methods在调用两次之后可以明显看到cnt参数的值在累加。
Tips：
v-bind 缩写

v-on 缩写

事件修饰符：
.stop、.prevent、.capture、.self、.once

...

...

按键修饰符：
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

全部的按键别名：.enter、.tab、.esc、.space、.up、.down、.left、.right、.ctrl、.alt
、.shift、.meta、.delete (捕获 "删除" 和 "退格" 键)。

往期话题讨论回顾：

免责声明
本文部分图片来源于互联网网页，其目的为了更好地传达分享内容，版权依旧归原作者所有。如若有涉及侵权请予以告知，我们会尽快在24小时内删除相关内容。谢谢！

觉得这条资讯有帮助？请转发给更多人
关注中科软长沙项目，了解金融保险科技

中科软长沙第一信息平台