Vue使用笔记整理

最新推荐文章于 2023-12-08 14:36:18 发布
最新推荐文章于 2023-12-08 14:36:18 发布
阅读量244 收藏
点赞数
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27665897/article/details/87004252
版权

Vue

标签（空格分隔）： 前端

Vue核心

特点

MVVM模式:最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。
把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。
Vue中的MVVM

模板语法

双大括号表达式
  • 语法: {{exp}}
  • 功能: 向页面输出数据
  • 可以调用对象的方法
指令
  1. 强制数据绑定指令
  • 功能：指定变化的属性值
  • 完整写法:
    v-bind:xxx=‘yyy’ //yyy 会作为表达式解析执行
  • 简洁写法:
    :xxx=‘yyy’
  1. 绑定事件监听
  • 功能：绑定指定事件名的回调函数
  • 完整写法：
    v-on:keyup=‘xxx’
    v-on:keyup=‘xxx(参数)’
    v-on:keyup.enter=‘xxx’
  • 简洁写法：
    @keyup=‘xxx’
    @keyup.enter=‘xxx’

计算属性和监视

####计算属性

  • 在computed属性对象中定义计算属性的方法
  • 在页面中使用{{方法名}}来显示计算的结果
监视属性
  • 通过vm对象的$watch()或watch配置来监视指定的属性
  • 当属性变化时，回调函数自动调用，在函数内部进行计算
计算高级属性
  • 通过getter/setter实现对属性数据的显示和监视
  • 计算属性存在缓存，多次读取只执行一次getter计算
编码
<div id="demo">
    姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
    名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
    姓名 1(单向): <input type="text" placeholder="Full Name" v-model="fullName1"><br>
    姓名 2(单向): <input type="text" placeholder="Full Name" v-model="fullName2"><br>
    姓名 3(双向): <input type="text" placeholder="Full Name2" v-model="fullName3"><br>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#demo',
        data: {
            firstName: 'Kobe',
            lastName: 'bryant',
            fullName2: 'Kobe bryant'
        },
        computed: {
            fullName: function () {
                return this.firstName + " " + this.lastName
            },
            fullName3: {
                get: function () {
                    return this.firstName + " " + this.lastName
                },
                set: function (value) {
                    var names = value.split(' ')
                    this.firstName = names[0]
                    this.lastName = names[1]
                }
            }
        },
        watch: {
            lastName: function (newVal, oldVal) {
                this.fullName2 = this.firstName + ' ' + newVal
            }
        }
    })
    vm.$watch('firstName', function (val) {
        this.fullName2 = val + ' ' + this.lastName
    })

class与style绑定

class绑定
  • :class=‘xxx’
  • 表达式是字符串：‘calssA’
  • 表达式对象时：{classA:isA, classB:isB}
  • 表达式是数组：[‘classA’,‘classB’]
style绑定
  • :style="{ color: activeColor, fontSize: fontSize + ‘px’ }"
  • 其中 activeColor/fontSize 是 data 属性

条件渲染

指令
  • v-if和v-else
  • v-show
比较v-if和v-show
  • 如果需要频繁切换，使用v-show
  • 当条件不成立时，v-if的所有子节点不会解析

列表渲染

指令
  1. 列表显示指令
  • 数组：v-for/index
  • 对象：v-for/key
  1. 列表的更新显示
  • 删除item
  • 替换item
    3.列表的高级处理
  • 列表过滤
  • 列表排序
编码1
<div id="demo">
    <h2>测试: v-for 遍历数组</h2>
    <ul>
        <li v-for="(p, index) in persons" :key="index">
            {{index}}--{{p.name}}--{{p.age}}
            --
            <button @click="deleteItem(index)">删除</button>
            --
            <button @click="updateItem(index, {name:'Jok',age:15})">更新</button>
        </li>
    </ul>
    <h2>测试: v-for 遍历对象</h2>
    <ul>
        <li v-for="(value, key) in persons[0]">
            {{ key }} : {{ value }}
        </li>
    </ul>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#demo',
        data: {
            persons: [
                {id: 1, name: 'Tom', age: 13},
                {id: 2, name: 'Jack', age: 12},
                {id: 3, name: 'Bob', age: 14}
            ]
        },
        methods: {
            deleteItem(index) {
                this.persons.splice(index, 1)
            },
            updateItem(index, p) {
// this.persons[index] = p // 页面不会更新
                this.persons.splice(index, 1, p)
            }
        }
    })
</script>
编码2
<div id="demo">
    <input type="text" name="searchName" placeholder=" 搜索指定用户名"
           v-model="searchName">
    <ul>
        <li v-for="(p, index) in filterPerson" :key="index">
            {{index}}--{{p.name}}--{{p.age}}
        </li>
    </ul>
    <button @click="setOrderType(1)">年龄升序</button>
    <button @click="setOrderType(2)">年龄降序</button>
    <button @click="setOrderType(0)">原本顺序</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#demo',
        data: {
            orderType: 0, //0 代表不排序 , 1 为升序 , 2 为降序
            searchName: '',
            persons: [
                {id: 1, name: 'Tom', age: 13},
                {id: 2, name: 'Jack', age: 12},
                {id: 3, name: 'Bob', age: 17},
                {id: 4, name: 'Cat', age: 14},
                {id: 4, name: 'Mike', age: 14},
                {id: 4, name: 'Monica', age: 16}
            ]
        },
        methods: {
            setOrderType(orderType) {
                this.orderType = orderType
            }
        },
        computed: {
            filterPerson() {
                let {orderType, searchName, persons} = this
                // 过滤
                persons = persons.filter(p => p.name.indexOf(searchName) != -1)
                // 排序
                if (orderType !== 0) {
                    persons = persons.sort(function (p1, p2) {
                        if (orderType === 1) {
                            return p1.age - p2.age
                        } else {
                            return p2.age - p1.age
                        }
                    })
                }
                return persons
            }
        }
    })
</script>

事件处理

绑定监听
  1. v-on:xxx=“fun”
  2. @xxx=“fun”
  3. @xxx=“fun(参数)”
  4. 默认事件形参: event
  5. 隐含属性对象: $event
事件修饰符
  • .prevent:阻止事件的默认行为 event.preventDefault()
  • .stop:停止事件冒泡 event.stopPropagation()
按键修饰符
  • .keycode：操作的是某个keycode值的键
  • .keyName:操作得是某个按键名的键
编码
<div id="example">
    <h2>1. 绑定监听</h2>
    <button v-on:click="test1">Greet</button>
    <button @click="test1">Greet2</button>
    <button @click="test2($event, 'hello')">Greet3</button>
    <h2>2. 事件修饰符</h2>
    <!-- 阻止事件默认行为 -->
    <a href="http://www.baidu.com" @click.prevent="test3">百度一下</a>
    <br/>
    <br/>
    <!-- 停止事件冒泡 -->
    <div style="width: 200px;height: 200px;background: red" @click="test4">
        <div style="width: 100px;height: 100px;background: green"
             @click.stop="test5"></div>
    </div>
    <h2>3. 按键修饰符</h2>
    <input @keyup.8="test6">
    <input @keyup.enter="test6">
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#example',
        data: {
            name: 'Vue.js'
        },
        methods: {
            test1(event) {
// 方法内 `this` 指向 vm
// alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
                alert(event.target.innerHTML)
            },
            test2(event, msg) {
                alert(event.target.innerHTML + '---' + msg)
            },
            test3() {
                alert(' 阻止事件的默认行为')
            },
            test4() {
                alert('out')
            },
            test5() {
                alert('inner')
            },
            test6(event) {
                alert(event.keyCode + '---' + event.target.value)
            }
        }
    })
</script>

表单输入绑定

使用v-model对表单数据自动收集
  • text/textarea
  • checkbox
  • radio
  • select
编码
<div id="demo">
    <form @submit.prevent="handleSubmit">
        <span>用户名: </span>
        <input type="text" v-model="user.username"><br>
        <span>密码: </span>
        <input type="password" v-model="user.pwd"><br>
        <span>性别: </span>
        <input type="radio" id="female" value="female" v-model="user.sex">
        <label for="female">女</label>
        <input type="radio" id="male" value="male" v-model="user.sex">
        <label for="male">男</label><br>
        <span>爱好: </span>
        <input type="checkbox" id="basket" value="basketball" v-model="user.likes">
        <label for="basket">篮球</label>
        <input type="checkbox" id="foot" value="football"v-model="user.likes">
        <label for="foot">足球</label>
        <input type="checkbox" id="pingpang" value="pingpang" v-model="user.likes">
        <label for="pingpang">乒乓</label><br>
        <span>城市: </span>
        <select v-model="user.cityId">
            <option value="">未选择</option>
            <option v-for="city in allCitys" :value="city.id">{{ city.name }}
            </option>
        </select><br>
        <span>介绍: </span>
        <textarea v-model="user.desc" rows="10"></textarea><br><br>
        <input type="submit" value=" 注册">
    </form>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#demo',
        data: {
            user: {
                username: '',
                pwd: '',
                sex: 'female',
                likes: [],
                cityId: '',
                desc: '',
            },
            allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SZ'}, {
                id: 4, name:
                    'SH'
            }],
        },
        methods: {
            handleSubmit(event) {
                alert(JSON.stringify(this.user))
            }
        }
    })
</script>

Vue实例生命周期

生命周期流程图

生命周期流程图

生命周期分析
  1. 初始化显示
  • beforeCreate()
  • created()
  • beforeMount()
  • mounted()
  1. 更新状态：this.xxx = value
  • beforeUpdate()
  • updatedF()
  1. 销毁vue实例：vm.$destory()
  • beforeDestoryf()
  • destoryed()
常用生命周期方法
  • created():发送ajax请求，启动定时器等异步任务。
  • beforeDestory():做收尾工作，如，清除定时器
编码
<div>
    <button @click="destoryVue">destory vue</button>
    <p v-show="isShowing">{{msg}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var vue = new Vue({
        el: 'div',
        data: {
            msg: 'Vue生命周期',
            isShowing: true,
            persons: []
        },
        beforeCreate() {
            console.log('beforeCreate() msg=' + this.msg)
        },
        created() {
            console.log('created() msg=' + this.msg)
            this.intervalId = setInterval(() => {
                console.log('-----')
                this.isShowing = !this.isShowing
            }, 1000)
        },
        beforeMount() {
            console.log('beforeMount() msg=' + this.msg)
        },
        mounted() {
            console.log('mounted() msg=' + this.msg)
        },
        beforeUpdate() {
            console.log('beforeUpdate isShowing=' + this.isShowing)
        },
        updated() {
            console.log('updated isShowing=' + this.isShowing)
        },
        beforeDestroy() {
            console.log('beforeDestroy() msg=' + this.msg)
            clearInterval(this.intervalId)
        },
        destroyed() {
            console.log('destroyed() msg=' + this.msg)
        },
        methods: {
            destoryVue() {
                vue.$destroy()
            }
        }
    })
</script>

过渡动画

vue动画理解
  1. 操作css的trasition或animation
  2. vue会给目标元素添加/移除特定的class
  3. 过度相关的类名
  • xxx-enter-active: 指定显示的transition
  • xxxs-leave-active: 指定隐藏的transiton
  • xxx-enter/xxx-leave-to: 指定隐藏时的样式
    过渡动画
基本过度动画的编码
  1. 在目标元素外包裹
  2. 定义class样式
  • 指定过渡样式：transition
  • 指定隐藏时的样式：opacity/其他

过滤器

####理解

  1. 功能：对要显示的数据进行特定格式化后再显示
  2. 注意：并没有改变原本的数据，可能产生新的对应的数据
定义何使用
  1. 定义
Vue.filter(filterName,function(value[...args]){
    //进行一定的数据处理
    return newVlaue;
}
  1. 使用
<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>

Vue组件化编码

组件间通信

####基本原则

  • 不要再子组件中直接修改父组件的状态数据
  • 数据在哪，更新数据的行为就应该定义在哪
组件间通信方式
  1. props
  2. vue自定义事件
  3. 消息订阅与发布（如pubsub库）
  4. slot
  5. vuex

组件间通信props

使用标签时
<my-component name='tom' :age='3' :set-name='setName'></my-component>
定义MyComponent时
  1. 在组件内声明所有的props
  2. 方式
  • 只指定名称
    props: [‘name’, ‘age’, ‘setName’]
  • 指定名称和类型
    props: {name: String,age: Number,setNmae: Function}
  • 指定名称/类型/必要性/默认值
    props: {name: {type: String, required: true, default:xxx},}
注意
  1. 此方式用于父组件向子组件传递数据
  2. 多有标签属性都会陈伟组件对象的属性，模板可以直接引用
  3. 如果需要向非子后代传递数据必须多层逐层传递
  4. 兄弟组件间也不能直接props通信，必须借助父组件才可以

组件间通信消息订阅与发布（PubSubJS库）

  • 订阅
    Pubsub.subscribe('msg',functicon(msg,data({})
  • 发布消息
    Pubsub.publish('msg',data)
  • 注意
    此方式可实现任意关系组件间通信
  • 事件的2个重要操作
  1. 绑定事件监听（订阅消息）
    • 目标：标签元素
    • 事件名（类型）：click/focus
    • 回调函数：function(event)
  2. 触发事件（发布消息）
    DOM事件：用户在浏览器上对应的界面做对应的操作
    自定义：编码手动触发

组件间通信 slot

此方式用于父组件向子组件传递‘标签数据’

子组件
<template>
    <div>
        <slot name="xxx">不确定的标签结构 1</slot>
        <div>组件确定的标签结构</div>
        <slot name="yyy">不确定的标签结构 2</slot>
    </div>
</template>
父组件
<child>
    <div slot="xxx">xxx 对应的标签结构</div>
    <div slot="yyy">yyyy 对应的标签结构</div>
</child>

Vue-ajax

有两个常用的ajax库

  1. vue-resource：vue插件，非官方库，vue1.x使用广泛
  2. axios：通用的ajax请求库，官方推荐使用，vue2.x使用广发
    下面主要介绍axios的使用

axios的使用

// 引入模块
import axios from 'axios'
// 发送 ajax 请求
axios.get(url)
    .then(response => {
        console.log(response.data) // 得到返回结果数据
    })
    .catch(error => {
        console.log(error.message)
    })

vue UI组件库

常用

  1. Mint UI
  2. Element

Vue-router

说明

  1. 官方提供的用来实现SPA的vue插件
  2. 中文文档：https://router.vuejs.org/zh/

相关api说明

  1. VueRouter()：用于创建路由器的构建函数
new VueRouter({
    //多个配置项目
})

2 路由配置

routes: [
    { // 一般路由
        path: '/about',
        component: About
    },
    { // 自动跳转路由
        path: '/',
        redirect: '/about'
    }
]

3 注册路由器

import router from './router'
new Vue({
    router
})

4 使用路由标签

router-link：用来生成路由链接
<router-link to="/xxx">Go to XXX</router-link>
router-view：用来显示当前路由组件界面
<router-view></router-view>

Anshay
关注
专栏目录
vue 学习笔记
weixin_43971312的博客
05-22 2270
VUE 学习笔记 1 简介 1.1 简介 中文网 https://cn.vuejs.org/v2/guide/ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的
尚硅谷vue课程笔记整理
05-30
尚硅谷vue课程笔记整理
狂神说Vue笔记整理
热门推荐
qq_46138160的博客
12-11 10万+
狂神说Vue笔记 ​ 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。 一、前端核心分析 1.1、概述 Soc原则：关注点分离原则 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管
vue学习笔记整理
weixin_48020259的博客
03-17 1243
vue学习笔记整理 初识VUE 1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象； 2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法； 3.root容器里的代码被称为【Vue模板】； 4.Vue实例和容器是一一对应的； 5.真实开发中只有一个Vue实例，并且会配合着组件一起使用； 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录vue学习笔记整理前言一、MVVM模型1.模式演示2.总结二、模板语法1.插值语法2.指令语法3.代码演
千锋 Vue 详细笔记整理
随缘博客
12-08 3364
前端 vue 详细笔记整理
Vue2笔记整理
前端小白, 稀土：雩风十六
08-12 1342
Vue是一套用于的JavaScript框架渐进式：Vue可以自底向上应用，它的核心库轻量，只关心图层，便于与第三方库或既有项目。
vue3笔记整理
草莓不爱吃白菜的博客
03-23 462
1.ref和reactive 两个都是创建的响应式对象 ref偏向于创建基础数据类型 reactive偏向于创建较复杂深层的数据类型 我们可以理解为ref是reactive的二次封装，ref创建出来的对象，在js中访问时需要使用 .value来对值进行访问，但是在html模版中访问会被解包，直接使用即可，因此模板中不需要 .value。 reactive可以传递一个ref，这样将对会ref进行解包，并保持ref的响应性 2.setup 发生在创建组件实例时，prop被解析之后，beforeCreate之前，
Vue3.0笔记整理
weixin_42572626的博客
10-20 796
vue3.0笔记
vue2尚硅谷笔记整理
weixin_44686152的博客
06-13 1677
vue2
vue笔记整理
HHKJ 的博客
03-18 714
5、如果第2项选择了ESlint（编码规范），还会有两个选项，1规范选项建议选：Standard config；安装以上插件后，输入"
Vue3笔记整理
qq_54889094的博客
05-24 662
Vue系列笔记
本人开发初级阶段学习VUE整理笔记.zip
10-23
这份“本人开发初级阶段学习VUE整理笔记”恰好为想要踏入Vue世界的新手提供了一份宝贵的资源。 在初学者的Vue学习过程中，以下是一些核心知识点： 1. **基础概念**：Vue的核心理念是声明式渲染，通过数据绑定（`v-...
vue 2.0 版本笔记整理
05-04
vue 2.0 版本笔记整理
个人学习vue笔记自己整理精华
02-18
本人学习vue时候的学习笔记，以及工作共遇到的我认为需要记录的一些知识点
vue2.0详细笔记整理记.md
01-18
vue学习笔记整理
【超强组合】基于淘金优化算法GRO-BP-Adaboost的数据分类预测算法Matlab实现.rar
最新发布
10-08
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
VMware Workstation Pro 和 VMware Fusion 安装与配置指南
10-08
内容概要：本文档详细指导了如何在不同的主机环境下，通过 VMWare 的两款产品——Workstation Pro 和 Fusion 进行新虚拟机的构建流程以及具体的操作要点说明。 适用人群：希望在单一机器上部署多操作系统的工作环境或学习测试场景的技术人员和学生。 使用场景及目标：旨在帮助初学者搭建属于自己的虚拟机实验平台，从而方便进行软件测试或者研究操作系统相关的新特性等任务，同时也有利于团队间的协作和资源调配。 注意事项：文中涉及的具体操作如下载源文件、配置网络参数时要注意版权合法性问题和技术安全防范。此外还需依据各自电脑的软硬件条件适当增减虚拟机的资源设定。
科研经费管理系统 SSM毕业设计 源码+数据库+论文（JAVA+SpringBoot+Vue.JS）.zip
10-08
科研经费管理系统 SSM毕业设计 源码+数据库+论文（JAVA+SpringBoot+Vue.JS） 启动教程：https://www.bilibili.com/video/BV1GK1iYyE2B
使用Python Matplotlib进行图形输出与保存详解（包含详细的完整的程序和数据）
10-08
内容概要：本文详细介绍了使用 Python 的 Matplotlib 库来输出和保存图形的方法。不仅涉及了基本流程，如生成图表并将之导出成PNG、PDF和SVG等不同格式的内容，还包括高级话题如设置透明度、分辨率以及制作包含图形元素的HTML页面等。文章通过一个具体的示例代码讲解了各个环节的关键细节和技术要点。 适用人群：对数据可视化有兴趣的初学者及具有一定基础想要深入学习 Matplotlib 使用技巧的技术人员。 使用场景及目标：适用于需要掌握 Matplotlib 不同输出选项及其特点的应用场合，尤其是当需要生成用于打印或网页展示的高质量、可自定义外观的图形时。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值