1. vue 文件的组成(3 个部分)
1)模板页面
页面模板
2)JS 模块对象
3)样式
2. 基本使用
1)引入组件
2)映射成标签
3)使用组件标签
3. 关于标签名与标签属性名书写问题
1)写法一:一模一样
2)写法二:大写变小写, 并用-连接
组件间通信
1. 组件间通信基本原则
1)不要在子组件中直接修改父组件的状态数据
2)数据在哪, 更新数据的行为(函数)就应该定义在哪
2. vue 组件间通信方式
1)props
2)vue 的自定义事件
3)消息订阅与发布(如: pubsub 库)
4)slot
5)vuex
组件间通信 1: props
1. 使用组件标签时
2. 定义 MyComponent 时
1)在组件内声明所有的 props
2)方式一: 只指定名称
props: ['name', 'age', 'setName']
3)方式二: 指定名称和类型
props: {
name: String, age: Number,
setNmae: Function
}
4)方式三: 指定名称/类型/必要性/默认值
props: {
name: {type: String, required: true, default:xxx},
}
3. 注意
1)此方式用于父组件向子组件传递数据
2)所有标签属性都会成为组件对象的属性, 模板页面可以直接引用
3)问题:
a.如果需要向非子后代传递数据必须多层逐层传递
b.兄弟组件间也不能直接 props 通信, 必须借助父组件才可以
组件间通信 2: vue 自定义事件
1. 绑定事件监听
// 方式一:通过 v-on 绑定
@delete_todo="deleteTodo"
// 方式二:通过 [图片上传失败...(image-c35d-1539168182646)]
refs.xxx.$on('delete_todo', function (todo) {
this.deleteTodo(todo)
})
2. 触发事件
// 触发事件(只能在父组件中接收)
this.$emit(eventName, data)
3. 注意:
1)此方式只用于子组件向父组件发送消息(数据)
2)问题: 隔代组件或兄弟组件间通信此种方式不合适
组件间通信 3: 消息订阅与发布(PubSubJS 库)
1. 订阅消息
PubSub.subscribe('msg', function(msg, data){})
2. 发布消息
PubSub.publish('msg', data)
3. 注意
优点: 此方式可实现任意关系组件间通信(数据)
4. 事件的 2 个重要操作(总结)
1)绑定事件监听 (订阅消息)
目标: 标签元素
事件名(类型): click/focus
回调函数: function(event){}
2)触发事件 (发布消息)
DOM 事件: 用户在浏览器上对应的界面上做对应的操作
自定义: 编码手动触发
组件间通信 4: slot
1. 理解
此方式用于父组件向子组件传递标签数据
2. 子组件: Child.vue
3. 父组件: Parent.vue
vue 项目中常用的 2 个 ajax 库
1.vue-resource
vue 插件, 非官方库, vue1.x 使用广泛
2.axios
通用的 ajax 请求库, 官方推荐, vue2.x 使用广泛
vue-resource 的使用
1. 在线文档
https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
2. 下载
npm install vue-resource --save
3. 编码
// 引入模块
import VueResource from 'vue-resource'
// 使用插件
Vue.use(VueResource)
// 通过 vue/组件对象发送 ajax 请求
this.$http.get('/someUrl').then((response) => {
// success callback
console.log(response.data) //返回结果数据
}, (response) => {
// error callback
console.log(response.statusText) //错误信息
})
axios 的使用
1. 在线文档
https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
2. 下载:
npm install axios --save
3. 编码
// 引入模块
import axios from 'axios'
// 发送 ajax 请求
axios.get(url)
.then(response => {
console.log(response.data) // 得到返回结果数据
})
.catch(error => {
console.log(error.message)
})
4. 测试接口
接口 1: https://api.github.com/search/repositories?q=v&sort=stars
接口 2: https://api.github.com/search/users?q=aa