Vue2.x 学习

目录

Vue2.0 介绍

简介

实例

属性

组件

指令

生命周期

浏览器版本要求

安装

调试

script 标签引入

NPM安装

命令行工具 (CLI)

对不同构建版本的解释

---

Vue2.0 介绍

简介

Vue 是一套用于构建用户界面的渐进式框架。

MVVM【Model-ViewModel-View】框架模式可以理解为一个网站全栈开发的基本模式MVC【Model-Controller-View】里的Model和Controller被粗划分为MVVM里的Model【因为MVVM可以说是一套前端开发框架模式，所以后端可以视作一个黑箱笼统概括】，而MVC里的View【视图层】被细分为ViewModel和View【即新的View主要用于模板数据展示，而ViewModel则负责双向数据绑定View和Model，例如通过数据 渲染【rendering】 View，并监听View里的事件触发和属性修改等变化，需要跟后台程序交互的则跟后台程序交互】。

Vue 的核心库只关注视图层【注意这里的视图层更应该被理解为MVVM框架里的ViewModel，而不是MVC里的View】，易于学习及与第三方库或既有项目整合。

Vue 提供了一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果。

实例

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。当创建一个 Vue 实例时，可以传入一个选项对象。

示例代码：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="msg">
  {{message}}
</div>

<script>
  var app =new Vue({
    el:'#msg',
    data:{
      message:'Hello World.'
    }
  })
</script>

属性

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

示例代码：

var data={id:1};
var vm=new Vue({
  data:data
});
console.log(vm.id);	//1
vm.id=3;
console.log(data.id);//3

Vue 会在初始化实例时对 property 执行 getter/setter 转化。当Vue实例创建后，如果还给Vue实例添加新的属性，那么修改其值时，不会触发视图的响应【更新】。因此在创建Vue实例时，可以给以后会用到的一些变量设置初始值。

示例代码：

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

Vue 里设置有一些带前缀$的属性【property】与方法，以便与用户定义的属性和方法区分开来。另外，可使用 Object.freeze()阻止修改现有的属性，也意味着响应系统无法再追踪变化。

示例代码：

<div id="msg">
  {{id}}:{{str}}
  <button v-on:click="id=3,str='新的字符串'">点击</button>
</div>
<script>
  var data={id:1,str:'字符串'};
  //Object.freeze(data);
  var vm=new Vue({
    el:'#msg',
    data:data
  });
  console.log(vm.$el===document.getElementById('msg')); //true
  console.log(vm.$data===data); //true

  vm.$watch('id',function(newValue,oldValue){
    //id值被修改后的回调函数处理代码
    console.log(newValue); //3
    console.log(oldValue); //1
  })
</script>

组件

在 Vue 里，所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。一个Vue组件本质上是一个拥有预定义选项的一个 Vue 实例。

Vue 组件非常类似于自定义元素【Web 组件规范的一部分】，Web Components 规范已经完成并通过，但未被所有浏览器原生实现。而Vue 组件在所有支持的浏览器 (IE9 及更高版本) 之下表现一致。必要时，Vue 组件也可以包装于原生自定义元素之内。

Vue 组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。虽然 Vue 内部没有使用自定义元素，不过在应用使用自定义元素、或以自定义元素形式发布时，依然有很好的互操作性。Vue CLI 也支持将 Vue 组件构建成为原生的自定义元素。

给自定义组件命名时，注意不要用大写字母，会导致报错。

示例代码：

<div id="test">
  <mycomponent v-for="item in datalist" v-bind:aprop="item" v-bind:key="item.id"></mycomponent>
</div>
<script>
  Vue.component('mycomponent',{
    props:['aprop'],
    template:'<p>{{aprop.name}}</p>'
  });

  new Vue({
    el:'#test',
    data:{
      datalist:[
        {id:1,name:'小明'},
        {id:2,name:'中明'}
      ]
    }
  })
</script>

Vue里的prop类似于自定义属性，一个作用是方便在父作用域里将数据传输给子组件。父作用域里提供数据【如创建Vue实例时提供数据】，子组件通过prop接口拿到数据后可以根据数据对页面进行复杂多变的渲染，而这不会影响到父单元【子单元和父单元实现了解耦（减少代码耦合）】。

很多应用界面都可以抽象为一个组件树。Vue 里可以使用小型、独立和通常可复用的组件构建大型应用。在一个大型应用中，有必要将整个应用程序划分为组件，以使开发更易管理。

指令

指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。指令会在渲染的 DOM 上应用特殊的响应式行为。

为了让用户和应用进行交互，可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法。

示例代码：

<div id="test">
  <p>{{str}}</p>
  <button v-on:click="changeStr">点击反转</button>
</div>
<script>
var data={str:"str1 str2 str3"};
var vm=new Vue({
  el:'#test',
  data:data,
  methods:{
    changeStr:function(){
      this.str=this.str.split('').reverse().join('');
    }
  }
})
</script>

v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

示例代码：

<div id="test">
  <p>表单输入框输入的信息是：{{message}}</p>
  <input v-model="message" />
</div>
<script>
var data={message:""};
var vm=new Vue({
  el:'#test',
  data:data
})
</script>

生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

生命周期钩子的 this 上下文指向调用它的 Vue 实例。

Vue生命周期的过程可以理解为：

new Vue()->初始化 事件和生命周期->【beforeCreate】->初始化 注入和响应->【created】->将Vue实例挂载到Dom 元素上->编译模板->【beforeMount】->将Vue实例的挂载目标转变成可以访问的【用Vue实例的$el替换el】->【mounted】->Mounted【已完成】{->监听到数据改变时->【beforeUpdate】->虚拟DOM元素重新渲染和打补丁->【updated】->Mounted【已完成】}->【beforeDestroy】->解绑指令和事件监听器，销毁子实例->Destroyed->【destroyed】

示例代码：

<script>
var vm=new Vue({
  data: {
    number:1
  },
  created:function(){
    this.number=2;
  }
})
console.log(vm.number); //2
</script>

浏览器版本要求

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

如果可以不用兼容IE8及以下版本，则需要检测用户浏览器版本，版本过低就给出提示【浏览器版本过低，可以尝试去下载Firefox 52.0版本浏览器来访问(附带一个下载链接)】。

示例代码：

(function(w){if(!("WebSocket"in w&&2===w.WebSocket.CLOSING)){
    //给出提示弹窗
}}(window));

如果非要兼容IE8版本，那么不建议使用Vue框架，可以尝试使用avalon2前端框架。

安装

调试

在使用 Vue 时，建议在浏览器上安装 Vue Devtools，方便审查和调试 Vue 应用。

script 标签引入

直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。

开发版本 包含完整的警告和调试模式。

生产版本 删除了警告。

对于制作原型或学习，可以这样使用Vue2最新版本：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

对于生产环境，推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

注意：

        请确认了解不同构建版本并在发布的站点中使用生产环境版本，把 vue.js 换成 vue.min.js。这是一个更小的构建，可以带来比开发环境下更快的速度体验。

NPM安装

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

示例代码：

# 最新稳定版
$ npm install vue

命令行工具 (CLI)

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了开箱即用的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。

对不同构建版本的解释

UMD

可以通过 <script> 标签直接用在浏览器中。

术语

    完整版：同时包含编译器和运行时的版本。

    编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。

    运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

vue.js【生产环境用vue.min.js】：完整版的 UMD 版本。

vue.runtime.js【生产环境用vue.runtime.min.js】：运行时 UMD 版本。

如果需要在客户端编译模板【例如 传入一个字符串给 template 选项，或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板】，就将需要使用完整版。

当使用 vue-loader 或 vueify 的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript，在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。

因为运行时版本相比完整版体积要小大约 30%，所以应该尽可能使用这个版本。如果仍然希望使用完整版，则需要在打包工具里配置一个别名。

CommonJS

CommonJS 版本用来配合老的打包工具比如 Browserify 或 webpack 1。

vue.common.js：完整版。

vue.runtime.common.js：只包含运行时版。

需要自行将最终的包进行压缩。

ES Module (基于构建工具使用)

为打包工具提供的 ESM：为诸如 webpack 2 或 Rollup 提供的现代打包工具。

vue.esm.js：完整版。

vue.runtime.esm.js：只包含运行时版。

需要自行将最终的包进行压缩。

ES Module (直接用于浏览器)

为浏览器提供的 ESM (2.6+)：用于在现代浏览器中通过 <script type="module"> 直接导入。

vue.esm.browser.js【生产环境用vue.esm.browser.min.js】：完整版。