vue
基础语法
Vue的options
常用options
-
data 类型:object | function
vue实例对应的数据对象(组件中只接受function) -
el 类型:string | HTMLelement
决定vue实例管理哪一个对象 -
methods 类型:function
vue实例的方法 -
生命周期函数
-
computed
计算属性,需要对数据进行变化再显示。每个计算属性都包含一个setter和getter方法,但一般只设置getter方法。
与methods的对比:computed看作一种属性,而不是方法,且computed有缓存,在其被调用多次,并且其中的data无变化时,直接返回缓存中data,不再重新执行函数进行计算。 -
watch
监听数据的变化。
var vm = new Vue ({
el: "#app",
data: { a = 1 ,
b = "<p>this<p>",
imgURL = "http://img",
isActive = true,
isLine = false,
active = "color",
line = "active"
},
computed: {
//省略了setter
link: function(){
return this.line + ' ' + this.active;
}
//完整形式
//link:{
// set: function(){
// },
// get: function(){
// }
//}
},
methods: {
plusSelf: function(){
this.a++;
}
},
watch:{
a(newValue,oldValue){
}
}
activated(){
//该组件活跃时
}
deactivated(){
//该组件不活跃时
}
#局部组件的注册方式
components:{
cpn:cpnC,
#语法糖形式
cpn2:{
template:`
<div>
<p></p>
</div>
`
}
}
})
v-once
<div v-once>{{a}}</div>
只渲染一次,不会根据数据的改变而改变。
v-html
<div v-html = "b" ></div>
根据html进行解析,然后渲染。
v-text
与v-html相似,但不进行解析,直接根据文本渲染;与mustache相似,但会将文本内容直接覆盖掉。
v-pre
<div>{{a}}</div> =>1
<div v-pre>{{a}}</div> =>{{a}}
将内容原封不动的展示出来,不进行解析。
v-cloak
在vue解析前,元素存在该属性,在解析完成后,该属性自动消失。(主要用于:为其设置style,防止页面在解析html后解析vue前将源代码显示在页面上)
v-bind(:)
动态绑定元素的属性。
<img :src = "imgURL"></img>
<div :class = "{active:isActive,line:isLine}"></div> #动态绑定class
<div :class = "[active,line]"></div> #动态绑定class
v-on(@)
绑定事件监听器。
若方法需要传入参数,但没有传入时(没有小括号),默认传入event,有小括号时传入undefined。
<button @click = "plusSelf"></button>
修饰符:
- .stop 阻止冒泡
#点击button时只会触发btnClick,不会触发divClick
<div @click="divClick">
<button @click.stop="btnClick"></button>
</div>
- .prevent 组织默认事件
#阻止了表单的自动提交
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitClick"></input>
</form>
- .{keyCode|keyAlias} 监听某个键帽的点击
#当回车键keyup时触发事件
<input type="text" @keyup.enter="keyUp"></input>
-
.native 监听组件根元素的原生事件
-
.once 只触发一次回调
v-model
表单和数据进行双向绑定。
与mustache相比,在界面上修改data时,vue中的data也会发生改变。
<input type="text" v-model="line">{{line}}</input>
修饰符:
- .lazy 在敲击回车键或者失去焦点时再进行数据的更新
- .number 由于v-model在更新数据时默认是string类型,该修饰符将其转为number类型。
- .trim 去除更新数据两端的空格
v-show
是否显示元素。
与v-if对比:显示时没有不同,不显示时,v-if的元素不存在于dom中,而v-show只是将元素的display变为none。
v-slot(#)
替换了slot和slot-scope。只能用在template或单独带prop的默认插槽中。
组件
使用步骤
- 创建组件构造器
const cpnC = Vue.extend({
template:`
<div>
<p></p>
</div>
`
})
为使代码清晰,可将template部分抽离出去。
#HTML部分
<template id="cpn">
<div>
<p></p>
</div>
</template>
#JS部分
const cpnC = Vue.extend({
template:"#cpn"
})
- 注册组件
分为全局组件和局部组件,全局组件可以在多个vue实例中使用。局部组件在某个vue实例的options中注册。
Vue.component('my-cpn',cpnC) #全局注册
注册组件还有语法糖写法,即将创建组件构造器与注册组件这两步相融合。
Vue.component('my-cpn',{
template:`
<div>
<p></p>
</div>
`
})
- 使用组件
<div id = "app">
<my-cpn></my-cpn>
</div>
父子组件
创建父组件时注册子组件
const cpnC2 = Vue.extend({
template:`
<div>
<p></p>
<cpn1></cpn1> #可以在父组件中使用子组件
</div>
`,
components:{
cpn1: cpnC1
}
})
由于子组件无法直接访问父组件和vue实例中的数据,故需要在父子组件之间进行通信。
- 父组件向子组件传数据 (props)
#父组件
<div id="app">
<cpn :cmovies="movies" :cmessage="message"></cpn>
</div>
#子组件
<template id="cpn">
<div>
<p>{{cmovies}}</p>
<p>{{cmassage}}</p>
</div>
</template>
const cpn = {
template:'#cpn',
props:['cmovies','cmessage'],
//限制数据的类型,props的对象写法
//props:{
//cmovies:Array,
//cmessage:[String,Number] 多个可能的类型
//设置默认值,但当其为Array或者Object时,default需要为函数
//cmassage:{
//type:String,
//default:'hello',
//required:true 必须传值,否则报错
//}
//}
data(){
return{}
},
methods:{}
}
const vm = new Vue{
el:'#app',
data:{
message:'hi',
movies:['a','b','c']
}
component:{
cpn
}
}
- 子组件向父组件传数据 (event)
#父组件
<div id="app">
#父组件监听子组件发射的事件,默认传参(item)
<cpn @itemClick="cpnClick"></cpn>
</div>
#子组件
<template id="cpn">
<div>
<button v-for="item in categories" @click="btnClick(item)">
{{item.name}}
</button>
</div>
</template>
const cpn = {
template:'#cpn',
data(){
return{
categories:[
{id:'aaa',name:'热门推荐'},
{id:'bbb',name:'热门'},
{id:'ccc',name:'热'},
]
}
},
methods:{
btnClick(item){
//console.log(item);
#子组件发射事件
this.$emit('itemClick',item);
}
}
}
const vm = new Vue{
el:'#app',
data:{},
component:{
cpn
},
methods:{
cpnClick(item){
console.log(item);
}
}
}
- 父访问子($children| $refs)访问子组件对象,使用其方法或数据。
# $children
# 在父组件方法中直接调用
# 但由于子组件位置可能变化,其下标也需要改变
this.$children[0].btnClick();
# $refs
# 在子组件的template中标明ref
<cpn ref="abc"></cpn>
this.$refs.aaa.btnClick();
- 子访问父($parent) 不建议使用,耦合度较高
this.$parent.name;
插槽(slot)
- 基本用法
在原来的基础上增加扩展性。
<div id="app"> #显示画面
#中间的内容替换slot部分 this
<cpn><p>new</p></cpn> => new
//<template v-slot><p>new</p></template>
</div>
<template id="cpn">
<div>
<p>this</p>
//设置默认值
<slot><button>按钮</button></slot>
</div>
</template>
- 具名插槽,准确替换slot部分内容。
<div id="app"> => #显示画面
<cpn><span slot="mid">标题</span></cpn> 左 标题 右
//<template v-slot:"mid"><p>标题</p></template>
</div>
<template id="cpn">
<div>
<slot name="left"><span>左</span></slot>
<slot name="mid"><span>中</span></slot>
<slot name="right"><span>右</span></slot>
</div>
</template>
- 作用域插槽,父级替换内容(父级改变原子组件的展示样式),实际数据由子组件提供
<div id="app">
<cpn>
<template slot-scope="slot">
<span v-for="item in slot.data">{{item-}}</span>
</template>
//<template v-slot:default="slotProps">
// <span v-for="item in slotProps.data">{{item-}}</span>
//</template>
</cpn>
</div>
<template id="cpn">
<div>
<slot :data="languages">
<ul>
<li v-for:"item in languages">{{item}}</li>
</ul>
</slot>
</div>
</template>
const vm = new Vue{
el:'#app',
data:{},
component:{
cpn:{
template:"#cpn",
data(){
return {
languages:["c","c++","c#"]
}
}
}
}
}