style的绑定
<div id="app">
<!--绑定单个类样式-->
<div v-bind:class="{active:isActive}"></div>
<!--绑定多个类样式-->
<div v-bind:class="{active:isActive,bd:hasBorder}"></div>
<!--使用对象的方式绑定类样式-->
<div v-bind:class="classObject"></div>
<!--使用数组绑定-->
<div v-bind:class="[classA,classB]"></div>
<!--三元表达式-->
<div v-bind:class="[classA, isB ? classB : '']"></div>
<!--内联样式的绑定-->
<div v-bind:style="{fontSize: size + 'px', backgroundColor: bgcolor, width: width}">
vue 内联样式的绑定
</div>
</div>
//样式的绑定
1. v-bind:class="{active:isActive}
当绑定的数据isActive的值为true时,就会为该元素添加类样式
2. v-bind:class="{active:isActive,bd:hasBorder}"
支持混合类样式绑定,即同时绑定多个类样式
3. v-bind:class="classObject"
支持使用对象绑定类样式
4. v-bind:class="[classA,classB]"
5. <div v-bind:class="[classA, isB ? classB : '']">
当 v-bind:style 使用需要厂商前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。
-->
<script>
var vm = new Vue({
el: '#app',
data: {
isActive: true,
hasBorder: true,
classObject: {
active: true,
bd: true
},
//内联样式
size: 19,
width: 200,
bgcolor: 'red',
//数组形式
classA: "a",
classB: 'b',
isB: true
}
})
</script>
条件渲染
<div id="app">
<!--在这里加入模型数据-->
{{ message }}
<!--这里 v-if 指令将根据表达式 greeting 值的真假删除/插入 <p> 元素。-->
<p v-if="greeting">Hello!</p>
<!--bool值可以使条件表达式-->
<p v-if="Math.random()>0.5">根据随机值判断是否显示</p>
<!--使用v-if配合template可以实现模板渲染-->
<template v-if='bool'>
<h1>{{header}}</h1>
<p>{{paragraph}} 1</p>
<p>{{paragraph}} 2</p>
<ul>
<li v-for="data in array">{{data}}</li>
</ul>
</template>
</div>
<script>
var viewModel = {
//模型数据的初始化
message: 'hello world!',
greeting:true,
bool:true,
header:"这是一个标题",
paragraph:"这是一个段落",
array:[1,2,3,4]
}
// viewModel 连接模型和数据库
var vm = new Vue({
el: '#app',
data: viewModel,
})
</script>
列表渲染
<div id="app">
<!--view-->
<ul>
<span v-for="n in 10">{{n}}</span>
</ul>
<ul>
<!--简单的列表渲染-->
<li v-for='data in liData1'>
{{data}}
</li>
</ul>
<ul>
<!--复杂的列表渲染-->
<li v-for='data in liData2'>
{{data.text}}
</li>
</ul>
<ul>
<!--添加index-->
<li v-for="(data,index) in liData2">
{{data.text}}=======index===={{index}}
</li>
</ul>
<!--模板语法-->
<ul>
<h2>模板渲染</h2>
<template v-for="item in items">
<li>{{ item.name }}</li>
<li class="divider">{{item.age}}</li>
</template>
</ul>
</div>
<script>
// model
var dataModel = {
num: 10,
liData1: [1, 2, 3],
liData2: [{
text: "这是一段文本"
}, {
text: "这是一段文本"
}, {
text: "这是一段文本"
}, {
text: "这是一段文本"
}],
items: [{
name: 1,
age: 1
}, {
name: 2,
age: 2
}]
}
// viewModel
var app = new Vue({
el: '#app',
data: dataModel
})
</script>
指令总结
v-bind
可以绑定属性,包括class style,而已省略,使用:替代
在1vue.0中有三种修饰符,.sync,.once,.camel,在2.0中能够废弃了前面两个
.camel将绑定的特性的名称转化为驼峰法则命名
v-model
随着表单控件的不同而有所不同
可以添加修饰符
.lazy .number .trim
v-if v-else-if v-else v-show
可以配合模板使用
v-if和v-show两者都可以实现元素的状态切换,但是两者存在一些区别
v-if根据判断条件决定是否渲染,如果条件为假,不进行任何操作
v-show无论如何都会进行模块的渲染,只是简单的基于css 的切换
一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。 因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。
v-for
可以配合模板使用,也可以单独进行列表和表格的渲染
v-on
进行事件的绑定,可以省略,使用@替代
类似于原生js的事件绑定的方式
- 获取dom元素
- 进行事件的添加
- 添加事件处理函数
v-text
绑定文本
v-html
绑定html标签
v-once
不需要表达式
只绑定一次,数据修改时,模型上面的数据不会再动态渲染到页面上
v-pre
不需要表达式
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
v-cloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
自定义指令
除了内置指令，Vue.js 也允许注册自定义指令。自定义指令提供一种机制将数据的变化映射为 DOM 行为。 可以用 Vue.directive(id, definition) 方法注册一个全局自定义指令，它接收两个参数指令 ID 与定义对象。
也可以用组件的 directives 选项注册一个局部自定义指令。
全局自定义指令
<div id="app">
<p>页面载入时，input 元素自动获取焦点：</p>
<input v-focus>
</div>
<script type="text/javascript">
//注册一个全局自动以的指令 v-focus
Vue.directive('focus', {
//绑定的元素插入到父节点时调用
inserted: function(el) {
//聚焦元素
el.focus()
}
})
//创建vue的实例
var vm = new Vue({
el: "#app"
})
</script>
局部自定义指令
<div id="app">
<p>页面载入时，input 元素自动获取焦点：</p>
<input v-focus>
</div>
<script>
// 创建根实例
new Vue({
el: '#app',
directives: {
// 注册一个局部的自定义指令 v-focus
focus: {
// 指令的定义,当指定的元素绑定到父元素时调用
inserted: function(el) {
// 聚焦元素
el.focus()
}
}
}
})
</script>
钩子函数及其参数
1.0版本中的钩子函数
bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新
unbind: 只调用一次， 指令与元素解绑时调用。
2.0新增的钩子函数
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
钩子函数
<div id="app">
<div v-if='message'>
<input type="text" v-my-directive="message" v-model='message'/>
</div>
</div>
<script>
//指令名称 有了指令 能干什么
Vue.directive('my-directive', {
//第一次绑定的时候调用 只调用一次
bind: function(el, binding, vnode, oldnode) {
console.log('bind ', arguments)
},
//被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）
inserted: function(el) {
console.log("inserted")
},
//更新的时候调用
update: function() {
console.log('updata')
},
//解绑定的时候调用
unbind: function() {
console.log('unbind ', arguments)
},
//组件完成一个周期调用
componentUpdated: function() {
console.log("componentUpdated")
}
})
var vm = new Vue({
el: '#app',
data: {
message: "hello"
}
})
vm.$data.message = 1000;
</script>
钩子函数的参数和binding参数的属性
钩子函数的四个参数和binding参数的六个个属性
<div id="app">
<input type="text" v-focus="message" v-model='message' />
</div>
<script>
Vue.directive('focus', {
//自定义指令的其中一个钩子函数:bind 钩子函数有四个参数
bind: function(el, binding, vnode,oldnode) {
//el : element
console.log(el)//div id=app
//六个属性
console.log(binding.name)//focus
//:后面
console.log(binding.arg)//hello---arguments
console.log(binding.modifiers)//{a:true,b:true}
console.log(binding.expression)//message
console.log(binding.value)//菜鸟教程!
console.log(binding.oldValue)//只有在数据更新的时候才有
},
update:function(el,binding){
console.log(el)
console.log(binding.value)
console.log(binding.oldValue)
}
})
var vm = new Vue({
el: '#app',
data: {
message: '菜鸟教程!'
}
})
vm.$data.message = "1000"
</script>
vue2.0中的变化
钩子函数
1.0中
bind：只调用一次，在指令第一次绑定到元素上时调用。
update： 在 bind 之后立即以初始值为参数第一次调用，之后每当绑定值变化时调用，参数为新值与旧值。
unbind：只调用一次，在指令从元素上解绑时调用。
函数的参数/实例属性
1.0中
所有的钩子函数将被复制到实际的指令对象中，钩子内 this 指向这个指令对象。这个对象暴露了一些有用的属性：
el: 指令绑定的元素。
vm: 拥有该指令的上下文 ViewModel。
expression: 指令的表达式，不包括参数和过滤器。
arg: 指令的参数。
name: 指令的名字，不包含前缀。
modifiers: 一个对象，包含指令的修饰符。
descriptor: 一个对象，包含指令的解析结果。
网友评论