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

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