1把基础学好
2把教程看到「自定义指令」
3响应式机制和组件生命周期是重点
4学习 vue-router 和 vuex
5学习 Node 工具
第一次课
- 通过ip vue实例和html互相绑定 ,互相的改动也会响应
//这样做之后,vue实例的data 用{{}}语法绑定到html模块区域的任意位置,包括节点属性上,只不过写法会改变
//不够纯字符串的互相绑定好像是要用到v-Module - 模板指令是绑定节点属性的
- 触发事件是放在vue的method里面
//第一次课,做了一个编辑2个imput+button切换编辑的小功能,用到了几个标签,做了一个状态开关
//状态开关要写在data里面,因为使用v-show它的值默认是boolean,因为多处要用到这样的组件,所以用组件打包实现这样的功能,减少代码 - 如何打包封装组件的呢?
//首先要声明component(里面接受2个参数,第一个是组件名字;第二个是一个对象,里面写的是组件的参数,其中也是可以放data,它和vue实力的data不同,是属于template自己的data)
//vue的api提供了一个poros,专门给组件提供一个外部接口用来传参数进入组件,poros是一个数组,因为有时候需要多个参数,那哪些数据是可以通过poros传进组件的呢?
//使用poros的数据,就是在html模板的节点上用v-bind,html模板上用{{}}
//声明过后,直接在html模板上,可以直接输入组件名使用 - 前面提到了组件的传参问题,就要提到传入和传出的用法了,前面提到传入现在讲传出
//老师这里的做法是用@imput监听事件,当imput被触发就操作函数将数据改动出去,让外边的app做一个函数改动自己的data实现数据的双绑定
//其中@imput监听事件x函数,是要这样写才能把数据传出去
//this.$emit('edit,e.target.value')
app源码
var app = new Vue({
el: '#app',
data: {
editingName: false,
resume: {
name: '姓名',
gender: '女',
birthday: '1990年1月',
jobTitle: '前端工程师',
phone: '138111111111',
email: 'example@example.com'
}
},
methods: {
onEdit(key, value){
this.resume[key] = value
},
}
})
span组件源码
Vue.component('editable-span', {
props: ['value'],
template: `
<span class="editableSpan">
<span v-show="!editing">{{value}}</span>
<input v-show="editing" type="text" v-bind:value="value" @input="triggerEdit">
<button @click="editing = !editing">edit</button>
</span>
`,
data(){
return {
editing: false
}
},
methods: {
triggerEdit(e){
this.$emit('edit', e.target.value)
}
}
})
小总结
目前为止学到的vue知识
- 一个大的app,vue用id绑定了整个页面,页面上的逻辑vue都能解决,所以说axios+vue=jQuery可以死了
- 控制页面是否显示用v-show指令,它接受的是一个状态布尔值,这个布尔值得在大的APP.vue上面的data上面声明,html模板才可以使用
//这个太好用了,dom的操作vue都帮你封装好了,只要用指令就行了 - 点击节点,触发事件用on-click指令,可以简写@click='xxxx',这个xxxx函数得在大的APP.vue上面的methods声明
- 页面的css效果给个class写个文件引入就解决了
- 一个页面上的所有东西都用一个App.vue解决了,vue上面就只有data methods ...就没了
- v-clock指令专门用于隐藏class样式,避免css加载比JavaScript快导致页面闪烁
前端路由
- 路由就是向导,根据路径的不同展示不用的页面
- 这件事情一般是后端做,比如上课时候的http-server代码中的if path XXX ~这样的if else代码,现在这件事情让前端来做,也就是给几个button根据不同的button采用不同的class 显示出不同的'页面效果'
- 这样一来就显得前端做了路由一样
