使用 vue-cli 创建模板项目

创建 vue 项目
  1. npm install -g vue-cli
  2. vue init webpack vue_demo（文件名不能有大写） 
  3. cd vue_demo 
  4. npm install 
  5. npm run dev 
  6. 访问: http://localhost:8080/

模板项目的结构

  2. |-- build : webpack相关的配置文件夹(基本不需要修改) 
  3. |-- dev-server.js : 通过 express 启动后台服务器
  4. |-- config: webpack 相关的配置文件夹(基本不需要修改) 
  5. |-- index.js: 指定的后台服务的端口号和静态资源文件夹 
  6. |-- node_modules 
  7. |-- src : 源码文件夹 
  8. |-- components: vue 组件及其相关资源文件夹 
  9. |-- App.vue: 应用根主组件
  10. |-- main.js: 应用入口 js 
  11. |-- static: 静态资源文件夹 
  12. |-- .babelrc: babel 的配置文件 
  13. |-- .eslintignore: eslint 检查忽略的配置 
  14. |-- .eslintrc.js: eslint 检查的配置 
  15. |-- .gitignore: git 版本管制忽略的配置 
  16. |-- index.html: 主页面文件 
  17. |-- package.json: 应用包配置文件 
  18. |-- README.md: 应用描述说明的 readme 文件

组件间通信

组件间通信基本原则

  • 不要在子组件中直接修改父组件的状态数据
  • 数据在哪, 更新数据的行为(函数)就应该定义在哪

vue 组件间通信方式

  • props
  • vue 的自定义事件
  • 消息订阅与发布(如: pubsub 库)
  • slot
  • vuex

组件间通信 1: props

  1. 使用组件标签时
  1. <my-component name='tom' :age='3' :set-name='setName'></my-component>

2.定义 MyComponent 时

  1. 1.在组件内声明所有的 props
  2. 2.方式一: 只指定名称
  3.     props: ['name', 'age', 'setName']
  4. 3.方式二: 指定名称和类型
  5.     props: {
  6.     name: String,
  7.     age: Number,
  8.     setNmae: Function
  9.     }
  10. 4.方式三: 指定名称/类型/必要性/默认值
  11.     props: {
  12.     name: {type: String, required: true, default:xxx}, 
  13.     }

3.注意

  1. 1) 此方式用于父组件向子组件传递数据
  2. 2) 所有标签属性都会成为组件对象的属性, 模板页面可以直接引用
  3. 3) 问题:
  4.     a. 如果需要向非子后代传递数据必须多层逐层传递
  5.     b. 兄弟组件间也不能直接 props 通信, 必须借助父组件才可以

组件间通信 2: vue 自定义事件

绑定事件监听
  1. // 方式一: 通过 v-on 绑定
  2. @delete_todo="deleteTodo"
  3. // 方式二: 通过$on()
  4. this.$refs.xxx.$on('delete_todo', function (todo) { 
  5.     this.deleteTodo(todo)
  6. })

触发事件

  1.  触发事件(只能在父组件中接收)
  2. this.$emit(eventName, data)

注意:

  1. 此方式只用于子组件向父组件发送消息(数据)
  2. 问题: 隔代组件或兄弟组件间通信此种方式不合适

组件间通信 3: 消息订阅与发布(PubSubJS 库)

订阅消息

  1. PubSub.subscribe('msg', function(msg, data){})

发布消息

  1. PubSub.publish('msg', data)

注意

  1. 优点: 此方式可实现任意关系组件间通信(数据)

事件的 2 个重要操作(总结)

  1. 1) 绑定事件监听 (订阅消息)
  2.     目标: 标签元素 <button>
  3.     事件名(类型): click/focus
  4.     回调函数: function(event){}
  5. 2) 触发事件 (发布消息) 
  6.     DOM 事件: 用户在浏览器上对应的界面上做对应的操作 
  7.     自定义: 编码手动触发

组件间通信 4: slot

理解

  1. 此方式用于父组件向子组件传递`标签数据`

子组件: Child.vue

  1. <template>
  2.     <div>
  3.         <slot name="xxx">不确定的标签结构 1</slot>
  4.         <div>组件确定的标签结构</div>
  5.         <slot name="yyy">不确定的标签结构 2</slot>
  6.     </div>
  7. </template>

父组件: Parent.vue

  1. <child>
  2.     <div slot="xxx">xxx 对应的标签结构</div>
  3.     <div slot="yyy">yyyy 对应的标签结构</div>
  4. </child>

vue-ajax

vue 项目中常用的 2 个 ajax 库