Loading...
日日日
打卡
老虎窗
飞椽，檐椽
托梁
梁柱
椽檩梁
手脚好冷
冷得发绿
在成都，一个人，连个能说话都没有
太颓废了，睡了吃吃了玩 ---2020.12.05
总结: 8. 只要希望重用一块独立的功能区域就用组件: (1). 定义组件 Vue.component(`组件标签名`,{ template:`HTML内容片段`, data(){ return { 变量 } }, //其余和new Vue()完全相同 }) (2). 在HTML中使用自定义组件 或双标记也行 (3). 原理: new Vue()扫描到自定义组件标签， a.组件的template中的HTML内容代替页面中位置。 b. 并为这个小区域专门创建一个缩微版的vue类型对象。 1). 调用组件的data()函数为当前组件副本创建一个专属数据对象副本。 2). 引入组件对象中的methods等其他内容到当前组件对象副本中 9. 组件化开发: (1). 步骤: a. 拿到页面先划分功能区域 1). 从上到下，按功能不同划分区域 2). 按是否重用划分 b. 为每个组件创建独立的.js文件，其中包含一个组件对象及其内容 c. 将所有组件引入唯一完整的html页面中，并在
中添加父组件标签。 (2). 运行时: a. new Vue()扫描
俞红东是sb
东哥: hello?抱歉打扰你一下哈？ 呐，这是今天*下午*内容的干货总结，希望对你有帮助哦 这里只是干货总结，不是完整笔记哈。完整笔记在ftp上今天的压缩包里哈
总结: 3. 只要希望在页面加载时自动对元素执行一些初始化操作时就用自定义指令: (1). 添加自定义指令: Vue.directive("自定义指令名",{ inserted(domElem){ 对domElem执行DOM操作 } }) (2). 使用自定义指令: 4. 今后只要根据其他变量的值动态计算出一个属性值就用计算属性: {{计算属性}} new Vue({ el:"#app", data:{...}, methods:{...}, computed:{ 计算属性名(){ 计算过程 return 计算结果 } } }) 5. 希望将变量的原始值先加工后再显示给用户看时就用过滤器: Vue.filter("过滤器名",function(oldVal, 自定义形参,...){ return 加工后的新值 }) {{ 变量 | 过滤器(实参值, ...) | ... }} 6. 只要在vue中发送ajax请求，就用axios axios.defaults.baseURL="服务器端接口的公共基础地址部分" axios.get( "服务器端接口地址的相对路径", { params:{ 参数名: 参数值, ... } } ).then(result=>{ ... result.data... }) 或 axios.post( "服务器端接口地址的相对路径", "参数名1=参数值1&参数名2=参数值2&..." ).then(result=>{ ... result.data... }) 强调: 在vue内使用axios，then中必须用箭头函数，保持then内this与外部this一致，都指向当前new Vue()对象 7. vue生命周期4个阶段 8个钩子函数 beforeCreate(){ ... } (1). 创建(create) created(){ ... } beforeMount(){ ... } (2). 挂载(mount) mounted(){ ... 经常在这里发送ajax请求 ... } beforeUpdate(){ ... } (3). 更新(update) updated(){ ... } beforeDestroy(){ ... } (4). 销毁(destroy) destroyed(){ ... }
东哥: hello?抱歉打扰你一下哈？ 呐，这是今天*上午*内容的干货总结，希望对你有帮助哦 这里只是干货总结，不是完整笔记哈。完整笔记在ftp上今天的压缩包里哈
总结 2. 绑定样式: (1). 需要精确修改某一个css属性，就绑定style: a. 不考虑多个元素间内联css属性冲突
5. 总结: 绑定语法+13种指令 (1). 如果元素的内容需要随变量自动变化: {{}} (2). 如果元素的属性值需要随变量自动变化: : (3). 控制一个元素显示隐藏: v-show (4). 控制两个元素二选一显示: v-if v-else (5). 多个元素多选一显示: v-if v-else-if v-else (6). 只要反复生成多个相同结构的元素组成列表时: v-for :key="唯一标识" (7). 只要绑定事件: @ $event (8). 防止用户短暂看到{{}}: v-cloak和v-text (9). 只要绑定原始HTML代码片段内容: v-html (10). 如果元素的内容只在首次加载时绑定一次，之后都不会改变: v-once (11). 保护内容中的{{}}不被编译: v-pre (12). 今后只要想获得表单元素的值或状态: v-model
总结: (7). 只要绑定事件: @ $event (8). 防止用户短暂看到{{}}: v-cloak和v-text (9). 只要绑定原始HTML代码片段内容: v-html
加载失败！尝试重新加载
一无所有
日日日
打卡
老虎窗
飞椽，檐椽
托梁
梁柱
椽檩梁
手脚好冷
冷得发绿
在成都，一个人，连个能说话都没有
太颓废了，睡了吃吃了玩
---2020.12.05
总结:
8. 只要希望重用一块独立的功能区域就用组件:
(1). 定义组件
Vue.component(`组件标签名`,{
template:`HTML内容片段`,
data(){ return { 变量 } },
//其余和new Vue()完全相同
})
(2). 在HTML中使用自定义组件
或双标记也行
(3). 原理: new Vue()扫描到自定义组件标签，
a.组件的template中的HTML内容代替页面中位置。
b. 并为这个小区域专门创建一个缩微版的vue类型对象。
1). 调用组件的data()函数为当前组件副本创建一个专属数据对象副本。
2). 引入组件对象中的methods等其他内容到当前组件对象副本中
9. 组件化开发:
(1). 步骤:
a. 拿到页面先划分功能区域
1). 从上到下，按功能不同划分区域
2). 按是否重用划分
b. 为每个组件创建独立的.js文件，其中包含一个组件对象及其内容
c. 将所有组件引入唯一完整的html页面中，并在
中添加父组件标签。
(2). 运行时:
a. new Vue()扫描
b. 父组件扫描自己内部的template内容，创建并替换子组件
(3). 三种组件:
a. 根组件: new Vue()
b. 全局组件: Vue.component(...)
c. 子组件: 3步
1). var 子组件对象名={
内容必须符合组件的要求
}
子组件对象名必须是驼峰命名
2). 父组件对象中:{
... ...
components: { 子组件对象名, ... ,... }
}
子组件对象名必须是驼峰命名
3). 父组件template中用引入子组件内容
components会将子组件对象名的驼峰命名自动翻译为-分隔
所以, 使用子组件标签时，要用-分隔多个单词
俞红东是sb
东哥:
hello?抱歉打扰你一下哈？
呐，这是今天*下午*内容的干货总结，希望对你有帮助哦
这里只是干货总结，不是完整笔记哈。完整笔记在ftp上今天的压缩包里哈
总结:
3. 只要希望在页面加载时自动对元素执行一些初始化操作时就用自定义指令:
(1). 添加自定义指令:
Vue.directive("自定义指令名",{
inserted(domElem){
对domElem执行DOM操作
}
})
(2). 使用自定义指令:
4. 今后只要根据其他变量的值动态计算出一个属性值就用计算属性:
{{计算属性}}
new Vue({
el:"#app",
data:{...},
methods:{...},
computed:{
计算属性名(){
计算过程
return 计算结果
}
}
})
5. 希望将变量的原始值先加工后再显示给用户看时就用过滤器:
Vue.filter("过滤器名",function(oldVal, 自定义形参,...){
return 加工后的新值
})
{{ 变量 | 过滤器(实参值, ...) | ... }}
6. 只要在vue中发送ajax请求，就用axios
axios.defaults.baseURL="服务器端接口的公共基础地址部分"
axios.get(
"服务器端接口地址的相对路径",
{
params:{ 参数名: 参数值, ... }
}
).then(result=>{
... result.data...
})
或
axios.post(
"服务器端接口地址的相对路径",
"参数名1=参数值1&参数名2=参数值2&..."
).then(result=>{
... result.data...
})
强调: 在vue内使用axios，then中必须用箭头函数，保持then内this与外部this一致，都指向当前new Vue()对象
7. vue生命周期4个阶段 8个钩子函数
beforeCreate(){ ... }
(1). 创建(create)
created(){ ... }
beforeMount(){ ... }
(2). 挂载(mount)
mounted(){ ... 经常在这里发送ajax请求 ... }
beforeUpdate(){ ... }
(3). 更新(update)
updated(){ ... }
beforeDestroy(){ ... }
(4). 销毁(destroy)
destroyed(){ ... }
东哥:
hello?抱歉打扰你一下哈？
呐，这是今天*上午*内容的干货总结，希望对你有帮助哦
这里只是干货总结，不是完整笔记哈。完整笔记在ftp上今天的压缩包里哈
总结
2. 绑定样式:
(1). 需要精确修改某一个css属性，就绑定style:
a. 不考虑多个元素间内联css属性冲突
东哥:
hello?抱歉打扰你一下哈？
呐，这是今天*下午*内容的干货总结，希望对你有帮助哦
这里只是干货总结，不是完整笔记哈。完整笔记在ftp上今天的压缩包里哈
5. 总结: 绑定语法+13种指令
(1). 如果元素的内容需要随变量自动变化: {{}}
(2). 如果元素的属性值需要随变量自动变化: :
(3). 控制一个元素显示隐藏: v-show
(4). 控制两个元素二选一显示: v-if v-else
(5). 多个元素多选一显示: v-if v-else-if v-else
(6). 只要反复生成多个相同结构的元素组成列表时: v-for :key="唯一标识"
(7). 只要绑定事件: @ $event
(8). 防止用户短暂看到{{}}: v-cloak和v-text
(9). 只要绑定原始HTML代码片段内容: v-html
(10). 如果元素的内容只在首次加载时绑定一次，之后都不会改变: v-once
(11). 保护内容中的{{}}不被编译: v-pre
(12). 今后只要想获得表单元素的值或状态: v-model
总结:
(7). 只要绑定事件: @ $event
(8). 防止用户短暂看到{{}}: v-cloak和v-text
(9). 只要绑定原始HTML代码片段内容: v-html