仿去哪儿网项目笔记

Meng_W
232 阅读5分钟

4-1 组件使用中的细节点

  1. 子组件中的data使用function函数return值
  2. is属性：解决标签规范造成的bug（如table、ul、select内）
  3. 非根组件中data必须是函数，返回一个对象（为了保证每一个子组件数据的唯一性，避免多个子组件数据共享）
  4. 操作dom：通过在标签上加ref属性，可通过this.$refs.xxx取得该dom节点，如果是在组件上添加了ref属性，则取得的是该组件的引用
  5. 元素里的属性不加冒号表示后面是个字符串，否则表示后面是个js表达式
  6. 冒号是v-bind的缩写，所以在使用上，一般的常量属性我们不用添加冒号；如果是会产生变化的值则要加上冒号。

4-2 父子组件间的数据传递

  1. 父—>子：

    父组件v-bind：变量名=“js表达式”

    子组件：props获取

    子组件不能直接修改父组件传递来的参数，因为单项数据流，修改Object的值会导致别的引用了该对象的子组件内数据的变化，通过在子组件内复制一份该对象，修改子组件内自己的data来代替

  2. 子->父：

    通过事件形式来传递

    子组件：

    this.$emit('事件名',传递的参数);

    父组件：

    监听 @事件名="方法名"

    方法名（value）{

    ....

    //value=传递来的参数

    }

  3. :counter

    加了冒号表示是数字，不加冒号表示字符串

4-3 组件参数校验与非props特性

  1. 组件参数校验：

    参数校验：子组件对父组件传来的参数做限制

    child全局组件 父组件

    content='hello world'

    props写成对象,值可以是字符串,数组,对象

    required:true必传

    type:String值的类型

    default:'',默认值

    validator:function(){return}校验器

  2. props 特性：父组件向子组件传递一个属性，子组件通过 props 声明了相应属性进行接收，在 DOM 中不会显示该属性。

  3. 非props特性：父组件向子组件传递一个属性，子组件没有通过 props 声明相应属性进行接收： a. 子组件中无法使用父组件传递过来的值

    b. 在 DOM 中会显示该属性和对应的属性值

4-4 给组件绑定原生事件

  1. 组件上绑定原生事件：

    1、在父组件绑定事件（如@click.native="handle"）

    2、在vue实例中的methods下定义事件函数。

  2. 传统方法绑定事件为：

    1、在子组件上绑定事件

    2、在子组件中的methods设置相应的事件函数，并在函数中设置自定义事件函数，将自定义事件传递给父组件

    3、在父组件上绑定从子组件methods函数中传来的自定义事件

    4、在父组件methods中设置对应的事件函数。

4-5 非父子组件间的传值

非父子组件间的传值：

  1. Vuex
  2. 总线机制（Bus / 发布订阅模式 / 观察者模式）： Vue.prototype.bus = new Vue(); 让原型属性 bus 指向一个 Vue 实例，让其充当非父子组件之间传值的桥梁，相当于计算机各种功能部件之间传送信息的公共通信干线（总线 Bus）
    1. 给 Vue 类加上原型属性 bus, 这样每个 Vue 实例都能访问到原型属性 bus
    2. 利用 bus 的实例方法 $emit 触发事件
    3. 再利用生命周期方法(钩子) mounted 给 bus 绑定监听函数, 在事件触发时执行

4-6 在Vue中使用插槽

插槽（slot）：

  1. 作用：父组件可以优雅的向子组件传递dom,方便维护

    slot:在父组件中直接写要插入的dom,在子组件的template中 用<slot>默认内容</slot>这个标签来替换父组件中的dom

    注意：可以在slot中定义默认值

  2. 具名插槽：

    父组件传给子组件2个插槽，在父组件的标签上分别为slot="a" slot="b"

    在子组件的template的slot标签中：

    <slot name="a"></slot>

    <slot name="b"></slot>

注意：插槽只有1个，具名插槽可有多个，都有默认值

4-7 作用域插槽

  1. 使用场景：

    由外部（父组件）指定子组件 template 中循环列表的结构（因为子组件可复用，每次使用时的需求可能不同）

  2. 使用方式：

    子组件标签内用 template 标签包裹【固定写法】插入插槽的数据（DOM），且指定一个 slot-scope 属性（属性的值可以随便定义）来接收子组件 slot 标签传递过来的数据，然后使用该数据定制插槽的内容

  3. 新语法：

    2.6.0+ 具名和作用域插槽引入一个新的语法 (v-slot 指令)。取代 slot 和 slot-scope ...详见官方文档教程的插槽部分

4-8 动态组件和v-once指令

  1. <component>是vue自带的动态标签 <component :is="type">根据type的值变换为相应的组件

    如果点击按钮前是type=“one”则会显示vue.component（“one”，{}）这个组件

    如果点击前按钮是type=“two”则会显示vue.component（“two”，{}）这个组件

  2. v-once只对内部渲染一次，如果模板发生变化，也不会理会

6-4 单文件组件和Vue中的路由

  1. 路由就是根据网址的不同，返回不同的内容给用户
  2. <router-view/>显示的是当前路由地址所对应的内容

6-5 单页应用vs多页应用

  1. 多页面应用

每次页面跳转，后端返回一个新的 HTML

优点：首屏时间快（页面首个屏幕的内容展现速度），SEO 效果好（搜索引擎可以识别首页中的跳转其它页面的链接）

缺点：页面切换慢（每次跳转页面需发送 HTTP 请求）

  1. 单页面应用

JS 感知路由（URL）变化，动态清除页面内容并将新页面的内容挂在到页面上（JS 渲染），此时由前端实现路由

优点：页面切换快

缺点：首屏时间慢，SEO差

  1. 在vue中不使用<a>标签进行页面跳转，使用<router-link>标签进行页面跳转 <router-link to="/list">列表页</router-link> 其中to="" 相当于href=""

6-6 项目代码初始化

上传git

git add . 添加到缓冲区

git commit -m ''缓冲区代码提交到本地仓库

git push推送到线上仓库

avatar
文章
阅读
粉丝