Vue 基础入门 | 学习笔记

Vue 使用总结

组件化编程思想 在 component 文件夹内编写的组件可以通过 import 引入页面使用（标签）（引入页面 components 内注册）

Vue 模板语法

• 使用实现数据绑定，变量写在 data 中

• v-once 属性和 const 差不多 定义为常量、不可变 模板：v-once=‘变量名’

• v-html 属性可在 data 中写入 html 语句进行渲染 模板： v-html=‘变量名’

• {{ }}格式的数据绑定可写入

  • 数学计算式
  • 三目运算
  • JS 功能函数

• v-bind 属性可给标签绑定属性

  • 模板语法： v-bind=:属性=‘变量名’ 变量在 data 中定义、描述

  • 缩写： ：属性=‘变量名’

  • 例： :disabaled=‘msg’ data 中 msg：true

• v-on 属性给标签绑定事件 不止于 click

  • 模板： v-on:事件名=‘函数名’ 缩写： @事件名=‘函数名’
  • 例： @click=‘change（）’
  • methods 中写入函数

Vue 条件语句 遍历循环渲染

• v-if 条件渲染

  • 模板： v-if=‘变量名’ v-if=“变量==条件”

  • 此外还有 v-else-if v-else 语法相同

  • 复用相同组件时绑定 key 属性重新渲染（包括 v-for 遍历）

• v-show 属性条件渲染

  • 模板： v-show=“变量” 变量在 data 中定义
  • 变量 true 显示，false 不显示
  • 和 v-if 不同的是 v-if 中变量为 false 时不渲染 v-show 渲染只是把 disabled 属性改为了 true

• v-for 循环属性实现条件渲染

  • 模板： v-for=“item in items”在 data 中写入 items 清单（数组）
  • 可传入多值 item 替换为（属性 1，属性 2，属性 3）即可

Vue computed 计算属性

• 不同于 methods 中的方法，触发每次都会执行；

• computed 中的操作只要变量值没有改变，函数不会重新执行，依赖于缓存数据

• 计算属性一个函数分为 getter 函数（获取值）和 setter 函数（修改值）（再带 value 参数）

Vue watch 监听属性

• 可用 v-model 绑定数据 后台监听，一旦变量改变 执行函数

• watch 内写入函数 data 内声明 v-model 绑定的变量

• 函数名和变量名相同自带 newv 和 oldv 参数为新值和旧值

Vue 样式属性绑定

• 使用 v-bind 绑定 class

  • 模板： ：class=“变量”
  • 变量在 data 中声明 变量中写入 style 中定义好的样式
  • 如 ：class=“a” data 中 a：“aclass” style 中 .aclass{fontSize:20px}
  • 可通过：class={样式名：变量名，样式名：变量名}的形式绑定多样式
  • 变量通过 boolean 值决定是否使用样式 函数中可实现动态改变样式

• 使用 v-bind 绑定 style

  • 模板： :style="{样式名:变量 , 样式名: 变量}

Vue 事件处理器

• 在 methods 中写的函数可用@click 绑定到标签上

• v-bind 绑定的事件可添加多种修饰符（以下有@click 作为模板讲解）：

  • @click.stop 属性 防止向上一层传播
    • 例如 div 中的 p 标签绑定@click.stop，p 标签点击事件执行，div 的点击事件不会执行
  • @click.prevent 属性 组织触发的函数执行
  • 属性修饰符可以串联如@click.stop.prevent
  • 其他修饰符：
    • .passive 不阻止事件的默认行为（@scroll.passive=""滑动时触发）
    • .once 只触发一次
    • .self 只有是当前元素时触发
    • .capture 添加事件监听器

  • @keyup 监听键盘按键按下式调用

    • 如 @keyup.enter=‘’‘’

    • 支持监听多按键 如 @keyup.enter.ctrl

  • .exact 修饰符表示只有按下当前按键时才触发（不能同时按下其他按键）

    • 如 @keyup.ctrl.exact
    • 鼠标按键修饰符：.middle .left .right

Vue 表单处理

• input、textarea 表单都可以用 v-model 实现双向数据绑定

• 复选框 绑定相同的 v-model 在 data 内定义数组即实现数据双向绑定

• ：value 可实现绑定 value 值

• .lazy 修饰符每次选择后数据同步

• .number 修饰符只允许输入数字

• .trim 不允许输入空格

Vue 脚手架安装

• components 内放入页面、组件

• App.vue 首页

• 只允许存在一个根目录如 div

• script 内可用 import 引入组件

• 如 import MENU(组件名) from ‘路径’

• Export default 内必须写入 name(当前组件名称)

• Data(){}用方法写,return 框内声明变量

• Main.js 内通过 import 引入 Vue、App 组件和使用到的插件（并用 Vue.use 方法使用插件)

• 并 new Vue 对象 并注册使用的插件例如 router

• Index.html 写好 div（id=app）作项目入口

父子组件传输数据

方法一（父传子）

• 传递页面在 data 内写好函数 在组件标签内写入 ：方法名=‘方法名’即可

• 被传递页面内 script 写入 props：[‘参数名’]进行接收

• 模板：

 //父组件 HTML  menus为父组件变量
<props :menus='menus' class="menu" :addMenu="addMenu"></props>
//子组件js
props:{
	menus:Object,
	addMenu:Function
}

方法二 （子传父）

• 通过在被引入页面标签上写入@引入量=“引入量”，在引入页面写入 this.$emit(‘引入量’，形参)触发自定义事件引入 即可执行该函数 此时不能 this.addMenu(未引入)

• 模板：

//父组件  addMenu为父组件变量
<props class="menu" @addMenu="addMenu"></props>

//子组件  menu为子组件变量
this.$emit('addMenu',menu)

方法三 （组件间）

• 使用引用 ref 属性写入标签索引量

• 引入页面 mounted 生命周期内写入 this.$refs.menu(索引).$on(‘addMenu（引入量）’,this.addMenu（当前页面被引入量）)

• 在被引入页面写入 this.$emit(‘引入量’，形参)触发自定义事件引入

//宿组件HTML、Js  this.addMenu为宿组件变量
<props class="menu" ref="menu"></props>
mounted(){
	  this.$refs.menu.$on('addMenu',this.addMenu)
}
//源组件JS
this.$emit('addMenu',menu)

方法四（组件间）

• Pubsub 方法(不止于父子组件)两个页面都要 import Pubsub

• 在接参的页面（函数在此页面）mounted 内写入 Pubsub.subscribe(‘函数名’，（msg，形参）=>{回调函数})

• 在传参页面使用的函数内写入 Pubsub.publish（‘函数名’，形参）

//事先npm安装pubsub
//宿组件JS
import PubSub from 'pubsub-js';
PubSub.subscribe('add', (msg, data) => {
  this.addMenu(data);
});
//源组件JS
import PubSub from 'pubsub-js';
PubSub.publish('add', menu);

slot 插槽

• slot 插槽用法 注册组件 import，component 组件内 div 用 slot 标签写插槽标记好 name

• 插槽页面使用 div slot=“name” ，动态改写插槽

//引用插槽组件HTML
<slot name="f">默认内容</slot>
//插槽内容组件HTML
<div slot="f">版权所有LeBronChao</div>

ajax 框架通信

ajax 框架 vue-resource

• main.js 里 import，Vue.use(VueResource)

• 方法不止于 get 详情：https://github.com/pagekit/vue-resource

• 模板：

//main.js

import VueResource from 'vue-resource';

Vue.use(VueResource);

let url = 'www.sdalkndal.com';

this.$http
  .get(url)
  .then((response) => {
    alert('请求成功');
  })
  .catch((err) => {
    alert('请求失败');
  });

ajax 框架 axios 方法

• 不可全局注册 所有使用页面内 import

• 方法不止于 get 详情：https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

  主页：https://github.com/axios/axios

import axios from 'axios';

let url = 'www.asdnkjansd.com';
axios
  .get(url)
  .then((response) => {
    alert('请求成功');
  })
  .catch((error) => {
    alert('请求失败ERROR');
  })
  .finally(() => {
    allert('结束');
  });

Vue-router

• 路由基本用法：建立 pages 和 router 文件夹，配置好页面，路由 js 文件内引入 vue、vuerouter 和路由页面

• 使用 vue.use（VueRouter）使用路由 export default new VueRouter({routes})

• import 路由页面并在 routes 内注册（path、component、name），children 对象可写子路由，redirect 可重定向写默认页面

• 使用路由的页面内写入 router-link 和 router-view to 属性写路由路径

• Main.js 内 import 引入路由 js 文件，vue 对象内写入 router

• 用 keep-alive 标签包裹的路由标签可以保留缓存

Router.js:

import Vue from 'vue';
import VueRouter from 'vue-router';

import index from '../pages/index.vue';
import menu1 from '../pages/menu1.vue';
import subMenu1 from '../pages/subMenu1.vue';
import subMenu2 from '../pages/subMenu2.vue';
import menu2 from '../pages/menu2.vue';
import subMenu3 from '../pages/subMenu3.vue';

Vue.use(VueRouter);

export default new VueRouter({
  routes: [
    {
      path: '/index',
      component: index,
    },
    {
      path: '/menu1',
      component: menu1,
      children: [
        {
          path: '/menu1/subMenu1',
          component: subMenu1,
        },
        {
          path: '/menu1/subMenu2',
          component: subMenu2,
        },
        {
          path: '',
          redirect: '/menu1/subMenu1',
        },
      ],
    },
    {
      path: '/',
      redirect: '/index',
    },
    {
      path: '/menu2',
      component: menu2,
      children: [
        {
          path: '/menu2/subMenu3',
          component: subMenu3,
        },
        {
          path: '',
          redirect: '/menu2/subMenu3',
        },
      ],
    },
  ],
});

main.js:

import Vue from 'vue';
import App from './App.vue';
import PubSub from 'pubsub-js';
import VueResource from 'vue-resource';
import router from './router/router.js';

Vue.use(VueResource);
Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
  router,
}).$mount('#app');

Vue 组件:

<ul>
  <li>
    <router-link to="/index" hover:>首页</router-link>
  </li>
  <li>
    <router-link to="/menu1">页面一</router-link>
  </li>
  <li>
    <router-link to="/menu2">学生信息列表</router-link>
  </li>
</ul>
<div class="content">
  <keep-alive>
    <router-view></router-view>
  </keep-alive>

路由组件传参

路由组件传参分为 param 和 query 传参两种方式

param：

• 在 router-link 标签内将 to 属性改为绑定属性 ：to 并将路径和参数改为以下格式

• 以下 student.id 为传输参数

<ul>
          
  <li v-for="(student,index) in students" :key="student.id">
              <router-link :to="`/menu2/subMenu3/${student.id}`"
      >{{student.name}}</router-link
    >
            
  </li>
</ul>

• 将使用页面的 router path 属性后面加上/:id

• 如： path:‘subMenu3/:id’,

• 引入页面以此获取参数

<div>      Id:{{$route.params.id}}<br /></div>

query:

• 将上放 path 后面的/:id 去掉

//源组件
<router-link :to="`/menu2/subMenu3?id=${student.id}`">{{student.name}}</router-link>
//宿组件
<div>
      Id:{{$route.query.id}}<br/>
</div>

编程式路由导航

• 主要有三个方法：

  • push（压入栈)
  • repalce（替换）
  • back（回退）
  • push 可退回
  • replace 不可退回

• 用法为绑定点击事件（执行函数）到标签

  • 执行函数（methods 内）内编写
  • this.$router.push（or replace）(路径)

模板：

this.$router.push(`/menu2/subMenu3?id=${id}`);

动画、过渡

• 在进入/离开的过渡中，会有 6 个 class 切换。
  • v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
  • v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
  • v-enter-to：2.1.8 版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
  • v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
  • v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
  • v-leave-to：2.1.8 版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

掘金：前端 LeBron

知乎：前端 LeBron

持续分享技术博文，关注微信公众号 👇🏻