【vue】vue的基础语法--上

一、Vue的模板语法

1. 学会使用VsCode

2. 文本插值

3. 使用JavaScript表达式

4. 无效

5. 原始html

二、属性绑定

1. 属性绑定

2.简写方案

3.布尔型Attribute

4. 动态邦定多个值

三、条件渲染

1. v-if

2. v-else

3. v-else-if

4. v-show

5. v-if VS v-show

四、循环遍历指令

1. 复杂数据

2. v-for 与对象

3. 通过key管理状态

4. Key的来源

一、Vue的模板语法

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

1. 学会使用VsCode

Ctrl + ~（波浪线键）打开终端
执行npm run dev ,运行程序
将以下两个模块中的内容删除掉

将App.vue文件改成如下

2. 文本插值

最基本的数据绑定形式是文本插值，它使用的是“Mustache“语法(即双大括号):

<script>export default{data(){return{msg:"神奇的棒棒糖",hello:"hello world"}}}
</script>
<template><h3>模版语法</h3><p>{{ msg }}</p><p>{{ hello }}</p>
</template>

3. 使用JavaScript表达式

每个绑定仅支持单一表达式，也就是一段能够被求值的JavaScript 代码。一个简单的判断方法是是否可以合法地写在 return 后面 (一般不建议这样做)

<script>export default{data(){return{number:10,ok:true,message:"hello"}}}
</script>
<template><p> {{ number + 1 }} </p><p> {{ ok?'Yes':'No' }} </p><p> {{ message.split('').reverse().join('') }} </p>
</template>

4. 无效

<script></script>
<template><!-- 这是一个语句，而非表达式 (错误) --><p>  {{ var a = 1}} </p><!-- 条件控制也不支持，请使用三元表达式 --><p> {{if(ok) {return message} }} </p>
</template>

5. 原始html

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

<script>export default{data(){return{rawHtml:"<a href='https://www.boyatop.cn/'>青城博雅</a>"}}}
</script>
<template><p> 纯文本: {{ rawHtml }} </p><p> 属性:<span v-html="rawHtml"></span> </p>
</template>

动态式语法：

模版语言

<script>export default{data(){return{msg:"hello world",rawHtml:"<a href='https://www.boyatop.cn/'>青城博雅</a>"}}}
</script><template><h3>模板语法</h3><p>{{ msg }}</p><p>纯文本；{{ rawHtml }}</p><p>属性：<span v-html="rawHtml"></span></p>
</template>

第二种写法：

<script setup>import { Hello } from "./components/Hello.vue";
</script><template><Hello/>
</template>

<script>export default{data(){return{msg:"hello world",rawHtml:"<a href='https://www.boyatop.cn/'>青城博雅</a>"}}}
</script><template><h3>模板语法</h3><p>{{ msg }}</p><p>纯文本；{{ rawHtml }}</p><p>属性：<span v-html="rawHtml"></span></p>
</template>

二、属性绑定

1. 属性绑定

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

<template><div v-bind:id="dynamicId" v-bind:class="dynamicClass">测试</div>
</template>
<script>export default{data(){return{dynamicClass:"appClass",dynamicId:"appid"}}}
</script>
<style>.appClass{color: red;font-size: 30px;}
</style>

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

比如：

浏览器元素上边不显示

2.简写方案

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

冒号就是v-bind简写

3.布尔型Attribute

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

4. 动态邦定多个值

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

<template><div v-bind="ObjectofAttrs">青城博雅</div>  
</template>
<script>export default{data(){return{ObjectofAttrs:{class:"appClass",id:"appid"}}}}
</script>
<style>.appClass{color: red;font-size: 30px;}
</style>

三、条件渲染

在 Vue中，提供了条件渲染，这类似于 Javascript 中的条件语句

v-if
v-else
v-else-if
v-show

1. v-if

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

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

2. v-else

你也可以使用v-else为v-if添加一个“else区块”

<template><div v-if="flag">你能看到我嘛？</div><div v-else>你还能看到我嘛？</div>    
</template>
<script>export default{data(){return{//flag:true flag:false }}}
</script>

3. v-else-if

顾名思义，v-else-if提供的是相应于v-if的“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-show

另一个可以用来按条件显示一个元素的指令是 v-show。其用法基本一样。

<template><div v-show="flag">你能看到我吗</div>
</template>
<script>export default{data(){return{flag:false}}}
</script>

5. v-if VS v-show

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

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

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

总的来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。

因此，如果需要频繁切换，则使用v-show较好；

如果在运行时绑定条件很少改变，则v-if会更合适。

四、循环遍历指令

我们可以使用v-for指令基于一个数组来渲染一个列表。v-for指令的值需要使用 item in items形式的特殊语法，

其中 items 是源数据的数组，而 item 是迭代项的别名。

<template><h1>列表渲染</h1><p v-for="item in names"> {{ item }} </p>  
</template>
<script>export default{data(){return{names:["计算机网络","计算机组成原理",'数据结构与算法','操作系统']}}}
</script>

1. 复杂数据

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

<template><h1>列表渲染</h1><div v-for="item in result"><p> {{ item.title }} </p><p> {{ item.url }} </p></div>
</template>
<script>export default{data(){return{result:[{id:"1",title:"河北大学成功获批国家社会科学基金重大项目",url:"https://www.hbu.edu.cn/info/1167/20000.htm"},{id:"2",title:"2024年河北省高校图书馆年会在河北大学举办",url:"https://www.hbu.edu.cn/info/1167/20015.htm"},{id:"3",title:"河北大学举办2025年研究生元旦晚会",url:"https://www.hbu.edu.cn/info/1167/20023.htm"}]}}}
</script>

v-for 也支持使用可选的第二个参数表示当前项的位置索引。
<template><h1>列表渲染</h1><p v-for="(item,index) in names">{{ index }}-{{ item }} </p>
</template>
<script>export default{data(){return{names:["计算机网络","计算机组成原理",'数据结构与算法','操作系统'] }}}
</script>
你也可以使用 of 作为分隔符来替代 in 这更接近JavaScript的迭代器语法

2. v-for 与对象

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

<template><h1>列表渲染</h1><p v-for="(value,key,index) of userInfo">{{ value }} - {{ key }} -{{ index }}</p></template>
<script>export default{data(){return{userInfo:{name:"张三",age:20}}}}
</script>

3. 通过key管理状态

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

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

<template><h1>key属性添加到v-for当中</h1><p v-for="(item,index) in names" :key="index">{{ item }}</p></template>
<script>export default{data(){return{names:["计算机网络","计算机组成原理",'数据结构与算法','操作系统'] }}}
</script>

温馨提示：

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

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

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

4. Key的来源

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

<template><h1>列表渲染</h1><div v-for="(item,index) in result" :key="item.id" ><p> {{ item.title }} </p><p> {{ item.url }} </p></div>
</template>
<script>export default{data(){return{result:[{id:"1",title:"河北大学成功获批国家社会科学基金重大项目",url:"https://www.hbu.edu.cn/info/1167/20000.htm"},{id:"2",title:"2024年河北省高校图书馆年会在河北大学举办",url:"https://www.hbu.edu.cn/info/1167/20015.htm"},{id:"3",title:"河北大学举办2025年研究生元旦晚会",url:"https://www.hbu.edu.cn/info/1167/20023.htm"}]}}}
</script>