喜迎
春节

Vue-知识点详解


前言: 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 - 数字。最多可以缓存多少组件实例。
会新增 activateddeactivated这两个生命周期


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