vue基础
程序员文章站
2022-06-06 23:38:23
...
基础
指令
- v-text
- v-html
- v-for
- v-if
- v-else
- v-show
- v-cloak
- v-on
- v-bind
这里就不多赘述了，可以上官网查看，下面有些例子会用到，有些不会用到。
计算属性（computed）：
- 会有缓存，不修改依赖的变量时不会进行重新计算，只有修改了依赖的变量才会重新计算，效率更高
- 每一个计算属性有get和set两个方法
监听器（watch）:
- 类似计算属性，也会有缓存，但是语法和computed相比会复杂很多
动态绑定class和style
class：
- 对象
:class="{class名: boolean值}"
- 数组
:class="[data中的值, {class名: boolean值}, data中的值]"
style:
也有对象和数组的区分，都是根据data中数据进行渲染style
条件渲染
- 如果重复修改的话使用v-show效率更高
- v-if和v-else必须在一起
- 如果有重复的input需要不同的渲染，可以添加key去进行区分
列表渲染
- 给v-for循环添加key，增加效率
- 改变数组内容指定的方法才有效，直接操作下标数据会变，但是不会重新渲染页面
- push
- pop
- shift
- unshift
- splice
- sort
- reverse
- 修改数据内容还可以直接修改数组的引用也可以直接改变数据的值
组件
非父子组件之间的传值
- vuex
- 观察者模式/发布订阅模式/bus/总线
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>非父子组件之间的传值</title>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
</head>
<body>
<div id="container">
<child content="shi"></child>
<child content="yanping"></child>
</div>
</body>
<script src="js/libs/vue.min.js"></script>
<script>
Vue.prototype.bus = new Vue();
Vue.component('child', {
data: function () {
return {
selfContent: this.content
}
},
props: {
content: String
},
template: '<div @click="handleClick">{{selfContent}}</div>',
methods: {
handleClick: function () {
// alert(this.content);
this.bus.$emit('change', this.selfContent);
}
},
mounted: function () {
var _this = this;
this.bus.$on('change', function (msg) {
// alert(msg);
_this.selfContent = msg;
})
}
});
var vm = new Vue({
el: "#container"
})
</script>
</html>
插槽
- slot
- slot-scope
<div id="container">
<child>
<template slot-scope="props">
<li>{{props.row}}</li>
</template>
</child>
</div>
Vue.component('child', {
data: function () {
return {
list: [{
id: 1,
name: 'shi'
}, {
id: 2,
name: 'yan'
}, {
id: 3,
name: 'ping'
}]
}
},
template: `<div>
<ul>
<slot v-for="item in list"
:row="item">
</slot>
</ul>
</div>`
})
var vm = new Vue({
el: "#container"
})
动态组件与 v-once 指令
动态组件
<component :is="切换变量"></component>
v-once
只渲染一次，后续的从内存中取，可以有效的优化渲染性能
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>动态组件与 v-once 指令</title>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
</head>
<body>
<div id="container">
<component :is="tabName"></component>
<button @click="switchNav">switch</button>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.0/vue.js"></script>
<script>
Vue.component('child-one', {
template: `<div v-once>child-one</div>`
});
Vue.component('child-two', {
template: `<div v-once>child-two</div>`
})
var vm = new Vue({
el: "#container",
data: function() {
return {
tabName: 'child-one'
}
},
methods: {
switchNav: function() {
this.tabName = this.tabName == 'child-one' ? 'child-two' : 'child-one'
}
}
})
</script>
</html>
这些只是在自己学习中部分的案例和基础，官网的例子很好，有不懂的可以上官网上查看 vue官网
上一篇： Swing组件与监听器
下一篇： vue3.0组合API