VueVue转载

Vue真是太好了 Vue知识点 超详细!

2019-07-25  本文已影响800人  蓝海00

️1⃣️、Vue和其他两大框架的区别

️2⃣️、Vue是什么

️3⃣️、MVVM

️4⃣️、Vue指令

️4⃣️.️1⃣️ v-text

说明: 文本数据渲染
用法: v-text = "Vue实例中的数据" => 简写 {{Vue实例中的数据}}

相当于JavaScript中的innerText

️4⃣️.️1⃣️.️2⃣️ v-text指令 和 {{ }}插值表达式 的区别

️4⃣️.️2⃣️ v-html

说明: HTML渲染数据
用法:v-html = "Vue实例中的数据"
会解析html结构 渲染至页面

相当于JavaScript中的innerHTML

️4⃣️.️2⃣️.️1⃣️ v-html指令 和 v-text指令的区别

注意: 在网站上动态渲染任意的 HTML 是非常危险的!!! 因为容易导致 XSS 攻击 只在可信内容上使用 v-html 绝对不要用在用户通过(提交)的内容上使用

️4⃣️.️3⃣️ v-on

说明: 事件绑定(绑定事件监听器)
用法: v-on:事件名 = "事件处理函数" => 简写 @事件名 = "事件处理函数"

️4⃣️.️3⃣️.️1⃣️ 详细用法

  1. $event.target 获取当前事件触发的DOM元素
  2. $event.path[0](el.path[0]) 也可以获取当前事件触发的DOM元素 path数组中有从触发事件源的元素的所有上一级元素 直到window
  3. 实参不传递(没有任何参数) 默认在形参中第一个就是事件参数
    实参传递 就必须传递$event 来获取获取事件参数

️4⃣️.️3⃣️.️2⃣️ 事件修饰符

面试问及

之前在使用饿了么UI的时候给一个组件添加一个原生的事件
但是一直触发不了
后面查阅文档发现这个组件内部并没有注册我使用的原生事件
事件修饰符.native就可以直接监听并触发组件的原生事件

️4⃣️.️4⃣️ v-bind

说明: 属性绑定(行内属性)
用法: v-bind:属性名="Vue实例中的数据" => 简写 :属性名="Vue实例中的数据"
当Vue实例中的数据改变之后 页面会同步更新

️4⃣️.️4⃣️.1⃣️ 属性绑定修饰符

️4⃣️.️4⃣️.2⃣️ 对象的方式绑定class

isRed = true 就有red这个类
isRed = false 就没有red这个类
isRed 在 Vue 实例data中声明

class = "red" :class = "{'yellow' : isYellow}"

️4⃣️.️4⃣️.3⃣️ 对象的方式绑定style

️4⃣️.️5⃣️ v-model

说明: 双向数据绑定
用法: v-model = "Vue实例中的数据"

️4⃣️.️5⃣️.️1⃣️ 双向

️4⃣️.️5⃣️.️2⃣️ 双向绑定修饰符

注意: v-model 只能设置给from表单属性

️4⃣️.️6⃣️ v-for

说明: 循环渲染
用法: v-for = "(item,index) in items" :key = "index"

items是源数据数组
item是被迭代的数组元素的别名
index是被迭代的数组元素的下标(索引)

️4⃣️.️6⃣️.️1⃣️ :key

️4⃣️.️6⃣️.️2⃣️ 遍历数组注意点

push()
pop()
shift()
unshift()
splice()
sort()
reverse()
...

这种修改数组中的元素是无法实现数据改变后页面会同步改变(只会修改data中的数据 但是页面不会同步改变)

️4⃣️.️7⃣️ v-if,v-else,v-else-if

说明: 条件(表达式或布尔值)判断渲染
用法:
v-if = "表达式或布尔值"
v-else-if = "表达式或布尔值"
v-else

️4⃣️.️7⃣️.️1⃣️ 注意

v-if 和 v-else-if 后面必须跟表达式或布尔值
v-else-if 和 v-else 不能独立使用 必须跟在 v-if 后面

️4⃣️.️8⃣️ v-show

说明: 条件渲染
用法: v-show = "表达式或布尔值"
根据表达式或布尔值的真假切换元素的display属性

️4⃣️.️8⃣️.️1⃣️ 注意

v-show 不支持 <template>元素 也不支持 v-else

️4⃣️.️9⃣️ v-if vs v-show

都是用来判断渲染数据的

1.有较高的切换性能消耗

2.惰性渲染 第一次如果条件为false 则不会渲染到页面 需要等后面条件切换后才会进行第一次渲染
3.条件切换是切换DOM数中这个元素的移除或添加
4.如果运行时条件很少改变则使用v-if

1.有较高的初始渲染消耗
2.初始渲染 不管条件 第一次加载页面的时候都会渲染到页面
3.条件切换只是切换元素的display属性
4.如果运行时条件会非常频繁的切换则使用v-show

️4⃣️.️️1⃣️0⃣️ v-cloak

说明: 这个指令保存在这个元素上 直到关联实例结束编译

️4⃣️.️️1⃣️0⃣️.️1⃣️ 详细说明

插值表达式在网络较满的情况下可能会出现数据闪烁问题
可以通过给实例(#app)盒子添加一个 v-cloak 指令
通过这个指令的特性(如页面中还有插值表达式就会存在这个指令 如果页面的插值表达式都被替换成数据 就会自动移除这个标签)
配合css [v-cloak]{display:none|opacity:0}来解决数据闪烁的问题

️4⃣️.️️1⃣️1⃣️ v-once

说明: 这个指令添加的元素 内部的胡子语法只会在第一次渲染的时候执行解析一次 后面数据发生改变后也不会触发更新

️4⃣️.️️1⃣️1⃣️.️1⃣️ 用途

某些元素只需要解析一次 后续不需要更新 就可以使用这个指令 提升性能

️5⃣️、Vue实例

️5⃣️.️1⃣️ el

️5⃣️.️2⃣️ data

️5⃣️.️3⃣️ methods

️5⃣️.️4⃣️ computed

1.使用get和set函数 需要把计算属性函数改成计算属性对象
2.计算属性默认执行get方法(根据相关的数据计算返回当前属性的值)
3.当计算数学值自身改变后执行set方法
4.可以用来计算税前和税后的互推算

️5⃣️.️5⃣️ watch

watch:{
    XXX:{   
        deep:true,
        handler(newVal,oldVal){
            // 处理代码
        }
    }
}

watch: {
  // watch里面的 $router 这些对象前面不要带this
  "$route.path"(newVal, oldVal) {
    if (newVal.indexOf("/login") >= 0) {
      this.welcom = "欢迎登陆";
    }
    if (newVal.indexOf("/register") >= 0) {
      this.welcom = "欢迎注册";
    }
  }
}

  watch: {
    $route: function(newVal,oldVal) {
      console.log(this.$route.path);
    }
  }

1.侦听器用来检测数据的改变
2.当侦听的那个数据发生改变后就会触发侦听器中的对应函数
3.一般我更多的使用是用侦听路由的变化 => 重新获取数据(如搜索在对应的router-view中显示对应的数据)
4.之前碰到过一个坑点 侦听器默认无法侦听复杂数据类型
5.后面使用深度侦听 depp:true 来解决了这个问题
6.或者侦听精确到对象中的那个值也可

️5⃣️.️6⃣️ computed和watch的区别

️5⃣️.️7⃣️ components

️5⃣️.️8⃣️ filters

Vue.filter("formatData", (形参=管道符前面的数据,形参=想要传入的数据...) => {
    处理数据； `返回`处理之后的数据
});

filters:{ 
    formatTime(形参=管道符前面的数据,形参=想要传入的数据...){
        处理数据； `返回`处理之后的数据  }
 }

️6⃣️、Vue实例中的this

️7⃣️、Vue实例属性

️7⃣️.️1⃣️ vm.$data

获取data中的所有数据

️7⃣️.️2⃣️ vm.$options

用于当前Vue实例的初始化选项 可以获取自定义选项

new Vue({
  customOption: 'foo',
  created: function () {
    console.log(this.$options.customOption) // => 'foo'
  }
})

️7⃣️.️3⃣️ vm.$refs

️8⃣️、Vue组件

️8⃣️.️1⃣️ 什么是组件

组件的出现就是为了拆分Vue实例的代码量 能够让我们以不同的组件来划分不同的功能模块 需要什么功能就去调用对应的模块即可 局部功能界面

️8⃣️.️2⃣️ 组件化和模块化的区别

️8⃣️.️3⃣️ 全局组件

️8⃣️.️3⃣️.️1⃣️ 用法

Vue.component('组件名',{参数})

️8⃣️.️3⃣️.️2⃣️ 注意

组件名请使用小写
大写需要驼峰命名法

Vue.component('sayHiBaby',{参数})
页面中标签使用 <say-hi-baby></say-hi-baby>

️8⃣️.️3⃣️.️3⃣️ 组件参数

父向子传参
通过 props 向子组件传递数据
可以在组件实例中通过 this.xxx 拿到传递过来的值
高级写法(props验证)

props:{
  xxx:{
    // 数据类型
    type:"String",
    // 必须传递
    required:"true",
    // 默认值
    default:"mystring"
    ....
  }
}

props可以传递任何数据类型 包括函数

为什么组件的data是一个函数 而Vue实例的data是一个对象?

1.每一个Vue组件都是一个Vue实例
2.都是通过new Vue() 创建出来的
3.如果data是一个对象的话 那么这些组件的引用指向就会相同
4.一个的值修改后 其他的值也会修改(这是JavaScript语法的特性)
5.如果data是一个函数 函数中再返回一个对象
6.那么每个Vue组件都有了自己的作用域 互不干扰

️9⃣️、Vue生命周期钩子

Vue生命周期钩子 || Vue生命周期函数
Vue提供给开发者一系列的回调函数 让我们可以在Vue的各个阶段添加自定义的逻辑处理

️9⃣️.️1⃣️ 三大阶段

️9⃣️.️1⃣️.️1⃣️ 初始化显示

创建期间的生命周期函数(1次)

Vue渲染解析插值表达式 并不是在页面中直接渲染解析 而是将整个挂载在Vue实例的模版 拿到内存中去解析 等全部解析完成后 再一次性的渲染到页面(批量) (因为有可能页面中有很多一样的data中的值 如果是在页面中直接渲染解析会很耗性能)

️9⃣️.️1⃣️.️2⃣️ 更新显示

运行期间的生命周期函数(0次-多次)

️9⃣️.️1⃣️.️3⃣️ 销毁

销毁期间的生命周期函数(1次)

想要销毁Vue实例 调用 vm.$destroy() 即可
注意: 这个方法方法并不会销毁Vue实例的一些如 定时器或计时器等方法
会造成 '内存泄漏' 所以在完全销毁之前 需要在 beforeDestory 钩子中清除定时器等...

️️1⃣️0⃣️、父子组件传参

️️1⃣️0⃣️.️1⃣️ 父传子

️️1⃣️0⃣️.️2⃣️ 子传父

️️1⃣️1⃣️、VueRouter

️️1⃣️1⃣️.️1⃣️ 前端路由

url地址和组件之间的关系

️️1⃣️1⃣️.️2⃣️ 如果是模块工程化(VueCLI)中使用VueRouter

必须添加 Vue.use(VueRouter)

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

️️1⃣️1⃣️.️3⃣️ 路由起步代码

️️1⃣️1⃣️.️3⃣️.️1⃣️ HTML

<router-link to="/login" tag="span">登陆</router-link>
<router-link to="/logout" tag="span">注册</router-link>

<router-view></router-view>

️️1⃣️1⃣️.️3⃣️.️2⃣️ JavaScript

const login = { template: "#tempLogin" };
const logout = { template: "#tempLogout" };

const routes = [
  { path: "/login", component: login },
  { path: "/logout", component: logout }
];

const router = new VueRouter({
  routes
});

new Vue({
  el:"xxx",
  router
})

️️1⃣️1⃣️.️4⃣️ 路由高亮

设置路由匹配成功后 router-link 的样式属性

/login => /login/user
触发 添加样式

/login/user => /login/user
触发 添加样式

️️1⃣️1⃣️.️5⃣️ 声明式导航

点了跳转 没有任何逻辑 类似于(a标签设置了href)
<router-link to="地址">XXX</router-link>

️️1⃣️1⃣️.️6⃣️ 编程式导航

跳转的同时执行其他需要执行的逻辑
router.push('地址')

️️1⃣️1⃣️.️7⃣️ 动态路由匹配

️️1⃣️1⃣️.️8⃣️ 路由重定向

️️1⃣️1⃣️.️9⃣️ 前置导航守卫

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
  next()
})

to

去哪个路由
一般通过to来判断对应路由做对应处理

from

来自哪个路由

next()

必须next()才可以继续跳转页面(像node"express"里面的中间件)

1.判断登陆状态 如判断token...
2.可以在跳转路由时先判断这个页面这个用户是否有权限访问...
3.可以每次路由跳转前都提示用户跳转至什么页面...

️️1⃣️1⃣️.️️1⃣️0⃣️ 路由元信息

️️1⃣️1⃣️.️️1⃣️1⃣️ 嵌套路由

{ path: '/user', component: User,
  children: [
    {
      path: 'index',
      component: Index
    }
  ]
}

️️1⃣️1⃣️.️1⃣️2⃣️ 统一404页面

配置错误路由规则

️️1⃣️1⃣️.️1⃣️3⃣️ 路由懒加载

️️1⃣️2⃣️、资源请求

️️1⃣️2⃣️.️1⃣️ Axios

️️1⃣️2⃣️.️1⃣️.️1⃣️ Axios是什么?

Axios是一个基于 promise(实现了链式调用) 的 HTTP 库 可以用在浏览器和 Node.js 中 专注于发请求 专注于网络请求的一个库`

️️1⃣️2⃣️.️1⃣️.️2⃣️ CDN

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

️️1⃣️2⃣️.️1⃣️.️3⃣️ .then

成功回调

️️1⃣️2⃣️.️1⃣️.️4⃣️ .catch

失败回调

️️1⃣️2⃣️.️1⃣️.️5⃣️ get请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可选地，上面的请求可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

️️1⃣️2⃣️.️1⃣️.️6⃣️ post请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

️️1⃣️2⃣️.️1⃣️.️7⃣️ 基地址

基础的地址应用 没有必要每次都写 可以直接抽离出来

axios.defaults.baseURL = '设置的基地址'
Vue.prototype.$axios = axios

axios填写路径时后面直接写对应的路径即可
前面的公共部分不需在写(写了也不会影响)

️️1⃣️2⃣️.️1⃣️.️8⃣️ 设置跨域携带cookie

axios.defaults.withCredentials = true

️️1⃣️2⃣️.️1⃣️.️8⃣️.️1⃣️ 面试问及

️️1⃣️2⃣️.️1⃣️.️9⃣️ 创建克隆对象 多基地址设置

const xxx = axios.create({
  // 即地址
  baseURL: 'https://some-domain.com/api/',
  // 可以统一设置请求头
  headers: {Authorization: token}
});
xxx.get()
xxx.post()

️️1⃣️2⃣️.️1⃣️.️1⃣️0⃣️ Axios拦截器

️️1⃣️2⃣️.️1⃣️.️1⃣️0⃣️.️1⃣️ 请求拦截器
axios.interceptors.request.use(function (config) {
    // 可以在发请求之前在这里设置一些请求头
    `config.headers.Authorization=token`
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });
️️1⃣️2⃣️.️1⃣️.️1⃣️0⃣️.️2⃣️ 响应拦截器
axios.interceptors.response.use(function (response) {
   // 可以在获取响应数据之后设置一些提示 如获取失败/成功
   `response.data.code == 200?`
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });

️️1⃣️2⃣️.️2⃣️ vue-resource

vue-resource已经不再更新 推荐使用Axios

️️1⃣️3⃣️、Vue动画钩子

️️1⃣️3⃣️.️1⃣️ Vue动画钩子是什么?

Vue提供的让程序员可以在动画的各个时机 添加 自定义逻辑 的钩子 也可称之为 动画钩子或动画函数

️️1⃣️3⃣️.️2⃣️ Vue动画的理解

// 指定显示的transition
xxx-enter-active
// 指定隐藏的transition
xxx-leave-active
// 指定隐藏时的样式
xxx-enter/xxx-leave-to

️️1⃣️3⃣️.️3⃣️ 单个元素动画

transition标签包裹

️️1⃣️3⃣️.️4⃣️ 列表过渡动画

transition-group标签包裹

️️1⃣️3⃣️.️5⃣️ name

动画样式的开始类名

️️1⃣️3⃣️.️6⃣️ tag

解析为的标签名

️️1⃣️3⃣️.️7⃣️ 过渡类名参数

️️1⃣️3⃣️.️8⃣️ 动画时机

️️1⃣️3⃣️.️9⃣️ 动画钩子代码

️️1⃣️3⃣️.️9⃣️.️1⃣️ HTML

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

️️1⃣️3⃣️.️9⃣️.️2⃣️ JavaScript

// ...
methods: {
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

️️1⃣️3⃣️.️️1⃣️0⃣️ 过渡动画生命周期


️️1⃣️4⃣️、VueX

稍等片刻

️️1⃣️5⃣️、VueCLI

稍等片刻

️️1⃣️6⃣️、扩展

稍等片刻

很多都是自己的话去解释和理解 可能会存在错误 或者有错别字 欢迎指出谢谢

上一篇下一篇

猜你喜欢

热点阅读