Java全栈课程之Vue3详解———基础语法

一、模板语法

         Vue 使用一种基于HTML的模板语法,使我们能够声明式地将其组件实例的数据绑定到呈现的DOM上。所有的Vue模板都是语法层面合法的HTML,可以被符合规范的浏览器和HTML解析器解析。

        1.文本插值

        最基本的数据绑定形式十文本插值，它使用的十“Mustache”语法（即双大括号）

<template>
    <p>{{ msg }}</p>
</template>

<script>
export default {
    data (){
        return{
            msg:"神奇的魔法"
        }
    }
}
</script>

        2.使用JavaScript表达式

        每个绑定仅支持单一表达式,也就是一段能够被求值的JavaScript代码。一个简单的判断方法是是否可以合法地写在 return 后面

<template>
    <p>{{ number + 1 }}</p>
    <p>{{ ok ? 'YES' : 'NO' }}</p>
    <p>{{ message.split("").reverse().join("") }}</p>
</template>

<script>
export default {
    data(){
        return{
            number:10,
            ok:true,
            message:"大家好"
        }
    }
}
</script>

        3.无效

<!-- 这是一个语句,而非表达式 -->
{{ var a = 1 }}

<!-- 条件控制也不支持,请使用三元表达式 -->
{{ if (ok) { return message } }}

        4.原始HTML

双大括号将会将数据插值为纯文本,而不是HTML。若想插入HTML,你需要使用 v-html指令

<template>
    <p>纯文本:{{ rawHtml }}</p>
    <p>属性 :< span v-html="rawHtml"></span></p>
</template>
<script>
export default {
    data (){
        return{
            rawHtml:"<a href='https://blog.csdn.net/Annzz123?spm=1000.2115.3001.5343'>CSDN主页</a>"

        }
    }
}
</script>

二、属性绑定

双大括号不能在HTML attributes 中使用。想要响应式地绑定一个attribute,应该使用v-bind 指令

        1.语法

<template>
    <div v-bind: id="dynamicId" v-bind:class="dynamicclass">AppID</div>
</template>
<script>
export default {
    data (){
        return{
            dynamicId:"appid",
            dynamicclass:"appclass"
        }

    }
}
<style>
.appclass{
    color: red;
    font-size: 20px;
}
</style>

v-bind 指令指示Vue 将元素的 id attribute 与组件的 dynamicld 属性保持一致。如果绑定的值是 null 或着undefined,那么该attribute将会从渲染的元素上移除 

        2.简写

        因为 v-bind 非常常用,我们提供了特定的简写语法

<div :id="dynamicId" :class="dynamicclass"></div>

        3.布尔型 Attribute

        布尔型 attribute 依据true/false值来决定 attribute是否应该存在于该元素上,disabled就是最常见的例子之一

<template>
    <button :disabled="isButtonDisabled">Button</button>
</template>
<script>
export default {
    data (){
        return{
            isButtonDisabled:true
        }
    }
}
</script>

        4.动态绑定多个值

        如果你有像这样的一个包含多个attribute的JavaScript对象

<template>
    <div v-bind="objectofAttrs">测试</div>
</template>
<script>
export default {
    data() {
        return {
            objectofAttrs: {
                id: 'container',
                class: 'wrapper'
            }
        }
    }
}
</script>

三、条件渲染

        1.v-if

        v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染

<template>
    <div v-if="flag">你能看见我么</div>
</template>
<script>
export default {
    data() {
        return {
            flag:true
        }
    }
}
</script>

        2.v-else

<template>
    <div v-if="flag">你能看见我么</div>
    <div v-else>那你还是看看我吧</div>
</template>
<script>
export default {
    data () {
        return {
            flag:false
        }
    }
}
</script>

        3.v-else-if

<template>
    <div v-if="type === 'A'">
        A
    </div>
    <div v-else-if="type === 'B'">
        B
    </div>
    <div v-else-if="type === 'c'">
        C
    </div>
    <div v-else>
        Not A/B/C
    </div>
</template>
<script>
export default {
    data() {
        return {
            type: "D"
        }
    }
}
</script>

        4.v-if 与v-show的区别

v-if 是“真实的”按条件渲染,因为它确保了在切换时,条件区块内的事件监听器和子组件都会被销毁与重建。

v-if 也是惰性的:如果在初次渲染时条件值为false,则不会做任何事。条件区块只有当条件首次变为true时才被渲染。

相比之下,v-show简单许多,元素无论初始条件如何,始终会被渲染,只有CSS display 属性会被切换。

总的来说,v-if有更高的切换开销,而v-show 有更高的初始渲染开销。因此,如果需要频繁切换,则使用v-show较好;如果在运行时绑定条件很少改变,则 v-if 会更合适

四、列表渲染

        1.语法

        我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用item in items 形式的特殊语法,其中 items是源数据的数组,而item 是迭代项的别名

<template>
    <div>
        <p v-for="item in names">{{ item }}</p>
    </div>
</template>
<script>
export default {
    data () {
        return {
            names:["vue","前端","IT"]
        }
    }
}
</script>

        2.复杂数据

 

        大多数情况,我们渲染的数据源来源于网络请求,也就是JSON 格式

<template>
    <div v-for="item in result">
        <p>{{ item.title }}</p>
    <img :src="item.avator" alt="">
    </div>
</template>
<script>
export default {
    data () {
        return {
            result: [
              {
                "id": 001,
                "title":"vue简介1",
                "avator": "https://pic.qyer.com/avatar/002/25/77/30/200?v=1560226451",
              }，
              {
                "id": 002,
                "title":"vue简介2",
                "avator": "https://pic.qyer.com/avatar/011/07/08/69/200?v=1572185180",
              },
            ]
        }
    }
}
</script>

        v-for 也支持使用可选的第二个参数表示当前项的位置索引

<template>
    <div>
        <p v-for="(item, index) in names">{{ index }}:{{ item }}</p>
    </div>
</template>
<script>
export default {
    data () {
        return {
            names:["vue","前端","IT"]
        }
    }
}
</script>

        也可以使用 of 作为分隔符来替代in,这更接近JavaScript的迭代器语法

<div v-for="item of items"></div>

        3.v-for与对象

        也可以使用 v-for 来遍历一个对象的所有属性

<template>
    <div>
        <p v-for="(value, key, index) of userInfo">{{ value }}-{{ key }}-{{ index }}</p>
    </div>
</template>
<script>
export default {
    data () {
        return {
            userInfo:{
                name: "aaa",
                age: 20
            }
        }
    }
}
</script>

 

五、通过Key管理状态

        Vue默认按照“就地更新”的策略来更新通过v-for 渲染的元素列表。当数据项的顺序改变时,Vue不会随之移动DOM元素的顺序,而是就地更新每个元素,确保它们在原本指定的索引位置上渲染。

        为了给Vue一个提示,以便它可以跟踪每个节点的标识,从而重用和重新排序现有的元素,你需要为每个元素对应的块提供一个唯一的 key attribute:

<template>
    <div>
        <p v-for="(item, index) in names" :key="index">{{ item }}</p>
    </div>
</template>
<script>
export default {
    data () {
        return {
            names:["vue","前端","IT"]
        }
    }
}
</script>

温馨提示

Key在这里是一个通过 v-bind 绑定的特殊 attribute

推荐在任何可行的时候为v-for 提供一个 key attribute

Key绑定的值期望是一个基础类型的值,例如字符串或number类型

key的来源

请不要使用index作为key的值,我们要确保每一条数据的唯一索引不会发生变化

<template>
    <div v-for="(item, index) in result" :key="item.id">
        <p>{{ item.title }}</p>
        <img :src="item.avator" alt="">
    </div>
</template>
<script>
export default {
    data () {
        return {
            result: [
                {
                "id": 2261677,
                "title":“鄂尔多斯|感受一座城市的璀璨夜景 感受一座城市,除了白日里的车水马龙,喧嚣繁华之",
                "avator": "https://pic.qyer.com/avatar/002/25/77/30/200?V=1560226451",
                },
                {
                "id": 2261678,
                "title":“鄂尔多斯|感受一座城市的璀璨夜景 感受一座城市,除了白日里的车水马龙,喧嚣繁华之",
                "avator": "https://pic.qyer.com/avatar/002/25/77/30/200?V=1560226451",
                },
            ],
        }
    }
}
</script>