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 绑定

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 知识点个人总结的更多相关文章

【vue知识点】1）vue生命周期
[vue知识点]2)vue登录认证
vue知识点汇总
一.学习vue必须了解的几个知识点 1.node.js介绍 node是一个让JavaScript运行在服务端的开发平台,使用JavaScript也可以开发后台服务.说明白些它仅仅是一个平台,我们使用 ...
vue知识点13
知识点归纳整理如下: 组件 component 1.页面中的一部分,可以复用, 本质上是一个拥有预定义选项的一个 Vue 实例 2.使用 1)定义 ...
vue知识点12
知识点归纳整理如下: 1. 数组用下标改变,或者对象增加属性,这样的改变数据是不能触发视图更新的,要用 Vue.set(对象,属性,值) 或this.$set(对象,属性,值) 2. this. ...
Vue知识点
1. Vue生命周期图示: 2.插值: 文本:{{ message }}: 纯html:v-html="xxx"; 属性:v-bind:id="xxx"; 使用 ...
Vue面试中，经常会被问到的面试题/Vue知识点整理
一.对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View 代表UI 组件,它负责将数 ...
Vue知识点（面试常见点）
v-bind和v-model的区别 1.v-bind用来绑定数据和属性以及表达式,缩写为':' 2.v-model使用在表单中,实现双向数据绑定的,在表单元素外使用不起作用什么是 mvvm? MVV ...
【前端vue开发】vue知识点超链接学习笔记
1.如何去除vue项目中的 # --- History模式: https://www.cnblogs.com/zhuzhenwei918/p/6892066.html 2.三分钟教你写个Vue组件: ...
Vue知识点超快速学习
基础知识: vue的生命周期: beforeCreate/created.beforeMount/mounted.beforeUpdate/updated.beforeDestory/destorye ...
vue 知识点
Vue 中的 slot: 概念:槽/slot是组件在模板中为调用者预留的位置,使用<slot>元素声明一个槽.在最终的视图中,调用者模板中被调用组件的内容,将填充<slot> ...

随机推荐

java 线程同步方法执行与唤醒实例
账号提钱.存钱实例方法 public class Account { private int balance; private int maxBalance; public Account(int b ...
一个diango项目的结构
一个项目的结构 day43项目 .idea 配置 pycharm自动帮配的配置,打开别人的diango项目时要先删了此项 app01 方便在一个大的Django项目中,管理实现不同的业务功能 migr ...
SSM案例整合踩的一些坑
一.出现错误:Cannot convert value of type [java.lang.String] to required type [javax.sql.DataSource] for p ...
粗糙集理论(Rough Set Theory)
粗糙集理论(Rough Set Theory) 一种数据分析处理理论. <粗糙集—关于数据推理的理论>. 数据挖掘(Data Mining)和知识发现(KDD). 集合近似定义的基本思想及 ...
python 爬虫随机换user-agent
USER_AGENTS = [ "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/535.20 (KHTML, like ...
python实现fibonacci数列的三种方法
第一种:递归法 def fibo(n): if n < 3: return 1 return fibo(n-1) + fibo(n-2) print(fibo(6)) 第二种:循环 def fi ...
ResultSet RS_resultxtgg=connDbBean.executeQuery(sqlxtgg);
<%String sqlxtgg="select * from dx where leibie='系统公告'"; ResultSet RS_resultxtgg=connDb ...
【使用篇二】Lombok的介绍与使用（16）
Lombok通过简单注解来实现精简代码来达到消除冗长代码的目的.它能够提高编码效率.使代码更简洁.消除冗长代码.避免修改字段名时忘记修改方法名. 一.Lombok注解 Lombok主要常用的注解有: ...
VUE脚手架使用
什么是vue脚手架? 他是一个快速构建vue项目的工具,通过他,我们可以将vue所需要的文件安装完成. vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack- ...
java之封装
java中通过将成员变量声明为private,再提供公共的public方法:setXxx()和getXxx()实现对该属性的操作,以实现以下目的: 隐藏一个类中不需要对外提供的实现: 使用者只能通过事 ...

Vue 知识点个人总结

脚手架