Vue - day01

32 阅读2分钟

一、vue的基本使用

vue.js

<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>