Vue学习笔记

Vue学习笔记

认识vue

渐进式框架,什么是渐进式?

渐进式意味着你可以将vue作为你应用的一部分嵌入其中

vue特点

解耦视图和数据

可复用的组件

前端路由技术

状态管理

虚拟DOM

安装

响应式开发

生命周期

Vue 实例生命周期

webstorm 模板功能

基础知识

插值操作

mustache语法

Message: {{ msg }}

v-once语法

这个将不会改变: {{ msg }}

v-html


  {{message}}

v-cloak

作用:在vue解析之前,div中有一个属性v-cloak;

在vue解析之后,div中没有属性v-cloak

  




  
{{message}}

v-pre


  
{{message}}

  
 {{message}}
   #不做解析,原封不动

v-text


  {{message}}
  
,hello

绑定属性

v-bind的基本使用


  
{{message}}

v-bind动态绑定的class

  




  
{{message}}


  
  
  
  
{{message}}

  
{{message}}

v-bind动态绑定style

绑定方式一:对象语法

:style="{color:currentColor, fontSize:fontSize + 'px'}"

计算属性

基本使用

    computed:{
      fullName:function (){
        return this.firstname + ' ' + this.lastname
      }

计算属性的getter和setter

计算属性和methods



  
{{firstname}} {{lastname}}


  
{{getfullName()}}


  
{{fullName}}

复杂操作


  
总价格:{{totalPrice}}

事件监听

v-on的基本使用


  
{{counter}}

v-on的参数传递

v-on的修饰符

条件渲染

v-if

v-if和v-else

  

    
{{message}}

  

  
isShow为false时,显示我
v-else-if

  A




  B




  C




  Not A/B/C
key的使用和案例

  
         //for的作用,关联标签

v-show


  
{{message}}


  
{{message}}

列表渲染(循环遍历)

v-for遍历数组元素

    
  
  • 
    {{ item.message }}
  
    • 



//同时支持访问第二参数,即当前项的索引

    
  
  • 
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  
    •

v-for 访问对象

    
  
  • 
    {{ value }}
  
    • 


//同时支持第二,第三参数


  {{ index }}. {{ name }}: {{ value }}

在使用v-for时尽量配合key使用

作用:为了更高效的更新虚拟DOM

数组更新

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

表单数据绑定v-model

v-model的基本使用


  
  
{{message}}

v-model结合checkbox


  同意协议
  
  
同意协议:{{isAgree}}

  
  

  jack
  
  joy
  
  
chengbox:{{checked}}

v-model结合radio


  
  
  
选择的性别:{{sex}}

组件化开发

注册组件的步骤

  1. 创建组件构造器

  2. 注册组件

  3. 使用组件

    • 调用Vue.extend()方法 创建组件构造器

    • 调用Vue.conponent()方法 注册组件

    • 在vue实例的作用域中使用组件

组件化的基本使用

全局组件和局部组件

  //注册组件(全局组件)
  Vue.component('cpn',cpnC)

  let app = new Vue({
    el:'#app',
    data:{
      message:"hello"
    },
    //注册局部组件
    components:{
      //cpn使用组件的标签名
      cpn:cpnC
    }
  })
  let app2 = new Vue({
    el:'#app2',
    data:{
      message:"hello"
    }
  })

父组件和子组件

  //创建第一个组件构造器
  const cpnC1 = Vue.extend({
    template:`
    

      
我是标题1

    

    `,
  })
  //创建第二个组件构造器
  const cpnC2 = Vue.extend({
    template:`
    

      
我是标题2

      
    

    `,
    components:{
      cpn1: cpnC1
    }
  })
  let app = new Vue({
    el:'#app',
    data:{
      message:"hello"
    },
    components:{
      // cpn1: cpnC1,
      cpn2: cpnC2
    }
  })

组件的语法糖写法

组件模板分离写法








方法二,tempalte标签

组件的数据存放

  Vue.component('cpn',{
    template:'#cpn',
    //每个组件都是独立的实例对象,如果data不是一个函数,在组件复用的时候会出现数据不能独立的情况
    data(){
      return {
        counter:0
      }
    },
    methods:{
      increment(){
        this.counter++
      },
      decrement(){
        this.counter--
      }
    }
  })

组件通信-父传子

组件通信-子传父

Vue CLI

使用前提

什么是npm:

? 全称:Node Package Manager

? 包管理工具

cnpm的安装

? 原因:国内访问npm官方镜像比较慢

? 淘宝npm镜像安装:

? npm install -g cnpm -- register=http://register.npm.taobao.org

? 使用方法:

? cnpm install [包name]

vue cli的使用

安装vue脚手架

npm install -g @vue/cli

同时使用cli3和cli2方法:

npm install -g @vue/cli-init

vue cli2

初始化项目

vue init webpack my-project

runtime-only 和 runtime-compiler的区别:
  • runtime-compiler:
    • template ->ast(抽象语法树)->render->vdom-ui
  • runtime-only:
    • render-vdom UI
  • 下面的性能更好,代码量更少

vue cli3

初始化项目

vue create my-project

vue-rounter

改变URL不刷新界面的方式

  • location.hash = 'xxx'
  • HTML的history模式:
    • pushState: history.pushState({}, '', 'home') 压入栈
    • history.back:
    • replaceState: history.replaceState({}, '', 'home') 替换
    • go : history.go(number)

使用vue-rounter

  1. 导入路由对象,并且调用vue.use(vuerounter)
  2. 创建路由实例,并且传入路由映射配置
  3. 在vue实例中挂载创建的路由实例

vue-rounter的基本使用

搭建步骤

在src文件夹目录下创建rounter目录,然后创建index.js文件,配置如下

配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'

//1. 通过vue.use(插件), 安装插件
Vue.use(VueRouter)

//2. 创建VueRouter对象
const routes = [

]
const router = new VueRouter({
  //配置路由和组件之间的应用关系
  routes
})

//3. 将router对象传入到Vue实例中
export default router

使用vue-rounter的步骤

  1. 创建路由组件
  2. 配置路由映射:组件和路径的映射关系
  3. 使用路由:通过 和

路由的默认路径

const routes = {
  path: '',
  redirect: '/home'
}

默认的hash模式,改为history模式,在index.js文件中修改

const router = new VueRouter({
  //配置路由和组件之间的应用关系
  routes,
  // 默认路由方式为hash,一下修改为h5的history模式
  mode: 'history'
})

rounter-link属性问题

  • tag:tag可以指定之后渲染成什么组件,比如:tag='li'
  • replace:replace不会留下history记录,所以指定replace的情况下,后退键返回不能返回到上一个界面中
  • LinkActiveCalss:当对应的路由匹配成功时,会自动给当前元素设置一个rounter-link-active的class,设置LinkActiveClass可以修改默认的名称

动态路由

  • 添加相关组件,创建组件如User组件
  • 在index.js文件中添加该组件信息
  • 在App.vue中使用该组件动态路由

路由的懒加载

路由懒加载的作用

主要作用就是将路由对应的组件打包成一个个的js代码块;

只有在这个路由被访问到的时候,才加载对应的组件

路由懒加载的方式

  1. 结合vue的异步组件和webpack的代码

  2. AMD写法:

    const About = resolve => require(['../components/About.vue],resolve)

  3. ES6中,更加简单的写法来组织vue异步组件和webpack的代码分割

    const Home = () => import ('../components/Home.vue)

vue-rounter的嵌套路由

什么是嵌套路由?

  • 比如在Home页面中,我们希望通过/home/news 和 /home/message访问一些内容
  • 一个路径映射一个组件,访问这两个组件也会分别渲染两个组件

实现步骤:

  1. 创建对应的子组件,并且在路由映射中配置对应的子路由
  2. 在组件内部使用标签

vue-rounter参数传递

参数传递的方式:params和query

params的类型
  • 配置路由格式: /router/:id
  • 传递的方式: 在path后面跟上对应的值
  • 传递后形成的路径:/router/123, /router/abc
query类型
  • 配置路由格式:/router, 也就是普通格式
  • 传递方式:对象中使用query的key作为传递方式
  • 传递后形成的路径: /router?id=123, /router?id=abc

$rounter 和 rounte的区别

  • router: router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性
  • **route: **route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

vue-rounter导航守卫

什么是导航守卫?

  • vue-router提供的导航守卫主要用来监听监听路由的进入和离开
  • vue-router 提供了beforeEach和afterEach的钩子函数,他们会在路由即将改变前和改变后触发

使用:

分类:
  • 全局守卫
  • 路由独享的守卫
  • 组件内的守卫
参数:
  • to: 即将要进入的目标的路由信息
  • from: 当前导航即将要离开的路由对象
  • next: 调用该方法,才能进入下一钩子
tips:

如果是后置钩子,也就是afterEach, 不需要主动去调用next()函数

router.beforeEach((to, from, next) => {
  //从from跳转到to
  document.title = to.matched[0].meta.title
  next()
})

keep-alive

  • keep-alive是vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染

    两个重要属性:

    include - 字符串或正则表达式,只有匹配的组件会被缓存

    exclude - 字符串或者正则表达式,任何匹配的组件都不会被缓存

  • rounter-view也是一个组件,如果直接被包在keep-alive里面,所有路径匹配到视图组件都会被缓存

vuex

state

单一状态树

getters

基本使用:

相当于computed计算属性

参数和传入对象

    pow(state){
return state.counter * state.counter
    },
    more20stu(state){
return state.students.filter(s => s.age > 20)
    },
    more20stuLength(state, getters){
return getters.more20stu.length
    },
    moreAge(state){
// return function (age){
//   return state.students.filter(s => s.age > age)
// }
return age => {
  return state.students.filter(s => s.age > age)
}
    }

mutation

主要包括两部分:

字符串的事件类型(type);

一个回调函数(hander),该回调函数的第一个参数就是state

在通过mutation更新数据的时候,希望携带的额外的参数被称为mutation的载荷(PayLoad)

提交风格

this.$store.commit({
type: 'change',
count: 20
})

change(state,payload){
state.count = payload.count
}

响应规则

  • 提前在store中初始化好所需的属性
  • 当给store中的对象添加新属性时,使用下面的方式:
    • 使用Vue.set(obj, 'new Prop' , 123) ,可以添加到响应式系统中
    • 用新对象给就对象赋值
  • 当给store中的对象删除属性时,使用
    • Vue.delete(obj, 'prop')

常量类型

mutation-types.js

同步函数

action:用来代替mutation进行异步操作

  actions:{
  aUpdateInfo(context, payload) {
return new Promise((resolve, reject) => {
 setTimeout(() => {
   context.commit('updateInfo');
   console.log(payload);

   resolve('1111111')
 }, 1000)
})
  }
},

  update(){
this.$store
 .dispatch('aUpdateInfo', '我是携带的信息')
 .then(res => {
   console.log('里面完成了提交');
   console.log(res);
 })
  }

module

vue使用单一状态树,就意味着很多状态都会交给vuex管理,当应用变得复杂的时候,store就变得相当臃肿,所以vuex允许将store分割成模块(module),而每个模块都可以拥有自己的state,mutations,actions等

网络封装(axios)

特点

在浏览器发送HMLHttpRequest请求

在node.js中发送http

支持Promise API

拦截请求和响应

转换请求和响应

使用

多种请求方式

  • axios(config)
  • axios.request(config)
  • axios.get(url[,config])
  • axios.delete(url,[config])
  • axios.head(url,[config])
  • axios.post(url,[,data[,config]])
  • axios.put(url,[,data[,config]])
  • axios.patch(url,[,data[,config]])

发送并发请求

  • 使用axios.all,可以放入多个请求的数组
  • axios.all[]返回的结果是一个数组,使用axios.spread可将数组[res1,res2]展开为res1,res2

全局配置

  • 请求地址 : url:'/user
  • 请求类型 : methods: 'get'
  • 请求根路径 : baseURL:'http://www.mt.com/api'
  • 请求前的数据处理 : transformRequest: [function(data){}],
  • 请求后的数据处理 : transformRequest:[function(data){}]
  • 自定义的请求头 : header:{'X-Request-With':'XMLHttprequest'},
  • URL查询对象 : params:{id:12}
  • 查询对象序列化函数
  • request body(请求体)
  • 超时设置
  • 跨域是否带Token
  • 自定义请求处理
  • 身份验证信息
  • 相应的数据格式

axios实例

const instance1 = axios.create({
  baseURL: 'http://123.207.32.32:8000',
  timeout: 5000
})
instance1({
  url: '/home/multidata'
}).then(res => {
  console.log(res);
})
技术

相关

数字化制造的世界最高水平，灯塔工厂推动全价值链技术变革和优化

直播内容抢先看 | 基于AUTOSAR技术的SOA软件平台实践

uni-app技术分享| 10分钟实现一个简易uniapp视频通话

【解决方案】智能物联网技术为养老院安全消防管理提供新出路

乘风破浪，遇见最美Windows 11之英特尔芯片和英特尔桥技术，释放Windows 11新体验

Java高并发，ThreadPoolExecutor线程池技术

PHP开发中的缓存技术汇总

Qt三方库开发技术（一）：QuaZIP介绍、编译和使用

红色诗篇技术支持

酱香恋技术支持

Java核心技术读书笔记9-3 Java集合相关算法与遗留集合

软件技术基础作业1

标签