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:'
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可以直接插值
如果想让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.
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中的后面的数据的变化而变化
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。