《Web前端开发》课件-任务二 Vue基础入门

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

Vue基础入门学习目标：知识目标：熟识Vue项目目录结构及语法。技能目标：运用VisualStudioCode开发环境完成Vue项目创建。素质目标：培养学生实践操作能力，培养学生归纳总结的能力。任务准备：

一、Vue项目目录结构Vue项目的目录结构如图8.11所示。在目录结构中，各项含义如下。（1）.vscode是VSCode工具的配置文件夹。（2）node_modules是Vue项目的运行依赖文件夹。（3）public是资源文件夹，里面的favicon.ico就是浏览器中的项目图标。（4）src是源码文件夹。（5）.gitignore是git忽略文件。（6）index.html是程序启动的入口HTML文件。（7）package_lock.json是信息描述文件。（8）README.md是注释文件。（9）vite.config.js是Vue的配置文件。图8.11Vue项目的目录结构任务准备：二、Vue模板语法Vue使用一种基于HTML的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的DOM上，所有的Vue模板都是语法层面合法的HTML，可以被符合规范的浏览器和HTML解析器解析。1.文本插值

最基本的数据绑定形式就是文本插值，它使用的是“Mustache”语法（即双括号）。结构如下。

<template>

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

</template>

<script>

exportdefault{

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>

exportdefault{

data(){

return{

number:10,

ok:true,

message:"大家好"}

}

}

</script>任务准备：3.原始HTML

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

<template>

<p>纯文本：{{rawHtml}}</p>

<p>属性：<spanv-html="rawHtml"></span></p>

</template>

<script>

exportdefault{

data(){

return{

rawHtml:"<ahref=''>任务二</a>"}

}

}

</script>任务实施：任务描述：在VisualStudioCode环境中，制作第一个Vue项目页面，页面显示如图8.12所示。在页面下方通过渲染原始HTML的方法，关联中国新闻网，网址为“/”。图8.12页面效果图任务实施：实施步骤：1.创建并打开Vue项目vue_project。(1)

输入命令“npminitvue@latest”

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

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

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

打开src文件夹，在App.vue中编写如下代码。<script>

exportdefault{

data(){

return{

message1:"我要好好学习",

message2:"我爱我的祖国"

}

}

}</script><template>

<h3>我是中国人</h3>

<p>{{message1}}</p>

<p>{{message2}}</p></template>任务实施：3.去除自带样式。删除src文件夹下，main.js文件中的“import'./assets/main.css'”自带样式。4.添加链接中国新闻网的链接。

在<script></script>标签中return语句中添加以下代码。rawHtml:"<ahref='/'>中国新闻网</a>"在<template></template>标签中添加以下代码。<pv-html="rawHtml"></p>

小结Vue基础入门

一、Vue项目目录结构

二、Vue模板语法

1.文本插值

2.使用JavaScript表达式

3.原始HTML任务测试：一、选择题1、如果将原始HTML在页面直接显示则需要添加属性（）。A、v-htmlB、v-bindC、v-forD、v-model2、在<template>标签中，使用JavaScript表达式定义页面元素，正确的是（）。A、{{vara=1}}B、{{if(ok){returnmessage}}}C、