vue基础

发布时间:2019-01-10 整理:脚本之家 作者:未知
脚本之家收集整理的这篇文章主要介绍了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.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基础所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

标签: