Vue基础知识点（接上篇案例）

• @vue/cli command line interface 命令行交互

  • 全局安装：npm install -g @vue/cli

  • 搭建项目开发环境: vue create 项目名

  • 搭建项目开发环境: vue create --packageManager 包管理器名（yarn, npm） 项目名 例子-->

    • vue create --packageManager yarn st2507-vue2

• 常用指令 将数据与模板中的标签进行各种各样的关联与绑定，以实现将来:数据变化，网页自动对应更新的目标!!

  • v-text

    • 设置双标签中间的文本内容

  • v-html

    • 设置双标签中间的html内容

  • v-bind:

    • 给标签的属性动态绑值

      • v-bind:src="src"

    • 可简写成 :

      • :src="src"

    • 可以直接v-bind给定一个对象，实现批量指定标签的属性和值

      • v-bind="stu"

    • 对于class属性值的控制，我们要注意，可以直接通过v-bind:给定一个对象

      • 细分主题 1

        • 细分主题 1

  • v-for

    • 循环渲染

    • 要给定key，保证每一个元素的key值在当前循环里是唯一的，以提高vue动态渲染与更新的性能，实现最大化的精准复用，最小量的DOM修改！

  • v-on:

    • 事件绑定

      • 直接绑定（直接获取到事件对象）

      • 传自定义参数

      • 传自定义参数的同时获取事件对象（使用$event）

    • 事件绑定修饰符

      • .prevent

        • 阻止事件默认行为

      • .stop

        • 阻止事件传播

      • .capture

        • 绑定捕获阶段（不写默认绑定冒泡阶段）

      • .once

        • 事件响应一次后解绑

      • .self

        • 绑定处理由自身触发的事件，相当于帮我们进行了e.target === this 的判定

      • .passive

      • .native

        • 绑定原生的事件，而非组件发射的自定义的事件

    • 可以将v-on: 简写成@

  • v-show

    • 控制标签的显示与隐藏（控制给需要隐藏的加上display:none）

  • v-if v-else-if v-else

    • 条件渲染

  • v-if 和 v-show

    • 频繁地切换用v-show;不频繁就用v-if

    • v-if是有与没有之间的切换是创建与删除的切换，v-show是一定有，显示与不显示的切换

    • v-if具有更低的首次渲染成本（只渲染了需要的），更高的切换成本（现用现创建） v-show具有更高的首次渲染成本（用不用都先全部创建好），更低的切换成本（已经创建好，只需控制显示与隐藏切换而已）

  • v-model

    • 表单双向绑定语法糖

    • 双向绑定修饰符

      • .lazy

        • 不监听input事件转而监听change事件

      • .number

        • 自动将value值转换成数值

      • .trim

        • 去除value值前后无意义的空格

    • 文本框和文本域 用户输入的都要加value属性（除了单个复选框），本质是value属性和input事件的语法糖

    • 绑定的是单选框或者复选框时，本质是checked属性和change事件的语法糖

• name

  • 代表组件的名字，常用在?

    • 组件递归自己调用自己

• components

  • 局部注册组件

• inheritAttrs

  • 设置父组件传来的子组件没有props接受的属性，是否透传到当前子组件的根节点上，默认是true;同时子组件的$attrs属性保存了所有无人认领的属性，可以使用v-bind=" $attrs"的方式透传给任何子组件指定的元素

• model

  • 指定组件v-model关联的属性名和事件名（默认是value属性和input事件）

  • prop

  • event

• props

  • 组件对外公开属性

  • 两种写法

    • 字符串数组

    • 对象（建议）

  • 注意：对外公开的属性如果是多个单词务必采用小驼峰命名法，实际传参时，小驼峰的属性名要写成短横线的写法，子组件通过props接受的数据，只能用不能修改，切记切记！想要改通知父组件，让父组件改！

• data

  • 值是一个函数，且这个函数返回一个对象，将模版中用到的数据或者是功能开发中用到的辅助数据放到data中

• computed

  • 计算属性：用别的数据计算得出的数据

  • 1、计算属性也是组件的数据，和data中的数据的用法一样 2、计算属性取值触发其get函数，赋值触发其set函数，注意不要在set里直接再对计算属性赋值，这样就是死循环，而是要在set函数里去修改计算属性的依赖数据，使计算属性被标示为脏数据，这样下次再取计算属性的值时，会触发get函数再次调用执行，从而实现计算属性的更新 3、计算属性具有缓存的特性，依赖数据，没有发生改变，反复对计算属性取值不会反复触发get函数执行 4、如果计算属性只有get没有set，那么可以简写

• methods

  • 值是一个对象，存放当前组件要用的方法

• 生命周期钩子函数

  • 创建

    • beforeCreate

    • created

      • 发送ajax请求页面的起始数据，组件对象创建完成，但对应的dom还没创建

  • 挂载

    • beforeMounted

    • mounted

      • 发送ajax请求页面的起始数据，组件对象及dom都已创建完成并插入了页面中

  • 更新

    • beforeUpdate

    • updated

  • 销毁

    • beforeDestroy

      • 组件马上要销毁了，要清除一些计时器，释放一些内存等等

    • destroyed

• watch

  • 监听数据的变化，执行对应的回调函数，做一系列的操作

  • deep

    • 是否开启深度监听

  • immediate

    • 是否组件创建完毕就执行一次

• 插槽

  • 默认插槽

  • 具名插槽

  • 作用域插槽