vue.js简介
之前都在用layui做项目,今后我将使用vue。
vue官网:https://cn.vuejs.org/
文档:https://cn.vuejs.org/v2/guide/
Github:https://github.com/vuejs/vue
vue的特点
Vue的核心库只关注视图层,Vue的目标是通过尽可能简单的 API 实现响应的数据绑定,在这一点上Vue.js类似于后台的模板语言。Vue也可以将界面拆分成一个个的组件,通过组件来构建界面,然后用自动化工具来生成单页面(SPA - single page application)系统。
引入veu.js
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Vue实例
每个Vue应用都是通过实例化一个新的Vue对象开始的:
window.onload = function(){
var vm = new Vue({
el:'#app',
data:{message:'hello world!'}
});
}
......
<div id="app">{{ message }}</div>
其中,el属性对应一个标签,当vue对象创建后,这个标签内的区域就被vue对象接管,在这个区域内就可以使用vue对象中定义的属性和方法。
数据与方法
当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其data对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。还可以在Vue实例中定义方法,通过方法来改变实例中data对象中的数据,数据改变了,视图中的数据也改变。
window.onload = function(){
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.js模板语法
模板语法指的是如何将数据放入html中,Vue.js使用了基于 HTML的模板语法,允许开发者声明式地将DOM绑定至底层 Vue 实例的数据。所有 Vue.js的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。
插入值
<span>Message: {{ msg }}</span>
在标签的属性中插入值
<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>
指令
指令 (Directives) 是带有“v-”前缀的特殊属性。指令属性的值预期是单个JavaScript表达式,指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM。常见的指令有v-bind、v-if、v-on。
<!-- 根据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>
Class 与 Style 绑定
使用v-bind指令来设置元素的class属性或者sytle属性,它们的属性值可以是表达式,vue.js在这一块做了增强,表达式结果除了是字符串之外,还可以是对象或者数组。
class绑定
对象语法
可以给v-bind:class传一个对象,以动态的切换class
<div class="static" v-bind:class="{active:isActive,'text-danger':hasError }"></div>
// data属性值如下
data: {
isActive: true,
hasError: false
}
渲染效果:
也可以给v-bind:class传一个对象引用
data属性值可以写成:
data: {
classObject: {
active: true,
'text-danger': false
}
}
数组语法
可以给v-bind:class传一个数组,以应用一个 class 列表
<div v-bind:class="[activeClass, errorClass]"></div>
......
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
渲染效果
如果你也想根据条件切换列表中的 class,可以用三元表达式:
不过,当有多个条件class时这样写有些繁琐。所以在数组语法中也可以使用对象语法:
style绑定
对象语法
<div v-bind:style="{color: activeColor, fontSize: fontSize + 'px' }"></div>
//
data数据如下:
data: {
activeColor: 'red',
fontSize: 30
}
也可以给v-bind:style传一个对象引用
<div v-bind:style="styleObject"></div>
data数据如下:
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
数组语法
v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上:
条件渲染
通过条件指令可以控制元素的创建(显示)或者销毁(隐藏),常用的条件指令如下:
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>
列表渲染
v-for
通过v-for指令可以将一组数据渲染到页面中,数据可以是数组或者对象,v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名。
变量数组
<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>
exit(⛱)