-
vue基础的一些实例推荐收藏
data：数据
用于存储数据，这里的数据可以全局使用
当数据发生变化时，会自动更新相关DOM元素methods：方法
用于存储各种方法
方法里面的this是当前vue对象
指令：就是vue提供的一套属性，都是v-开头methods基本指令
-
v-text ：innertext
演示案例：DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <div id="app"> <div v-text="msg">div> <div v-html="msg">aaaaadiv> div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script> <script> new Vue({ el:"#app", data:{ msg:"我喜欢你" }, methods:{ } }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
-
v-html : 相当于innerhtml，原样显示不解析双花括号里面的值
-
v-if :删除DOM元素实现隐藏
-
v-else , v-else-if
-
测试案例
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> #box{ background-color: aqua; width: 200px; height: 200px; margin-top: 20px; } style> head> <body> <div id="app"> <button @click="a=true">显示button> <button @click="a=false">隐藏button> <button @click="a=!a">切换button> <div v-show="show" v-if="a" id="box">div> <div>{{a}}div> div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script> <script> new Vue({ el:"#app", data:{ show:true, a:false }, methods:{ } }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
-
v-show: 使用css的方法来实现显示与隐藏（display：nono/block)
-
v-for： 循环
-
格式：
- v-for="值 in/of 数组“
- v-for="（值，序号） in/of 数组“
- 指出遍历数字（v-for=”值 in 数字“
- 演示demo
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <div id="app"> <button v-for="value in names">{{value}}button> <ul> <li v-for="(value,index) in names">{{index}},{{value}}li> ul> div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script> <script> new Vue({ el: '#app', data:{ names:['a','b','c','d','e','f','g','h','i'], color:'red' }, methods:{ } }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
-
v-on ： 事件绑定
- 相当于原生：onclick， vue为v-on：click
- 简化/简写：@
- 例如：可视页面上的一个元素点击，聚焦，失焦等操作
操作：
<template> <div> <button @click="num++">num+1button> <p>{{num}}p> div> template> <script> export default { data() { return { num: 0 } }, } script> <style lang="scss" scoped> style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
当点击num++后
-
-
v-bind ：属性绑定
-
- 属性名=”JS代码“
-
v-model ：双向数据绑定
- 方向1：传统 把data里面的数据传递到DOM元素里
- 方向2：必须是form表单元素才能和用户交互，用户修改DOM元素，可以同步更新数据项目
- 测试案例
<template> <div> <input type="text" value="kw" @input="kwchanged" /> <input type="submit" value="Submit" @input="kwchanged" /> <br /> <input type="text" v-model="kw" /> <br /> <input type="text" v-model="x" value="1111s" /> <button>{{ x }}button> <p>{{ x }}p> <hr /> <br /> <input type="text" v-model="username" placeholder="输入密码"> <input type="text" v-model="password" placeholder="请输入密码"> <button @click="login">登录button> div> template> <script> export default { methods: { kwchanged(e) { console.log(e.target.value); // target触发事件元素 this.kw = e.target.value; }, login(){ console.log(this.username,this.password) } }, data() { return { kw: "随便起", x: "1111111", username:"", password:"" }; }, }; script> <style lang="scss" scoped> style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
-
v-pre ： 原样显示代码，特指{{}},也就是原样显示不执行vue操作
-
测试案例
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> style> head> <body> <div id="app"> <div>{{8+8}}div> <div v-pre>{{8+8}}div> div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script> <script> new Vue({ el:'#app', }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
-
v-once ： 一次性，首次渲染之后，后续数据变化不会刷新DOM元素
演示案例DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <div @click="num++" id="app"> <button>num++button> <p>{{num}}p> <P v-once>初始值：{{num}}P> div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script> <script> new Vue({ el:"#app", data:{ num:10 }, methods:{ } }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
-
-
key ： 唯一标识
- 配合v-for 提升数组变更之后的重新下渲染效率
- vscode最好写上虽然不写代码不会报错大师vscode是会标记出来的
- 演示案例：
<template> <div> <div id="pages"> <span v-for="n in 10" :key="n" :class="{active:current == n}" @click="current=n">{{ n }}span> <p>{{current}}p> <ul style="width: 500px; height: 200px"> <li v-for="(value, index) in names" :key="value"> {{ index }}-{{ value }} li> ul> <button @click="names.shift()">删除元素button> div> div> template> <script> export default { data() { return { names: ["小张", "王大麻子", "赵二狗", "三胖", "小新", "涛哥"], // vue的核心：数据驱动凡是数据会变化的都有数据在驱动 current:1, // 当前页号 }; }, }; script> <style lang="scss"> * { margin: 0px; padding: 0px; } // 如果报错sass-loader就是没有插件 #pages { background-color: linen; padding: 20px; user-select: none; span { height: 50px; width: 50px; text-align: center; display: inline-block; line-height: 50px; background-color: white; color: #4e6ef2; border-radius: 4px; margin: 5px; transition: 0.7s; // &读取当前所在的父，即span &:hover { background-color: #4e6ef2; color: aliceblue; } // 点击就激活 &.active { background-color: #4e6ef2; color: aliceblue; } } } style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
-
ref： 把一个变量和DOM元素绑定在一起存储在 $refs 里面
- 演示案例：
<template> <div> <input type="text" /> <br> <input type="text" ref="inp"/> <br> <input type="text" /> <br> <button @click="dofocus">获得焦点button> <p ref="thep">hello worldp> div> template> <script> export default { methods: { dofocus() { console.log("dofocus"); // 点击后让第二个输入框获得焦点 // 原生:先查查到之后再去获得焦点 // const inp = document.querySelectorALL("input")[1]; // inp.focus() console.log("$ref:",this.$refs); // 使用ref属性会把变量绑定在变量上存储在$refs属性中 console.log(this) this.$refs.inp.focus() this.$refs.thep.style.color="red" this.$refs.inp.style.width="1000px" } }, }; script> <style lang="scss" scoped> style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 演示案例：
Vue生命周期
- beforeCreate
- 在创建组件之前
- created
- 开始创建
- beforMount
- 开始挂在到页面，用户可监视
- Mounted
- beforUpdate
- 开始更新
- update
- activated
- deactivated
- 销毁结束
- befordeactive
- 销毁结束
- destroed
- errorCaptured
生命周期案例
由于生命周期属性太多了，我这里就用最常用的来举例
<template> <div> <input type="text" v-focus /> <input type="text" v-focus /> <input type="text" v-focus /> div> template> <script> export default { directives: { // DOM的生命周期 // 创建>设置属性>最后添加到页面属性 // 比如创建一个按钮 // 创建:const btn document.createElement("button") // 配置属性: btn.className = "danger" ; btn.innerText="xxx" // 位置一:btn.focus() // 添加到页面:box.appendChild(btn) // 位置二:btn.focus() // // 若想让元素获得焦点,代码怎么写? focus:{ // 自选生命周期.来触发函数 // bind //还在发育:创建时(还没添加到页面) // inserted //出生:添加到页面上的时候 // update //发育:目标更新 // componentsUpdated //成年:组件更新时 // unbind //GG去世:移除的时候 inserted(el){ // insert //数据库的时候出现过:插入 // 指令所在的元素,添加到页面上的时候 el.focus() } } // focus(el, text) { // console.dir(el); // // 找 原型>原型>原型里面 // // 作用:让DOM元素获得焦点 // el.focus(); // }, }, }; script> <style lang="scss" scoped> style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
computed:计算属性
特点：在使用时不需要（）能自动触发
注意的点：不适合事件触发的函数，因为事件触发的函数必然是手动触发的练习
1.制作待办事项
实现的效果
代码框架
<template> template> <script> export default { }; script> <style lang="scss" scoped> .warning { background-color: aqua; width: 200px; line-height: 40px; text-align: center; color: white; border-radius: 4px; } li{ width: 150px; height: 50px; display: flex; align-items: center; justify-content: space-around; background-color: rgb(95, 145, 165); } style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
答案
<template> <div> <div id="mian"> <input type="text" placeholder="请输入待办事项" v-model="kw" @keyup.enter="todolist.push(kw);kw='';"/> <button :disabled="kw==''" @click="todolist.push(kw);kw=''; ">确定button> <ul> <h3>待办事项h3> <li v-for="(todo,i) in todolist" :key="i"> <span>{{todo}}span> <button @click="dellist(i)">删除button> li> ul> <div class="warning" v-if="todolist.length ==0">暂无待办事项div> div> div> template> <script> export default { methods: { dellist(i){ this.todolist.splice(i,1) } }, data() { return { todolist: ['吃饭','睡觉','大量两'], // 输入框的是双向绑定 kw:"", }; }, }; script> <style lang="scss" scoped> .warning { background-color: aqua; width: 200px; line-height: 40px; text-align: center; color: white; border-radius: 4px; } li{ width: 150px; height: 50px; display: flex; align-items: center; justify-content: space-around; background-color: rgb(95, 145, 165); } style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
-
-
相关阅读:
IceRPC之调度管道->快乐的RPC
01-shell编程规范与变量
IB心理学生物分析模块
ch7视觉里程计
MFC串口通信（SerialPort）
Scala入门教程
ArrayList 和 LinkedList 到底有哪些区别？
睿趣科技：抖音开店前期需要准备什么
dmfldr指定某列为缺省值进行导入
微软表示Visual Studio的IDE即日起开启“退休”倒计时
- 原文地址：https://blog.csdn.net/weixin_50112395/article/details/125913806
