Vue简介
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue核心库只关注视图层,不仅易于上手,还便于与第三方库和既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页面应用提供驱动。
Vue实例
Vue.js的核心是一个允许采用简洁的模板语法来声明式将数据渲染进DOM系统。
<div id="app">
<p id="content">{{msg}}</p>
</div>
<script>
var vm=new Vue({
//表示当前Vue实例控制的是页面上的那块区域
el:"#app",
//data属性中存放的是el中要用到的数据
data:{
msg:"欢迎学习Vue"
}
});
</script>
这是一个简单的Vue实例,看起来跟渲染一个字符串模板非常类似,但是Vue在背后做了大量工作。现在数据和DOM已经被建立了关联,所有东西都是响应式的。
Vue指令
v-cloak
这个指令保持在元素上直到关联实例结束编译。和CSS规则如[v-cloak] { display: none }
一起用时,这个指令可以隐藏未编译的Mustache 标签直到实例准备完毕。
<style>
[v-cloak]{
display: none;
}
</style>
<div id="app">
<p id="content" v-cloak>{{msg}}</p>
</div>
不会显示,直到编译结束
v-text
更新元素的textContent。如果要更新部分textContext。需要使用{{Mustache}}插值。
<span v-text="msg">+++</span>
<br> da
<span>++++{{msg}}---</span>
v-html
更新元素的innerHTML。注意:内容按普通HTML插入-不会作为Vue模板进行编译。如果试图使用v-html组合模板,可以重新考虑是否通过组件来替代。
<div v-html="html"></div>
v-bind
动态地绑定一个或多个特性,或一个组件prop到表达式。在绑定class或style特性时,支持其它类型的值,如数组或对象,在绑定prop时,prop必须在子组件中声明。可以用修饰符指定不同的类型。没有参数时,可以绑定到一个包含键值对的对象。注意此时class和style绑定不支持数组和对象。
<input type="button" value="按钮" v-bind:title="mytitle">
data:{
mytitle:'自定义title'
}
.camel修饰符允许在使用DOM模板时将v-bind
属性名称驼峰化,例如SVG的viewBox属性
<svg :view.box.camel="viewBox"></svg>
v-on
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句。如果没有修饰符也可以省略。用在普通元素上时,只能监听原生DOM事件,用在自定义元素组件上时,也可以监听子组件触发的自定义事件。在监听原生DOM事件时,方法以事件为唯一的参数。如果使用内联语句,语句可以访问一个$event
属性:v-on:click="handle('ok', $event)"
。
<button v-on:click="doThis">按钮</button>
methods:{
doThis:function () {
alert("Hello")
}
}
事件修饰符:
- .stop阻止冒泡
- .prevent阻止默认事件
- .capture添加事件侦听器时使用事件捕获机制
- .self只有当事件在该元素本身(比如不是子元素)触发时触发回调
- .once事件只触发一次
v-model
一个组件上的v-model默认会利用名为value的prop和名为input的事件,但是像单选框、复选框等类型的输入控件可能会将value特性用于不同的目的。model选项可以用来避免这样的冲突。
<!--使用v-model指令可以实现表单元素和model中数据的双向绑定-->
<input type="text" style="width: 100%" v-model="something">
data:{
something:"xxx"
}
v-for
可以用v-for
指令基于一个数组来渲染一个列表。v-for
指令需要使用item in items形式的特殊语法,其中items是源数据数组,而item则是被迭代的数组元素的别名
data{
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
<ul id="example-1">
<li v-for="item in items">
{{item.message}}
</li>
</ul>
在v-for块中,可以访问所有父作用域的属性,v-for还支持一个可选的第二个参数,即当前的索引。
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
data{
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
也可以用v-for来遍历一个对象的属性
data:{
object:{
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
可以使用提供的第二个参数为property 名称
<div v-for="(value, name) in object">
{{ name }}: {{ value }}
</div>
还可以用第三个参数作为索引
<div v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</div>
使用v-for迭代数字
<p v-for="count in 4">这是第{{count}}个数字</p>
v-if
v-if指令用于条件性地渲染一块内容,这块内容只会在指令的表达式返回true值的时候被渲染。
<h1 v-if="awesome">Vue is awesome!</h1>
data:{
awesome:true
}
也可以用v-else添加一个else块
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
v-show
用于根据条件展示元素的选项
<h1 v-show="ok">Hello!</h1>
data:{
ok:true
}
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
Vue中使用样式
使用class样式
1.数组
<h1 :class="['red','thin']">这是一个样式引用</h1>
2.在数组中使用三元表达式
<h1 :class="['red','thin',isactive?'active':'']">三元表达式样式引用</h1>
3.数组中嵌套对象
<h1 :class="['red','thin',{’active‘:isactive}]">嵌套对象</h1>
4.直接使用对象
<h1 :class="{red:true,thin:true,active:true,italic:true}">使用对象</h1>
使用内联样式
1.直接在元素上通过:style
的样式,书写样式对象
<h1 :class="{color:'red','font-size':'40px'}">行内样式</h1>
2.将样式对象,定义到data中,并直接引用到.style中
- 在data上定义样式
data{
h1StyleObj:{color:'red','font-size':'40px','font-weight':'200'}
}
- 在元素中,通过属性绑定的形式,将样式对象应用到元素中
<h1 :style="h1StyleObj">引用data样式对象</h1>
3.在:style中通过数组,引用多个data上的样式对象
- 在data上定义样式
data{
h1StyleObj:{color:'red','font-size':'40px','font-weight':'200'},
h1StyleObj2:{fontStyle:'italic'}
}
- 在元素中,通过属性绑定的形式,将样式对象应用到元素中去
<h1 :style="[h1StyleObj,h1StyleObj2]">引用多个样式对象</h1>