《Web前端开发》课件-任务三 初探Vue基础操作（一）

Web前端开发项目八浅谈Vue任务三

初探Vue基础操作（一）学习目标：知识目标：熟识Vue属性绑定方法和Vue条件渲染指令。技能目标：运用Vue属性绑定和Vue条件渲染完成Vue项目创建。素质目标：培养学生实践操作能力，培养学生自学能力。任务准备：一、Vue属性绑定

属性绑定是Vue中常用的一种方式，通过将属性绑定到Vue实例中的数据上，可以实现数据与界面的双向绑定。Vue中的属性绑定应使用v-bind指令，具体格式如下。

v-bind:属性名="属性值"示例如下。

<template>

<divv-bind:id="dynamicId"v-bind:class="msg">属性绑定测试</div>

</template>

<script>

exportdefault{

data(){

return{

msg:"active",

dynamicId:"appID"}

}

}

</script>

<style>

.active{color:red}

</style>任务准备：需要注意的是，v-bind指令要求元素属性的属性值与组件的属性名必须保持一致。例如，v-bind:class="msg"和msg:"active"，元素class属性的属性值为msg，组件的属性名也必须为msg。另外，如果绑定的值是null或者undefined，那么该属性将会从渲染的元素上移除，示例如下。

<template>

<divv-bind:id="dynamicId"v-bind:title="dTitle">属性绑定测试</div>

</template>

<script>

exportdefault{

data(){

return{

dTitle:null}}}

</script>

此时，“dTitle:null”，则<div>标签上“title”属性会被移除。因为v-bind指令经常使用，所以提供了特定的简写语法，这里可以省略“v-bind”关键字，但是“：”不能省略，示例如下。

<div:id="dynamicId":class="msg">属性绑定测试</div>任务准备：2.Vue属性动态绑定多个值如果需要在元素内一次绑定多个属性的属性值，可以参考以下示例。

<template>

<divv-bind="attributes">属性绑定测试</div>

</template>

<script>

exportdefault{

data(){

return{

attributes:{

id:"appId",

title:"appTitle"}

}

}

}

</script>在这个示例中，一次绑定了两个属性和属性值，分别为id属性和title属性。任务准备：

在Vue中，提供了很多条件渲染，这类似于JavaScript中的条件语句。包括：v-if、v-else、v-else-if、v-show等。1.v-if

的使用

“v-if”指令用于条件性的渲染一部分内容。这部分内容只有在指令表达式返回值为true时，才能被渲染，示例如下。

<template>

<divv-if="sign">条件渲染v-if</div>

</template>

<script>

exportdefault{

data(){

return{

sign:true}

}}

</script>

在这个实例中，“sign”的值为“true”时，<div>标签可以渲染显示，“sign”的值为“false”时，<div>标签不可以显示。任务准备：2.v-else的使用

“v-else”是为“v-if”添加的“else”部分，示例如下。

<template>

<divv-if="sign">条件渲染v-if</div>

<divv-else>条件渲染v-else</div>

</template>

<script>

exportdefault{

data(){

return{

sign:tru

}

}}

</script>

在这个示例中，“sign”值为“true”时，<div>标签“条件渲染v-if”内容可以被渲染出来；“sign”值为“false”时，<div>标签“条件渲染v-else”内容被渲染出来。任务准备：3.v-else-if的使用

当“v-if”和“v-else”两个指令无法满足更多业务需求时，可以使用“v-else-if”指令增加多种情况的判断。4.v-show的使用

“v-show”指令是另一个可以按条件来显示元素的条件渲染语句，它的用法与“v-if”的用法基本一样，只是不能配有“v-else”指令。

v-if指令和v-show指令的区别在于：v-if指令是按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。另外，v-if指令也是惰性的，如果在初次渲染时条件值为false，则不会做任何操作。条件区块只有当条件首次变为true时才被渲染。相比之下，v-show指令在应用时，元素无论初始条件如何，都会被渲染。总的来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要频繁切换，则使用v-show较好；如果在运行时绑定条件很少改变，则v-if更合适。任务实施：

任务描述：制作第一个Vue项目页面，要求用户输入学生成绩，然后根据输入的成绩，给出学生成绩等级，90分~100分成绩A等级，80分~90分成绩B等级，70分~80分成绩C等级，60发~70分成绩及格，60分以下成绩不及格。页面显示如图8.13所示。图8.13页面效果图任务实施：实施步骤：1.创建并打开Vue项目vue_project。(1)

输入命令“npminitvue@latest”

设置项目名称“projectname:vue_project”(2)

输入命令“npminstal”安装依赖包。(3)

输入命令“npmrundev”运行项目。任务实施：2.编写vue文件。

打开src文件夹，在App.vue中构建页面。<script>…</script><template>

<h2>学生成绩等级查询</h2>

学生成绩：<inputtype="text"id="score"placeholder="请输入成绩"

v-model="score"/><br/>

学生成绩等级：</template>

其中“v-model”是Vue的双向绑定指令，它能将页面上的控件输入的值同步更新到相关绑定的data属性中，同时也会在更新data绑定属性的时候，更新页面上输入控件的值。任务实施：3.去除自带样式。

删除src文件夹下，main.js文件中的“import'./assets/main.css'”自带样式。4.在<script></script>标签中添加脚本代码。

<script>

exportdefault{

data(){

return{score:''}

}

}

</script>任务实施：5.在<template></template>标签中添加“v-else-if”分支情况。<template>

学生成绩：<inputtype="text"id="score"placeholder="请输入成绩"

v-model="type"/><br/>

学生成绩等级：

<divv-if="score>=90">A等级</div>

<divv-else-if="score>=80">B等级</div>

<divv-else-if="score>=70">C等级</div>

<divv-else-if="score>=60">及格</div>

<divv-else>不及格</div></template>

小结Vue基础操作（一）

一、Vue项目属性绑定

1.Vue属性绑定

2.Vue属性动态绑定多个值

二、Vue条件渲染

1.v-if的使用

2.v-else的使用

3.v-else-if的使用

4.v-show的使用任务测试：一、选择题1、在Vue项目中，表单元素上数据双向绑定的指令是