-
vue2.x知识体系思维导图
查看全部 -
### Vue框架常用知识点
- 模板语法
- 条件渲染
-列表渲染
### Vue核心技术
- Vue-router
- Vuex
### 集成Vue
查看全部 -
组件化思想的优势
查看全部 -
组件化带来的问题
查看全部 -
//=======================================
查看别人的web界面
chrome 调试查看DOM结构
Header，Body里面看js/css引用，搜索相应的js库
查看source、network中的js，使用反编译与断点进行调试
查看全部 -
源码 https://github.com/kanlidy/vue-lessons-demo
vue serve demo1.vue-->快速调试该组件
<ul>
<li v-for="(item,index) in lists"
@click="choose(index)"
:class="{active : index == current && current !==' '}"
:key="index">
{{item}}
</li>
</ul>
<button type="button" @click="add()"></button>
<ul>
<li v-for="(item,index) in target" :key="index">{{item}}</li>
</ul>
<script>
export default{
name: "demo1",
data () {
return{
current: '',//用于记录
lists:[1,2,3,4,5,6,7,8,9]，
target:[]
}
},
methods: {
choose (index){
this.current = index
},
add(){
if(this.current === ' '){ return }//只有选中后，点击‘添加’才会产生列表
this.target.push(this.lists[this.current])
this.current = ' '//设置成只有点击数字后才能记录
}
}
}
</script>
<style scoped>
li.active{
background : green;
}
</style>
//==========================
<template> <div> <ul> <li v-for="(item,index) in lists" @click="choose(index)" :class="{active: index == current && current !==''}" :key="index"> {{item}} </li> </ul> <button type="button" @click="add()">添加</button> <ul> <li v-for="(item,index) in target" :key="index">{{item}}</li> </ul> </div> </template> <script> export default { name: "demo1", data () { return { current: '', lists: [1,2,3,4,5,6,7,8,9], target: [] } }, methods: { choose (index) { this.current = index }, add () { if(this.current === ''){return} this.target.push(this.lists[this.current]) this.current = '' } } } </script> <style scoped> li.active{ background: green; } </style> 查看全部 -
什么是组件化：独立的，可复用的，整体化的 。
为什么要组件化：1.实现功能模块的复用 2.高效执行 3.开发单页面复杂应用
如何进行拆分：1.300行原则 2.复用原则 3.业务复杂性原则
组件带的问题：1.组件状态管理（vuex）2.多组件的混合使用，多页面，复杂业务（vue-router）3.组件间的传参，消息，事件管理（props，emit/on，bus）
查看全部 -
组件化问题：
1、组件状态管理（vuex）
2、多组件的混合使用、多页面复杂业务（vue-router）
3、组件之间的传参、消息、事件管理（props,emit/on,bus）
查看全部 -
google浏览器下载vue调试工具的网址
https://chrome-extension-downloader.com
extension ID:
nhdogjmejiglipccpnnnanhbledajbpd
查看全部 -
好神奇的限界逻辑，原来成熟的逻辑都是一步步被打磨出来的
查看全部 -
列表渲染就是选择性地让物品存在
条件渲染就是选择性地给存在的物品“染色”
查看全部 -
自己能看懂的代码
别人能看懂的代码
格式与命名规范
https://cn.vuejs.org/v2/style-guide/
查看全部 -
nvm node的版本控制
查看全部 -
v-bind:style = "styleMsg"
styleMsg:{
color: 'red',
//属性名称带有“-"的，要加单引号
'text-shadow' : '0 0 5px #232323'
}
查看全部 -
课程不比收费的差，挺好的，重点都讲到了。
查看全部
举报