Vue 知识点个人总结

vue

Vue

脚手架

脚手架 3 的版本 ---- webpack 4

cnpm install -g @vue/cli-----全局安装组件

vue create myapp-----命令行创建项目

或者使用  vue ui--------界面UI创建项目

脚手架 2 的版本 ---- webpack 3

npm install -g @vue/cli-init 

vue init webpack myapp2

数据的双向绑定

原理

1.实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。

2.实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。

3.实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器。

基础用法

<div>
{{ msg }} --- {{ num }} --- {{ flag }} --- {{ obj.a }} ---- {{ obj.b }}    // 在dom中使用双大括号包裹变量,视图中就会渲染数据

</div>

<div v-html="msg"></div>  mag为data中申明的变量,是一个html格式

<div v-text="msg"></div>  mag为data中申明的变量,是一个html格式

{{ sex == 0 ? \'女\' : \'男\' }}   三目运算符,sex为在data中申明的变量

vue中的指令


v-html,就会把它的值插入到该标签内部

v-text
v-if 条件判断   渲染还是不渲染     ----   运行时消耗更大,适用于少量的切换使用

v-else-if

v-else
v-show 条件判断   元素始终会被渲染并保留在 DOM中。v-show只是简单地切换元素的CSS的display属性。适用于频繁的切换时使用
v-for 遍历循环使用
v-on 绑定事件   缩写使用@
v-bind 绑定属性,给变量使用, 

不常用的
v-slot
v-pre
v-cloak
v-once

v-for = “item of/in list” :key="唯一性的值"
v-for = “(item, index) of/in list” :key="index"

可以遍历数组,可以遍历对象,还可以遍历字符串,一定要记得加 key值(钥匙与锁的故事 -- 详细介绍 --- 虚拟DOM算法)
<li v-for="(item,index) of arr" :key="index">
   {{item.name}}
   <ul>
     <li v-for="(ite,ind) of item.type" :key="ind">
       {{ite}}
      </li>
    </ul>
</li>

v-model   数据的双向绑定 原理是onchange 和oninput事件

v-model.lazy 失去焦点或者按回车键时才会运算
v-model.trim 得到的值去除两端空格
v-model.number 唤起数字键盘

class 绑定

<style>
.active {
font-size: 40px;
color: #f66;
}
</style>
<!- ->
<div :class="{active: flag}">如果vue项目中的active样式是由flag的值控制的</div>  将active赋值给class,通过flag为真或假来实现

data: {
flag: true
}


同样也可以给一个class绑定多个属性  使用数组的方式

<div :class="[activeClass, testClass]">数组写法就是先把数据定义好,直接数组包裹即可</div>

data: {
activeClass: \'active\',   active   是class的类名
testClass: \'test\'           test        是class的类名
}

style 绑定


<div v-bind:style="{ color: activeColor, fontSize: fontSize + \'px\' }"></div>   // 各种样式可以直接写在style中

-------------------------

const vm = new Vue({
data: { 
activeColor: \'red\', fontSize: 30
}

<div v-bind:style="styleObject"></div>   也可以将样式放在一个变量中,通过变量将样式赋值
-----------
data: {
  styleObject: {
      color: \'red\',
      fontSize: \'13px\'
   }
}
})

事件修饰符

 阻止冒泡 v-on:click.stop="fn()"
 阻止默认事件 v-on:click.prevent="fn"
 阻止冒泡阻止默认事件 v-on:click.stop.prevent="fn"
 .capture 添加事件监听器时使用事件捕获模式 即元素自身触发的事件先在此处理,然后才交由内部元素进行处理
 .self 只当在 event.target 是当前元素自身时触发处理函数 即事件不是从内部元素触发的
 .once 点击事件将只会触发一次
 .passive 不要把 .passive 和 .prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。

按键修饰符

以前如果有一个表单输入框,当你输入之后敲回车想要打印值
 <input onchange="fn(event)" id="name" />
 if (event.keyCode === 13) {name.value}

vue
 <input @change.enter="fn()" id="name" />
 .tab
 .delete
 .esc
 .space
 .up
 .down
 .left
 .right

系统修饰符

 .ctrl
 .alt
 .shift
 .meta

vue的生命周期函数

初始化阶段

beforeCreate(){} // 准备怀孕

created(){} // 怀上了 *******************************************

beforeMount(){} // 准备生

mounted(){} // 生下来了 *************************************************

运行时阶段

beforeUpdate(){} // 每天都在长大

updated(){} ************************

销毁阶段

beforeDestroy(){} // 马上 game over

destroyed(){} // game over gg ************

-----------------------------------------------------------------------------------------------------------------

在 created 或者 mounted 中请求数据,建议在mounted中请求数据

可以在 mounted 和 updated 中操作dom

组件

全局注册组件

局部注册组件

动态组件

动态组件默认情况下切换时都是先销毁掉原来的组件,再创建新的组件

避免组件的重新渲染,可以使用<keep-alive></keep-alive>,但是会缓存所有的加载过的组件

定义组件时添加name选项,keep-alive 添加include属性,值为name选项,需要缓存的写进去,通过include和name值,就可以只缓存需要的组件

首先在data中定义type,并且赋值,值就是默认显示的组件

<body>

<div id="app">

<button @click="type = \'v-aaa\'">A组件</button> // 通过事件改变type

<button @click="type = \'v-bbb\'">B组件</button> // 通过事件改变type

<button @click="type = \'v-ccc\'">C组件</button> // 通过事件改变type

<component :is="type"></component> // 通过type来实现切换不同的组件

</div>

</body>

----------------------------------------------------------------------------------------

缓存所有加载的组件

<body>

<div id="app">

<button @click="type = \'v-aaa\'">A组件</button>

<button @click="type = \'v-bbb\'">B组件</button>

<button @click="type = \'v-ccc\'">C组件</button>

<keep-alive> // 保留所有加载过的组件

<component :is="type"></component>

</keep-alive>

</div>

</body>

---------------------------------------------------------------------------------------

缓存需要的组件。需要的组件加载过就缓存,其它组件加载了也不缓存

<body>

<div id="app">

<button @click="type = \'v-aaa\'">A组件</button>

<button @click="type = \'v-bbb\'">B组件</button>

<button @click="type = \'v-ccc\'">C组件</button>

<keep-alive include="aaa,bbb"> // 当aaa bbb只要加载了就会被缓存下来

<component :is="type"></component>

</keep-alive>

</div>

路由 vue-router

router-view   告诉页面在哪里渲染组件。

components: {

default: home

footer: Footer

}

<router-view> </router-view>渲染默认的default组件

<router-view name="footer"> </router-view> 渲染名字为footer的组件

声明式跳转

<!-- 使用 router-link 组件来导航. -->

<!-- 通过传入 `to` 属性指定链接. -->

<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->

1 <router-link to="/foo">Go to Foo</router-link>

2 <router-link to="/foo" tag="li">Go to Foo</router-link>

3 <router-link to="{name: \'user\', params: { userId: \'123\' }}" tag="li">Go to Foo</router-link>

编程式跳转

router.push(\'home\'

router.push({ path: \'home\' })

router.push({ path: `/user/${userId}` }) // -> /user/123

router.push({ name: \'user\', params: { userId: \'123\' }})

router.push({ path: \'register\', query: { plan: \'private\' }})

注意:

        使用path 后面传参要使用query,使用 name 搭配 params

        path: \'/detail/:id\', // :代表此处的值为参数,id为参数的名字  --------------------------  这个必须设置

嵌套路由

{

path: \'/user\', // 浏览器地址输入/home时

name: \'user\', // 路由的名字----命名路由

// component: () => import(\'./views/user/index.vue\')

components: {

default: () => import(\'./views/user/index.vue\'),

footer: Footer // 为什么不用懒加载,因为多出需要调用,先引入再使用

},

children: [ // 定义子路由,即路由中嵌套路由

{

path: \'nologin\', // /user/nologin

component: () => import(\'@/components/user/NoLogin.vue\')

},

{

path: \'login\', // /user/login

component: () => import(\'@/components/user/Login.vue\')

}

]

}

导航守卫

全局导航守卫

router.beforeEach((to, from, next) => {

// ...

})

router.afterEach((to, from) => {

// ...

}) 全局后置的导航守卫

路由导航守卫

beforeEnter: (to, from, next) => {

// ...

}

组件内导航守卫

beforeRouteEnter  // 注意this的问题,里面没有this 使用vm代替

beforeRouteUpdate

beforeRouteLeave

beforeRouteEnter (to, from, next) {

// 在渲染该组件的对应路由被 confirm 前调用

// 不!能!获取组件实例 `this`

// 因为当守卫执行前,组件实例还没被创建

},

beforeRouteUpdate (to, from, next) {

// 在当前路由改变,但是该组件被复用时调用

// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,

// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。

// 可以访问组件实例 `this`

},

beforeRouteLeave (to, from, next) {

// 导航离开该组件的对应路由时调用

// 可以访问组件实例 `this`

}

beforeRouteEnter (to, from, next) {

next(vm => {

// 通过 `vm` 访问组件实例

})

}

重定向

{ // 路由的重定向

path: \'/\',

redirect: \'/home\' 当输入 / 定向到 /home

}

路由的别名

path: \'/home\', // 浏览器地址输入/home时

name: \'home\', // 路由的名字----命名路由

alias: \'/ho\', // 别名 --- 当你访问 /ho 时,其实和访问 /home是一致的

路由懒加载

component: () => import(\'./views/home/index.vue\') // 路由的懒加载

UI库

PC端项目

iview              (http://v1.iviewui.com/)
element-ui     (https://element.eleme.cn/#/zh-CN)

移动端

mint-ui           (http://mint-ui.github.io/#!/zh-cn)
vant               (https://youzan.github.io/vant/)

状态管理器

State    Getter     Mutation     Action     Module

state 初始化状态管理器

getter  state的计算属性,负责逻辑的运算

mutation 唯一改变state的方法,mutation 必须是同步函数

this.$store.commit(\'定义的事件\',\'数据\')

action   类似mutation 不过这里是处理异步的

module 分割状态管理器,模块化管理,比如一个大的状态管理器,可以分解多个模块每个模块都具有 state  getter mutation action

export default new Vuex.Store({

state: { // 需要管理的组件的状态

login: \'\',

number: \'\'

},

getters: { // 可以看做是 state 的计算属性,类似于组件中的 data 与 computed

},

mutations: { // 唯一改变状态的地方

change (state,data) {

state.number = data

}

},

actions: { // 异步操作

}

})

--------------------------------------------------------

this.$store.state.login 获取状态管理器的值

this.$store.commit(\'\',\'\') 改变状态管理器的值

slot分发内容 --- 插槽

组件中的内容是不能显示的,只有通过slot才能添加内容

<header class="header">

<ul>

<li @click="back">

<slot name="left"><p>返回</p></slot> // 定义slot

</li>

<li>

<slot></slot> // 定义slot

</li>

<li>

<slot name="right"></slot> // 定义slot

</li>

</ul>

</header>

------------------------------

<header>

<div solt="right">分享</div> // 使用

</header>

ref - 标签 - 组件 -this.$refs.

作用类似于id,具有唯一性 ---- 实际上操作的就是DOM

<div ref="tip">{{msg}}</div>

--------------

this.$refs.tip.innerText // 可以使用this.$refs获取

混入 mixin

组件中相同的选项可以使用混入简化代码 ---- 提高组件的复用性 -----

import Header from \'@/components/Header\'

export default { // 暴露出去这个组件

components: { // 共同的部分

Header

}

}

-----------------------

import mymixins from \'@/mixins/mymixins\' // 引入组件

export default {

mixins: [mymixins] 调用引入的组件

}

过滤器  Filter

局部定义的过滤器

<div>

{{ sex | sexFilter}} ---- {{ money | moneyFilter}} // 加 | 然后使用 过滤函数

</div>

----------------------------------------

filters: {

moneyFilter (val) { // 声明过滤函数 val就是money值

return \'¥\' + val // 返回的就是显示的值

}

}

路由的过渡效果

nextTick

状态改变,视图渲染,实际上DOM节点的值并未及时发生改变,使用nextTick可以解决此问题

// console.log(this.$refs.tip.innerText)  // 打印结果没有,实际视图已经渲染

this.$nextTick(function () {

console.log(this.$refs.tip.innerText) // 使用nextTick包裹实现同步

})

以上是 Vue 知识点个人总结 的全部内容, 来源链接: utcz.com/z/375441.html

回到顶部