vue基本语法

上文

1）innerText和innerHTML属性的绑定

        使用v-text和v-html标签

    <div id="app">
        <p v-text="link1"></p>
        <p v-html="link2"></p>
    </div>
    <script>
        const { createApp } = Vue
        createApp({
            data() {
                return {
                    link1: '<a href="http://www.163.com">网易</a>',
                    link2: '<a href="http://www.163.com">冈易</a>'
                }
            }
        }).mount("#app")
    </script>

2）类绑定和样式绑定

        首先定义好style标签

.btn1{
    width: 100px;
    height: 30px;
    font-size: 16px;
    color:#999;
}
.btn2{
    background-color: #0aed30;
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    border-right: 2px solid #666;
    border-bottom: 2px solid #666;
}

        然后挂载的对象中的data中写好想要挂载的样式

data() {
    return {
        className1:"btn1",
        className2:"btn2",
        // 可以通过属性值true或false的方式确定是否拥有该属性值
        btn1_choose:true,
        btn2_choose:false,
        style1:{
            width:"100px",
            height:"30px",
            color:"green"
        }
    }
}

        首先进行class绑定，写法为:class=""，在原版写法的前面加了一个冒号代表绑定

//获得变量className1的值对应的class，这里获得了btn1
<button type="button" :class="className1">绑定样式</button>
//绑定变量btn1_choose和btn2_choose，当对应的值为true时获得对应的class。这里获得了btn1
<button type="button" :class="{btn1:btn1_choose,btn2:btn2_choose}">绑定对象样式</button>
//数组绑定样式，这里一次绑定了两个，btn1和btn2
<button type="button" :class="[className1,className2]">绑定数组样式</button>
//在绑定数组样式的基础上增加了逻辑运算，这里btn1_choose为true，获得"btn1"，btn2_choose为false，获得""，最后只有btn1的效果
<button type="button" :class="[btn1_choose?'btn1':'',btn2_choose?'btn2':'']">绑定数组样式含逻辑运算</button>

        接下来进行style绑定，style绑定也可以进行逻辑运算，此处不再赘述。

        注意style绑定的目标为对象。

<button type="button" :style="style1">按钮1</button>
<button type="button" :style="[style1,style2]">按钮2</button>

3）条件渲染

        条件渲染很好理解，就是在标签中写if判断，符合条件就显示，不符合条件就不渲染。

<script>
    const { createApp } = Vue
    createApp({
        data() {
            return {
                user: {
                    username: "秦始皇"
                }
            }
        },
        methods: {
            change() {
                if (this.user.username === "admin") {
                    this.user.username = "guest"
                    event.target.innerHTML = "切换为Admin"
                }else{
                    this.user.username = "admin"
                    event.target.innerHTML = "切换为guest"
                }

            }
        }
    }).mount("#app")
</script>

        我们定义了user.username作为判断的依据。

    <div id="app">
        <p>
            <a href="#" v-if="user.username=='admin'">编辑</a>
            <a href="#" v-else>详情</a>
        </p>
        <p>
            <a href="#" v-if="user.username=='admin'">编辑</a>
            <a href="#" v-if="user.username!='admin'">详情</a>
        </p>
        <p>
            <a href="#" v-show="user.username=='admin'">编辑</a>
            <a href="#" v-show="user.username!='admin'">详情</a>
        </p>
        <p>
            <button type="button" @click="change">切换角色为Guest</button>{{user.username}}
        </p>
    </div>

        通过这段代码可以看出if和else是分开在两个标签中，可以通过两个相反的判断条件达成相同的效果。v-if和v-show的效果相同。

        当user.username发生变化时挂载点内的所有内容会随即更新。

4）列表渲染

        列表渲染用v-for实现，类似遍历的写法。

<div id="app">
    <ul>
        <li v-for="(u,index) in user">
            {{index}}-{{u.id}}-{{u.name}}-{{u.age}}
        </li>
    </ul>
</div>

        需要的数据user是一个数组，内含有若干个对象。

data() {
    return {
        user: [{
            id:1,
            name: "秦始皇",
            age:12
        },{
            id:2,
            name: "刘邦",
            age:13
        },{
            id:3,
            name: "刘秀",
            age:14
        },{
            id:4,
            name: "司马昭",
            age:15
        }
    }
}

这样网页上会渲染出四个li，第一个li的index为0。

5）计算属性

        computed用于构建计算属性，这里的属性可以是函数或对象。对象的内部应有get()和set(val)两个方法。get是修改本值的方法，set是修改参与计算值的方法，参数val是input的value属性值。配合v-model属性双向绑定可以实现左值右值同时更新的效果。

<div id="app">
    姓：<input type="text" v-model="firstName1">
    名：<input type="text" v-model="lastName1">
    姓名：<input type="text" v-model="username1">
    <br><br>
    姓：<input type="text" v-model="firstName2">
    名：<input type="text" v-model="lastName2">
    姓名：<input type="text" v-model="username2">
</div>
<script>
    const { createApp } = Vue
    createApp({
        data() {
            return {
                firstName1: "",
                lastName1: "",
                firstName2: "",
                lastName2: "",
            }
        },
        computed: {//用于构建计算属性
            username1() {
                return this.firstName1 + " " + this.lastName1
            },
            username2:{
                get(){
                    return this.firstName2 + " " + this.lastName2 
                },
                set(val){
                    let strArr = val.split(" ")
                    this.firstName2 = strArr[0]
                    this.lastName2 = strArr[1]
                }
            }
        }
    }).mount("#app")
</script>

6）监视属性

        监视属性是当一个值发生变化时执行的，用watch构建监视属性。函数名应和被监视的变量名对应，形参名称不可更改。

watch:{
    username(newVal,oldVal){
        if(newVal != null){
            let strArr = newVal.split(" ")
            this.lastName = strArr[0]
            this.firstName = strArr[1]
        }else{
            this.lastName = ""
            this.firstName = ""
        }
    }
}