vue.js 从基础到实战(汇总)

vue.js 从基础到实战

---

Vue.js 介绍

什么是vue

vue一词是法语，同英语中的view。
vue.js是一套构建用户界面的MVVM框架。vue的核心库只关注视图层，经常与其他库或者已有的项目整合

vue的目的

1). 解决数据绑定问题
2). vue框架生产的主要目的是为了开发大型单页应用(SPA:single page appliacation)，对移动端支持较好，PC端也支持，而angular对PC端支持好，移动端支持不是很好
3). vue支持组件化（方便复用），也就是将页面封装成若干个组件，采用积木式编程，使页面的复用度达到最高。实现一次开发多次复用的目的

SPA简介 ：在制作APP时，需要运用Android程序员，iOS程序员和.net程序员（Windows phone），很浪费财力物力，于是人们想用HTML5开发APP，但是遇到一个问题：从一个页面调到另一个页面会消耗很长的时间。解决方法是将APP所用到的所有页面构建出来放到一个网页上，根据JavaScript按照一定的规则来控制到底显示哪一个页面，所有切换通过router完成，这就是单页面应用。所以SPA主要是解决H5做APP卡顿的问题。

vue的特性

1). MVVM模型
2). 组件化
3). 指令系统
4). vue.js从2.0开始支持虚拟DOM，vue.js1.0操作的是真实的DOM，而不是虚拟的DOM（虚拟DOM可以提升页面的刷新速度）

MVVM模式 :
  M：model 业务模式 用处：处理数据，提供数据
  V：view 用户界面，用户视图
  业务模式model中的数据发生改变时，用户视图view也随之改变；用户视图view改变时，业务模式model中的数据也可以发生改变

vue 入门

1.) vue.js和vue.min.js

vue.js是完整的vue文件，包括换行，空格，注释等，一般用于开发使用
vue.min.js是压缩之后的vue文件，在功能上与vue.js无差别，但它是压缩过的，文件比较小，没有注释，也将错误调试信息关闭了，它的下载速度更快，一般用于线上项目

2.) vue.js是一个js库，直接在外部引入即可

3.) vue.js提供了Vue类，它是一个对象

var app = new Vue({});

4.) 对象参数里常用的两个属性：el和data

var app = new Vue({
    el : '#app',    // 管理id为app的元素
    data : {}    // data的核心作用是存放显示在页面中的数据，data必须是一个对象

})

var app = new Vue({
    el : '.app'        // 管理class为app的元素
})

5.) 创建一个实例

    {{ message }}        


var app = new Vue({
    el : '#app',
    data : {
        message : 'hello world'    
    }
})

实例解析：
  在用户界面view中，通过{{ }}的形式将data中的数据显示在页面中
而在用户界面中，{{ }}绑定的是data的key值（这里是message），而页面中显示的是该key的value值（这里是hello world）

app这个变量会代理vue中data的数据，所以我们访问data中的数据时，直接用app.message就可以了

Vue.js 计算属性

为什么使用计算属性？

模板内的表达式是非常便利的，但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

{{ message.split('').reverse().join('') }}

在这种情况下，模板不再简单和清晰。在意识到这是反向显示 message 之前，你不得不再次确认第二遍。当你想要在模板中多次反向显示 message 的时候，问题会变得更糟糕。
这就是对于任何复杂逻辑，你都应当使用计算属性的原因。

基础例子
注: Vue 中 computed 是实时计算的意思。

 
原始的消息 : "{{ message }}"
 
反转的消息: "{{ reversedMessage }}"

计算属性 和 Methods（方法）

我们可以通过调用表达式中的 method 来达到同样的效果：

 
原始的消息 : "{{ message }}"
 
反转的消息: "{{ reversedMessage() }}"

我们可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果，两种方式确实是相同的。
然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
一个比较例子

computed:{
    now: function (){
        return Date.now();
    }
}

相比而言，只要发生重新渲染，method 调用总会执行该函数。
我们为什么需要缓存？假设我们有一个性能开销比较大的的计算属性 A，它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。
如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用 method 替代。

计算属性 vs Watched 属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：watch 属性。
当你有一些数据需要随着其它数据变动而变动时，你可以使用 watch。然而，通常更好的想法是使用 computed 属性而不是命令式的 watch 回调。细想一下这个例子：

{{ fullName }}

上面代码是命令式的和重复的。将它与计算属性的版本进行比较：

var vm = new Vue({

  el: '#demo',

  data: {

    firstName: 'Foo',

    lastName: 'Bar'

  },

  computed: {

    fullName: function () {

      return this.firstName + ' ' + this.lastName

    }

  }

})
vm.$data.firstName = 'hi..';

好得多了，不是吗？

Vue.js Class 与 Style 绑定

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性 ，我们可以用v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时， Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

class绑定

普通绑定

 test...

对象语法绑定

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

上面的语法表示 class active 的更新将取决于数据属性 isActive 是否为真值 。
你可以在对象中传入更多属性用来动态切换多个 class。此外， v-bind:class 指令也可以与普通的 class 属性共存。如下模板：

如下 data ：
data: {
  isActive: true,
  hasError: false
}

渲染为：

当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true ， class列表将变为 "static active text-danger" 。
你也可以直接绑定数据里的一个对象：

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

渲染的结果和上面一样。我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式：

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active : this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal',
    }
  }
}

数组语法

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为：

如果你也想根据条件切换列表中的 class，可以用三元表达式：

此例始终添加 errorClass ，但是只有在 isActive 是 true 时添加 activeClass。
不过，当有多个条件 class 时这样写有些繁琐。可以在数组语法中使用对象语法：

绑定内联样式style

对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS，其实它是一个 JavaScript 对象。 CSS 属性名可以用驼峰式 (camelCase) 或 (配合引号的) 短横分隔命名 (kebab-case)：

data: {
  activeColor: 'red',
  fontSize: 30
}

直接绑定到一个样式对象通常更好，让模板更清晰：

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

同样的，对象语法常常结合返回对象的计算属性使用。

自动添加前缀

当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

多重值

从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

这会渲染数组中最后一个被浏览器支持的值。在这个例子中，如果浏览器支持不带浏览器前缀的 flexbox，那么渲染结果会是 display: flex。

Vue.js 条件渲染

v-if

  
Yes

在