1. 知识回顾
1.1 Axios案例
1.1.1 Ajax发展史
- JS的原生Ajax操作 处理复杂 不便于使用.
- jQuery 是JS的高级函数类库. 封装了很多的API 简化程序调用的过程 (回调地狱: Ajax嵌套问题)
- promise对象 将Ajax嵌套的结构 转化为链式加载的结构. ajax.get().then(xxxxxx)
4. Axios 主要封装了promise对象. 将调用变得更加的简化. 整合VUE.js中大部分条件下都整合axios 发起ajax请求.
1.1.2 请求的类型
http常用的请求类型 8种 但是一般四种需要单独的记忆.
-
查询操作时 GET请求类型 特点: 参数结构key=value URL?key=value&key2=value2
-
新增(form表单) POST请求类型 特点: 会将参数封装到请求头中 相对更加的安全 key=value key2=value2 可以直接采用对象的方式接收.
Axios中的post 参数是一个JSON串 {key1:vallue1, key2:value2} 将JSON串转化为对象 @RequestBody -
删除操作 DELETE请求类型 特点:与GET请求类型 一致的.
-
更新操作 PUT请求类型 特点: 与POST请求类型一致的.
-
RestFul风格: 在上述的四大请求类型中都可以使用(单独的体系) 参数使用/分割 注意参数结构 灵活选用.
1.2 Axios作业-删除数据
1.2.1 编辑页面JS
为删除按钮添加点击事件
编辑页面JS 发起Ajax请求
请求方式说明:
1.2.2 编辑Controller方法
1.2.3 编辑Service方法
1.3 Axios作业-修改数据
1.3.1 业务说明
- 准备修改的DIV 其中包含4部分数据. name/age/sex where id!!!
- 当用户点击修改按钮时,应该实现数据的回显.
- 当用户已经修改完成之后,需要点击提交按钮时 应该发起ajax请求实现数据修改操作.
注意事项:
在vue.js中看到了INPUT框, 则表示双向数据绑定. 必须在data中定义属性.
1.3.2 编辑页面JS
- 定义修改html标签
- 定义修改的对象 updateUser 并且双向数据绑定
- 为提交按钮添加点击事件. 实现ajax参数提交.
- 清空已提交的数据,重新获取列表信息.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>VUE-Axios练习</title> </head> <body> <!-- 定义VUE根标签 --> <div id="app"> <div align="center"> <h1 align="center">用户新增</h1> 名称: <input type="text" v-model.trim="addUser.name"/> 年龄: <input type="text" v-model.number="addUser.age"/> 性别: <input type="text" v-model.trim="addUser.sex"/> <button @click="addUserMe">新增</button> </div> <hr /> <div align="center"> <!-- 需求: ID是修改操作的必备参数,用户不可以修改 disabled="false" JS规范如果设定true 可以简化为key --> <h1 align="center">用户修改</h1> 编号: <input type="text" v-model.trim="updateUser.id" disabled /> 名称: <input type="text" v-model.trim="updateUser.name"/> 年龄: <input type="text" v-model.number="updateUser.age"/> 性别: <input type="text" v-model.trim="updateUser.sex"/> <!-- 当用户修改完成之后,点击提交按钮时发起ajax请求. --> <button @click="updateUserMe">提交</button> </div> <hr /><span class="token operator"><</span>table id<span class="token operator">=</span><span class="token string">"tab1"</span> border<span class="token operator">=</span><span class="token string">"1px"</span> align<span class="token operator">=</span><span class="token string">"center"</span> width<span class="token operator">=</span><span class="token string">"80%"</span><span class="token operator">></span> <span class="token generics"><span class="token punctuation"><</span>tr<span class="token punctuation">></span></span> <span class="token operator"><</span>td colspan<span class="token operator">=</span><span class="token string">"5"</span> align<span class="token operator">=</span><span class="token string">"center"</span><span class="token operator">></span><span class="token generics"><span class="token punctuation"><</span>h1<span class="token punctuation">></span></span>用户列表<span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span> <span class="token operator"><</span>tr align<span class="token operator">=</span><span class="token string">"center"</span><span class="token operator">></span> <span class="token generics"><span class="token punctuation"><</span>td<span class="token punctuation">></span></span>编号<span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token generics"><span class="token punctuation"><</span>td<span class="token punctuation">></span></span>姓名<span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token generics"><span class="token punctuation"><</span>td<span class="token punctuation">></span></span>年龄<span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token generics"><span class="token punctuation"><</span>td<span class="token punctuation">></span></span>性别<span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token generics"><span class="token punctuation"><</span>td<span class="token punctuation">></span></span>操作<span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> 指令<span class="token operator">:</span> 可以循环数据<span class="token operator">+</span>标签 v<span class="token operator">-</span><span class="token keyword">for</span> <span class="token operator">--</span><span class="token operator">></span> <span class="token operator"><</span>tr align<span class="token operator">=</span><span class="token string">"center"</span> v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">"user in userList"</span><span class="token operator">></span> <span class="token operator"><</span>td v<span class="token operator">-</span>text<span class="token operator">=</span><span class="token string">"user.id"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td v<span class="token operator">-</span>text<span class="token operator">=</span><span class="token string">"user.name"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td v<span class="token operator">-</span>text<span class="token operator">=</span><span class="token string">"user.age"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td v<span class="token operator">-</span>text<span class="token operator">=</span><span class="token string">"user.sex"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token generics"><span class="token punctuation"><</span>td<span class="token punctuation">></span></span> <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> 为修改按钮添加点击事件 传递当前行对象 <span class="token operator">--</span><span class="token operator">></span> <span class="token operator"><</span>button <span class="token annotation punctuation">@click</span><span class="token operator">=</span><span class="token string">"updateUserBtn(user)"</span><span class="token operator">></span>修改<span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> 为当前user对象绑定点击事件 <span class="token operator">--</span><span class="token operator">></span> <span class="token operator"><</span>button <span class="token annotation punctuation">@click</span><span class="token operator">=</span><span class="token string">"deleteUser(user)"</span><span class="token operator">></span>删除<span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>table<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">1.</span>引入VUE<span class="token punctuation">.</span>js <span class="token operator">--</span><span class="token operator">></span> <span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">2.</span>引入<span class="token class-name">Axios</span><span class="token punctuation">.</span>js <span class="token operator">--</span><span class="token operator">></span> <span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"../js/axios.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> 需求分析<span class="token number">1</span><span class="token operator">:</span> <span class="token number">1.</span>当用户打开页面时就应该发起<span class="token class-name">Ajax</span>请求获取userList数据<span class="token punctuation">.</span> <span class="token number">2.</span>将userList数据 在页面中展现 <span class="token number">2.1</span>页面中的数据必须在data中定义 <span class="token number">2.2</span> ajax请求的结果赋值给data属性 <span class="token number">3.</span>利用v<span class="token operator">-</span><span class="token keyword">for</span>指令实现数据遍历 需求分析<span class="token number">2</span><span class="token operator">:</span> 用户数据入库操作 <span class="token number">1.</span>在页面中准备用户新增文本框<span class="token operator">/</span>按钮 <span class="token number">2.</span>准备双向数据绑定的规则 <span class="token number">3.</span>为按钮添加事件<span class="token punctuation">,</span>实现数据新增入库<span class="token punctuation">.</span> <span class="token operator">--</span><span class="token operator">></span> <span class="token generics"><span class="token punctuation"><</span>script<span class="token punctuation">></span></span> <span class="token comment">//设定axios请求前缀</span> axios<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>baseURL <span class="token operator">=</span> <span class="token string">"http://localhost:8090"</span> <span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> el<span class="token operator">:</span> <span class="token string">"#app"</span><span class="token punctuation">,</span> data<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> <span class="token comment">//1.定义集合数据 null</span> userList<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">//2.定义addUser对象 新增的用户数据</span> addUser<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> name<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> sex<span class="token operator">:</span> <span class="token string">''</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">//定义一个修改的数据封装体</span> updateUser<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> id<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> sex<span class="token operator">:</span> <span class="token string">''</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> methods<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> <span class="token comment">//1.定义getuserList方法 获取后台服务器数据</span> async <span class="token function">getUserList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> let<span class="token punctuation">{<!-- --></span>data<span class="token operator">:</span> result<span class="token punctuation">}</span> <span class="token operator">=</span> await axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">"/vue/getUserList"</span><span class="token punctuation">)</span> <span class="token comment">//ajax调用之后,将数据给属性.</span> <span class="token keyword">this</span><span class="token punctuation">.</span>userList <span class="token operator">=</span> result <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">//新增操作 请求类型: post 接收时需要使用json方式处理</span> async <span class="token function">addUserMe</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token comment">//不需要返回值</span> await axios<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">"/vue/insertUser"</span><span class="token punctuation">,</span><span class="token keyword">this</span><span class="token punctuation">.</span>addUser<span class="token punctuation">)</span> <span class="token comment">//将列表页面重新刷新</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getUserList</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> async <span class="token function">deleteUser</span><span class="token punctuation">(</span>user<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token comment">//console.log(user)</span> <span class="token comment">//只需要获取用户的ID 就可以完成删除的操作.</span> <span class="token comment">//方法选择 ?id=xx 拼接 | restFul结构</span> let id <span class="token operator">=</span> user<span class="token punctuation">.</span>id await axios<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token string">"/vue/deleteUser?id="</span><span class="token operator">+</span>id<span class="token punctuation">)</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"删除数据成功!!!"</span><span class="token punctuation">)</span> <span class="token comment">//需要重新获取列表数据</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getUserList</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">/* await axios.delete(`/vue/deleteUser?id=${id}`) */</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">//点击修改按钮时触发事件</span> <span class="token function">updateUserBtn</span><span class="token punctuation">(</span>user<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token comment">//console.log(user)</span> <span class="token comment">//用户传递的User对象应该动态的传递给双向数据绑定的key updateUser</span> <span class="token keyword">this</span><span class="token punctuation">.</span>updateUser <span class="token operator">=</span> user <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">//1.是否发起ajax请求 2.参数是谁? updateUser 3.什么请求类型PUT</span> <span class="token comment">//this.updateUser是JS对象 传递到后端JSON串 @RequestBody</span> async <span class="token function">updateUserMe</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> await axios<span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span><span class="token string">"/vue/updateUser"</span><span class="token punctuation">,</span><span class="token keyword">this</span><span class="token punctuation">.</span>updateUser<span class="token punctuation">)</span> <span class="token comment">//如果操作成功,则应该清空修改的对象</span> <span class="token keyword">this</span><span class="token punctuation">.</span>updateUser <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span><span class="token punctuation">}</span> <span class="token comment">//如果操作成功,则重新获取列表信息</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getUserList</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"修改操作成功!!!!"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">//调用生命周期函数 8个</span> <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token comment">//console.log("vue对象实例化成功!!!!")</span> <span class="token comment">//初始化时调用getUserList()</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getUserList</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
请求参数详情信息:
1.3.3 编辑后端Controller
接收前端传递的数据, 完成数据修改操作
1.3.4 编辑后端Service
2 组件化思想
2.1 组件化说明
说明: 传统的页面开发,会将大量的HTML/CSS/JS进行引入,但是引入之后结构混乱 不便于管理. 开发维护时 成本较高.
组件化思想:
在VUE中 可以将一个组件,看作是一个页面. 在其中可以引入独立的样式/JS/HTML 进行单独的管理.
组件可以进行复用.
关键字: 组件–页面 (html/css/js)
2.2 组件入门案例
2.2.1 组件入门写法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>组件化</title> </head> <body> <h1>组件化结构</h1> <div id="app"> <!-- 1.需求 编辑一首静夜思 但是要求代码尽可能复用. 实现策略: 组件化思想 2.组件化步骤: 1.定义组件 全局组件: 任意的DIV都可以引入该组件 局部组件: 只有特定的DIV可以引入组件 2. 编辑组件的key(注意驼峰规则的写法) 编辑组件体 特殊语法: 定义属性时 data(){return{ key:value}} html标签: 使用template进行标记 3.通过key对组件进行引用. --><span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">1.</span>组件标签的使用 放到app标签之内 才能解析 <span class="token number">2.</span>如果采用驼峰规则命令则中间使用<span class="token operator">-</span>线连接 <span class="token operator">--</span><span class="token operator">></span> <span class="token operator"><</span>hello<span class="token operator">-</span>com<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>hello<span class="token operator">-</span>com<span class="token operator">></span> <span class="token operator"><</span>hello<span class="token operator">-</span>com<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>hello<span class="token operator">-</span>com<span class="token operator">></span> <span class="token operator"><</span>hello<span class="token operator">-</span>com<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>hello<span class="token operator">-</span>com<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> 定义组件的模版html 注意事项<span class="token operator">:</span> <span class="token number">1.</span>切记标识在app之外<span class="token operator">!</span><span class="token operator">!</span><span class="token operator">!</span><span class="token operator">!</span> <span class="token number">2.</span>要求模版字符串必须有根标签 div <span class="token operator">--</span><span class="token operator">></span> <span class="token operator"><</span>template id<span class="token operator">=</span><span class="token string">"helloTem"</span><span class="token operator">></span> <span class="token generics"><span class="token punctuation"><</span>div<span class="token punctuation">></span></span> <span class="token generics"><span class="token punctuation"><</span>h3<span class="token punctuation">></span></span>静夜思<span class="token operator"><</span><span class="token operator">/</span>h3<span class="token operator">></span> 床前明月光，疑是地上霜。 举头望明月，低头思故乡。 引入属性<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>msg<span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> 引入JS文件 <span class="token operator">--</span><span class="token operator">></span> <span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token generics"><span class="token punctuation"><</span>script<span class="token punctuation">></span></span> <span class="token comment">/* 1.定义组件 */</span> <span class="token class-name">Vue</span><span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">"helloCom"</span><span class="token punctuation">,</span><span class="token punctuation">{<!-- --></span> <span class="token comment">//定义属性 必须添加return 返回值</span> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">return</span> <span class="token punctuation">{<!-- --></span> msg<span class="token operator">:</span> <span class="token string">"我是一个组件"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> template<span class="token operator">:</span> <span class="token string">"#helloTem"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> el<span class="token operator">:</span> <span class="token string">"#app"</span><span class="token punctuation">,</span> data<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> <span class="token punctuation">}</span><span class="token punctuation">,</span> methods<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
2.2.2 局部组件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>组件化</title> </head> <body> <h1>局部组件</h1> <div id="app"> <hello-com></hello-com> <hello-com></hello-com> <hello-com></hello-com> </div><span class="token operator"><</span>template id<span class="token operator">=</span><span class="token string">"helloTem"</span><span class="token operator">></span> <span class="token generics"><span class="token punctuation"><</span>div<span class="token punctuation">></span></span> <span class="token generics"><span class="token punctuation"><</span>h1<span class="token punctuation">></span></span>我是局部组件AAAAAAAAA<span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span> 属性取值<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>msg<span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> 引入JS文件 <span class="token operator">--</span><span class="token operator">></span> <span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token generics"><span class="token punctuation"><</span>script<span class="token punctuation">></span></span> <span class="token comment">//声明组件</span> let helloCom <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span> <span class="token comment">//属性定义</span> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token keyword">return</span> <span class="token punctuation">{<!-- --></span> msg<span class="token operator">:</span> <span class="token string">"我是局部组件"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> template<span class="token operator">:</span> <span class="token string">"#helloTem"</span> <span class="token punctuation">}</span> <span class="token comment">/* 说明:只能在某个VUE的对象之内,使用组件标签 */</span> <span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> el<span class="token operator">:</span> <span class="token string">"#app"</span><span class="token punctuation">,</span> data<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> <span class="token punctuation">}</span><span class="token punctuation">,</span> methods<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">//定义局部组件</span> components<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> <span class="token comment">//组件key: 组件体</span> helloCom<span class="token operator">:</span> helloCom <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
2.2.3 key-value 简化写法
3. VUE中的路由
3.1 路由介绍
说明: 用户发起一个请求,在互联网中经过多个站点的跳转.最终获取服务器端的数据. 把互联网中网络的链路称之为路由. (网络用语)
VUE中的路由: 根据用户的请求URL地址,展现特定的组件(页面)信息. (控制用户程序跳转过程)
3.2 路由步骤
- 导入路由.JS
- 指定路由的跳转链接
- 定义路由的填充位.
** 4. 封装组件信息, 指定路由对象 (难!!!)** - 在VUE对象中声明路由
3.3 路由入门案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>路由入门案例</title> </head> <body> <div id="app"> <!-- <a href="设定跳转的地址">百度</a> --><span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> 二<span class="token operator">:</span>定义链接 <span class="token number">1.</span>router<span class="token operator">-</span>link 被编译之后转化为a标签 <span class="token number">2.</span>关键字 <span class="token keyword">to</span> 被编译之后转化为href属性 <span class="token operator">--</span><span class="token operator">></span> <span class="token operator"><</span>router<span class="token operator">-</span>link <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/user"</span><span class="token operator">></span>用户<span class="token operator"><</span><span class="token operator">/</span>router<span class="token operator">-</span>link<span class="token operator">></span> <span class="token operator"><</span>router<span class="token operator">-</span>link <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/dog"</span><span class="token operator">></span>狗狗<span class="token operator"><</span><span class="token operator">/</span>router<span class="token operator">-</span>link<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span>三<span class="token operator">:</span> 指定路由的填充位置 未来展现组件信息 填充的位置被解析之后 就是一个DIV <span class="token operator">--</span><span class="token operator">></span> <span class="token operator"><</span>router<span class="token operator">-</span>view<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>router<span class="token operator">-</span>view<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> 定义组件的标签体 <span class="token operator">--</span><span class="token operator">></span> <span class="token operator"><</span>template id<span class="token operator">=</span><span class="token string">"userTem"</span><span class="token operator">></span> <span class="token generics"><span class="token punctuation"><</span>div<span class="token punctuation">></span></span> <span class="token generics"><span class="token punctuation"><</span>h3<span class="token punctuation">></span></span>用户信息<span class="token operator"><</span><span class="token operator">/</span>h3<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span> <span class="token operator"><</span>template id<span class="token operator">=</span><span class="token string">"dogTem"</span><span class="token operator">></span> <span class="token generics"><span class="token punctuation"><</span>div<span class="token punctuation">></span></span> <span class="token generics"><span class="token punctuation"><</span>h3<span class="token punctuation">></span></span>狗狗信息<span class="token operator"><</span><span class="token operator">/</span>h3<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">1.</span>导入路由JS 先导入vue<span class="token punctuation">.</span>js 再导入路由<span class="token punctuation">.</span>js 顺序问题 <span class="token operator">--</span><span class="token operator">></span> <span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"../js/vue-router.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token generics"><span class="token punctuation"><</span>script<span class="token punctuation">></span></span> <span class="token comment">/** * 第四步: 准备组件,定义路由对象 */</span> let userCom <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span> template<span class="token operator">:</span> <span class="token string">"#userTem"</span> <span class="token punctuation">}</span> let dogCom<span class="token operator">=</span> <span class="token punctuation">{<!-- --></span> template<span class="token operator">:</span> <span class="token string">"#dogTem"</span> <span class="token punctuation">}</span> <span class="token comment">/** * 定义路由对象 * routes: 路由的多个映射通过该属性进行定义. */</span> let vueRouter <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> routes<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{<!-- --></span>path<span class="token operator">:</span> <span class="token string">"/user"</span><span class="token punctuation">,</span> component<span class="token operator">:</span> userCom<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{<!-- --></span>path<span class="token operator">:</span> <span class="token string">"/dog"</span><span class="token punctuation">,</span> component<span class="token operator">:</span> dogCom<span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token keyword">const</span> APP <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> el<span class="token operator">:</span> <span class="token string">"#app"</span><span class="token punctuation">,</span> data<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">//实现路由的挂载</span> router<span class="token operator">:</span> vueRouter <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
3.4 重定向和转发
注意事项: 请求和转发都是服务器行为 不会做额外的操作
3.4.1 转发问题
说明: 用户访问服务器,但是目标服务器无法处理该请求,由服务器内部将请求交给其他服务器处理. 这个过程称之为转发.
3.4.2 重定向问题
说明: 用户访问服务器,但是目标服务器无法处理该请求,目标服务器返回一个能够处理请求的网址.由用户再次发起请求,访问服务器获取数据.
3.4 路由关键字
- redirect 路由的重定向
需求: 要求用户访问 "/"根目录 要求重定向到 "/user"请求路径中.
3.5 作业
1.掌握组件/路由/axios的基本用法 语法!!!
2.根据VUE_demo 了解什么是路由嵌套规则.
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
