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 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 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

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

img