前端攻坚战

Author：闫玉良 前端三大新框架：Angular.js、React.js、Vue.js。今天我们来磕这个最常用，影响极广的框架：Vue.js。

Vue.js可以作为一个js库来使用，也可以用它全套的工具来构建系统界面，这些可以根据项目的需要灵活选择，所以说，Vue.js是一套构建用户界面的渐进式框架。

Vue的核心库只关注视图层，Vue的目标是通过尽可能简单的 API 实现响应的数据绑定，在这一点上Vue.js类似于后台的模板语言。

Vue也可以将界面拆分成一个个的组件，通过组件来构建界面，然后用自动化工具来生成单页面(SPA - single page application)系统。

更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选』

1.快速上手

还是从最基本的使用开始回顾。

第一步，需要实例化一个 Vue 对象，像下面这样：

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

html 页面中 id 为 app 的标签就可以通过模版语法接收到此消息：

<div id="app">
  {{ message }}
</div>

是不是很眼熟？没错，和我们 python 后端的模版语法一样，所以就不要抵触，开开心心使用吧。

当然，我们还可以在 Vue 实例化过程中定义方法，如下：

var vm = new Vue({
  el: '#app',
  data: {message: 'hello world!'},
  methods:{
    fnChangeMsg:function(){
      this.message = 'hello Vue.js!'
    }
  }
});

我们可以使用下面的页面感受它的 响应式 ：

<div id="app">
  <p>
    {{ message }}
  </p>
  <button @click="fnChangeMsg">
    点击即可改变数据
  </button>
</div>

下面我们分析一下这个阶段发生了什么：

首先，当创建一个 Vue 实例时，它会把 data 对象中所有属性添加到 Vue 的响应式系统中。当这些属性的值发生变化，视图将会匹配到更新之后的值。上面的例子，通过一个方法，改变 data 对象中的属性，使视图中的值随之变化，演示了响应式。

2.模版语法

模版语法的作用就是获取数据，并在 HTML 页面中进行展示。

所有 Vue.js的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

2.1 插入值

1.最最常见的一种是胡子语法，即双大括号，也就是上面示例中的样式。除了可以获取值，大括号中还支持写表达式：

{{ number + 1 }}
{{ ok ? 'YES' : 'No' }}
{{ message.split('').reverse().join('') }}

2.还有一种情况，标签的属性需要获取值，这时就不能再次使用胡子语法了，可以改写为 v-bind 指令：

<a v-bind:href="url" vbind:title="tip">小闫劝你多喝热水</a>

2.2 指令

Vue 中指令就是带有前缀 v- 前缀的特殊属性。

指令属性的值预期是单个JavaScript表达式，指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

常见的指令有 v-bind、v-if、v-on 和 v-for。下面举两个例子进行演示即可：

<!-- 根据 ok 的布尔值来插入/移除 <p> 元素 -->
<p v-if="ok">
  是否显示这一段
</p>

<!-- 监听按钮的 click 事件来执行 fnChangeMsg 方法 -->
<button v-on:click="fnChangeMsg">
  按钮
</button>

2.3 缩写

v-bind 和 v-on 事件这两个指令因为经常的使用，所以提供了简写的方式：

<!-- 完整的语法形式 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 完整的语法形式 -->
<button v-on:click="fnChangeMsg">
  按钮
</button>

<button @click="fnChangeMsg">
  按钮
</button>

2.4 Class 属性设置

设置元素的 class 属性可以使用 v-bind 指令。因为它们的属性值可以是表达式，vue.js在这一块做了增强。表达式结果除了是字符串之外，还可以是对象或者数组。

2.4.1 对象的情况

<div class="static" v-bind:class="{active:isActive,'text-danger':hasError }"></div>

data 的属性值是：

data: {
  isActive: true,
  hasError: false
}

最终渲染的效果：

<div class="static active"></div>

也可以给 v-bind:class 传一个对象引用

<div v-bind:class="classObject"></div>

data 属性值可以写成：

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

2.4.2 数组的情况

<div v-bind:class="[activeClass, errorClass]"></div>
......

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

最终渲染为：

<div class="active text-danger"></div>

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

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

即当 isActive 值为 ture 时，属性为 activeClass，否则属性值为 ''

Js 的三元表达式：条件 ? 为真时的结果 : 为假时的结果

2.5 条件

一般通过条件指令来控制元素是显示还是隐藏，是创建还是销毁。

虽然语法有些许陌生，但是永远逃不了 if 、else if 、else 这三个东西，所有语言都是如此。那么我们来分情况看一下这三种情况如何书写：

2.5.1 v-if

v-if 可以控制元素的创建或者销毁

<h1 v-if="ok">Yes</h1>

2.5.2 v-else

v-else 指令来表示 v-if 的 else 块，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

2.5.3 v-else-if

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

2.5.4 v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法和 v-if 大致一样，但是它不支持 v-else ,它和 v-if 的区别是，它制作元素样式的显示和隐藏，元素一直是存在的：

<h1 v-show="ok">Hello!</h1>

2.6 列表循环

数一数，常用的指令还有俩，那快解决吧。

一种常用的情况–列表渲染，即通过遍历数组或者对象，渲染到页面中。这时就需要用到一个指令 v-for。同样我们通过数组和对象两种情况进行演示：

遍历数组

<ul id="example-1">
  <li v-for="item in items">
    {{ item }}
  </li>
</ul>

vue对象创建如下：

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: ['foo','bar']
  }
})

如果想加上索引值，可以加上第二个参数

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ index }} - {{ item.message }}
  </li>
</ul>

遍历对象

也可以用 v-for 通过一个对象的属性来迭代

<ul id="v-for-object">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

如果想加上对象属性名，可以加上第二个参数

<ul id="v-for-object">
  <li v-for="(value,key) in object">
    {{ key }}-{{ value }}
  </li>
</ul>

2.7 事件相关

2.7.1 事件绑定方法

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

事件的处理，简单的逻辑可以写在指令中，复杂的就需要在 vue 对象的 methods 属性中指定处理函数。

<div id="example-1">
  <!-- 在指令中写处理逻辑 -->
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
......
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

methods 属性中指定处理函数：

<div id="example-2">
  <!-- greet 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>
......

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function () {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
    }
  }
})

2.7.2 事件修饰符

实际开发中，事件绑定有时候牵涉到阻止事件冒泡以及阻止默认行为，在 vue.js 可以加上事件修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

打赏