目录
vue
在vue中,他会使用虚拟dom来调用内部,当时v-if v-else的时候,他会复用一些已有的信息,如果不想被复用的话,可以给加上key值,只要两个的key值不一样,就不会复用
v-show
和v-if查不多,区别就是当判断条件是false的时候,v-if会直接删掉那个元素,而v-show则是给元素增加了行内样式display=“none”
当切换频率不是很高的时候,使用v-if,如果切换频率非常高的话,使用v-show,因为v-show不会删掉元素,会让性能更高
v-for
可以遍历数组和对象(较少)
第二个参数是下标值
遍历对象的时候,一个参数就只是value,如果是两个参数的时候,第二个参数是key,如果想要获取index,那么第三个参数就是下标值
组件key
官方推荐使用v-for的时候,建议加上key属性(为了更好的复用)
解释:v-for一般是在遍历数组,如果在不绑定key的情况下,想数组中插入数据,他会把后面的全部删掉,再重新创建,这样无疑是效率非常低的,这个时候,如果使用key,那么他就不会删掉那些没有改变过的数据,会提升效率,key必须要是不一样的内容,这样才会让key的存在有意义,一般key的内容就是item,这样可以更好的匹配
key的作用是为了各高效的更新虚拟dom
可以做到响应式的方法:
push(), shift(), unshift(), splice(), sort(), reverse()
vue的set方法可以直接修改
Vue.set(要修改的对象,索引值, 修改后的值)
v-model
v-model指令用于实现表单元素和数据的双向绑定
所谓双向绑定,就是从输入框可以直接改变对象内部的数据,也可以通过改变对象内部数据来改变页面上响应式的内容。
v-model实现的双向绑定,也可以用先用v-bind先实现单向绑定,然后加上事件
<input type="text" :value ="message" @input = "str">
str(e){
this.message = e.target.value;
}//事件内容
input:radio
<label for="male">
<input type="radio" id="male" name="sex" value="male" v-model = "sex">男
</label>
<label for="female">
<input type="radio" id="female" name="sex" value="female" v-model = "sex">女
</label>
data:{
message: "哈哈哈",
sex:"male"
}
点击之后,sex里面传入的是value的值,如果要设置初始值,就是直接在data里面给sex赋值,如果不要初始值,sex是空的就可以
input:checkbox
单选框对应布尔值
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree">同意协议
</label>
<h2>{{isAgree}}</h2>
<button :disabled="!isAgree">下一步</button>
isAgree: false // data里面的值
多选框一般对于一个数组,把选中信息加入数组中
<input type="checkbox" v-model="hobbies" value="篮球">篮球
<input type="checkbox" v-model="hobbies" value="乒乓球">乒乓球
<input type="checkbox" v-model="hobbies" value="足球">足球
<input type="checkbox" v-model="hobbies" value="羽毛球">羽毛球
hobbies: [] // data里面的值
select
单选
<select name="abc" id="" v-model="fruit">
<option value="橘子">橘子</option>
<option value="柚子">柚子</option>
<option value="葡萄">葡萄</option>
<option value="香蕉">香蕉</option>
</select>
多选
<select name="abc" v-model="fruit" multiple>
<option value="橘子">橘子</option>
<option value="柚子">柚子</option>
<option value="葡萄">葡萄</option>
<option value="香蕉">香蕉</option>
</select>
单选多选的区别就是多选的fruit是一个空的数组
值绑定
就是把初始值定义也放在data里面,然后用v-for来动态展示,然后再动态绑定住
就是再利用上v-bind
修饰符
组件化
将一个完整的界面分成很多个组件,每个组件用于实现页面的一个功能块,每个组件又可以进行细分
任何应用都可以被抽象成一颗组件树
组件化思想的应用:尽可能的将页面拆分成一个个小的,可复用的组件,然后可以让我们的代码更加方便组合和管理,并且扩展性也更强
组件使用的步骤:
- 创建组件构造器
Vue.extend() - 注册组件
Vue.component() - 使用组件
在vue实例的作用范围内使用组件
<div id="app">
<!-- 使用组件 -->
<my-cpn></my-cpn>
</div>
<script src="vue.js"></script>
<script>
// 创建组件构造器
const cpnC = Vue.extend({
template: `
<div>
<h2>我是标题</h2>
<p>红红火火恍恍惚惚</p>
</div>`//模板
})
// 注册组件
Vue.component("my-cpn", cpnC);//第一个参数就是组件的标签名,第二个参数是组件构造器
const app = new Vue({
el: "#app",
data: {
message: "哈哈哈"
}
})
</script>
全局组件和局部组件
全局组件意味着可以在多个vue的实例下面使用,上面的注册方法就会注册全局组件
局部组件则是在注册的时候,在vue实例的内部,使用components属性,利用键值对实现组件的标签名和组件构造器的一一对应,挂载在vue实例下面
父组件和子组件
<div id="app">
<cpn2>
</cpn2>
</div>
<script src="vue.js"></script>
<script>
// 创建组件构造器
const cpnC1 = Vue.extend({
template: `
<div>
<h2>我是标题1</h2>
<p>红红火火恍恍惚惚</p>
</div>`//模板
})
const cpnC2 = Vue.extend({
template: `
<div>
<h2>我是标题2</h2>
<p>嘤嘤嘤嘤嘤嘤嘤嘤</p>
<cpn1></cpn1>
</div>`,//模板
components:{
cpn1 : cpnC1
}
})
// 注册组件
const app = new Vue({
el: "#app",
data: {
message: "哈哈哈"
},
components: {
cpn2 : cpnC2
}
})
</script>
cpn1是cpn2的子组件
子组件不能直接出现在HTML标签里面
注册组件的语法糖就是省去vue.extend(),直接将内部对象传给components
分离组件模板
方法一:
<script type="text/x-template" id="cpn">
<div>
<h2>标题</h2>
<p>哈哈哈哈哈</p>
</div>
</script>
<!-- template: "#cpn" components对象里面的内容-->
方法二:
<template id="cpn">
<div>
<h2>标题</h2>
<p>jjjjjjjj</p>
</div>
</template>
上述两种都是用id来对应
组件内部是不能访问vue实例里面的内容的
组件内部的data
组件内部的data必须是函数,返回值必须是一个对象
data(){
return {
title:"标题"
}
}
为什么组件内部的data要是一个函数?
以函数形式返回对象本质上就是返回地址,每次返回的都是不一样的地址。会让复用变得简单,每次使用的时候,组件对应的对象都是不一样的。
如果想让所有的参数都是一样的,那就直接const一个对象,函数返回自己定义的对象
父子组件通信
- 通过props传递
- 字符串数组,数组中的字符串就是传递时的名称
- 通过事件向父组件传递事件
- 对象,对象可设置传递时的类型,也可以设置默认值
父传子
props:['cmovies', 'cmessage']//数组格式的传入
props: {//对象格式的传入
cmessage: {
type: String,
default:"aaaaaaaaaa",//如果没有传入,就输出这个
required: true//表示必须传入这个参数
}
}
如果是类型是对象或者函数的话,默认值就必须是一个函数
v-bind不支持驼峰表达式
在js中的驼峰表达式,在html的标签中要以短横线的形式书写,在mustache语法中可以直接用驼峰表达式
一般情况下,template里面多个标签的时候,需要一个根元素(div就行),把里面的元素都包裹住
子传父
通过自定义事件实现,在子组件中通过$emit()来触发事件,在父组件中通过v-on来监听子组件事件
// 子组件中methods定义事件
btnClick(item){
// 自定义事件
this.$emit('item-click', item);//第一个参数是事件名称,第二个参数是传过去的参数
}
// 父组件中监听
methods : {
cpnClick(item){//默认传入emit里面的事件而非点击事件
console.log(item);
}
}
// html代码
<cpn @item-click="cpnClick"> </cpn>