改变数组的某一个元素,触发视图更新
this.list[1] = { name: ‘setchange‘, price: 222 } //列表的改变不会触发视图更新,需要使用Vue.set的方法可以触发视图更新 Vue.set(this.list, 1, { name: ‘setchange‘, price: 222 })
标签属性
1 v-bind绑定的标签属性为动态绑定,数据更新则视图更新,简写 v-bind:src="imgSrc" <==> :src="imgSrc"
2 用v-bind 绑定class
//1 使用v-bind绑定的class和普通class共存 <span class="old" :class="bgred">v-bind</span> //2 对象的方式绑定 <span :class="{bgred:true,color:true}">v-bind</span> //3 数组的方式绑定 <span :class="[‘bgred‘,‘color‘]">v-bind</span> //4 混合使用 <span :class="[{‘bgred‘:hasError},‘color‘]">v-bind</span> hasError是数据
3 用 v-bind 绑定 style
<span :style="linkCss">v-bind</span> this.linkCss = {color:‘red‘,‘font-size‘:‘20px‘}
条件渲染 v-if (元素添加/移除) v-show (显示/隐藏)
v-else,即可以配合v-if 也可以配合 v-show使用
<a v-if="isPart">显示</a> <a v-else>no data</a>
Vue事件绑定-表单事件绑定
绑定方式 v-on:click="方法()" <==> @click="方法()"
事件修改器
- @click.stop="事件()" 阻止冒泡
- @keydown.enter="事件()" 键盘键入 enter的时候才触发事件
- @keydown.13 = “事件()” 键盘键入的键的编码是13的时候触发事件
自定义事件
在父组件中定义自定义事件
<father @my-event="onChildClick"></father> methods:{ onChildClick(parmfromChild){ 事件触发时执行 } }
事件如何被触发呢?在子组件中通过 eimt触发
在子组件中
<button @click="emitMyEvent">触发</button> methods:{ emitMyEvent(){ this.$emit(‘my-event‘,要传给父组件的数据); } }
表单中的事件
1 lazy: 延迟更新
<input type="text" v-model.lazy="title" /> {{title}}
2 number 输入值转成数组
<input type="text" v-model.number="num"/>
3 trim 去掉前后空格
<input type="text" v-model.trim="str"/>
4 制作checkbox 见 base/form base/component/select.vue
计算属性 根据其他属性的变化进行同步变化
computed:{ newAttr(){ return ‘$‘+this.price; } }
数据监听 watch
<input type="text" v-model="myVal"/> watch{ myVal:function(newValue,oldValue){ console.log(newValue,oldValue); } }
组件间的通信
1 在父组件中使用子组件
//1 引入 import child from ‘./子组件路径‘; //2 放入父组件的components对象中,注册子组件 components:{ child } //3 在父组件的 template中调用 <child></child>
2 使用is 引入组件,实现动态绑定组件。base/componentPage.vue
<button type="button" name="button" @click="change(1)">1号子组件</button> <button type="button" name="button" @click="change(2)">2号子组件</button> <div :is="childComponent"></div> import ChildComponent1 from ‘@/base/child1‘ import ChildComponent2 from ‘@/base/child2‘ data() { return { childComponent: ‘‘ } }, components: { ChildComponent1, ChildComponent2 }, methods: { change(index) { if (index == 1) { this.childComponent = ‘child-component1‘ } else { this.childComponent = ‘child-component2‘ } } }
3 父子组件的通信
4 给子组件动态绑定数据
5 插槽功能
父组件向子组件传递信息,传递的是模板
父组件中 <message-child @my-event="listenChild" :info="info"> <p>我是父组件传递的模板,会显示到子组件的slot位置</p> </message-child> 子组件中,放置slot就会显示 <div class=""> 子组件内容 {{info}} <button @click="passToFather">发送数据给父组件</button> <slot></slot> </div>
2 插槽默认值
当没有内容的时候,会显示no slot,有内容显示传输的内容 <slot>no slot</slot>
3 具名slot,可以根据name值,定向显示模板内容
父组件中 <message-child @my-event="listenChild" :info="info"> <p>我是父组件传递的模板,会显示到子组件的slot位置</p> <!-- 具名slot --> <div slot="header"> 我是header </div> <div slot="footer"> 我是footer </div> </message-child> 子组件中,放置slot就会显示 <div class=""> <slot name="header">没有头部</slot> 子组件内容 {{info}} <button @click="passToFather">发送数据给父组件</button> <slot></slot> <slot name="footer">没有底部</slot> </div>
总结
组件交出数据三种方式
- 通过v-bind 将数据从父组件传入到子组件
- this.$emit 将子组件的数据发回父组件
- slot 插槽功能
动画
- 动画
- 自定义指令
- mixins
- 插件
动画
css 实现动画
mode="out-in" 先出去再进来. template <transition name="fade" mode="out-in"> <div class="box" v-show="isShow"> 我是测试动画 </div> </transition> css样式 .fade-enter-active,.fade-leave-active{ transition: 0.5s; } .fade-enter,.fade-leave-active{ opacity: 0; }
接受的过度状态
- v-if
- v-show
- :is 动态组件
动态组件 <div class=""> <transition name="fade" mode="out-in"> <div :is="currentView"></div> </transition> <button type="button" @click="toggleCom()" name="button">切换</button> </div> toggleCom() { if (this.currentView == ‘Trans1‘) { this.currentView = Trans2; } else { this.currentView = Trans1; } }
自定义指令
使用 Vue.directive]
定义全局变量 main.js 中定义全局指令 Vue.directive(‘css‘,{ //插入之后执行 el:当前元素 bind:绑定的值,打印自己看 inserted(el,bind){ console.log(‘inserted‘); console.log(bind); var obj = bind.value; var arr = []; for(let key in obj){ arr.push(key+‘:‘+obj[key]); } var style = arr.join(‘;‘); el.style.cssText = arr; } }) <div class="" v-css="{‘color‘:‘red‘}"> 内容 </div>
路由
时间: 2024-10-26 09:02:16