前端框架之一:Vue

1.  简介

Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和关注程度在三大框架中稍微胜出，并且它的热度还在递增。

2. 下载地址

文档及下载 Vue

Vue.js使用文档已经写的很完备和详细了，通过以下地址可以查看：

https://cn.vuejs.org/v2/guide/

vue.js如果当成一个库来使用，可以通过下面地址下载：

https://cn.vuejs.org/v2/guide/installation.html

3. Vue实例

附:vue实例化对象中常见的参数

• el: 关联 HTML 部分的标签, 使 vue 中的内容能够加载到 HTML里面去

• data: 页面中需要的数据, 可以通过这个属性进行初始化, 进而赋值到 HTML 页面去

• methods: 可以给当前vue对象添加方法, 一般我们都会把方法放在这个对象里面

• computed: 后面会学到, 这个是计算属性, 我们可以给data里面的值添加一些管理,放在这里

• watch: 如果需要监控data中的某些属性值, 可以在watch中添加监听方法.

4. Vue模版语法

插入值:

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

如果是标签的属性要使用值，就不能使用“Mustache”语法，需要写成使用v-bind指令：

<a v-bind:href="url" v-bind:title='tip'>百度网</a>

插入的值当中还可以写表达式：

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

<a v-bind:href="url">链接文字</a>

指令:

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


<!-- 监听按钮的click事件来执行fnChangeMsg方法 -->

<button v-on:click="fnChangeMsg">按钮</button>

缩写:

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

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

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

<!-- 缩写 -->
<button @click="fnChangeMsg">按钮</button>

5. vue的计算属性与监听属性

计算属性:

监听属性:

6.条件渲染

v-if:

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

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

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>

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>

v-show:

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

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