Vue.js 3.x前端开发技术与实战 课件 第1章Vue.js概述

教学目标理解Vue.js指令的定义与分类。掌握条件渲染指令的使用与注意事项。掌握列表渲染指令v-for的多种定义方法及与key属性配合使用的方法。掌握数据绑定的多种方式。掌握事件处理指令及事件修饰符的使用方法。掌握其它内置指令的作用与使用方法。掌握Vue自定义指令定义与注册的方法。1第3章

Vue.js指令（6学时）教学目标第1章

Vue.js发展概述（1课时）1.掌握常用的Vue.js开发工具。2.掌握Vue.js页面的基本组成。3.学会使用Vue.js3.x编写简易的单页面应用。4.掌握ECMAScript基础语法(重点)。1.1Vue.js简介

Vue.js是一套用于构建用户界面的渐进式框架。Vue.js被设计为可以自底向上逐层应用。Vue.js的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

当与现代化的工具链以及各种支持类库结合使用时，Vue.js可以开发复杂的SPA(SinglePageApplication)单页应用项目。

尤雨溪(EvanYou)现任职于纽约GoogleCreativeLab。尤雨溪是Vue.js框架的作者，HTML5版Clear(移动应用)的打造人。

理想：从想让自己的工作更有效率，到想自己写一个框架。从提供一个十分简单专注的工具到将一些DOM和JS对象同步，再到开始扩充范围以及将更多的模块加入到生态系统，最终形成一个框架。思政理想还是要有的，万一实现呢？三大前端框架：React、Angular、Vue.js（Github中star最多）三大移动端框架：Flutter、Weex、ReactNativeVue.js发展史和特点易用已经会了HTML、CSS、JavaScript即可阅读指南开始构建应用灵活不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。高效20kbmin+gzip的运行大小。超快虚拟DOM，最省心的优化。Vue1.0,2014.2-2015.10.27Vue2.0,2016.4.27Vue2.6.x，2019.02.05V3.0,2020.9.18Vue发展简史Vue特点起源于2013年12月自己的实验项目1.2Vue.js生产环境配置Vue.js引入方法<scripttype="text/javascript"src="js/vue.min.js"></script><scriptsrc="/vue@next"></script>安装VueDevtools1.下载并安装Node.js和npm2.从GitHub上下载VueDevtools（解压到vue-devtools-dev）npminstall；npmrunbuild安装Chorme扩展程序（选择shells/chrome文件夹）Firefox和Edge可以直接浏览器安装devtools拓展程序1.2.1Vue.js引入方法61.2.3Node.js环境配置

环境配置主要是为npm配置全局模块安装的路径和缓存cache的路径。默认情况下执行：npminstall*-g。

模块安装到“C:\Users\用户名\AppData\Roaming\npm”（会占用C盘资源）。

为了减轻C盘资源的压力，建议使用以下方法进行优化环境配置。步骤如下：

（1）在指定盘符（设为F:\nodejs）下新建文件夹node_global和node_cache，用作存放安装的全局模块及缓存cache，

（2）在命令行执行下列配置设置命令。npmconfigsetprefix"F:\nodejs\node_global“

npmconfigsetcache"F:\nodejs\node_cache“

安装node.js（v16.14.x以上）71.2.3环境配置示意图(3)设置环境变量。右击“计算机”,依次选择“属性→高级系统设置→高级→环境变量”。在系统变量域中，单击“新建”按钮，在“编辑系统变量”对话框中设置变量名为NODE_PATH、变量值为F:\nodejs\node_global\node_modules。

在“Administrator的用户变量”域中，选择变量Path后，单击“编辑”按钮，将变量值中的C:\Users\Administrator\AppData\Roaming\npm修改为F:\nodejs\node_global。81.2.4创建第一个Vue单页程序(1)Vuev2.X<divid="app"><p>{{message}}--{counter}}</p></div><!--JS部分-->

<script>var

vm=newVue({//创建Vue实例

el:"#app",//定义挂载元素

template:"",//定义模板内容选项

data:{//定义数据选项

message:"HelloVue!",

counter:0,

},

methods:{//定义方法（函数）

},

});</script>

(2)VueV3.x<divid="app"><p>{{message}}</p><p>计数器Counter={{counter}}</p><button@click="add">计数器增1</button></div><script>//第1种方法const{createApp}=Vue;//解构赋值constApp={//定义JS对象-App组件data(){//data选项为函数,return返回变量

return{

message:"HelloVue!",

counter:0,

}; }, methods:{//定义组件中的方法 },};//创建Vue实例,并挂载到DOM上

createApp(App).mount("#app");//也可以创建一个Vue实例，获取data中数据constinstance=app.mount('#app');案例演示：【例1-1、1-2】1.3Vue.js开发工具开发工具VisualStudioCode(VSCode)HBuilderXWebStorm浏览器工具MSEdge(devtools）Mozilla

Firefox（devtools）GoogleChromeVue调试工具DevTools问：掌握这些工具就能够很好地就业吗？答：我们还得了解一下目前企业需求是什么?101.4ECMAScript6.0基础ECMAScript6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。1.4.1let和const//var的情况

console.log(chu);//输出undefined

var

chu

=

2022;

//let的情况

console.log(bar);//报错ReferenceError

let

bar

=

2;

const

numberArr=[1,2,3,4,5,6,7]

//赋值numberArr.push(10,20,30);

//可以执行console.log(numberArr);

//输出所有元素numberArr=[15,2,3,4,5,6,7]

//报错，不能重新赋值

注意：ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。常量不能重新赋值、不能重复声明、不会被预解析。常量属于块级作用域。对象常量属性可以修改，但对象的引用不能修改。否则会报错。111.4.2解构赋值ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值。解构不成功，变量的值就等于undefined。(1)数组的解构赋值let

[a1,b2,c1]=[100,200,300];//a1=100,b1=200,c1=300

左右两边结构必须一样let

[chu,[[jiu],liang]]=[10,[[20,30],30]];//chu=10,jiu=[20,30],liang=30

let

[,,z]=["chu","jiu","liang"];//z='liang'

let

[x,,y]=[10,20,30]//x=10,y=30,不完全解构let

[head,...tail]=[10,20,30,40]//head=10,tail=[20,30,40]

let

[x,y,...z]=['z']//x='z',y=undefined,z=[]

1.4ECMAScript6.0基础(2)对象的解构赋值let

{bar,foo}={foo:'aaa',bar:'bbb'}//bar='bbb',foo='aaa',变量必须与属性同名才能成功赋值let

{baz}={foo:'aaa',bar:'bbb'}//baz=undefined，解构不成功。

(3)解构赋允许指定默认值let

[foo=true]=[];//foo=true

let

[x,y='b']=['a'];//x='a',y='b'

let

[x,y='b']=['a',undefined];//x='a',y='b'

121.4ECMAScript6.0基础1.4.3箭头函数

（参数）=>{//函数体,return表达式}ES6中，箭头函数就是函数的一种简写形式，使用括号包裹参数，跟随一个“=>”，紧接着是函数体。当箭头函数没有参数或者有多个参数，要用()括起来。当箭头函数函数体有多行语句，用{}包裹起来，表示代码块，当只有一行语句，并且需要返回结果时，可以省略{},结果会自动返回。当箭头函数要返回对象的时候，为了区分于代码块，要用()将对象包裹起来。var

fun=num=>num;

//与第2～4行等价var

fun=function(num){

return

num;

}

var

fn=()=>5

//与第6行等价var

fn=function(){return

5}

var

sum=(num1,num2)=>num1+num2

//与第8～11行等价var

sum=function(num1,num2){

//普通函数console.log(this)//指向Window对象

return

num1+num2

}

Console.log(sum(100,200));//显示300varfun=(id,name)=>({id:id,name:name});//返回对象时，使用()包裹对象注意:箭头函数里面没有this对象，此时的this是外层的this对象，即Window。普通函数中的this指向Window对象。箭头函数中的this指的是函数定义位置的上下文。箭头函数体中的this对象，是定义函数时的对象，而不是使用函数时的对象。131.4.4展开运算符

展开运算符（...）用于取出参数对象所有可遍历属性，然后拷贝到当前对象。//拷贝对象（深拷贝）

let

preson1

=

{

name:

"chujiuliang",

age:

57

}

let

obj1=

{

...preson1

}

//拷贝console.log(obj1)//{

name:

"chujiuliang",

age:

57

}

//合并对象

let

age

=

{

age:

22

}

let

name

=

{

name:

"liming"

}

let

person2

=

{}

person2

=

{

...age,

...name

}

console.log(person2

)

//{age:

22,

name:

"liming"}

//如果person2中原本有name,age属性会被覆盖

1.4.5模板字符串

模板字符串相当于加强版的字符串，用反引号“`”,除了作为普通字符串，还可以用来定义多行字符串，也可以在字符串中加入变量和表达式。1.4ECMAScript6.0基础多行字符串

let

string1

=

`Vue.js,

isveryeasytolearn!`

console.log(string1)//

Vue.

js,

//

isveryeasytolearn!字符串插入变量和表达式。变量名写在${}中，${}中可以放入JavaScript表达式。let

name

=

"Chujiuliang"

let

age

=

57

let

info

=