vue基础学习
一、事件
1、事件处理
在前端开发中，我们需要经常和用于交互。
这个时候，我们就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等
在Vue中如何监听事件呢？使用v-on指令
v-on介绍
作用：绑定事件监听器
缩写：@
预期：Function | Inline Statement | Object
参数：event
当通过methods中定义方法，以供@click调用时，需要注意参数问题：
情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。
但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。
2、事件修饰
在某些情况下，我们拿到event的目的可能是进行一些事件处理。
Vue提供了修饰符来帮助我们方便的处理一些事件：
.stop - 调用 event.stopPropagation()作用：停止冒泡
<button @click.stop="show"></button>
.prevent - 调用 event.preventDefault()----作用：阻止默认行为
<button @click.prevent ="show"></button>
.native - 监听组件根元素的原生事件。
<button @click.native ="show"></button>
.once - 只触发一次回调。
<button @click.once ="show"></button>
.passive - 事件的默认行为立即执行，无须等待事件回调完毕
<button @click.passive ="show"></button>
.串联修饰符
<button @click.passive.stop ="show"></button>//先阻止默认事件在停止冒泡
3、键盘事件
常用的键盘事件：
-
keydown：按下按键无须抬起便触发事件
-
keyup：按下按键松手才触发事件
<input type="text" @keyup.enter="show">//按下enter键松手触发show事件1、Vue常用的按键别名：
- 回车–enter
- 删除–delete
- 退出–esc
- 空格–space
- 换行–tab
- 上–up
- 下–down
- 左–left
- 右–right
2、ye可以使用keyCode去指定具体的按键
<input type="text" @keyup.13="show">//按下enter键松手触发show事件
3、 系统修饰键：ctrl、alt、shift、meta
（1）配合keyup使用时按下修饰键的同时，再按下其他键，随后释放其他键，事件才触发
（2）配合keydown 使用时正常触发
二、计算属性
- 定义：要的属性不存在，要通过已有的属性计算得来
- 原理：底层借助了Object.defineproperty的方法提供的getter和setter；
- get函数的调用时机:当初次读取与依赖的数据发生改变是get函数会被调用
- 计算属性默认只有 getter，如果计算属性要被修改时，必须写 setter去响应修改
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
结果：
Original message: “Hello”
Computed reversed message: “olleH”
5.计算属性(computed)与方法(method)的区别：
- computed是属性调用，而methods是函数调用
- computed带有缓存功能，而methods不是
- computed定义的方法我们是以属性访问的形式调用的，{{computedTest}}
- 但是methods定义的方法，我们必须要加上()来调用，如{{methodTest()}}，否则，视图会出现直接显示：function（）{[native code]}的情况
- 我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 text 还没有发生改变，多次访问 getText 计算属性会立即返回之前的计算结果，而不必再次执行函数。而方法只要页面中的属性发生改变就会重新执行
对于任何复杂逻辑，你都应当使用计算属性 - computed依赖于data中的数据，只有在它的相关依赖数据发生改变时才会重新求值
三、监视属性
1、监视属性watch
-
当被监视的属性变化时，回调函数自动调用
-
监视的属性必须存在才能进行监视
-
监视属性的两种写法：new Vue时传入watch配置以及通过vm.$watch监视
-
配置项–immediate：true–初始化市让函数调用一下；deep：true–开启深度监视
<div id="demo">{{ fullName }}</div>var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } })
2、深度监视
- vue中的watch默认不监视对象内部值的改变
- 配置deep：true可以监视对象内部值的改变
- vue自身可以监视对象内部值的改变，但vue提供的watch默认不可以
四、条件渲染
1、条件渲染指令
v-if 、 v-else 与v-else-if：
这三个指令与JavaScript的条件语句if、else、else if类似;适用于切换频率较低的场景；Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件，当使用v-if时不展示的DOM元素直接被移除。
简单的案例演示：
<div>
<p v-if="score>=90">优秀</p>
<p v-else ="score>=80">良好</p>
<p v-else-if="score>=60">及格</p>
<p v-else-if="score>=90">不及格</p>
</div>
const vm=new Vue({
el:'#app,
data:{
score:88
}
})
v-show
写法：v-show=“表达式”，适用于切换频率较高的场景
特点：当使用v-show时不展示的DOM元素未被移除，仅仅是使用样式隐藏，且使用v-if时元素可能无法获取到，而使用v-show一定可以获取到。
v-show 和 v-if 的区别
- v-if是真正的条件渲染，他会确保在切换过程中条件块内的时间和子组件被销毁和重建（组件被重建将会调用created）
v-show不论如何，都会被渲染在DOM中，当条件为真值时，将会修改条件的css样式 - v-if有更高的切换开销，v-show有更高的初始渲染开销
- v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；
- v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
- v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
- v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
- v-if适合运营条件不大可能改变；v-show适合频繁切换。
五、列表渲染
1、v-for 基本用法
当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。v-for的语法类似于JavaScript中的for循环。v-for可遍历数组、对象、字符串、指定次数。
语法：语法格式：v-for=(item, index) in items
其中的index就代表了取出的item在原数组的索引值，从0开始。
<div id="app">
<ul>
<li v-for="(p,index) in persons" :key="index">
{{p.name}}--{{p.age}}
</li>
</ul>
</div>
new Vue({
el:'#app',
data:{
persons:[
{name:"张三",age:20},
{name:"李四",age:29},
{name:"王五",age:33}
]
}
})
结果：
- 张三–20
- 李四–29
- 王五–33
2、key的作用与原理
-
虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据新的数据生成新的虚拟DOM，随后Vue进行新虚拟DOM与旧的虚拟DOM的差异比较；
-
对比规则：
-
旧虚拟DOM中找到了与新虚拟DOM相同的key：
若虚拟DOM中的内容没有变化，直接使用之前的真实DOM；
若虚拟DOM中的内容发生变化，则生成新的真实DOM，随后替换掉页面之前的真实DOM。
-
旧虚拟DOM中未找到与新虚拟DOM相同的key：
创建新的真实DOM，随后渲染到页面
-
-
用index作为key可能会引发的问题：
-
若对数据进行：逆序添加、删除等破坏顺序的操作：
会产生没有必要的真实DOM更新，界面显示没有问题，但效率低
-
如果结构中还包括输入类的DOM：
会产生错误DOM更新，界面显示会有问题
-
3、在组件上使用 v-for
在自定义组件上，你可以像在任何普通元素上一样使用 v-for。
<my-component v-for="item in items" :key="item.id"></my-component>
2.2.0+ 的版本里，当在组件上使用 v-for 时，key 现在是必须的。
然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 prop：
4、v-for 与 v-if 一同使用
不推荐在同一元素上使用 v-if 和 v-for。
当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用。
5、Vue监视数据的原
-
vue会监视data中所有层次的数据。
-
如何监测对象中的数据?
通过setter实现监视，且要在newVue时就传入要监测的数据。
-
对象中后追加的属性，Vue默认不做响应式处理
-
如需给后添加的属性做响应式，请使用如下API:
Vue . set(target, propertyName/index, value) 或
Vm .$set (target, propertyName/ index, value )
-
-
如何监测数组中的数据?
通过包裹数组更新元素的方法实现，本质就是做了两件事:
- 调用原生对应的方法对数组进行更新。
- 重新解析模板，进而更新页面。
-
.在Vue修改数组中的某个元素定要用如 下方法:
- 使用这些API:push()、pop()、 shift()、 unshift()、 splice()、 sort()、 reverse()
- Vue.set()或vm.$set()
特别注意: Vue.set() 和vm.$set() 不能给vm 或vm的根数据对象添加属性即不能运用在vm和vm._data上! !
例子：
<div id="app"> <h1>学生信息</h1> <h2>姓名：{{student.name}}</h2> <h2>年龄：{{student.age}}</h2> <h3 v-show="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="(p, index) in student.friends" :key="index"> {{p.name}}--{{p.age}}</li> </ul> <button @click="student.age++">点击年龄加1</button> <button @click="addSex">点击添加性别属性</button> <button @click='addHobby'>添加一个爱好</button> <button @click="addFriend">点击在首位添加朋友</button><br> <button @click="changeName">修改第一个人的姓名为张三</button> <button @click="changeHoppy">修改第一个爱好为：游泳</button> </div>const vm=new Vue({ el:'#app', data:{ student:{ name:'张三', age:19, hobby:['学习','看书','打篮球'], friends:[ {name:'李四',age:20}, {name:'王五',age:29} ] } }, methods: { addSex(){ // Vue.set(this.student,'sex','男') vm.$set(this.student,'sex','女') }, addFriend(){ this.student.friends.unshift({name:'赵六',age:22}) }, changeName(){ this.student.friends[0].name='张三' }, addHobby(){ this.student.hobby.push('打游戏') }, changeHoppy(){ // this.student.hobby.splice(0,1,'游泳') Vue.set(this.student.hobby,0,'游泳') } }, })
六、数据绑定
1、你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
注意：
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
2、v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
注意：
text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。
对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用 input 事件。
1、文本输入框
<input v-model="message" placeholder="请输入内容">
<p>Message is: {{ message }}</p>
2、多行文本
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
注意：
在文本区域插值 ({{text}}) 并不会生效，应用 v-model 来代替。
3、复选框
1、单个复选框
单个复选框，绑定到布尔值：
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
2、多个复选框
多个复选框，绑定到同一个数组：
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
new Vue({
el: '#app',
data: {
checkedNames: []
}
})
4、单选按钮
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
new Vue({
el: '#example-4',
data: {
picked: ''
}
})
5、选择框
单选
<div id="example-5">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
new Vue({
el: '...',
data: {
selected: ''
}
})
多选
<div id="example-6">
<select v-model="selected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>
new Vue({
el: '#example-6',
data: {
selected: []
}
})
6、修饰符
-
lazy修饰符：
默认情况下，v-model默认是在input事件中同步输入框的数据的。也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。lazy修饰符可以让数据在失去焦点或者回车时才会更新。
-
number修饰符：
默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。number修饰符可以让在输入框中输入的内容自动转成数字类型。
-
trim修饰符：
如果输入的内容首尾有很多空格，通常我们希望将其去除trim修饰符可以过滤内容左右两边的空格。
七、指令
1、内置指令
-
v-text
v-text作用和Mustache比较相似：都是用于将数据显示在界面中；v-text通常情况下，接受一个string类型；
但它不够灵活。建议使用mastache语法–{{}}。 -
v-html
某些情况下，我们从服务器请求到的数据本身就是一个HTML代码如果我们直接通过{{}}来输出，会将HTML代码也一起输出。但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。
如果我们希望解析出HTML展示可以使用v-html指令该指令后面往往会跟上一个string类型会将string的html解析出来并且进行渲染1.作用:向指定节点中渲染包含html结构的内容。
2.与插值语法的区别:
(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
(2) .v-html可以识别htm1结构。
3.严重注意: v-html有安全性问题! ! ! !
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2).定要在可信的内容上使用v-html.永远不要用在用户提交的内容上!
-
v-cloak指令(没有值) :
1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2.使用css配合v- cloak可以解决网速慢时页面展示出{{xxx}}的问题。
-
v-pre
将代码原封不动的解析出来，不做任何处理；
v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法 -
v-once
1、在某些情况下，我们可能不希望界面随意的跟随改变，这个时候，我们就可以使用一个Vue的指令：v-once:
2、该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)
3、该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。<div id="app"> <h2 v-once>初始化的n值为：{{n}}</h2> <h2>当前n值为：{{n}}</h2> <button @click="n++">点击n值加一</button> </div>new Vue({ el:'#app', data:{ n:1 } })未使用v-once
使用v-once
2、自定义指令
(2).全局指令:
Vue .directive(指令名,配置对象)或Vue .directive(指令名,回调函数)
-
配置对象中常用的3个回调:
(1).bind:指令与元素成功绑定时调用。
(2).inserted:指令所在元素被插入页面时调用。
(3).update:指令所在模板结构被重新解析时调用。
-
注意
指令定义时不加v-,但使用时要加v-; 指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
例子
定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍
<div id="app">
<h2 v-once>初始化的n值为：{{n}}</h2>
<h2>当前n值为：{{n}}</h2>
<h2>放大10倍后的n值为：<span v-big="n"></span></h2>
<button @click="n++">点击n值加一</button>
</div>
new Vue({
el:'#app',
data:{
n:1
},
directives:{
big(element,binding){
element.innerText=binding.value*10
}
}
})
八、生命周期
1、Vue 标题实例生命周期
1、创建前/后： 在 beforeCreate 阶段，vue 实例的挂载元素 el 还没有。
2、载入前/后：在 beforeMount 阶段，vue 实例的$el 和 data 都初始化了，但还是挂载之前为虚拟的 dom 节点，data.message 还未替换。在 mounted 阶段，vue 实例挂载完成，data.message 成功渲染。
3、更新前/后：当 data 变化时，会触发 beforeUpdate 和 updated 方法。
4、销毁前/后：在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定，但是 dom 结构依然存在
2、常用的生命周期钩子:
- mounted:发送ajax请求、 启动定时器、绑定自定义事件、订阅消息等[初始化操作]。
- beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等[收尾工作]。
3、关于销毁Vue实例
1.销毁后借助Vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效，但原生DOM事件依然有效。
3.般不会在beforeDestroy操作 数据，因为即便操作数据，也不会再触发更新流程了。
九、组件
1、vue使用组件的三大步骤
-
定义组件
使用Vue . extend(options )创建，其中options 和new Vue(options)时传 入的那个options儿乎-样， 但也有点区别;区别如下:
1.el不要写——最终所有 的组件都要经过- 个vm的管理，由vm中的el决定服务哪个容器.
2.data必须写成函数。——避免维件被复用时，数据存在引用关系。
<template > <div> <h2>学生基本信息</h2> <h2>姓名：{{name}}</h2> <h2>学号：{{number}}</h2> </div> </template >const student=vue.extend({ data(){ return{ name:"张三" number:123 } } }) -
注册组件
-
局部注册：考靠new Vue的时候传入components选项
new Vue({ el:'#app', components:{ student } }) -
全局注册：靠Vue.component(‘组件名’，组件)
-
-
使用组价，编写组件标签——
-
注意：
1.关于组件名:
一个单词组成:
第一 种写法(首字母小写): school
第二种写法(首字母大写): School
多个单词组成:
第一种写法(kebab-case命 名): my- school
第二种写法(CamelCase命名): MySchool (需要Vue脚 手架支持)
备注:
(1).维件名尽可能回避HTML中已有的元素名称，例如:h27 H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。
2.关于组件标签:
第一种写法:
第二种写法:
备注:不用使用脚手架时，会 导致后续组件不能演染。
3.一个简写方 式:
const school = Vue 。extend(options)可简写为: const school = options
2、VueComponent
关于VueComponent:
-
school组件本质是个 名为VueComponent的构造函数。 且不是程序员定义的，是Vue。extend生成的。
-
我们只需婴写或. Vue解析时公帮我们创建school组件的实例对象，即Vue格我们执行的: new VueComponent(options).
-
特别注意:每次调用Vue. extend.返回的都是一个 全新的VueComponent! ! ! !
-
关于this指向:
(1).组件配置中:
datar数、methods中的函数、watch中的函数、computed中的函 数它们的this均是[VueComponent实例对象]
(2).new Vue()配置中:
data丙数、methods中的两数、watch中的两数、computed中的函数它们的this均是[Vue实例对象]。
1327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
