如何做网站公众号推广网页游戏传奇霸主辅助

当前位置： 首页 > news >正文

如何做网站公众号推广,网页游戏传奇霸主辅助,常见的网站布局结构,wordpress 生成pdf1 基本介绍 #xff08;1#xff09;Vue 是一个前端框架, 易于构建用户界面 #xff08;2#xff09;Vue 的核心库只关注视图层#xff0c;不仅易于上手#xff0c;还便于与第三方库或项目整合 #xff08;3#xff09;支持和其它类库结合使用 #xff08;4#…1 基本介绍 1Vue 是一个前端框架, 易于构建用户界面 2Vue 的核心库只关注视图层不仅易于上手还便于与第三方库或项目整合 3支持和其它类库结合使用 4开发复杂的单页应用非常方便 5Vue 是 Vue.js 的简称 官网: https://cn.vuejs.org/ git 地址: https://github.com/vuejs 2 MVVM 机制示意图 解读 MVVM 思想(上图) M∶即 Model模型包括数据和一些基本操作V∶即View视图页面渲染结果VM∶即 View-Model模型与视图间的双向操作(无需开发人员干涉)在 MVVM之前开发人员从后端获取需要的数据模型然后要通过 DOM 操作 Model 渲染到View 中。而后当用户操作视图我们还需要通过 DOM获取 View 中的数据 然后同步到Model 中。而 MVVM中的VM 要做的事情就是把DOM 操作完全封装起来开发人员不用再关心 Model 和View 之间是如何互相影响的只要我们 Model 发生了改变View上自然就会表现出来当用户修改了ViewModel 中的数据也会跟着改变。结果把开发人员从繁琐的 DOM操作中解放出来把关注点放在如何操作 Model上, 大 大提高开发效率  3 快速入门 官网文档https://cn.vuejs.org/v2/guide/index.html 下载: https://cn.vuejs.org/v2/guide/installation.html  3.1 需求 初步体会 Vue.js 的数据绑定功能 体会 Vue.js 开发框架的主体结构 注意为了让 IDEA 识别 Vue 代码需要安装插件 Vue.js  3.2 代码实现 1创建新文件夹 D:\idea_java_projects\vue , 直接拖到 Idea 工具使用 idea 打开 2将下载好的 vue.js 拷贝到 D:\idea_java_projects\vue\vue.js 3创建 D:\idea_java_projects\vue\vue_quick_start.html !DOCTYPE html html langen headmeta charsetUTF-8titlevue快速入门/title /head body !–

1. div元素不是必须的也可以是其它元素比如span,但是约定都是将vue实例挂载到div
2. 因为div更加适合做布局
3. id 不是必须为app , 是程序员指定,一般我们就使用app – div idapp!–1. {{message}} : 插值表达式2. message 就是从model的data数据池来获取3. 当我们的代码执行时会到data{} 数据池中去匹配数据, 如果匹配上, 就进行替换, 如果没有匹配上, 就输出空–h1欢迎你{{message}}-{{name}}/h1 /div !–引入vue.js– script srcvue.js/script script/*** 1. 创建Vue对象*/let vm new Vue({el : #app, // 将创建的vue实例挂载到 idapp 的div上data : { // data{}表示数据池以k-v形式设置根据需求设置message : Hello-Vue,name : 小王}}) /script /body /html 4运行效果如下 3.3 注意事项和使用细节 1注意代码顺序要求 div 在前script 在后否则无法绑定数据 2从案例可以体会声明式渲染Vue.js 采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统 做到数据和显示分离 3Vue 没有繁琐的 DOM 操作如果使用 jQuery我们需要先找到 div 节点获取到 DOM 对象然后进行节点操作, 显然 Vue 更加简洁 4 数据单向渲染 4.1 基本说明 1v-bind 指令可以完成基本数据渲染/绑定 2v-bind 简写形式就是一个冒号: 4.2 应用实例 4.2.1 需求分析 需求: 演示 v-bind 的使用, 可以绑定元素的属性  4.2.2 代码实现  1把准备好的 1.jpg 拷贝到 D:\idea_java_projects\vue\1.jpg 2创建 D:\idea_java_projects\vue\单向数据渲染.html !DOCTYPE html html langen xmlns:v-bindhttp://www.w3.org/1999/xhtml headmeta charsetUTF-8title单向数据渲染/title /head body div idapph1{{message}}/h1!–1. 使用插值表达式引用 data数据池数据是在标签体内2. 如果是在标签/元素 的属性上去引用data数据池数据时不能使用插值表达式3. 需要使用v-bind, 因为v-bind是vue来解析, 默认报红,但是不影响解析4. 如果不希望看到报红, 直接 altenter 引入 xmlns:v-bind–img v-bind:srcimg_src v-bind:widthimg_width!–v-bind 简写形式就是一个冒号:–img :srcimg_src :widthimg_width /div script srcvue.js/script scriptlet vm new Vue({el : #app, // 将创建的vue实例挂载到 idapp 的div上data : { // data{}表示数据池以k-v形式设置根据需求设置message : 单向数据渲染测试,img_src : 1.jpg,img_width : 200px}}) /script /body /html 3效果如下 4.3 注意事项和使用细节  1插值表达式是用在标签体的 2如果给标签属性绑定值则使用 v-bind 指令  5 数据双向绑定 5.1 基本说明 v-model 可以完成双向数据绑定
   5.2 应用实例  5.2.1 需求分析 需求在输入框中输入信息会更新到相应绑定的位置  5.2.2 代码实现 1创建 D:\idea_java_projects\vue\双向数据渲染.html  !DOCTYPE html html langen xmlns:v-modelhttp://www.w3.org/1999/xhtml headmeta charsetUTF-8title双向数据渲染/title /head body div idapph1{{message}}/h1!–1. v-bind是数据单向渲染: data数据池绑定的数据变化会影响view2. v-modelhobby.val 是数据的双向渲染,(1)data数据池绑定的数据变化会影响view 【底层的机制是 Data Bindings】(2)view 关联的的元素值变化, 会影响到data数据池的数据【底层机制是Dom Listeners】–input typetext v-modelhobby.valbr/br/input typetext :valuehobby.valbr/br/p你输入的爱好是: {{hobby.val}}/p /div script srcvue.js/script scriptlet vm new Vue({el : #app, // 将创建的vue实例挂载到 idapp 的div上data : { // data{}表示数据池以k-v形式设置根据需求设置message : 输入爱好,hobby :{val : 购物}}}) /script /body /html 2完成测试 6 事件绑定  6.1 基本说明 1使用 v-on 进行事件处理比如: v-on:click 表示处理鼠标点击事件v-on:blur 表示失去焦点事件 2事件调用的方法定义在 vue 对象声明的 methods 节点中 3v-on:事件名 可以绑定指定事件 4官方文档https://cn.vuejs.org/v2/guide/events.html  6.2 应用实例 6.2.1 需求分析 需求: 演示 Vue 事件绑定操作  6.2.2 代码实现  1创建 D:\idea_java_projects\vue\event.html !DOCTYPE html html langen xmlns:v-onhttp://www.w3.org/1999/xhtml headmeta charsetUTF-8title事件绑定/title /head body div idapph1{{message}}/h1!–1. v-on:click 表示我们要给button元素绑定一个点击的事件2. sayHi() 表示绑定的方法, 在方法池 methods{} 定义的3. 底层仍然是dom处理4. 如果方法不需要传递参数可以省略()5. v-on:click可以简写成 click, 但是需要浏览器支持–button v-on:click sayHi()点击输出/buttonbutton v-on:click sayOk()点击输出/buttonbutton v-on:click sayHi点击输出/buttonbutton click sayOk点击输出/button /div script srcvue.js/script script// 创建的Vue实例可以不接收也可以接收方便我们调试信息let vm new Vue({el : #app,// el 接收element简写data : {message : Vue事件处理案例},// methods 是Vue的一个属性// 在{}中可以写很多的方法可以理解为方法池methods : {sayHi(){alert(hi)},sayOk(){alert(ok)}}}) /script /body /html 6.2.3 注意事项和使用细节 1如果方法没有参数可以省略()[需要浏览器支持] 2v-on 指令的简写形式 [需要浏览器支持]  7 修饰符 7.1 基本说明 1修饰符 (Modifiers) 是以(.)指明的后缀指出某个指令以特殊方式绑定。 2例如.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()即阻 止事件原本的默认行为 3事件修饰符 .stop 阻止事件继续传播.prevent 阻止标签默认行为.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理然后才交由内部元素进 行处理.self 只当在 event.target 是当前元素自身时触发处理函数.once 事件将只会触发一次.passive 告诉浏览器你不想阻止事件的默认行为 4键盘事件的修饰符 比如: 项目经常需要监听一些键盘事件来触发程序的执行而 Vue 中允许在监听的时候添加键盘修饰符 input v-on:keyup.13submit 绝大多数常用的按键码的别名 .enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right 5v-model 的修饰符 比如: 自动过滤用户输入的首尾空格 input v-model.trimmsg 6官 方 文 档 https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6  7.2 应用实例 需求: 1演示 v-on:submit.prevent 的使用, 如果没有输入名字控制台输出 请输入名字否则输出 提交表单 2解惑, 为什么在开发中, 有时需要 , 让某个指令以特殊方式绑定, 比如表单提交 我们不希望将这个表单进行整体提交, 而是是 Ajax 的方式进行提交因为表单整体提交会导致重载页面, 而 Ajax 方式可以有选择性提交数据并且局部刷新  代码实现 1 创建 D:\idea_java_projects\vue\vue_modifier.html !DOCTYPE html html langen xmlns:v-onhttp://www.w3.org/1999/xhtml headmeta charsetUTF-8titleVue修饰符使用/title /head body div idapp!–1. 修饰符用于指出一个指令应该以特殊方式绑定。2. v-on:submit.prevent的.prevent 修饰符表示阻止表单提交的默认行为–form actionhttp://www.baidu.com v-on:submit.preventonMySubmit妖怪名: input typetext v-modelmonster.namebr/br/button typesubmit注册/button/formp服务返回的数据是{{count}}/p /div script srcvue.js/script scriptlet vm new Vue({el: #app,data: {//数据池monster: {//monster数据(对象)的属性, 可以动态生成},count: 0},methods: {//方法池onMySubmit() {//console.log(我们自己的表单提交处理…);//, null, undefined都是falseif(this.monster.name) {console.log(提交表单 name, this.monster.name);//这里程序员就可以根据自己的业务发出ajax请求到后端//得到数据后在进行数据更新this.count 666;} else {this.count 0;console.log(请输入名字..);}}}}) /script /body /html 2效果如下 不输入名字直接提交 输入名字再提交 8 条件渲染/控制: v-if v-show 8.1 基本说明  Vue 提供了 v-if 和 v-show 条件指令完成条件渲染/控制 1v-if 介绍 说明0、null、undefined、(空串) 、false 都认为是false 可以用 v-else-if 添加一个分支  2v-show 3官方文档https://cn.vuejs.org/v2/guide/conditional.html 8.2 应用实例  8.2.1 需求分析  需求: 演示条件渲染使用(使用 v-if 和 v-show 实现)  8.2.2 代码实现  1创建 D:\idea_java_projects\vue\v_if.html ,v-if实现 !DOCTYPE html html langen headmeta charsetUTF-8title条件渲染演示 v-if/title /head body div idappinput typecheckbox v-modelsel是否同意条款h1 v-ifsel你同意条款/h1h1 v-else你不同意条款/h1 /div script srcvue.js/script scriptlet vm new Vue({el : #app,data : {sel : false}}) /script /body /html 2创建 D:\idea_java_projects\vue\v_show.html ,v-show实现 !DOCTYPE html html langen headmeta charsetUTF-8title条件渲染演示 v-show/title /head body div idappinput typecheckbox v-modelsel是否同意条款h1 v-showsel你同意条款/h1h1 v-show!sel你不同意条款/h1 /div script srcvue.js/script scriptlet vm new Vue({el : #app,data : {sel : false}}) /script /body /html 3实现效果如下 8.3 v-if 和 v-show 区别 1v-if 会确保在切换过程中条件块内的事件监听器和子组件销毁和重建  2v-show 机制相对简单, 不管初始条件是什么元素总是会被渲染并且只是对 CSS 进行切换  3使用建议如果要频繁地切换建议使用 v-show 如果运行时条件很少改变使用 v-if 较好  9 列表渲染: v-for 9.1 基本说明 Vue 提供了 v-for 列表循环指令官方文档https://cn.vuejs.org/v2/guide/list.html  1对数组进行遍历 可以用第二个参数作为索引  2 用 v-for 来遍历一个对象的 property 还可以用第三个参数作为索引  9.2 应用实例 9.2.1 需求分析 需求: 演示列表渲染使用(v-for)  9.2.2 代码实现  1 创建 D:\idea_java_projects\vue\v_for.html !DOCTYPE html html langen headmeta charsetUTF-8titlev-for 列表渲染/title /head body div idapp!–基本语法:li v-for变量 in 数字{{ 变量 }}/li–h1简单的列表渲染/h1ulli v-fori in 3{{i}}/li/ul!–基本语法:li v-for(变量, 索引) in 值{{ 变量 }} - {{ 索引 }}/li–h1简单的列表渲染-带索引/h1ulli v-for(i,index) in 3{{i}}-{{index}}/li/ulh1遍历数据列表/h1!– 语法:tr v-for对象 in 对象数组td{{对象的属性}}/td/tr–table width400px border1pxtr v-for(monster,index) in monsterstd{{index}}/tdtd{{monster.id}}/tdtd{{monster.name}}/tdtd{{monster.age}}/td/tr/table /div script srcvue.js/script scriptnew Vue({el: #app,data: { //数据池monsters: [{id: 1, name: 牛魔王, age: 800},{id: 2, name: 黑山老妖, age: 900},{id: 3, name: 红孩儿, age: 200}]}}) /script /body /html 2效果 10 组件化编程  10.1 基本说明
4. 在大型应用开发的时候页面可以划分成很多部分往往不同的页面也会有相同的部 分。例如可能会有相同的头部导航。
5. 但是如果每个页面都独自开发这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件然后在不同页面就可以共享这些组件避免重复开发(如图)  3. 上图解读 组件(Component) 是 Vue.js 最强大的功能之一组件也是一个Vue实例也包括∶ data、methods、生命周期函数等组件渲染需要 html模板所以增加了template 属性值就是 HTML 模板对于全局组件任何vue 实例都可以直接在 HTML 中通过组件名称来使用该组件data 是一个函数不再是一个对象 这样每次引用组件都是独立的对象/数据  10.2 应用实例 10.2.1 需求分析 如下, 点击一个按钮, 可以显示点击的次数  现在需求是,有多个按钮都要进行点击统计 10.2.2 实现方式1-普通方式 1创建 D:\idea_java_projects\vue\组件化编程1.html  !DOCTYPE html html langen xmlns:v-onhttp://www.w3.org/1999/xhtml headmeta charsetUTF-8title组件化编程/title /head bodydiv idapp!–非组件化方式-普通方式–button v-on:clickclick1()点击次数 {{count}} 次【非组件化方式】/buttonbr/br/!–需求是,有多个按钮都要进行点击统计1. 其实三个按钮界面其实一样, 但是目前我们都重新写了一次, 复用性低2. 点击各个按钮的业务都是对次数1, 因此业务处理类似但是也都重新写了一个方法, 复用性低3. 解决 组件化编程–button v-on:clickclick2()点击次数 {{count2}} 次【非组件化方式】/buttonbr/br/button v-on:clickclick3()点击次数 {{count3}} 次【非组件化方式】/buttonbr/ /div script srcvue.js/script scriptnew Vue({el: #app,data: {//data数据池count: 10,count2: 10,count3: 10},methods: {//methods属性, 可以定义相应的方法click1() {this.count;},click2() {this.count2;},click3() {this.count3;}}}) /script /body /html 2测试  10.2.3 实现方式 2-全局组件方式 1 创建 D:\idea_java_projects\vue\组件化编程2.html  !DOCTYPE html html langen headmeta charsetUTF-8title组件化编程-全局组件/title /head body div idapph1组件化编程-全局组件/h1!–使用全局组件–counter/counterbr/counter/countercounter/countercounter/countercounter/counter /divdiv idapp2h1组件化编程-全局组件-app2/h1!–使用全局组件–counter/countercounter/counter /div script srcvue.js/script script//1、定义一个全局组件, 名称为 counter//2. {} 表示就是我们的组件相关的内容//3. template 指定该组件的界面, 因为会引用到数据池的数据所以需要是模板字符串//4. 要把组件视为一个Vue实例也有自己的数据池和methods//5. 对于组件我们的数据池的数据是使用函数/方法返回[目的是为了保证每个组件的数据是独立], 不能使用原来的方式//6. 这时我们达到目前界面通过template实现共享,业务处理也复用//7. 全局组件是属于所有vue实例因此可以在所有的vue实例使用Vue.component(counter, {template: button v-on:clickclick()点击次数 {{count}} 次【全局组件化】/button,data() {//这里需要注意和原来的方式不一样!!!!return {count: 10}},methods: {click() {this.count;}}})//创建Vue实例必须有let vm new Vue({el: #app//Vue实例的挂载点})let vm2 new Vue({el: #app2//Vue实例的挂载点})/script /body /html 2测试 10.2.4 实现方式 3-局部组件方式 1 创建 D:\idea_java_projects\vue\组件化编程3.html  说明必须在vue实例中引入局部组件才能使用该局部组件 !DOCTYPE html html langen headmeta charsetUTF-8title组件化编程-局部组件/title /head body div idapph1组件化编程-局部组件/h1!–使用局部组件 ,该组件是从挂载到app的vue中来的–my_counter/my_counterbr/my_counter/my_counterbr/my_counter/my_counterbr/ /divdiv idapp2h1组件化编程-局部组件-app2/h1!–使用局部组件 –wwj_counter/wwj_counterbr/wwj_counter/wwj_counterbr/ /div script srcvue.js/script script//定义一个组件, 组件的名称为 buttonCounter//扩展//1. 可以把常用的组件定义在某个commons.js中 export//2. 如果某个页面需要使用 直接importconst buttonCounter {template: button v-on:clickclick()点击次数 {{count}} 次【局部组件化】/button,data() {//这里需要注意和原来的方式不一样!!!!return {count: 10}},methods: {click() {this.count;}}}//创建Vue实例必须有let vm new Vue({el: #app,//Vue实例的挂载点components: { //引入/注册某个组件, 此时my_counter就是一个组件, 是一个局部组件,他的使用范围在当前vuemy_counter: buttonCounter}})let vm2 new Vue({el: #app2,//Vue实例的挂载点components :{//引入/注册组件buttonCounterwwj_counter: buttonCounter}})/script /body /html 2测试 10.2.5 注意事项和使用细节  1如果方法体, 只有简单的语句,比如 count, 那么可以进行简写, 在组件化编程1.html 演示, 比如  !DOCTYPE html html langen xmlns:v-onhttp://www.w3.org/1999/xhtml headmeta charsetUTF-8title组件化编程/title /head bodydiv idapp!–非组件化方式-普通方式–button v-on:clickcount点击次数 {{count}} 次/buttonbr/br/button v-on:clickcount点击次数 {{count2}} 次/buttonbr/br//div script srcvue.js/script scriptnew Vue({el: #app,data: {//data数据池count: 10,},}) /script /body /html 2局部组件定义需要放置在 new Vue() 前否则组件注册会失败 10.3 组件化小结 组件也是一个 Vue 实例因此它的定义是也存在∶ data、methods、生命周期函数等data 是一个函数不再是一个对象 这样每次引用组件都是独立的对象/数据组件渲染需要 html 模板所以增加了 template 属性值就是 HTML 模板  11 生命周期和监听函数(钩子函数)  11.1 基本说明 1Vue 实例有一个完整的生命周期也就是说从开始创建、初始化数据、编译模板、挂载 DOM、渲染-更新-渲染、卸载等一系列过程我们称为 Vue 实例的生命周期 2钩子函数(监听函数): Vue 实例在完整的生命周期过程中(比如设置数据监听、编译模 板、将实例挂载到 DOM 、在数据变化时更新 DOM 等), 也会运行叫做生命周期钩子的函数 3钩子函数的 作用就是在某个阶段, 给程序员一个做某些处理的机会  11.2 Vue生命周期示意图 上图解读 (1) new Vue()new 了一个 Vue 的实例对象此时就会进入组件的创建过程。
   (2) Init Events Lifecycle初始化组件的事件和生命周期函数
   (3) beforeCreate组件创建之后遇到的第一个生命周期函数这个阶段 data 和 methods 以及 dom 结构都未被初始化也就是获取不到 data 的值不能调用 methods 中的函数
   (4) Init injections reactivity这个阶段中, 正在初始化 data 和 methods 中的方法
   (5) created这个阶段组件的 data 和 methods 中的方法已初始化结束可以访问但是 dom 结构未 初始化页面未渲染
   

• 特别说明在这个阶段经常会发起 Ajax 请求从后端获取到最新数据 (6) 编译模板结构(在内存) (7) beforeMount当模板在内存中编译完成此时内存中的模板结构还未渲染至页面上看不到真实的数据
  (8) Create vm.$el and replace ‘el’ with it这一步在把内存中渲染好的模板结构替换至真实的 dom 结构也就是页面上
  (9) mounted此时页面渲染好用户看到的是真实的页面数据 生命周期创建阶段完毕进入到了运行中的阶段
  (10) 生命周期运行中
  10.1 beforeUpdate当执行此函数数据池的数据是新的但是页面是旧的
  10.2 Virtual DOM re-render and patch根据最新的 data 数据重新渲染内存中的模板结构并把渲染好的模板结构替换至页面 上
  10.3 updated页面已经完成了更新此时data 数据和页面的数据都是新的
  (11) beforeDestroy当执行此函数时组件即将被销毁但是还没有真正开始销毁此时组件的 data、methods数据或方法 还可被调用
  (12) Teardown……注销组件和事件监听 (13) destroyed组件已经完成了销毁 11.3 应用实例 11.3.1 需求分析 需求展示 VUE 实例生命周期和 钩子函数/监听函数/生命周期函数 执行时机 1重点研究几个重要的钩子函数 (beforeCreate, created, beforeMount, mounted, beforeUpdate, updated) 2验证在这几个钩子函数中, 数据模型/数据池是否加载/使用? 自定义方法是否加载/可用? html 模板是否加载/使用? html 模板是否完成渲染?  11.3.2 代码实现 1创建 D:\idea_java_projects\vue\Vue\生命周期和钩子函数.html
  !DOCTYPE html html langen headmeta charsetUTF-8titleTitle/title /head body div idappspan idnum{{num}}/spanbutton clicknum赞/buttonh2{{name}},有{{num}}个人点赞/h2 /div script srcvue.js/script scriptnew Vue({el:#app,data : {//数据池name : 小王,num : 0},methods: {show(){return this.name;},add(){this.num;}},beforeCreate(){//生命周期函数-创建vue实例前调用console.log(beforeCreate);console.log(数据模型/数据池的数据是否加载/使用?[no], this.name, , this.num);// 会报错:Error in beforeCreate hook: TypeError: this.show is not a function//console.log(自定义方法是否加载/使用?[no], this.show());console.log(用户页面dom是否加载/使用?[yes], document.getElementById(num));console.log(用户页面dom是否被渲染?[no], document.getElementById(num).innerText);},created() {//生命周期函数-创建vue实例console.log(created);console.log(数据模型/数据池的数据是否加载/使用?[yes], this.name, , this.num);console.log(自定义方法是否加载/使用?[yes], this.show());console.log(用户页面dom是否加载/使用?[yes], document.getElementById(num));console.log(用户页面dom是否被渲染?[no], document.getElementById(num).innerText);//可以发出Ajax//接收返回的数据//再次去更新data数据池的数据//编译内存模板结构//…..},beforeMount() {//生命周期函数-挂载前console.log(beforeMount);console.log(数据模型/数据池的数据是否加载/使用?[yes], this.name, , this.num);console.log(自定义方法是否加载/使用?[yes], this.show());console.log(用户页面dom是否加载/使用?[yes], document.getElementById(num));console.log(用户页面dom是否被渲染?[no], document.getElementById(num).innerText);},mounted() {//生命周期函数-挂载后console.log(mounted);console.log(数据模型/数据池的数据是否加载/使用?[yes], this.name, , this.num);console.log(自定义方法是否加载/使用?[yes], this.show());console.log(用户页面dom是否加载/使用?[yes], document.getElementById(num));console.log(用户页面dom是否被渲染?[yes], document.getElementById(num).innerText);},beforeUpdate() {//生命周期函数-数据池数据更新前console.log(beforeUpdate);console.log(数据模型/数据池的数据是否加载/使用?[yes], this.name, , this.num);console.log(自定义方法是否加载/使用?[yes], this.show());console.log(用户页面dom是否加载/使用?[yes], document.getElementById(num));console.log(用户页面dom数据是否被更新?[no], document.getElementById(num).innerText);//验证数据修正// if(this.num 10 ) {// this.num 8;// }},updated() {//生命周期函数-数据池数据更新后console.log(updated);console.log(数据模型/数据池的数据是否加载/使用?[yes], this.name, , this.num);console.log(自定义方法是否加载/使用?[yes], this.show());console.log(用户页面dom是否加载/使用?[yes], document.getElementById(num));console.log(用户页面dom数据是否被更新?[yes], document.getElementById(num).innerText);}}) /script /body /html 2测试 12 Vue2 脚手架模块化开发  12.1 为什么需要 Vue Cli 脚手架? 目前开发模式的问题 1开发效率低 2不够规范 3维护和升级, 可读性比较差  12.2  脚手架模块化开发–快速入门 12.2.1 需求分析 需求: 演示使用 Vue 脚手架进行模块化开发, 输入不同的 url, 切换不同页面.  Vue Cli 文档地址: https://cli.vuejs.org/zh/  12.2.2 环境配置搭建项目 1搭建 Vue 脚手架工程需要使用到 NPM(node package manager), npm 是随 nodejs 安装 的一款包管理工具, 类似 Maven。所以需要先安装 Nodejs 2为了更好兼容 这里安装 node.js10.16.3(因为这里 只是演示 Vue 脚手架工程),后面进行 Vue3 的脚手架工程搭建, 再对 Node 升级 3如果以前安装过 node.js , 为防止版本冲突先卸载之, 如果你没安装 nodejs, 就不用管  卸载步骤如下 打开控制面板点击卸载程序 搜索node点击卸载 (这里需要一段时间耐心等待) 再次测试卸载成功 4下载 node.js10.16.3 地址: https://nodejs.org/en/blog/release/v10.16.3/  往下翻找到电脑相应的配置进行下载 5下载完成之后 , 双击进行安装直接下一步即可(可根据自己来选择安装路径路径不要有空格、中文、特殊字符) 6验证是否安装成功, 如果看不到, 退出 cmd, 重新开一个窗口测试即可 7先删除以前的 cli 版本不论是之前未下载或没有下载cmd中执行下面命令 npm uninstall vue-cli -g 8安装淘宝镜像-cnpm  npm install -g cnpm7.1.1 –registryhttps://registry.npm.taobao.org 说明npm 和 cnpm 的区别 两者之间只是 node 中包管理器的不同, 都可以使用npm 是 node 官方的包管理器。cnpm 是个中国版的 npm是淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm如果因为网络原因无法使用 npm 下载那 cnpm 这个就派上用场了小结: npm 和 cnpm 只是下载的地址不同npm 是从国外下载东西cnpm 是从国内 下载东西  安装成功之后需要给cnpm配置环境变量找到cnpm.cmd,我的是在D:\software\nodejs\node_cache 接下来配置环境变量

1. 右键点击计算机图标选择“属性”。
2. 在弹出的窗口中点击“高级系统设置”。
3. 在“系统属性”对话框中转到“高级”选项卡然后点击“环境变量”按钮。
4. 在“环境变量”窗口中找到“系统变量”部分的“Path”变量然后点击“编辑”。
5. 在“编辑环境变量”对话框中点击“新建”并添加cnpm.cmd所在目录的完整路径例如D:\software\nodejs\node_cache。
6. 记得在每个路径之间用英文分号(;)隔开。如果你已经有其他路径确保在新路径前加上分号。
7. 点击“确定”关闭所有对话框完成环境变量的修改。 9 安装 webpack 和 webpack-cli npm install webpack4.41.2 webpack-cli -D 10安装vue脚手架 cnpm install -g vue/cli4.0.3 11确认 Vue-Cli 版本 vue -V 12创建目录 vue_project, 并 cmd 到该目录  13使用 webpack 创建 vue 脚手架项目 (如果出现了 downloading template…., 60s 退出窗口重新来操作一次即可 .) //安装一个全球插件 npm install -g vue/cli-initvue init webpack vue_project_start14运行我们的vue项目 cd vue_project_start npm run dev 15浏览器 http://localhost:8080  12.2.3 使用IDEA 打开项目运行项目  1使用 crtlc 终止项目 2将 Vue 脚手架项目直接拖到 IDEA就可以打开 3配置 NPM 12.3 Vue 项目结构分析 12.4 Vue 请求页面执行流程  当我们输入 http://localhost:8080 , 你看到这个页面时怎么来的这里涉及到如下文件 执行流程如下  12.5 路由切换-应用实例  1创建 vue_project\vue_project_quickstart\src\components\Yss.vue template divh1{{mes}}/h1tabletrtd第1行第1列/tdtd第1行第2列/tdtd第1行第3列/td/trtrtd rowspan2第2行第1列/tdtd第2行第2列/tdtd第2行第3列/td/trtrtd第3行第2列/tdtd第3行第3列/td/trtrtd rowspan2第4行第1列/tdtd第4行第2列/tdtd第4行第3列/td/trtrtd红烧肉img src/assets/2.png/tdtd第5行第3列/td/tr/table /div /templatescript export default {name: Yss,data(){return {mes : Welcome to Yss}} } /script!–css样式– style scoped div {width: 900px;background-color: aliceblue;margin: 0 auto; } table,tr,td{border: 1px solid red;/width: 600px;/border-collapse:collapse;/height: 50px;/ } table {margin: 0 auto;width: 600px;height: 380px; } h1 {color: red; } /style2 在 vue_project\vue_project_quickstart\src\router\index.js 添加路由 {path: /yss,name: Yss,component : Yss } 3把 vue_project\vue_project_quickstart\src\App.vue 默认logo注销  (4) 浏览器 http://localhost:8080/#/yss  13 ElementUI 使用 13.1 基本说明  1ElementUI 官网: https://element.eleme.cn/#/zh-CN  2一句话: ElementUI 是组件库网站快速成型工具  3vue2 使用的是  ElementUI 组件库vue3 使用的是 ElementPlus 组件库 13.2 应用实例-Vue 项目引入 ElementUI  13.2.1 需求分析 在 Vue2 项目中, 使用 ElementUI 组件  13.2.2 代码演示  1安装 element-ui 组件库, cmd 下进入到项目指令 npm i element-ui2.12.0 , 这里指定了版本 2修改 vue_project\vue_project_quickstart\src\main.js 引入elementUI组件库 // The Vue build version to load with the import command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from vue import App from ./App.vue import router from ./router/index.js // 引入elementUI组件库 import ElementUI from element-ui; import element-ui/lib/theme-chalk/index.css;//使用ElementUI插件 Vue.use(ElementUI);Vue.config.productionTip false/* eslint-disable no-new */ new Vue({el: #app,router: router, //指定routercomponents: {App: App},template: App/ })3修 改 vue_project\vue_project_quickstart\src\components\Yss.vue 引 入 element-ui 按钮组件, 从文档拷贝即可 3页面效果  14 Axios  14.1 基本说明 1axios 是独立于 vue 的一个项目不是 Vue 的一部分 2axios 通常和 Vue 一起使用实现 Ajax 操作 3Axios 是一个基于 promise 的 HTTP 库 4学习文档https://javasoho.com/axios/ 14.2 Axios 库文件   1使用 axios 需要引入 axios 库文件 2可以直接引入  script srchttps://unpkg.com/axios/dist/axios.min.js/script 3也可以下载 axios.min.js 在本地引入 下载方式在页面 https://unpkg.com/axios/dist/axios.min.js 中右键另存为即可 14.3 Axios 应用实例  14.3.1 需求分析 需求 : 在 Vue 项目中使用 Axios, 从服务器获取 json 数据 , 显示在页面 14.3.2 代码实现 1 新建一个 javascript 项目 2在该项目下创建 data/response_data.json {success: true,message: 成功,data: {items: [{name: 牛魔王,age: 800},{name: 红孩儿,age: 500},{name: 蜈蚣精,age: 200}]} } 3将下面两个js文件复制到项目中已附在文章顶部 4创建 axios_quick_start.html  !DOCTYPE html html langen headmeta charsetUTF-8titleaxios的应用实例/title /head body !–页面视图– div idapph1{{msg}}/h1table border1 width200trtd名字/tdtd年龄/td/trtr v-formonster in monsterListtd{{monster.name}}/tdtd{{monster.age}}/td/tr/table /div script srcvue.js/script script srcaxios.min.js/script scriptnew Vue({el: #app,data: {msg: 妖怪信息列表,monsterList: [] //表示妖怪的信息数组},methods: {//自定义方法list() {//发送ajax请求,获取数据 axios/1. axios.get() 表示发出ajax请求2. http://localhost:63342/axios/data/response.data.json 表示请求的url要根据实际情况来填写3. axios发出ajax请求的基本语法axios.get(url).then(箭头函数).then(箭头函数)…catch(箭头函数)(1) 如果get请求成功就进入到第一个then()(2) 可以在第一个then()中继续发出axios的ajax请求(3) 如果有异常, 会进入到 catch(箭头函数)4. list在vue生命周期函数created() 中调用/axios.get(http://localhost:63342/axios/data/response_data.json).then(responseData {console.log(responseData , responseData)//使用JSON.stringify(json) 把json对象转成一个字符串,方便观察console.log(responseData , JSON.stringify(responseData));// console.log(responseData.data , responseData.data)// console.log(responseData.data.data , responseData.data.data)console.log(responseData.data.data.item , responseData.data.data.items)//将妖怪列表数组信息, 绑定到 data数据池的 monsterListthis.monsterList responseData.data.data.items;}).catch(err {console.log(异常, err)})}},created() {this.list();}}) /script /body /html 5测试 14.4 注意事项和细节说明  1将 JSON 对象转成字符串 JSON.stringify(response)  2格式化输出 JSON 字符串方便观察分析。到 https://www.json.cn/  3发生多次 ajax 请求的方式和 promise 相同