vue入门基础知识

1: 脚手架环境安装 Vue

        => 安装脚手架依赖: cnpm i -g @vue/cli

2: 创建vue 项目

        => 在要创建项目的目录下 运行 cmd 执行命令: vue create xxx

        => 根据提示选择安装配置

        => 创建啊成功后 cd xxx

        => npm run serve

        => 运行成功后根据提示在浏览器中访问

3: 精简项目代码

        => 项目目录结构

                -> public 本地服务器的根目录

                -> src :

                        ->: assets : 静态资源文件, 图片视频等

                        -> components 管理公共组件的目录

                        -> router 管理路由的目录

                        -> views 管路视图的组件目录

                        -> App.vue 根组件

                        -> main.js 入口文件

                -> package.json   npm 的配置文件

    => 对App.vue 的精简

         <template>

                   <router-view></router-view>

        </template>

        <style>

                   html, body {

                        margin: 0;

                        padding: 0;

                        height:100%;

            }

        </style>

4: vue的核心指令

        => 文本指令: 

                -> v-text 

                ->  v-html

        => 流程控制

                -> v-if

                ->v-else-if

                ->v-else

                -> v-for : 其中 key 与 template 配合使用时, key 要声明在 子元素上, 因为 template在渲 染结束后会消失

         => 显示与隐藏

                -> v-show:  通过控制 display 属性来控制隐藏与否, v-if值为false时, 不会渲染 ,根据实际情况选择  v-if 或者 v-show

        => 属性绑定

                -> v-bind : 他的值一定是一个在 data 声明的变量或者 js 表达式

                -> style绑定

                        -> :style=""  的值为对象, 对象的属性是 css 的样式元素(以小驼峰式命名样式名, 属性名)

        -> class 绑定 :class="" 他的值为css中已经定义的样式名称

=> 事件处理

        -> v-on : 简写 @,  获取当前元素的事件对象

                        -> 事件修饰符:

                                @click.stop 阻止事件冒泡

                                @click.self 只有当元素自身被触发时才会执行时间函数, 事件冒泡传递来的不会执行

                                @click.capture: 在事件冒泡中优先执行

                                @click.prevent 阻止浏览器默认行为

                                @click.once  本次渲染完成后只会执行一次

                                @click.passive 忽略event.preventDefault()行为, 不能和 prevent 修饰符同时使用

                        -> 按键修饰符

                                .enter,           .tab,         .delete (捕获删除和退格键)        .esc        .space                       .up        .down        .left        .right

                        -> 系统修饰键

                        .ctrl        .alt        .shift        .meta

        => 表单绑定

                v-model 修饰符

                        -> .trim 去掉首尾空格, 

                        -> .number 如果是数字开头, 中间出现非数字内容, 只会保留第一部分的数字, 如果以非数字开头, 以字符串类型处理

                        .lazy, 失去焦点时才会执行双向绑定

        =>编译处理

                -> v-pre: 跳过当前元素, 及其子元素, 不进行编译

                -> v-once, 只会渲染一次

                -> v-cloak: 会一直保留在元素上面, 直到 Vue 编译完成后, 自动消失, 一般会配合 display 样式, 解决源代码闪烁问题

        => 插槽: 

                v-slot :

                        ->仅限与template 内置组件上使用

                        -> 简写 # 

                        -> 在自定义组件内部要 使用 < slot name="xxx">展示插槽中的子元素内容

        => data: 

                -> 在组件内, 必须是一个返回初始对象的函数

                -> 为了保证当前组件的多个实例不会直接共享data中的数据

        => props

                -> 接受父组件的传值

                -> 定义的prop 属性的一个对象, 该对象中共有四个属性

                        -> type: 设置当前属性的数据类型, 可以是使用数组的形式设置指定多种类型, 例如

                                [ String, Number, Boolean, Object, Function, Array, Date, Symbol ] 

                        -> default: 设置默认值, any 任意类型

                        -> required: 设置当前属性是否必填, 值为 true 时为必填选项

                        -> validator: 设置当前属性值的校验函数, 函数返回值为 true 时通过校验, 

                                props: {

                                        type: {

                                                validator: function (val){

                                [  'success', 'danger', 'error'].includes(val)

                }

        }

}

     => methods:  用于定义函数

     => watch:  用于监听data中响应式数据的变化,   深度监听  deep: true, 但是只能监听对象的恶属性改变, 无法监听基本数据类型, 如 list = [ 1, 2, 3, 4] 当中元素的值改变时无法监听到的

                

     => computed:

                ->: 计算属性

                 -> 有缓存, 当所依赖的响应式数据发生变化时, 才会重新计算

DOM 选项

        => el: 使用 css 选择器, 或者 html.docunment 对象的方法获取到页面中已经存在的 DOM 元素, 将该元素作为 Vue 实例的挂载目标

        => template: 

                -> 在自定义组件中用于创建 VNode 模板

                -> 声明的 VNode 模板中, 最外层只能有一个根元素

生命周期

        => beforeCreate

                -> 不能获取到vue实例的属性与方法

                -> 不能获取 dom 对象

        => created

                -> 能获取到 vue 实例的属性和方法

                -> 不能获取 DOM 对象

       => beforeMount

                -> 能获取到 vue 实例的属性和方法

                -> 不能获取 DOM 对象

      => mounted 

                -> 能获取到 vue实例的属性和方法

                -> 能获取 DOM 对象

      =>  beforeUpdate

                -> 当 data 中响应数据发生变化时, 会触发页面的渲染, 页面渲染前将调用该方法

                -> 在此方法获取的响应式数据的值为, 修改后的值

      => updated

                -> 响应式数据更新, 触发页面渲染, 页面渲染后将调用此方法

                -> 在此处可以获取更新后的 DOM 元素对象

       =>beforeDestroy

       => deatroyed

       =>activated

       =>deactivated

       =>errorCapturted

资源选项

        => filters

                -> 过滤器:

                -> {{ str | filterName }}

                -> 要过滤的内容会作为 filterName()参数, 他的返回值就是在页面要渲染的内容

                -> 过滤器链: {{ str | f1 | f2 }}:  第一个过滤器的返回值, 作为第二个过滤器的参数传入

        => directives

                -> 自定义指令

                -> 钩子函数

                        bind: 指令被绑定到元素上时, 只会执行一次

                        inserted: 被绑定的元素被插入到父节点时执行, 只会执行一次

                        update: 当虚拟 DOM 重新渲染时执行

                        componentUpdated  当虚拟 DOM 重新渲染完成后执行

                        unbind   指令与元素解绑时执行, 只会执行一次

                           -> 钩子函数的参数: 

                                el: 被绑定的 DOM 对象

                                binding: 是一个包含了指令的所有属性的对象:  name, rawName, value

                                vnode: Vue 编译生成的虚拟节点

                                oldVnode: 上一个虚拟节点, 仅在 update 和 componentUpdated 钩子函数中使用

        => components:  在当前组件内注册外部组件

内置组件: 

        => component 

                -> 动态组件

                -> is 属性:  指定当前要加载的组件名称

        => keep-alive: 

                -> 缓存动态组件

                -> 属性: 

                        -> include: 指定要缓存的组件名称

                         -> exclude 指定不要缓存的组件名称

                        -> max : 最大换存量 , 使用队列的数据结构

自定义组件: 

        => 先创建一个 .vue 的文件

        => 组件的三个组成部分,

                -> template  -> script   -> style

        => 在外部使用 import  xxx  from '...' 方式引入, 然后使用 components 选项注册该组件, 在外部的 <template>中用标签的形式进行使用

组件通信: 

        => 父组件传值子组件: 在子组件中使用 props 选项接受父组件的传值

        => 子组件传值父组件: 在父组件中声明子组件标签, 在子组件内部通过 $emit(eventname, [ 参数 ])触发当前子组件实例上的事件函数, 并间接传值

        => 兄弟组件传值: 先由第一个子组件传值给父组件, 然后再通过父组件传值给另一个子组件 

vue路由

        =>路由组件:<router-link to="跳转页面">    <router-view>占位符

        => 多级路由:

                -> 使用路由对象的 children: []

                -> 在设置了 children 属性路由对应的组件中, 声明 占位符, 用来加载二级路由指向的组件

                例如: { path: 'home'

                                component: () => import('@/views/Home.vue'),

                                children: []

}

        需要在 Home.vue 中 添加 < router-view>占位符

=> 重定向

        redirect: '/home'

        redirect: { path: '/home' } 或者 redirect: { name: home }

        redirect: (to) => { return '/home' }   重定向的值为函数时, 函数的参数to 表示要去的路由对象, 返回值为真正要去的路由的 path

=> 编程式导航 

        -> 路由跳转: 

                this.$router.push()

                this.$router.replace()

                this.$router.go()

                this.$router.back()

        -> 路由传参

                push({ path: '/home',  query: { id, name } })    在 Home.vue中接收参数, this.$router.query.id, 将参数拼接到 地址后面的? 后面, 类似于 get 请求,  刷新页面不会改变参数结果

                push({ name: 'home', params:{ id: name } })

                        -> 在 Home.vue 中接收参数,  this.$router.params.id

                        -> 将参数封装到内存的对象中传递, 地址栏不会显示, 类似于 post

                        -> 刷新页面会清空参数

全局 API 

        => Vue.component()

                -> 声明自定义组件

                -> 参数1: 组件名称

                -> 参数2: Vue 的实例对象