Vue 3.0从入门到实战PPT1第2章 第一个Vue应用

第第2 2章章 第一个第一个VueVue应用应用本章概要2.1准备Vue 3 2.1.1引入Vue.js 2.1.2安装Vue Devtools2.2 Vue实例和数据绑定 2.2.1构建Vue 3项目 2.2.2项目实例：Hello Vue3 2.2.3 setup与生命周期 2.2.4数据 2.2.5数据实例：显示响应式对象 2.2.6方法 2.2.7方法实例：修改响应式对象的值2.3 本章小结2.1准准备Vue 32.1.1引入Vue.js目前Vue的最新版本为3.0.2，将Vue 3添加到项目中有三种主要方式。第一种方式是在页面上以CDN package的形式导入，添加的位置如例2-1所示。Vue例2-1 以CDN形式引入对于学习或制作原型，可以使用一下语句：对于生产环境，则推荐链接到一个明确的版本号和构建文件，例如：第二种方式是通过npm安装Vue 3，推荐在构建大型应用时使用。在Node的官网下载Node，同时会得到npm工具。npm 能很好地和Webpack、Browserify等模块打包器配合使用。在命令行输入以下指令安装Vue 3最新稳定版：npm install vuenext由于npm的仓库源布置在国外，传输速度较慢，作为替代可以使用淘宝镜像源的cnpm：npm install-g cnpm-registry=https:/registry.npm.taobao.org之后，就可以用cnpm 指令替代npm 指令进行安装。第三种方式是使用命令行工具Vue CLI。Vue CLI是一个由官方提供的基于Vue.js进行快速开发的完整系统，为单页面应用(SPA)快速搭建繁杂的脚手架。它确保了各种构建工具能够基于智能的默认配置平稳衔接，这样开发者可以专注在开发应用上。Vue CLI可以快速运行并带有热重载、保存时lint校验，以及生产环境可用的构建版本。对于Vue 3，应该使用npm上可用的Vue CLI v4.5 作为vue/clinext。可以通过全局重新安装最新版本的vue/cli 进行升级。使用下列任意一条指令进行安装。yarn global add vue/clinextnpm install-g vue/clinext然后在Vue项目中运行：vue upgrade-next2.1.2安装Vue Devtools在开始开发Vue之前，推荐在浏览器中安装Vue Devtools，它可以方便开发者在一个更友好的界面中调试Vue 应用。Vue Devtools提供了一个查看Vue组件和全局状态管理器Vuex中数据的界面。对于Google Chrome和Firefox，都可以在浏览器的应用商店中搜索Vue Devtools直接安装。访问商店有困难的情况下也可以根据以下步骤进行手动安装：在git bash中输入以下指令，克隆Vue Devtools仓库git clone https:/ installyarn run build打开Chrome浏览器选择【菜单】【更多工具】【扩展程序】命令单击右上角的【开发者模式】按钮单击左侧的【加载已解压的扩展程序】按钮选择文件夹：vue-devtools/packages/shell-chrome/等待安装完成安装完成后可以在网页点击F12呼出调试工具，查看Vue Devtools，其界面如下图所示。2.2 Vue实例和数据例和数据绑定定2.2.1构建Vue 3项目Vue 3支持使用Vite构建一个项目。Vite是一个web开发构建工具，可以快速提供代码。通过在命令行中运行以下命令，可以使用Vite快速构建Vue项目。使用npm：npm init vite-app cd npm installnpm run dev或者使用yarn：yarn create vite-app cd yarnyarn dev2.2.2项目实例：Hello Vue在项目创建完成后，在App.vue与main.js中编写第一个Vue 3应用，代码分别如例2-2与例2-3所示。hello import ref from vue;export default setup()const hello=ref(Hello Vue3);return hello,;,;例2-2 App.vue中的代码import createApp from vueimport App from./App.vueimport./index.csscreateApp(App).mount(#app)例2-3 main.js中的代码使用npm run dev指令正确运行后将会在网页上看到Hello Vue3的字样，如图2-2所示。至此，第一个Vue 3应用创建成功。对于这个实例，在main.js中使用了Vue 3新增的createApp函数创建了一个新的应用实例，并挂载到名为app的DOM元素上。在App.vue中定义了hello，并通过setup函数将其初始值设为Hello Vue3。其中，setup函数是组合API的入口点，而ref函数则帮助Vue监听hello，当它发生变化，Vue会自动更新视图。Vue会声明式地将数据渲染进DOM的系统，所有东西都是响应式的，也就是说当数据发生变化时，会同步更新其数据链和作用域中所有的相关状态。2.2.3 setup与生命周期setup函数是Vue 3中新增的一个组件选项，为使用Vue 3的组合式API 新特性提供了统一的入口。会在原有的beforeCreate函数之后、created函数之前执行。setup的参数有两个：props和context。在props中定义外界传递过来的参数名称和类型，并在setup函数的第一个形参接收。setup函数的第二个形参context是一个上下文对象，包含了attrs、slots等属性。由于在setup函数中无法访问到this，因此使用形如context.attrs的方式访问这些属性。对于setup函数与props、context的使用，如例2-4所示。在Vue 3中，生命周期钩子注册函数也有所变化。在setup函数中可以使用直接导入的onX函数注册生命周期钩子。这些生命周期钩子注册函数只能setup期间同步使用，因为它们依赖于内部全局状态来定位当前活动实例，也就是正在调用其setup的组件实例。在Vue 2.x的生命周期钩子注册函数中，beforeCreate与created函数删除，直接使用setup，其他生命周期钩子注册函数可以加上前缀on后在setup函数中使用，例如beforeMount变为onBeforeMount、mounted变为onMounted。如例2-5所示。2.2.4数据在Vue 3中，通过ref函数与reactive函数在setup内创建响应式的对象。ref函数接受一个内部值并返回一个响应式且可变的ref对象，这个对象上只包含一个.value属性。想要访问ref对象的内部值需要使用property.value。reactive函数会返回原始对象的响应式副本，它影响所有嵌套property。等价于vue 2.x中的Vue.observable函数。toRefs函数可以将reactive创建出来的响应式对象，转换为普通的对象，这个对象上的每个属性节点，都是ref类型的响应式数据。结果对象的每个property都是指向原始对象相应property的ref。当把ref对象，挂载到reactive上时，会自动把响应式数据对象展开为原始的值，不需通过.value就可以直接被访问。2.2.5数据实例：显示响应式对象从vue中导入ref，reactive，toRefs函数后，在setup函数中创建ref对象a，以及reactive对象state，其中state包含b与c属性。在return中，将state转换为ref对象，使其具有响应式的属性。完整代码如例2-6所示。a b c import ref,reactive,toRefs from vue;export default setup()const a=ref(2);/一个响应式且可变的ref对象,此时a的值为2/创建对象的响应式副本，并非直接响应式const state=reactive(b:3,c:Vue 3.0,);a.value=4;return a,.toRefs(state),/toRef()函数将data转化为响应式;,;例2-6 main.js中的代码使用Vue Devtools可以查看a，b，c的值以及它们的类型，如图2-3所示。2.2.6方法在Vue 2.x中，可以用methods选项向组件实例添加方法，在Vue 3中仍然支持。而Vue 3中，还可以将原来methods中的方法写在setup函数中，与Vue 2.x一样使用。需要注意的是，想要访问到方法，同样需要在setup的return中写入方法名。2.2.7方法实例：修改响应式对象的值2.3 本章小结本章介绍了Vue 3的三种引入方式，分别为：CDN Package导入、npm安装以及命令行工具Vue CLI构建项目。此外，还介绍了浏览器调试工具Vue Devtools，它允许开发者在一个更友好的界面中审查和调试Vue应用。在本章中，使用Vite快速构建了一个Vue 3项目。Vite是一个web开发构建工具，可以快速提供代码。在项目构建的实例中，使用了Vue 3新增的createApp函数创建了一个新的应用实例。作为Vue 3的组合式AP的统一入口，本章介绍了setup函数的使用方法、其参数props和context，以及Vue 2.x中的生命周期钩子注册函数在setup函数中的使用方法。对于数据与方法，Vue 3则在支持Vue 2.x中data与methods写法的同时，加入了通过ref函数与reactive函数在setup内创建响应式的对象，以及在setup函数内编写方法的语法。最后，本章还提供了项目构建、数据、方法的实例，读者可以通过这些实例认识到Vue 3在实际项目中的使用。在下一章中，将会介绍Vue的语法和指令，以及一些语法在Vue 3相对Vue 2.x的更新。小测试1.本章介绍了Vue 3的三种引入方式，分别为（）2.介绍了浏览器调试工具（），它允许开发者在一个更友好的界面中审查和调试Vue应用。3.作为Vue 3的组合式AP的统一入口，本章介绍了setup函数的使用方法、其参数（），以及Vue 2.x中的生命周期钩子注册函数在setup函数中的使用方法。4&5.对于数据与方法，Vue 3则在支持Vue 2.x中（）写法的同时，加入了通过（）在setup内创建响应式的对象，以及在setup函数内编写方法的语法。CDN Package导入、npm安装以及命令行工具Vue CLI构建项目Vue Devtoolsprops和contextdata与methodsref函数与reactive函数1.不适用（）A.学习原型B.制作原型C.不需要明确版本号的工作D.生产环境2.通过npm安装Vue 3，推荐在构建（）应用时使用。A.小型 B.中型 C.大型 D.均可3.Setup用于定义外界传递过来的参数名称和类型的参数是（）A.props B.context C.beforeCreate D.beforeMount4.toRefs函数可以将（）创建出来的响应式对象，转换为普通的对象A.ref B.reactive C.props D.context5.在Vue3中会返回原始对象的响应式副本的函数是（）A.ref B.reactiveC.Vue.observable D.toRefsDCAAB1.由于cnpm的仓库源布置在国外，传输速度较慢，作为替代可以使用淘宝镜像源的npm（）2对于Google Chrome和Firefox，都可以在浏览器的应用商店中搜索Vue Devtools直接安装。（）3.Vue 3支持使用Vite构建一个项目。Vite是一个web开发构建工具，可以快速提供代码。通过在命令行中