(6). 只要反复生成多个相同结构的元素组成列表时: v-for :key=“唯一标识”
强调: 为什么必须加:key=“i”？给每个元素副本添加唯一标识。修改数组中某个元素值时，避免重建整个列表，只需要修改一个DOM元素副本即可！提高修改效率。
(7). 只要绑定事件: @ $event
(8). 防止用户短暂看到{{}}: v-cloak和v-text
(9). 只要绑定原始HTML代码片段内容: v-html
(10). 如果元素的内容只在首次加载时绑定一次，之后都不会改变: v-once
优化: 减少虚拟DOM树中元素个数。
(11). 保护内容中的{{}}不被编译: v-pre
(12). 今后只要想获得表单元素的值或状态: v-model
[](()绑定样式分析(了解):
(1). 需要精确修改某一个css属性，就绑定style:
a. <元素 style=“固定样式” :style=“{css属性:变量名, …}”
data:{
变量名:css属性值
… : …
}
b. <元素 style=“固定样式” :style=“变量名”
data:{
变量名:{
css属性名: 属性值,
… : …
}
}
(2). 只要批量修改一个元素的多个css属性就绑定class
a. <元素 class=“固定class” :class=“{class名:变量名, …}”
data:{
变量名:true或false,
… : …
}
b. <元素 class=“固定class” :class=“变量名”
data:{
变量名:{
class名:true或false,
… : …
}
}
[](()计算属性应用实践
今后只要根据其他变量的值动态计算出一个属性值就用计算属性:
<元素>{{计算属性}}</元素>
new Vue({
el:“#app”,
data:{…},
methods:{…},
computed:{
计算属性名(){
计算过程
return 计算结果
}
}
})
[](()生命周期函数应用
vue生命周期4个阶段 8个钩子函数
(1). 创建(create)
created(){ … }
beforeMount(){ … }
(2). 挂载(mount)
mounted(){ … 经常在这里发送ajax请求 … }
beforeUpdate(){ … }
(3). 更新(update)
updated(){ … }
beforeDestroy(){ … }
(4). 销毁(destroy)
destroyed(){ … }
[](()Axios方式的Ajax请求
========================================================================
只要在vue中发送ajax请求，就用axios
axios.defaults.baseURL=“服务器端接口的公共基础地址部分”
[](()Get请求
GET请求：
axios.get(
“服务器端接口地址的相对路径”,
{
params:{ 参数名: 参数值, … }
}
).then(result=>{
… result.data…
})
[](()Post请求
POST请求：
axios.post(
“服务器端接口地址的相对路径”,
“参数名1=参数值1&参数名2=参数值2&…”
).then(result=>{
… result.data…
})
强调: 在vue内使用axios，then中必须用箭头函数，保持then内this与外部this一致，都指向当前new Vue()对象
[](()VUE 组件化开发
===================================================================
[](()组件设计
只要希望重用一块独立的功能区域就用组件:
(1). 定义组件
Vue.component(组件标签名,{
template:HTML内容片段,
data(){ return { 变量 } },
//其余和new Vue()完全相同
})
(2). 在HTML中使用自定义组件
<组件标签名/>或双标记也行
(3). 原理: new Vue()扫描到自定义组件标签，
a.组件的template中的HTML内容代替页面中<组件标签>位置。
b. 并为这个小区域专门创建一个缩微版的vue类型对象。
1). 调用组件的data()函数为当前组件副本创建一个专属数据对象副本。
2). 引入组件对象中的methods等其他内容到当前组件对象副本中
[](()基本步骤
a. 拿到页面先划分功能区域
1). 从上到下，按功能不同划分区域
2). 按是否重用划分
b. 为每个组件创建独立的.js文件，其中包含一个组件对象及其内容
c. 将所有组件引入唯一完整的html页面中，并在
中添加父组件标签。
[](()运行分析
a. new Vue()扫描
，发现父组件标签，创建并替换父组件
b. 父组件扫描自己内部的template内容，创建并替换子组件
[](()组件类型
a. 根组件: new Vue()
b. 全局组件: Vue.component(…)
c. 子组件: 3步
1). var 子组件对象名={
内容必须符合组件的要求
}
子组件对象名必须是驼峰命名
2). 父组件对象中:{
… …
components{ 子组件对象名, … ,… }
}
子组件对象名必须是驼峰命名
3). 父组件template中用<子组件标签名/>引入子组件内容
components会将子组件对象名的驼峰命名自动翻译为-分隔
所以, 使用子组件标签时，要用-分隔多个单词
[](()组件间传参
a. 父组件给子组件
<子组件 :自定义属性名=“父组件变量”>
b. 子组件取:
props:[“自定义属性名”]
结果: 在子组件内，props中的"自定义属性名"与子组件自己data中的变量用法完全相同！
[](()单页应用实践(SPA)
=====================================================================
[](()基本步骤
第一步： 先创建唯一完整的HTML页面
1). 包含vue基本的页面结构
2). 引入所有必要的文件和组件
vue-router.js, 其它页面或组件文件, router.js路由器对象所在文件
3).
中用为今后页面组件预留空位。
第二步： 再为每个页面组件创建独立的文件。每个页面组件其实都是一个子组件
第三步： 创建router.js文件，例如：
1）创建路由字典对象
var routes=[
{path:“/”, component:首页组件对象名},
{path:“/相对路径” , component: 其它页面组件对象名},
{path:“*”, component: 404页面组件对象 }
]
2). 创建路由器对象，并将路由字典对象转入路由器对象中
var router=new VueRouter({ routes })
3). 将router对象加入到new Vue()中
new Vue({ el:“#app”, router })
[](()页头等全局组件：
a. 创建独立的文件保存页头组件的内容
b. 使用Vue.component(“my-header”,{ … })将页头创建为全局组件
c. 在唯一完整的HTML页面中引入页头组件文件
d. 使用页头组件标签: 2种:
1). 如果所有页面都有统一的页头:
就放在唯一完整的html页面中外部上方
2). 如果有的页面有页头，有的页面没有页头:
就只放在需要页头的组件中的template中
[](()路由跳转
a. html中: 文本
b. js中: this.$router.push(“/相对路径”)
[](()路由传参
a. 修改路由字典:
{path:“/相对路径/:自定义参数名”, component:页面组件对象, props:true}
b. 跳转时:
<router-link to=“/相对路径/参数值”
或
this.$router.push(“/相对路径/参数值”)
c. 下一个页面接:
1). props:[ ‘自定义参数名’ ]
2). 可将"自定义参数名"用作绑定或程序中都行
[](()安装vue脚手架
==================================================================
(1). 设置npm默认使用国内淘宝镜像仓库:
npm config set registry http://registry.npm.taobao.org
备选: npm i -g cnpm --registry=http://registry.npm.taobao.org
(2). 安装可反复生成项目脚手架代码的工具:
npm i -g @vue/cli
备选: cnpm i -g @vue/cli
(3). 启动vue脚手架项目
npm run serve
(4). 打开浏览器，地址栏输入:
http://localhost:8080
[](()脚手架文件夹结构:
(1). 唯一完整的HTML页面: 一分为三:
a. public文件夹
1). 图片img文件夹放在public文件夹下
2). 第三方css的压缩版和第三方js的压缩版都放在public文件夹下
3). 唯一完整的HTML文件index.html中，head中引入第三方的css和js
b. src/App.vue
1). 下只包含公共的页头组件和
2).
1). import引入App.vue，router，axios，以及其他全局组件
2). 将全局组件对象转为真正的全局组件: Vue.component( “组件标签名”, 全局组件对象 )
3). 配置axios并放入原型对象中:
axios.defaults.baseURL=“服务器端基础路径”
Vue.prototype.axios=axios;
(2). 为每个页面创建.vue组件文件，都放在src/views文件夹下。每个.vue文件中:
a. 标签内，包含这个页面的HTML内容
b. 中的js内容，和前四天将的是完全一样的写法，绑定，指令，函数，生命周期，axios请求等都一样。前四天怎么用，这里就怎么用。
(3). 路由字典和路由器对象，在src/router/index.js文件中
a. 仅import首页组件对象，不要过早引入其它页面组件
b. 路由字典中首页组件: { path:“/”, component:首页组件对象}
c. 其余页面组件都做成懒加载:
{
path: ‘/相对路径’,
component: () => import(/* webpackChunkName: “组件名” */ ‘…/views/其它页面组件.vue’)
}
(4). 全局组件都放在src/components文件夹下，每个全局组件.vue文件中。
全局组件必须在main.js引入，并用Vue.component()转化,为真正的全局组件，才能在其它组件的HTML中使用。
(5). 运行时, 路由器router对象监视浏览器地址栏路径变化，
查找对应的页面组件内容，先代替App.vue中的，然后main.js再将包含要加载的页面内容的App.vue组件内容，替换到唯一完整的index.html中空
位置。
[](()懒加载应用实践
=================================================================
[](()异步延迟加载:
src/router/index.js
//不要import Details from “…/views/Details”
const routes=[
…
{
path:“/details/:lid”,
component: () => import(
/* webpackChunkName: “details” */
‘…/views/Details.vue’
),
props:true
]
[](()彻底懒加载:
项目根目录创建vue.config.js
module.exports={
chainWebpack:config=>{
config.plugins.delete(“prefetch”)
//删除index.html开头的带有prefetch属性的link，不要异步下载暂时不需要的页面组件文件
},
}
[](()http-proxy方式跨域:
=========================================================================
[](()vue.config.js设置
module.exports={
… ,
devServer: {
proxy: {
‘/’: {
target: 服务器端接口地址公共基础路径,
changeOrigin: true
}
}
}
}
[](()main.js
axios.defaults.baseURL=“服务器端公共基础路径”
(3).引用 this.axios.get(“/接口地址相对路径”).then(result=>{…})
[](()避免组件间样式冲突
(1)方案1
[](()watch+事件修饰符+防抖:
(1). 希望变量一变化就自动执行一项操作时:
data(){
return { 变量: 值 }
},
watch:{
变量(){
要执行的操作
}
}
(2). 事件修饰符:
@事件.13 按回车时才执行
@事件.stop 阻止冒泡
@事件.prevent 阻止默认行为
(3). 防抖:
data(){
return {
… ,
timer:null
}
},
methods:{
查找方法(){
if(this.timer!=null){
clearTimeout(this.timer)
}
this.timer=setTimeout(()=>{
正式的查找操作
},等待时间)
}
}
[](()插槽技术应用
(1). 只要多个组件拥有相同的结构，只是局部的内容不同，都可用插槽实现
(2). 如何:
a. 先额外创建一个带插槽的外壳组件,保存其它多个组件相同部分的HTML+CSS+JS。但是，外壳组件中将来可能变化的位置，用标记
b. 再定义其它使用外壳组件的组件:
1). 引入带插槽的外壳组件:
import 外壳组件名 from “./外壳组件.vue”
export default {
components:{ 外壳组件名 },
…
}
2). 在其它组件中:
<外壳组件 :外壳组件所需属性=“变量”>
<当前组件自有的个性化内容>
</外壳组件>
(3). 具名插槽:
a. 如果一个外壳组件中，多个部位将来都会被更换，就可用具名插槽
b. 如何:
1). 外壳组件中:
…公共部分…
…公共部分…
…公共部分…
2). 其它使用外壳组件的组件:
<外壳组件…>
<template #插槽名1>
第一部分要更换的内容
…
<template #插槽名2>
第二部分要更换的内容
</外壳组件>
[](()Vuex 数据管理
===================================================================
[](()应用场景
今后只要多个组件都需要共用一批数据时，都可用vuex
[](()构成分析(3部分)
state部分：
state:{ //保存共用的变量
变量:初始值,
… : …
}
mutations部分：
mutations:{ //保存专门修改变量的方法
set变量名(state, 新值){
state.变量名=新值
}
…
}
actions部分：
actions:{ //保存专门先发送ajax请求，再修改变量的方法
方法名(context, 发给服务器的参数值){
axios.get或post(
“接口地址”,
发给服务器端的参数值
).then(result=>{
927
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
