1.1 Vue
keep-alive是缓存页面的,配合activated使用
activated (){ //重新执行ajax }
1.2 Vue去中心化
- 使用webpack的require_context实现路由”去中心化”管理
- 当你在开发一个大型单页面应用的时候,项目之初一般做法是所有的路由规则都维护在一个route.js的文件里
- 有了require.context(),我们可以通过正则匹配引入相应的文件模块
1.3 Vue 代理
proxyTable: {
'/api':{
target:'http://localhost:8080',
pathRewrite:{
'^/api':'/static/mock'
}
}
},
1.4 Vuex
- 先调用Actions时,一定要调用dispatch方法
- 先调用Actions, 再去调用Mutations
1.5 emit
//向外触发这个事件,然后父组件去监听
this.$emit('change',e.target.innerText)
//父组件
<CityAlphabet :cities="cities"
@change="handleLetterChange"
></CityAlphabet>
1.6 父组件向子组件传值
<HomeHeader :city="city"></HomeHeader>
//子组件接收
props:{ //接收父组件传递来的属性
city: String
}
1.7 指令directives
指令是用来操作dom的
<div v-frag class="a"></div>
<button v-color="flag">变色</button>
<script>
var vm = new Vue({
el:"#app",
data:{
flag:'red'
},
directives:{ // v-可以默认不写
color(el,bindings){ // el指代的是button按钮
el.style.background = bindings.value
},
drag(el){
//拖拽
}
}
})
</script>
1.8 watch和computed
computed默认调用get方法,必须要有return
computed不支持异步
如果是异步的,则使用watch
对于任何复杂逻辑,都应当使用计算属性
1.9 实例上的方法
this.$nextTick()表示最后执行
如果数据变化后想获取真实dom中的内容需要等待页面渲染完毕后,再去获取,所有的dom操作,最好 放在 this.$nextTick()里
在mounted里面操作时,最好套上this.$nextTick(),保证dom渲染完毕后,再去获取dom
mounted(){
this.$nextTick(()=>{
console.log(this.$refs.wrap);
});
}
1.10 父传子props
<Header :msg="msg"></Header>
1.11 发布订阅
vm.$on 绑定事件
vm.$once 绑定一次
vm.$off 解绑事件
vm.$emit 触发事件
1.12 子传父
this.$emit 触发自己的自定义事件,让父亲的方法执行
//子组件
methods:{
getData (){
// 触发事件
this.$emit('son-add',800)
}
}
//父组件
<son @son-add="add"></son>
1.13 ref的作用
ref的作用是获取真实DOM元素
但是在组件中,获取的是组件的实例,而不是DOM元素
1.14 强调nextTick的用法
想操作DOM, 就加一个nextTick,保证没问题
1.15 Vue公共方法应该写在哪里
lib下面建个utils,用的时候import下就好了,在main.js文件中引入
放到独立的 Repo,写成独立的组件或插件,其他项目用的时候 npm link
写插件,应当有一个公开方法 install
utils\utils.js
export default {
install:function(Vue,opt){
//所有内容写在这
}
}
1.16 Vue的修饰符
@touchstart.prevent="handleTouchStart" //阻止touchstart事件的默认行为
1.16.1 v-model的修饰符
- .lazy , .lazy修饰符延迟了同步更新属性值的时机。即将原本绑定在input事件的同步逻辑转变为绑定在change事件上。
<input type="text" v-model.lazy="input_lazy" />
var vm = new Vue({
el:'#app',
data:{
input_lazy:''
}
});
- number , 该修饰符用来将输入内容自动转换成数值。
var vm = new Vue({
el:'#app',
data:{
input_number:""
}
});
<!-- 当开始输入数字时,属性值将实时更新成Number类型的数值 -->
<input type="text" v-model.number="input_number" />
- .trim, 该修饰符用来自动过滤字符串前后的空字符。
var vm = new Vue({
el:'#app',
data:{
input_trim:""
}
});
<input type="text" v-model.trim="input_trim" />
1.16.2 v-on的修饰符
绑定的事件修饰符可以改变事件的触发方式
- .stop , 该修饰符将阻止事件向上冒泡,同理于调用event.stopPropagation()方法
<button type="button" @click.stop="stop_click">StopPropagation</button>
- .prevent, 该修饰符会阻止当前事件的默认行为。同理于调用 event.preventDefault() 方法
<form @submit.prevent="form_submit">
<button type="submit">Submit</button>
</form>
- .self, 该指令只当事件是从事件绑定的元素本身触发时才触发回调
<div @click.self="div_click" style="display:inline-block; width: px; background-color:red;">
<button type="button" @click="stop_click">Button</button>
</div>
- .once, 该修饰符表示绑定的事件只会被触发一次
<button type="button" @click.once="once_click">Button</button>
- 键值修饰符
该修饰符可以用来监听键盘事件
<input type="text" @keyup.enter="enter_click"/>