Class 与 Style 如何动态绑定？
Class 可以通过对象语法和数组语法进行动态绑定：
- 对象语法
<div :class="{ active: isActive, 'text-danger': hasError }"></div>
data: {
isActive: true,
hasError: false
}
- 数组语法
<div :class="[isActive ? activeClass : '', errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
Style 也可以通过对象语法和数组语法进行动态绑定：
- 对象语法
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
- 数组语法
<div :style="[styleColor, styleSize]"></div>
data: {
styleColor: {
color: 'red'
},
styleSize:{
fontSize:'23px'
}
}
不要在同个元素上同时使用v-if和v-for指令
为了过滤数组中的元素，我们很容易将v-if与v-for在同个元素同时使用。但是在 Vue 优先使用v-for指令，而不是v-if指令。它循环遍历每个元素，然后检查v-if条件。
解决方案是遍历一个计算属性：
<div v-for=“data in dataName”>
computed:{
dataName:() => {
//判断条件
}
始终在 v-for 中使用 :key
在需要操纵数据时，将key属性与v-for指令一起使用可以让程序保持恒定且可预测
模板表达式应该只有基本的 JS 表达式
🌰：
// 不好的做法
{{
fullName.split(‘’).map(function(word){
Return word[0].toUpperCase() + word.slice(1)
}).join(‘’)
}}
基本上，我们希望模板中的所有内容都直观明了。为了保持这一点，我们应该将复杂的表达式重构为适当命名的组件选项。
分离复杂表达式的另一个好处是可以重用这些值。
// 推荐的做法
{{changeFullName}}
computed:{
changeFullName:function(){
return this.fullName.split('').map(function(word){
Return word[0].toUpperCase() + word.slice(1)
}).join('')
}
}
不要在“created”和“watch”中调用方法
Vue开发人员经常犯的一个错误是他们不必要地在created和watch中调用方法。其背后的想法是，我们希望在组件初始化后立即运行watch。
栗子：
// 不推荐的做法
created:(){
this.handleData()
}
methods:{
handleData()
}
watch(){
property(){
this.handleData()
}
}
我们要做的就是稍微重组watch并声明两个属性：
1.handler (newVal, oldVal)-这是我们的watch方法本身。
immediate: true- 代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行
methods:{
handleData()
}
watch(){
property{
immediate: true
handler(){
this.handleData()
}
}
}
保持指令的一致性
@是v-on的简写:是 v-bind 的简写#是 v-slot 的简写
Vue判断当前设备是PC还是移动端?
methods: {
// 添加判断方法
isMobile() {
let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
return flag;
}
},
mounted: {
if(this.isMobile) {
alert("移动端");
this.$router.replace('/pc_index');
}else {
alert("pc端");
this.$router.replace('/m_index');
}
}
表单修饰符
.number转换为数值
默认表单域中的值为字符串，如果进行数值运算则需要转换成number类型
<!-- 自动将用户的输入值转为数值类型 -->
<input v-model.number="age" type="number">
.trim去除首尾空白
自动过滤用户输入的首尾空白字符,只能去掉首尾空格，不能去除中间的空格
<!--自动过滤用户输入的首尾空白字符 -->
<input v-model.trim="msg">
.lazy 将input事件切换成change事件
input事件只有每次输入 时才会触发,change事件当失去焦点或按下回车时才会触发.
<!-- “change”延迟同步更新 -->
<input v-model.lazy="msg" >
点击事件加判断
在绑定事件中直接添加判断条件clickFlag
<div @click="clickFlag && addGoodsHandler()">
添加
</div>
vue判断页面是首次加载还是再次刷新
if(window.performance.navigation.type == 1){
console.log('页面被刷新')
}else {
console.log('首次被加载')
}
vue初始化页面闪动问题
原因：使用vue 开发时，在vue初始化之前，由于div是不归vue管的，所以写的代码还没有解析之前会容易出现花屏现象，类似于{{message}}的字样。
解决方法：在css里加上[v-clock]{display:none}。如果没有彻底解决，则在根元素加上style="display:none;" :style="{display:block}"
不需要响应式的数据如何处理
开发中，有一些死数据，没有改变过
// 方法一：将数据定义在data之外
data () {
this.list1 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
this.list2 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
this.list3 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
this.list4 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
this.list5 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
return {}
}
// 方法二：Object.freeze()
data () {
return {
list1: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
list2: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
list3: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
list4: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
list5: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
}
}
父组件引用子组件，并修改其值
父组件
<optionModal ref="uploadModal"></optionModal>
this.$refs.uploadModal.showModalStr = true
子组件
<template>
<modal v-model="showModalStr"></modal>
</template>
<script>
export default {
data(){
return {
showModalStr :false
}
}
}
</script>
