一、指令
1.v-text
-更新元素的textVContent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div>{{magss}}</div>
<div v-text="magss"></div>
</div>
<script>
setInterval(function(){new Vue({
el:"#app",
data:{
magss:"sssdsadad",
},
methods:{
}
})},5000)
</script>
</body>
</html>
ps:v-text与“{{}}”的插入值功能是一样的,区别在于延时的时候,v-text不显示任何东西,而“{{}}”显示代码。
延时时:
不延时:
2.v-html
-更新元素的innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div>你看这个插入:{{magess}}</div>
<div v-text="`你看这个插入:${magess}`"></div>
<div v-html="`你看这个插入:${magess}`"></div>
</div>
<script>
new Vue({
el:"#app",
data:{
magess:'来自<<<a href="javascript:;">新华社</a>>>的消息'
},
methods:{
}
})
</script>
</body>
</html>
ps:v-html可以实现传进来的值实现成html里面的标签实现。
3.v-show
-根据表达式之真假值,切换元素的display CSS属性
显示或者隐藏按钮
it is originimal content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
<style>
#pop {
position: fixed;
width: 300px;
height: 100px;
background-color: brown;
top: 50%;
left: 50%;
margin-left: -175px;
margin-top: -50px;
}
#pop>span {
margin-left: 95%;
}
#pop>span:hover {
font-size: 20px;
}
</style>
</head>
<body>
<div id="app">
<button @click="open">检查浏览器版本</button>
<div id="pop" v-show="show">
<span @click="dianji">×</span>
<p>您的浏览器版本过低,请升级到新版浏览器</p>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
show:false
},
methods: {
open() {
this.show = true;
},
dianji() {
this.show = false;
}
}
})
</script>
</body>
</html>
4.v-if
-根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定/组件被销毁并重建
ps:当v-if的值等于true时则显示,false则不显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p v-if="ifvalue1">你看见我了对吧。</p>
<p v-if="ifvalue2">你看不见我哦!</p>
</div>
<script>
new Vue({
el:"#app",
data:{
ifvalue1:true,
ifvalue2:false
},
methods:{
}
})
</script>
</body>
</html>
5.v-else
一为v-if 或者v-else-if 添加“else块. v-else-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="isLogin">
<a href="javascript:;" @click="logins">登录</a>
<a href="javascript:;">注册</a>
</h1>
<h1 v-else>
Welcome dingding, <a href="javascript:;" @click="logout">注销</a>
</h1>
</div>
<script>
new Vue({
el: "#app",
data: {
isLogin: true
},
methods: {
logins() {
alert("登录成功");
this.isLogin = false;
},
logout() {
alert("注销成功");
this.isLogin = true;
}
}
})
</script>
</body>
</html>
通过v-if和v-else的判断进行,点击登录则不显示登录和注册,只显示注销。
6.v-else-if
-表示v-if的"else if 块”,可以链式调用
ABCNot A/B/C
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="typess=='A'">A</div>
<div v-else-if="typess=='B'">B</div>
<div v-else-if="typess=='C'">C</div>
<div v-else-if="typess=='D'">D</div>
</div>
<script>
new Vue({
el:"#app",
data:{
typess:"C"
},
methods:{
}
})
</script>
</body>
</html>
7.v-for
-基于源数据多次渲染元素或模板块。此指令之值,必须使用特定语法alias in expression,为当前遍历的元素提供别名
- {fitem}}
- {i}}-{{item}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="i in arrys">{{i.name}}</div>
</div>
<script>
new Vue({
el: "#app",
data: {
arrys: [
{ name: 'a' },
{ name: 'b' },
{ name: 'c' },
{ name: 'd' }
]
},
methods: {
}
})
</script>
</body>
</html>
编辑
8.v-on
-绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句
-用在普通元素上时,只能监听原生DOM事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件
clickMe
<button @click="funcClick" >clickMe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="but1">弹出东西</button>
<button @click="but2">我到底弹不弹</button>
</div>
<script>
new Vue({
el:"#app",
data:{
},
methods:{
but1(){
alert("我出来啦,我是 v-on:click");
},
but2(){
alert("我出来啦,我是 @click");
}
}
})
</script>
</body>
</html>
ps:v-on:click与@click是一样的,通常使用@click简写。
9.v-once
-只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-once>页面加载完成时间:{{new Date(timer).toLocaleString()}}</h1>
<h1>当前系统时间:{{new Date(timer).toLocaleString()}}</h1>
</div>
<script>
var vm= new Vue({
el:"#app",
data:{
timer:new Date().getTime()
},
methods:{
}
});
setInterval(function(){
vm.timer=new Date().getTime();
},1000)
</script>
</body>
</html>
编辑
ps:当时间在进行刷新几时的时候,v-once可以让时间停止。
10.v-cloak
-这个指令保持在元素上直到关联实例结束编译。
-和CSS规则如[v-cloak] { display: none }一起用时,这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
<style>
[v-cloak]{
display:none
}
</style>
</head>
<body>
<div id="app">
<h1 v-cloak>用户名:{{uname}}</h1>
<h1 v-text="`用户名:${uname}`"></h1>
</div>
<script>
setTimeout(function () {
new Vue({
el: "#app",
data: {
uname: "dingding"
},
methods: {
}
})
}, 5000)
</script>
</body>
</html>
5秒前:
5秒后:
ps:v-cloak必须要和[v-cloak] { display: none }一起用时才能生效,弥补“{{}}”对于数据延时出现的乱码。
11.v-bind
-动态地绑定一个或多个特性,或一个组件 prop到表达式
-在绑定class 或style特性时,支持其它类型的值,如数组或对象
-在绑定prop时,prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型
<a v-bind:href-"linkUrl" >home
<a :href"linkUrl">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
<style>
.active {
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{'active':isActive}"></div>
</div>
<script>
new Vue({
el: "#app",
data: {
isActive: true
},
methods: {
}
})
</script>
</body>
</html>
ps:v-bind:class可以通过isActive来决定是否显现。动态地绑定一个或多个特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{pm25}}</h1>
<h1>{{pm25<100?'1.png':
pm25<200?'2.png':
pm25<300?'3.png':
'4.png'}}</h1>
<img :src="pm25<100?'img/1.png':
pm25<200?'img/2.png':
pm25<300?'img/3.png':
'img/4.png'" alt="">
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
pm25:68
}
})
setInterval(function(){
vm.pm25=parseInt(Math.random()*400);
},1000)
</script>
</body>
</html>
绑定前:
编辑
绑定后:
编辑
12.v-model
-在表单控件或者组件上创建双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="kws"><button @click="search">百度一下</button>
</div>
<script>
new Vue({
el:"#app",
data:{
kws:""
},
methods:{
search(){
console.log(`搜索 ${this.kws} 相关的内容...`)
}
}
})
</script>
</body>
</html>
添加v-model前:
编辑
添加v-model后:编辑
13.v-pre
―跳过这个元素和它的子元素的编译过程。可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译
{{'用户输入的内容为'+userName}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-pre>Vue中采用{{变量}}语法来绑定HTML元素的内容</h1>
</div>
<script>
new Vue({
el:"#app",
data:{
},
methods:{
}
})
</script>
</body>
</html>
添加v-pre前:
添加v-pre后:
二、组件
1.组件化应用构建
允许我们使用小型、自包含和通常可复用的组件构建大型应用。,因为它是一种抽象,允许我们使用小型、自包含和通常可复用的组件构建大型应用。
组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义元素
2.组件的创建和使用
创建组件方式1:
//定义名为todo-item的新组件
Vue.component('todo-item', {
template: '
这是个待办项 '})
·使用组件
创建组件方式2:name.vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
<script>
// 注册
Vue.component("my-counter",{
template:`
<h1>
<p>我是插入的组件</p>
<h1>`
})
</script>
</head>
<body>
<div id="app">
<ul>
<li><my-counter></my-counter></li>
</ul>
</div>
<script>
// 创建根实例
new Vue({
el:"#app"
})
</script>
</body>
</html>
三、复合组件
组件也可以有多个组件构成,我们可以将这个组件称之为复合组件
Vue.component('item',{
template:'
A custom component! '})
Vue.component('my-list',{
template:'
'
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
<script>
// 注册
Vue.component("fu-counter",{
template:`
<h1>
<p>我是插入的组件</p>
<zi-counter></zi-counter>
<h1>`
})
Vue.component("zi-counter",{
template:`<p>我是复合组件</p>`
})
</script>
</head>
<body>
<div id="app">
<ul>
<li><fu-counter></fu-counter></li>
</ul>
</div>
<script>
// 创建根实例
new Vue({
el:"#app"
})
</script>
</body>
</html>
四、组件的生命周期
要求在组件定义一个count
-将count显示在视图中
-在created时将数据初始化为10
-在mounted时启动定时器,每隔0.5s,将数据自增
-在updated时判断数据大于20时,通过this $destroy将vue实例结束掉
首先让我们来看一下经典的vue生命周期示意图:
1、beforeCreate
在实例初始化之后,数据观测和event/watcher时间配置之前被调用。
2、created
实例已经创建完成之后被调用。在这一步,实例已经完成以下的配置:数据观测,属性和方法的运算,watch/event事件回调。然而,挂载阶段还没开始,$el属性目前不可见。
3、beforeMount
在挂载开始之前被调用:相关的render函数首次被调用。
该钩子在服务器端渲染期间不被调用。
4、mounted
el被新创建的 vm.el也在文档内。该钩子在服务端渲染期间不被调用。
5、beforeUpdate
数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前。
你可以在这个钩子中进一步第更改状态,这不会触发附加的重渲染过程。
该钩子在服务端渲染期间不被调用。
6、updated
由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。
当这个钩子被调用时,组件DOM已经更新,所以你现在可以执行依赖于DOM的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。
该钩子在服务端渲染期间不被调用。
7、activated
keep-alive组件激活时调用。
该钩子在服务器端渲染期间不被调用。
8、deactivated
keep-alive组件停用时调用。
该钩子在服务端渲染期间不被调用。
9、beforeDestroy 【类似于React生命周期的componentWillUnmount】
实例销毁之间调用。在这一步,实例仍然完全可用。
该钩子在服务端渲染期间不被调用。
10、destroyed
Vue实例销毁后调用。调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
钩子函数:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>数量:{{count}}</h1>
</div>
<script>
new Vue({
el: "#app",
data: {
count: 0
},
//创建
beforeCreate() {
console.log(`创建组件的data对象之前自动触发...`)
},
created() {
console.log(`创建组件的data对象之后自动触发...`)
this.count = 10;
},
//挂载
beforeMount() {
console.log(`挂载组件内容到页面前自动触发...`)
},
mounted() {
console.log(`挂载组件内容到页面后自动触发...`)
setInterval(() => {
this.count++;
}, 1000)
},
//更新
beforeUpdate() {
console.log(`更新组件的data中的变量前自动触发...`)
},
updated() {
console.log(`更新组件的data中的变量后自动触发...`)
if (this.count > 20) {
this.$destroy();
}
},
//销毁
beforeDestroy() {
console.log(`销毁当前组件前自动触发...`)
},
destroyed() {
console.log(`销毁当前组件后自动触发...`)
}
})
</script>
</body>
</html>
五、自定义指令与过滤器
1.自定义指令
除了默认设置的核心指令( v-model和v-show ),Vue也允许注册自定义指令。注意,在Vue2.0里面,代码复用的主要形式和抽象是组件——然而,有的情况下,你仍然需要对纯DOM元素进行底层操作,这时候就会用到自定义指令。
自定义指令:创建了一个叫做focus的指令
Vue.directive('focus', {})
使用指令:使用指令时,要加上v-,比如v-focus
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
<script>
Vue.directive("focus",{
inserted(domElem){
domElem.focus(); //触发焦点
}
})
</script>
</head>
<body>
<div id="app">
<input type="text" v-focus><button>百度一下</button>
</div>
<script>
new Vue({
el:"#app",
data:{
},
methods:{
}
})
</script>
</body>
</html>
一打开网页,加入自定义指令前:
一打开网页, 加入自定义指令前:
指令定义函数提供了几个钩子函数 :
- bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一 次的初始化动作。
- inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document 中)。
- update:被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定 值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。
- unbind:只调用一次,指令与元素解绑时调用。 -解束缚:只调用一次,指令与元素解绑时调用。
2.过滤器
过滤器的创建和使用
-过滤器的本质就是有返回值的函数
- Vue中支持自定义过滤器,在使用过滤器时支持多重过滤并传参
{fname | uppercasel}
六、组件属性data、props、computed、methods、watch
Data
- Vue 实例的数据对象。Vue将会递归将data的属性转换为getter/setter,从而让data的属性能够响应数据变化。
-注意:
不应该对data属性使用箭头函数(例如data:() => { return{ a: this.myProp }3)。理由是箭头函数绑定了父级作用域的上下文,所以this将不会按照期望指向Vue实例,this.myProp将是undefined
Props
-
props可以是数组或对象,用于接收来自父组件的数据。props可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义校验和设置默认值
Computed
-计算属性将被混入到Vue 实例中。所有getter 和setter的this 上下文自动地绑定为Vue 实例
-注意事项
不应该使用箭头函数来定义计算属性函数(例如aDouble: ()=> this.a 2)。理由是箭头函数绑定了父级作用域的上下文,所以this将不会按照期呈推口格回Vue 实例, this.a将是undefined。*
Methods
- methods将被混入到Vue 实例中。可以直接通过VM实例访问这些方法,或者在指令表达式中使用。方法中的this自动绑定为Vue 实例。
var vm = new Vue({
data: { a: 1 },methods: {
plus: function ) {
this.a++}}
vm.plus()vm.a // 2
Watch
-一个对象,键是需要观察的表达式 ,值是对应回调函数。值也可以是方法名,或者包含选项的对象 。Vue实例将会在实例化时调用$watch(),遍历watch 对象的每一个属性。
var vm = new Vue({
data: {a: 1,b: 2,c: 3],watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
}
)
vm.a=2//->new: 2, old: 1
七、父组件与子组件通信
组件嵌套
-组件中可以引入其他的组件
在Vue.js 中,父子组件的关系可以总结为props down, events up。父组件通过props向下传递数据给子 ,子组件通过events给父组件发送消息
父与子通信
-组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,我们需要通过子组件的props选项。 -组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子组件的道具选项.
-子组件要显式地用props选项声明它期待获得的数据 -子组件要显式地用道具选项声明它期待获得的数据
Vue.component('child',
//声明props
props: ['message'],
//就像data 一样,prop可以用在模板内template: '{{ message }}'
})
父与子通信-1
-在模板中,要动态地绑定父组件的数据到子模板的props,与绑定到任何普通的HTML特性相类似,就是用v-bind。每当父组件的数据变化时,该变化也会传导给子组件
八、子组件与父组件通信
子与父通信
-父组件是使用props传递数据给子组件,但如果子组件要把数据传递回去,应该怎样做?那就是自定义事件!
-使用emit(eventName)触发事件
注意事项
-不能用$on侦听子组件抛出的事件,而必须在模板里直接用v绑定,
子与父通信-1
父组件内:给子组件绑定一个eventName的事件
子组件内:在子组件内触发父组件指定的叫做eventName事件
this.$emit('increment')
九、父子通信
打通父子之间所有数据和方法的共享方法
ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用,引用指向的就是DOM元素;如果用在子组件上,引用就指向组件实例 上,引用就指向组件实例
-父模板:
-父访问子:父组件: this.parent. 子数据/方法名()
打通父子之间所有数据和方法的共享方法-1
-父模板:
speak:function(){
console.log("父组件的方法被调用了");
}
this.$refs.myChild.study();//调用子组件方法
子组件:
this.$parent.speak();//调用父组件方法
study:function(){
console.log("子组件方法被调用了");
}
十、兄弟通信
-有时候非父子关系的组件也需要通信。在简单的场景下,使用 元件个空的Vue实例作为事件传输的中介
var bus = new Vue();
组件a:绑定事件
bus. emit('msgToBrother', 'it is a message')