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

第3章Vue.js指令（6学时）教学目标理解Vue.js指令的定义与分类。掌握条件渲染指令的使用与注意事项。掌握列表渲染指令v-for的多种定义方法及与key属性配合使用的方法。掌握数据绑定的多种方式。掌握事件处理指令及事件修饰符的使用方法。掌握其它内置指令的作用与使用方法。掌握Vue自定义指令定义与注册的方法。第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发展史和特点Vue发展简史Vue特点起源于2013年12月自己的实验项目1.2Vue.js生产环境配置/1.2.1Vue.js/引入方法1.2.3Node.js环境配置安装node.js（v16.14.x以上）环境配置主要是为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“1.2.3环境配置示意图(3)设置环境变量。右击“计算机”,依次选择“属性→高级系统设置→高级→环境变量”。在系统变量域中，单击“新建”按钮，在“编辑系统变量”对话框中设置变量名为NODE_PATH、变量值为F:\nodejs\node_global\node_modules。在“Administrator的用户变量”域中，选择变量Path后，单击“编辑”按钮，将变量值中的C:\Users\Administrator\AppData\Roaming\npm修改为F:\nodejs\node_global。(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.2.4创建第一个Vue单页程序(1)Vuev2.X<divid="app"><p>{{message}}--{counter}}</p></div><!--JS部分-->?<script>varvm=newVue({//创建Vue实例??el:"#app",//定义挂载元素??templ