1.事件修饰符
.preven阻止默认事件触发；.once只执行一次；.stop阻止冒泡；.capture使用事件捕获模式；.self只有在 event.target 是当前元素自身时触发；.passive滚动事件的滚动行为将会立即触发 ，而不会等待 onScroll 完成。
使用修饰符时，顺序很重要：用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
2.双向数据绑定 v-model
用于 input /select / textarea
v-model.lazy懒监听：在 "change"事件中而不是 "input" 事件中更新
v-model.number 可以将 输入的值转化为Number类型 ，在数字输入框中比较有用
v-model.trim 自动过滤掉输入的首尾空格
3.ref
相当于DOM操作，在标签里添加ref="name(自定义名字)",同时绑定事件，在事件里通过this.$refs.name获取元素
4.watch
持续监听，耗费性能，适合调试时使用
watch: {
a: function(val, oldVal){
console.log( val, oldVal)
}
}
5.计算属性computed
方法里面一定要有return；只有数据变化，才会更新
与methods比较：
1、computed是属性调用，methods是函数调用
2、computed有缓存功能，数据变化才会重新执行；methods只要调用就会执行，不论数据有无变化
注：两者都不应该使用箭头函数来定义计算属性，因为箭头函数绑定了父级作用域的上下文，所以this 将不会按照期望指向Vue；
对于任何复杂逻辑，都应当使用计算属性，利用实时信息时，比如显示当前进入页面的事件，必须用methods方式
6.动态绑定css
1、属性绑定：动态绑定css样式：v-bind:class=”{active:isActive}”，动态改变属性继而改变样式：v-on:click=”isActive=!isActive”；
2、计算属性绑定：动态绑定css样式：v-bind:class=”changeX”，computed：{ changeX(){return active:this.isActive} }
7.指令 v-if、v-show
v-if是“真正”的条件渲染，只在指令的表达式返回 true的时候被渲染；v-show 则不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS 进行display切换。
如果需要非常频繁地切换，则使用v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
8.组件注册 component
全局组件：Vue.component('my-component-name', { /* ... */ }) ；在main.js中注册
全局注册
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
new Vue({ el: '#app' })
// 使用 这两个子组件在各自内部也都可以相互使用
<div id="app">
<component-a></component-a>
<component-b></component-b>
</div>
局部组件：Vue.component('my-component-name', { /* ... */ })
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
// 在 components 选项中定义你想要使用的组件
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
局部注册的组件在其子组件中不可用
// 如果希望 ComponentA 在 ComponentB 中可用，则需要这样写：
var ComponentA = { /* ... */ }
var ComponentB = {
components: {
'component-a': ComponentA
}
}
// 或者：
import ComponentA from './ComponentA.vue'
export default {
components: {
ComponentA
}
}
组件嵌套：引入->注册->调用
9.组件传值
1、父传子 props
// 父组件中 调用子组件的地方传递
<User :zdyUsers(自定义属性名)="users" />
//子组件user中 接收
props:["zdyUsers"]// 方式一
props:{// 方式二
zdyUsers:{
type:Array,
required:true
},
zdyUsers2:{
type:Array,
required:true
}
}
2、子传父 $emit 自定义事件
// 子组件中
changeTitle() {
//注册事件 参数1：事件名 参数二：值
this.$emit(“titleChange”,"通过子组件修改了父组件的title值")
}
// 父组件中
<Header @titleChange="updateTitle" :title="title" /> //调用子组件的地方
methods: {
updateTitle(updatedTitle) {
this.title = updatedTitle //修改
}
}
10.slot
// 父组件中
<div id="app">
<Header>
<h2 slot="title">这里是title</h2>
<p slot="text">这里是文本内容</p>
</Header>
</div>
// 子组件中 接收
<div>
<slot name="title"></slot>
<h3>这里是原本的内容</h3>
<slot name="text"></slot>
</div>
11.动态组件和缓存
<keep-alive>
<component :is="componentId">
</keep-alive>
<button @click=" componentId='form-one' ">show one</button>
<button @click=" componentId='form-two' ">show two</button>
data(){
return{
componentId:"form-one"
}
}
网友评论