欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue基础

程序员文章站 2022-06-06 23:36:47
...

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.innerHTMLdomrefthis.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中的后面的数据的变化而变化

相关标签: vue基础

上一篇: vue el和template的关系

下一篇: 协议