喜迎
春节

Vue-知识点详解

Vue知识点
技术
发布日期:   2020-10-03
文章字数:   3.1k
阅读时长:   12 分
前言: Vue.js 是什么？为什么这么火？这么多人使用？优缺点有哪些？

Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

  • 然后可以通过如下方式引入 Vue：
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    或者：
    <!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

vue指令

页面渲染

vue的指令都是v-这种格式，虽然v-xxx=”xxx”写的值是用””包裹，但实际上是js，因此需要在双引号里再加层引号，否则会报错。

v-text : 用于替换插值表达式，如果有v-text，插值就不生效。

v-html: 输出转译过的不带HTML标签的HTML语句。富文本编辑器的内容直接渲染的话是被转译过的，那么HTML标签就会被渲染到页面上

v-cloak: 配合样式来使用，可以让样式在vue实例化之前生效

v-for: 用于循环渲染数据。v-for=”item in list”。可以直接遍历对象、数组、数字。

v-if: 直接是dom节点的移除和插入，来达到显示和隐藏元素的效果。通过判断true和false来实现

v-else:必须与v-if配合使用，而v-if不需要配合v-else

v-show: 是通过改变css样式style来显示或者隐藏元素，通过display。对于需要频繁切换显示和隐藏的节点特别实用，比如弹窗、手机注册和邮箱注册两个tab的切换。

v-bind:属性:用于动态绑定元素的属性 ，可以简写为:属性。
v-bind

事件绑定

v-on:事件名: 绑定事件，可以直接操作data里的数据，v-on可以缩写为@事件名。
vue的事件可以加括号也可以不加，不加默认接收事件处理函数的事件对象；加了括号就可以任意传参。（可以继续在括号里通过$event获取当前事件对象）
v-on

v-on:click: 用于绑定点击事件

v-model:自动绑定input输入内容改变事件
v-model

@keyup.enter: .enter是按键修饰符，也可以用enter的对应码13代替。可以使用组合键如.ctrl.enter
v-@keyup

.stop:事件修饰符，阻止冒泡。

class绑定

计算属性

  • methods和computed区别
    • methods用来绑定一些方法，每次有数据更改只要在模板里使用这个方法就会执行，没有缓存。
    • computed是计算属性，有依赖缓存，只有它所依赖的数据发生改变才会重新计算，计算出来的值可以当成data直接使用，不需要添加括号，必须要有一个return值。计算属性是基于它们的响应式依赖进行缓存的。

侦听器watch

一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。

  • computed是生成一个新的数据，watch是观测已有的数据，当被观测的数据发生改变时，自动执行后面的方法。

filters过滤器

filters过滤器

ajax-fetch

ajax-fetch

vue组件

  • 组件是可复用的 Vue 实例(可以将组件进行任意次数的复用)，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

Vue.compoent(“tagName”, options ):
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

<tagName></tagName>
  1. 全局注册一个组件，第一个参数就是要使用的标签的名字，不论使用大驼峰或者小写字母加中线的命名方式，在使用组件的时候都要使用小写字母加中线使用。
  2. 第二个参数就是组件的配置项，全局注册的组件可以在任何地方使用

components: 局部注册一个组件，只有当前Vue实例中才可以使用这个组件

  • 组件的data必须是一个方法(函数)，然后要return一个对象，为了保证组件的数据是独立的而不是共享

一个组件可以嵌套，但是一个组件的template只能有一个根元素

组件的props

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。

  • 通过prop来接收调用的时候传过来的值，然后可以把prop当data使用，但是不能修改父组件传的值，这是基于单项数据流。

  • 单项数据流
    所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

  • props的大小写
    HTML 的属性忽略大小写，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，驼峰命名的 prop 名需要使用短横线分隔命名

传递非字符串类型的数据需要使用动态绑定v-bind

如果要对传入的props进行类型检查，就需要使用对象的方式来写props；如果要对传入的值进行更多约束，就需要把这个值写成对象，对其设置default或者required(二选一)

ref

ref: 用来获取dom或者组件

<tag ref="a"></tag> //可以通过this.$refs.a获取到tag标签

slot: 插槽 占位组件，能够实现标签的嵌套，可以写成:

<slot name="xxx"></slot>//给slot加一个name属性，写在模板里面，在页面的显示顺序只有模板里面的顺序有关
<h2 slot="xxx">内容</h2>//通过slot属性来获取获取到slot

动态组件

<component is=" "></component>//is后面写组件名，用来指定是哪一个组件

还可以通过is 来解决标签嵌套不合法的情况

动画

用transition将需要过渡的元素包起来，要为多个元素设置的话使用transition-group。
transition的主要作用是给它的子元素添加和移除class

v-enter: v指元素的name属性，如xxx-enter,不设置的话默认为transition内所有的元素

过渡的类型

v-enter：定义进入过渡的开始状态
v-enter-active：定义进入过渡生效时的状态。
v-enter-to: 定义进入过渡的结束状态。
v-leave: 定义离开过渡的开始状态。
v-leave-active：定义离开过渡生效时的状态。
v-leave-to: 定义离开过渡的结束状态。

transition负责给它的子元素添加和移除class

过渡模式

in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。

生命周期

  1. 创建阶段
    （1）beforeCreate — 没什么用，里面取不到数据
    （2）created — 没有this.$el,也没有真实的dom，但是已经有数据，可以在这里更改数据，如果数据是同步更改就会带入下一个生命周期；如果是异步修改，当数据修改完之后就会进入更新阶段，在这里做Ajax请求比较推荐
  2. 挂载阶段
    (1)beforeMount—这里已经能看到this.$el，但还没有进行真实的数据替换，看到的还是插值表达式，这里也不会做太多的事
    (2)mounted—在这里this.$el是真实渲染的dom，在这里及之后才能取到真实的dom。一些第三方dom插件也会在这里来进行初始化，（仅限没有异步数据的dom，这里也可以做Ajax请求）
  3. 更新阶段
    (1)beforeUpdate—不做太多事
    (2)updated—可能需要在这里重新初始化第三方的dom操作插件
  4. 销毁阶段
    (1)beforeDestroy—在这里一般会去解除一些事件的监听，或者清除一些定时器。
    (2)destroyed

lifecycle

  • nextTick
    在created里数据有异步更新时，这时dom还没有进行渲染，在这时候进行dom操作没有用，而在$nextTick的回调中去操作dom的时候，代表此时的页面已经根据最新的数据渲染完成。通过异步返回的数据去操作dom，就放在next tick里执行

    created() {

    // 模拟一下ajax
setTimeout(() => {
  this.banners = ['banner 1', 'banner 2', 'banner 3']
  // 在这里的dom还是没有应用新数据的dom
  // this.$nextTick(() => {
  //   // 在这里的dom就是已经使用了更新的数据的dom
  //   this.initSwiper()
  // })
  this.$nextTick()
    .then(() => {
      this.initSwiper()
    })
}, 2000)

    }

虚拟DOM

console.time() … console.timeEnd()查看代码运行耗费的时间

vue-ajax axios

1、安装axios — npm i axios -s
2、在index.js里引入 axios import axios from ‘axios’
3、配置 baseUrl const ajax = axios.create({ baseURL: ‘http://jsonplaceholder.typicode.com/‘ })
4、在index.js里定义接口导出你要的数据，以todos为例

import axios from 'axios'

const ajax  = axios.create({
    baseURL: 'http://jsonplaceholder.typicode.com/'
})

//取todos
export const getTodos = () => {
    return ajax.get('/todos')
}

//单个todo
export const getTodoById = (id) => {
    return ajax.get(`/todos/$(id)`)
}

5、在main.js里引入所有的，而不用挨个引入 import * as $http from ‘./requests’ //引入所有的
6、挂载到Vue上

import * as $http from './requests' //引入所有的

Vue.prototype.$http = $http

7、在app.vue里请求数据(在created里)

created () {
  this.$http.getTodos()
  .then(resp => {
    if(resp.status === 200){
      this.todos = resp.data
    }
  })
}

拦截器

作用：更改请求的参数，在里面自动注入一个参数；

//拦截请求
//拦截器 使用一个方法去拦截Ajax的request请求,有些请求要求你必须携带token...
ajax.interceptors.request.use((config) => {
    //第一个人用途：用于显示全局的loading状态
    document.querySelector('.modal').style.display = 'block'
    //第二个用途：在请求参数里加上全局的参数，比如token，这个token在实际项目中会从本地存储中取
    config.headers.token='123'
    //必须return config，否则请求不会执行
    return config
})

//拦截响应
ajax.interceptors.response.use(resp => {
    //隐藏全局loading
    document.querySelector('.modal').style.display = 'none'
    //全局处理错误
    if(resp === 200){
        return resp.data  
    }
    //这里统一做错误处理，需要后端配合，接口的返回格式必须一致
})

判断isDev，判断是否处于开发模式，就使用前面的地址；上线模式就使用后面的地址

vue-cli

<style scoped>

scoped指定样式只在当前页面生效

代理服务器配置
devServer: 如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

module.exports = {
  devServer: {
    port: 3000,
    open: true,
    proxy: {
      //所有以ajax开始的都配置到下面这个地址
      '/ajax': {
        target: 'http://m.maoyan.com',
        changeOrigin: true
      }
    }
  }
}

kepp-alive

  • 用法:

    <keep-alive>

    包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。主要用于保留组件状态或避免重新渲染。

  • Propes：

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。
会新增 activated和deactivated这两个生命周期

文章作者: NekoDeng
文章链接: https://dyfa.top/posts/vue.html
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 NekoDeng !
Vue知识点
赏
评 论
 上一篇
关于给hexo博客增加相册页面（实现瀑布流相册，实现加密相册）
关于给hexo博客增加相册页面（实现瀑布流相册，实现加密相册）
前言: 本文是关于给自己的博客网站添加一个相册页面，并且实现瀑布流相册效果，基于matery主题，其他主题亦可参考。 首先，直接上效果图，详细浏览地址：关于给hexo博客增加相册页面（实现瀑布流相册） 新建相册页面 在站点的sour
2020-10-05 技术
增加瀑布流相册页面
下一篇 
JS-三个高阶函数filter-map-reduce
JS-三个高阶函数filter-map-reduce
前言: JS-三个高阶函数filter-map-reduce，需要掌握很好用。 filter filter 有过滤的意思filter(参数) 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。filter中的参数
2020-10-02 技术
高阶函数filter-map-reduce
  目录