vue解决警告提醒``
全局配置设置关闭 Vue.config.productionTip = false
vue阻止事件冒泡
@click.stop=“showMessge”
// 阻止冒泡、默认事件连用
@click.stop.prevent=“showMessge”
//只触发一次事件
@click.once=“showMessge”
vue阻止键盘事件（在最后按下键位在触发）
@keyup.enter=“showMessge”
详解Vue中的监视属性
watch: {
isSunny: {
immediate:true, // 开启初始化调用
deep:true, // 开启深度监视
handler() {
this.plan = this.isSunny ? '打蓝球' : '敲代码';
},
},
}
被监视的属性发生改变时，调用回调函数，执行相关操作
配置immediate:true实现初始化调用
监视的属性须存在才能进行监视
深度监视
Vue自身可以监测到多层数据的改变，但是在watch中不可以（只能监测简单的数据类型）
在watch中配置deep:true可以监测多维数据，根据具体数据结构决定是否采用深度监视
简写：
watch: {
isSunny() {
this.plan = this.isSunny ? '打球' : '敲代码';
},
}
// 注意vue所管理的函数都应写成普通函数，不被vue管理的（定时器，ajax回调函数，promise回调函数）最好写成箭头函数
Vue中class样式的动态绑定
对象写在data中：
<div :class="list">通过对象写法绑定</div>
data: {
list: {
bg_red: 'bg_red',
border: 'border',
},
}
数组写法
使用场景：
需要绑定的样式个数不确定，类名也不确定
内联写法
<div :class="[xd_border,xd_bg]">内联绑定样式</div>
数组里加三元表达式
<div :class="[isActive?xd_border:'',xd_bg]">三元表达式判断写法</div>
写在data中
<div :class="list">在data中使用数组写法绑定</div>
data:{
list:['border', 'bg_red']
}
style写法
<div :style="{fontSize:'30px',color:aa}">直接在style中加入样式</div>
详解Vue中的条件渲染
v-if 写法
<p v-if="dice===1">打篮球</p>
<p v-else-if="dice===2">敲代码</p>
<p v-else-if="dice===3">游泳</p>
<p v-else>约会</p>
data: {
dice: '',
},
methods: {
throwFun() {
this.dice = Math.floor(Math.random() * 4);
console.log(this.dice);
},
},
特点
— 语法和原生js的if…else if…else一样
— 不展示时直接移除DOM元素，适合切换频率低的场景
— v-if、v-else-if、v-else要连用
v-show 写法
<p v-show="dice===1">约会</p>
特点
—不展示时使用样式隐藏，适合切换频率高的场景
v-if 对比 v-show
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
Vue中列表排序
对商品列表进行排序
<input type="text" v-model="inputValue" />
<button @click="keyWord=1">降序</button>
<button @click="keyWord=2">升序</button>
<button @click="keyWord=0">原顺序</button>
<ul>
<li v-for="item in newList">{
{item.name}}-{
{item.price}}</li>
</ul>
new Vue({
el: '#app',
data: {
keyWord: 0,
inputValue: '',
list: [
{ name: '牛仔裤', price: 88 },
{ name: '运动裤', price: 67 },
{ name: '羽绒服', price: 128 },
{ name: '运动服', price: 100 },
],
},
computed: {
newList() {
const arr1 = this.list.filter((i) => {
return i.name.indexOf(this.inputValue) !== -1;
});
if (this.keyWord) {
arr1.sort((a1, a2) => {
return this.keyWord === 1
? a1.price - a2.price
: a2.price - a1.price;
});
}
return arr1;
},
},
})
在vue中引入less
cnpm install less less-loader@7 --save-dev
<style lang="less" scoped>
scoped是指写的样式只在当前文件中生效，其他文件不生效