1. 简介
是前端三大新框架:Angular.js
、React.js
、Vue.js
之一,Vue.js目前的使用和关注程度在三大框架中稍微胜出,并且它的热度还在递增。
2. 下载地址
Vue.js
使用文档已经写的很完备和详细了,通过以下地址可以查看:
https://cn.vuejs.org/v2/guide/
vue.js
如果当成一个库来使用,可以通过下面地址下载:
https://cn.vuejs.org/v2/guide/installation.html
3. Vue实例
附:vue实例化对象中常见的参数
data: 页面中需要的数据, 可以通过这个属性进行初始化, 进而赋值到 HTML 页面去
methods: 可以给当前vue对象添加方法, 一般我们都会把方法放在这个对象里面
computed: 后面会学到, 这个是计算属性, 我们可以给data里面的值添加一些管理,放在这里
watch: 如果需要监控data中的某些属性值, 可以在watch中添加监听方法.
4. Vue模版语法
插入值:
<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:
<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>