一、vue的基本使用
<body>
<div id="app">
{{msg}}
</div>
</body>
<script>
Vue.createApp({
data() {
return {
msg:"hello"
}
},
}).mount("#app")
</script>
1.1 基本数据渲染
<body>
<div id="app">
<!-- 1、基本数据渲染 -->
<h3>{{msg}}</h3>
</div>
</body>
<script>
let app = Vue.createApp({
data(){
return{
msg:"1、基本数据渲染"
}
}
})
app.mount("#app")
</script>
1.2 渲染富文本 v-html指令
<body>
<div id="app">
<!-- 2、渲染富文本 v-html指令 -->
<div v-html="richText"></div>
</div>
</body>
<script>
let app = Vue.createApp({
data(){
return{
richText:"<h1 style='color:orange'>富文本</h1>"
}
}
})
app.mount("#app")
</script>
1.3 渲染复杂数据包 v-for
<body>
<div id="app">
<!-- 3、渲染复杂数据包，json数据 -->
<div v-for="item in stu">
姓名：{{item.name}}、年龄：{{item.age}}、爱好：<span v-for="i in item.hobby">{{i}}、</span>
</div>
</div>
</body>
<script>
let app = Vue.createApp({
data(){
return{
stu:[
{name:"张三",age:18,hobby:["读书"]},{name:"李四",age:23,hobby:["读书","跑步"]}
],
}
}
})
app.mount("#app")
</script>
1.4 条件渲染 v-if、v-else
<body>
<div id="app">
<!-- 4、条件渲染 v-if -->
<div v-if="isShow">演示v-if</div>
<div v-else="isShow">演示v-else</div>
</div>
</body>
<script>
let app = Vue.createApp({
data(){
return{
isShow:true
}
}
})
app.mount("#app")
</script>
1.5 控制显示与隐藏 v-show
<body>
<div id="app">
<div class="box" v-show="isShow">演示v-show</div>
</div>
</body>
<script>
let app = Vue.createApp({
data(){
return{
isShow:true
}
}
})
app.mount("#app")
</script>
1.6 控制属性 v-bind
v-bind:class可以简写为:class
<body>
<div id="app">
<div class="box" v-bind:class="isActive?'active':''"></div>
</div>
</body>
<script>
let app = Vue.createApp({
data(){
return{
isActive:true,//控制元素class名
}
}
})
app.mount("#app")
</script>
1.7 事件绑定
v-on:click可以简写为@click
<body>
<div id="app">
<div class="box" v-show="isShow">演示v-show</div>
<button v-on:click="handleShow">控制元素显示与隐藏</button>
<button v-on:dblclick="handleBg">双击控制背景颜色</button>
</div>
</body>
<script>
let app = Vue.createApp({
data(){
return{
isShow:true,
isActive:true,//控制元素class名
}
},
methods:{//方法函数区域
handleShow(){
this.isShow = !this.isShow;
},
handleBg(){
let bool = this.isActive;//此处的this指向的是Vue应用对象
this.isActive = !bool
}
}
})
app.mount("#app")
</script>
1.8 v-if和v-show的区别
- v-if是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。
- v-if也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。
- 相比之下，v-show简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display属性会被切换。
- 总的来说，v-if有更高的切换开销，而 v-show有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show较好；如果在运行时绑定条件很少改变，则 v-if会更合适。
二、事件的几种使用情况
2.1 不使用事件函数
<body>
<div id="app">
<button v-on:click="num++">不使用事件函数{{num}}</button>
</div>
</body>
<script>
let app = Vue.createApp({
data(){
return{
num:10,
}
}
})
app.mount("#app")
</script>
2.2 使用事件函数不传参
<body>
<div id="app">
<button v-on:click="handleNum">使用事件函数不传参{{num}}</button>
</div>
</body>
<script>
let app = Vue.createApp({
data(){
return{
num:10,
}
},
methods:{
handleNum(){
this.num+=2
},
}
})
app.mount("#app")
</script>
2.3 事件函数传参
<body>
<div id="app">
<button v-on:click="handleNum1(10)">事件函数传参{{num}}</button>
</div>
</body>
<script>
let app = Vue.createApp({
data(){
return{
num:10,
}
},
methods:{
handleNum1(n){
this.num+=n
},
}
})
app.mount("#app")
</script>
2.4 事件对象
<body>
<div id="app">
<button v-on:click="handleNum2">事件对象</button>
</div>
</body>
<script>
let app = Vue.createApp({
data(){
return{
num:10,
}
},
methods:{
handleNum2(e) {
console.log(e);
},
}
})
app.mount("#app")
</script>
2.5 自定义参数+事件对象
<body>
<div id="app">
<button v-on:click="handleNum3($event,100)">自定义参数+事件对象</button>
</div>
</body>
<script>
let app = Vue.createApp({
data(){
return{
num:10,
}
},
methods:{
handleNum3(e,n) {
console.log(e,n);
},
}
})
app.mount("#app")
</script>
2.6 事件修饰符
<body>
<div id="app">
<div class="box" v-on:click.once="handleAlter">
<div class="box" v-on:click="handleAlter">
<div class="box" v-on:click.stop="handleAlter"></div>
</div>
</div>
</div>
</body>
<script>
let app = Vue.createApp({
methods:{
handleAlter(){
alert(1)
}
}
})
app.mount("#app")
</script>
三、computed计算属性
<body>
<div id="app">
<h1 v-on:click="num++">num的值：{{num}}</h1>
<h1>显示num的3倍：{{num*3}}</h1>
<h1>显示num的3倍：{{num*3}}</h1>
<!-- 使用computed -->
<h2>使用computed显示num的3倍：{{num3}}</h2>
<h2>使用computed显示num的3倍：{{num3}}</h2>
</div>
</body>
<script>
Vue.createApp({
data(){
return {
num:10,
}
},
computed:{
num3(){
return this.num*3
}
}
}).mount("#app")
</script>
<body>
<div id="app">
<!-- 使用computed筛选学员 -->
<button @click="idx=0">所有学员</button>
<button @click="idx=1">及格的学员</button>
<button @click="idx=2">不及格的学员</button>
<div v-for="item in filterStu">
姓名：{{item.name}}、成绩：{{item.score}}
</div>
</div>
</body>
<script>
let app = Vue.createApp({
data() {
return {
stu: [
{ name: "张三", score: 100 },
{ name: "李四", score: 80 },
{ name: "张三1", score: 40 },
{ name: "张三2", score: 60 },
{ name: "张三3", score: 58 },
{ name: "张三4", score: 66 }
],
idx: -1
}
},
computed: {
filterStu() {
let arr = [];
if (this.idx == 0) {
arr = this.stu
}
if (this.idx == 1) {
arr = this.stu.filter(val => {
return val.score >= 60
})
}
if (this.idx == 2) {
arr = this.stu.filter(val => {
return val.score < 60
})
}
return arr;
}
}
})
app.mount("#app")
</script>
<body>
<div id="app">
<!-- 字符串翻转 -->
<div>{{msg}}</div>
<div>{{reverseMsg}}</div>
</div>
</body>
<script>
Vue.createApp({
data() {
return {
msg: "hello"
}
},
computed: {
reverseMsg() {
return this.msg.split('').reverse().join('')
}
}
}).mount("#app")
</script>
