vue基础

1.Vue中的v-on:click可以简写为@click
2.vue组件的定义可以写为Vue.component(‘item’,{
template:’

’
})
在上面的div中用就可以了

Vue实例的生命周期钩子函数
Vue的生命周期函数就是Vue实例在某一个时间点自动执行的函数
得详细的看那张官网的生命周期图示
生命周期中首先执行beforecrea()函数 然后是执行created()函数
然后根据图示 他会问有没有el挂载点 如果有 会问有没有template模板有的话
就会渲染template模板上的内容 如果没有的话就把el挂载点上的div渲染出来 所以 el挂载点上的div上可以不写任何东西 直接写在el挂载点下面
的 template:'

hello word

就行了模板渲染前会执行beforeMount函数 hellowolod也就是模板渲染到页面后 Mounted函数会被执行
在组建被销毁 还没销毁之前beforeDestroy函数执行 销毁后 destroyed执行 (可以在控制台用vm.$destroy()销毁Vue实例)
但数据发生改变的时候beforeupdate一瞬间执行 改变之后 updated函数执行

Vue的模板语法
v-text 和 v-html 后面的值都可以与data中的值做绑定 凡是v-指令 后面都是一个js的表达式 也就是js的运行环境 {{}}中也是可以写简单的
js的表达式的

Vue中的计算属性 侦听器
计算属性是写在computed:{}里面的函数中的
例如:data:{
first: ‘Lee’,
last:‘del’
},
computed:{
fullName:function(){
return this.first + " " +this.last
}
里面的fullName可以直接插值

{{fullName}}

中
计算属性是有一个缓存的机制 如果计算以来的值没发生改变 他就计算一次 拿上文举例就是this.first和this.last 如果改变就会重新计算一次 这样提高性能
用methods:{
fullName:function(){
return this.first + " " +this.last
}
也可以计算 但是没有缓存机制 所以就计算来说还是用computed比较好 所以computed是跟data里面的一样的调用 跟methods写一样的书写方式

如果想让data中数据发生改变 fullName也同时发生改变 除了上述两种方法之外 亦可以使用 侦听器、
watch:{
first:function(){
this.fullName = this.first + " " +this.last
}，
last:function(){
this.fullName = this.first + " " +this.last
}

}
使用侦听器也可以缓存机制 但是watch比较computed复杂 所以用于计算时还是最好用computed

计算属性的setter 和 getter
computed中的get方法就是在computed:{
fullName:{
get:function(){
return this.first + " " +this.last
}
}实际上跟没写差不多
但是
set:function(value){
里面的value会接收到get中的retrun出来的值 可以进行一些操作 例如
var arr = value.split(’’)
this.first = arr[0]
this.last = arr[1]
这样一来 computed依赖的数据发生改变 就得重新计算一次

Vue 绑定样式
1.class的对象绑定 首先 定义一个点击事件 然后 :class={active:isactive}在data中写 isactive=false 在methods中写 this.isactive=!isactive
然后在style 中写active color：red 就可以实现点击变红 再点击恢复原来的颜色 也可以this.active=this.active===‘active’?"":‘active’

也可以用style来绑定
可以通过数组的方式进行绑定:style= “[styleobj,{fontsize:‘20px’}]”
在data中写上 styleobj:{ color:black}
再点击事件中写上 this.styleobj.color = this.styleobj.color===‘black’?‘red’:‘black’

}
}

v-if 和 v-show
v-if是根据变量的false true 删除添加节点
v-show是根据变量的存在于否在css上隐藏显示

Vue中的key值得作用
如果v-if 有一个input框 v-else有一个input框 当改变变量时从if切换到else Vue有一个复用机制 在if中的input框中填写的内容也不会
清空 这时候如果在每个input中添加一个key Vue就会知道这个在Vue中是唯一的 就不会复用了

v-for 列表循环 v-for="(item,index) of list" :key=“id” 一般后端返回数据 会返回id id就是这条数据唯一标示
如果想在Vue中在数组中添加一项 是不能通过下标的形式来改变的 如果通过下表形式页面不会响应 只能通过Vue给的七个处理数组的方法来改变数组
七个方法是 push pop shift UNshift splice sort reverse

在最外层的标签写上template 占位符 循环会执行里面的标签循环 但是最外层的没有标签

对象的循环
v-for="(item,key,index)of duixiang" 对象中加一项也是得用Vue给的方法 直接更改引用但是比较麻烦 这时候可以使用
Vue中的set方法Vue.set(vm.duixiang,‘键’，‘值’)
数组中的set方法跟对象差不多

                                       Vue组件使用

Vue组件使用的细节点
is属性写在标签上面 例如 其中row是一个子组件 主要是为了解决很多父标签下面必须写子标签的问题
在子组件中data是一个函数 同时这个函数必须返回一个对象 主要是子组件需要多次调用 这样写可以让子组件之间的数据不会相互影响
在Vue中如果需要操作dom可以用ref=‘mingchneg’ 可以在Vue实例中通过this.$refs.mingchneg.innerHTML 来进行dom节点的输出 当在子组件上写ref 在父组件的实例中写this.$refs.mingchneg.innerHTML来进行dom节点的输出当在子组件上写ref在父组件的实例中写this.refs.mingcheng获取到的是这个组件的引用数据

Vue组件父子传递数据
Vue中父组件向子组件传值都是通过属性的方式 子组件不能修改父组件传递过来的数据 如果想要改变数据 要从根源上修改 也可以在子组件的
data中复制父组件传递过来的数据 传递数据的原理是 先定义一个const conut={写子组件的东西}, 再在父组件的实例中注册conut 通过components来注册 在父组件
的标签中写上conut标签 在conut标签上定义一个属性进行传值 在子组件的{props:[]}

校验父组件传递过来的值
接收并使用子组件接收可以约束类型props:{mingcheng:string} 如果不符合会
报错 如果想要传数字或字符串可以在后面写上[number,string] 也可以写 props:{
countent:{
type:string, 规定传过来的类型
required:true, 必须要传这个属性
default:‘default value’ 如果不传这个属性 默认显示的值
validator:function(value){ 传入的属性的值的长度必须大于五
return value.length>5
}
}
}

Vue组件子父传递数据
Vue总子组件向父组件传值 通过事件的方式 在子组件的实例中 this.$emit{‘名称’,‘值’} 在子组件标签上写 @名称=“新名称” 在根实例中写
新名称函数

Vue组件监听子组件上面的原生事件
为什么要监听子组件上面的原生事件 因为如果注册了一个子组件 在子组件上面写了个@click 在再Vue根实例下写函数并不会被触发 只有在
子组件的实例模板总写函数 并写自定义事件才可以 但是这样太麻烦了所以就有了监听子组件上面的原生事件的需求了
可以在子组件标签上面写@click.native=“事件名” 这样就可以在根实例上面获取到点击事件了

Vue非父子之间传值
1.可以使用vuex
2.可以使用bus/总线/发布订阅模式/观察者模式
Vue.prototype.bus = new Vue()
this.bus.$emit(‘change’,this.content)
具体项目在写

Vue插槽
1.插槽的使用场景
如果父组件传子组件一个标签 子组件收到后得在外层包裹个div 在这个div上得写v-html指令 但是传递的多的时候太复杂
父组件传标签可以直接把标签插入到子组件标签中 在子组件的实例模板中写上solt标签就可以 solt也可以定义默认内容
但是如果需要传递两个标签 怎么区别solt标签 这个时候就该用到具名插槽了 只要在子组件标签中的插槽标签上面 slot属性=“名称”
下面的实例模板中的solt中的标签上面加上一个name=“名称” 就可以区分插进来的标签了
2.作用域插槽
首先父组件调用子组件给子组件一个作用域插槽 这个插槽一定是在子组件标签下以

{{props.item}}

这里面的props是子组件的实例中的数据 在子组件的实例化模板中写入 这里的:item与h1中的item相对应

Vue中的动态组件和 v-once指令
动态组件就是根据子组件中的:is=“type” is中的后面的数据的变化而变化