概述
温故知新-Vue
1. v-if和v-show的区别
v-if和v-show同为真时，会将内容显示出来，同为假时，会将内容隐藏。不同的是，v-if是直接没有dom，而v-show的dom会存在，只是用display属性将其隐藏。
推出：v-if有惰性，切换开销更高，v-show的初始化开销更高。所以需要频繁切换时，推荐使用v-show。不需要频繁切换时，推荐使用v-if。
2. v-on和v-bind
v-bind指令用于设置HTML属性：v-bind:href 缩写为 :href
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>
v-on 指令用于绑定HTML事件 ：v-on:click 缩写为 @click
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
3. ref和$ref
这里推荐一篇个人觉得较详细且通俗易懂的文章：https://blog.csdn.net/chunmeizhang_88/article/details/101628279
4.v-model
Vue中三种数据绑定的方式：
- 使用插值的方式：{{ message }}和data{ message }
<body>
<div id="app">
{{ message }}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello world!'
}
})
</script>
</body>
- 使用v-bind单向绑定的方式
<div id="app">
<p v-bind:class="{class: isclass}">{{ message }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: '123456',
isclass: true
}
})
</script>
<style>
.class{
background-color: red;
font-size: 33px
}
</style>
- 使用v-model双向绑定的方式
<div id="app">
<p>{{ message }}</p>
<input v-model="message" />
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello world!',
}
})
</script>
- v-model和v-bind的区别
(1) v-bind是数据绑定，没有双向绑定效果，但不一定在表单元素上使用，任何有效元素上都可以使用；
(2) v-model是双向绑定，基本上只用在表单元素上；
(3) 当v-bind和v-model同时用在一个元素上时，它们各自的作用没变，但v-model优先级更高，而且需区分这个元素是单个的还是一组出现的。
5.计算属性，方法和watch
- 计算属性computed
<div id="app">
<div>原始文字：{{ message }}</div>
<div>更改后的文字：{{ new_message }}</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello world!'
},
computed: {
new_message() {
return this.message.split('').reverse().join('')
}
}
})
</script>
对于任何复杂逻辑，应当使用计算属性！！！
- 方法
<div id="app">
<div>原始文字：{{ message }}</div>
<div>更改后的文字：{{ new_message }}</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello world!'
},
methods: {
new_message() {
return this.message.split('').reverse().join('')
}
}
})
</script>
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。简单来说：只要 message 还没有发生改变，多次访问 new_message计算属性会立即返回之前的计算结果，因为计算属性调用的是缓存里的值，所以不必每次执行函数。但是使用方法的话，每次访问都需要执行一次函数。
3. watch
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
<div id="watch-example">
<p>
问一个是/否的问题:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
el: '#watch-example',
data: {
question: '',
answer: '除非你问我问题，否则我不给你答案！'
},
watch: {
// 如果 `question` 发生改变，这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = '等着你停止打字……'
this.debouncedGetAnswer()
}
},
created: function () {
// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
// 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
// AJAX 请求直到用户输入完毕才会发出。
this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
},
methods: {
getAnswer: function () {
if (this.question.indexOf('?') === -1) {
this.answer = '疑问句应该有问号哦。 ;-)'
return
}
this.answer = '思考中...'
var vm = this
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = '出错了出错了! ' + error
})
}
}
})
</script>
在示例中，使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
6.使用key值管理可复用元素
- Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。
<div id="app">
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
<br />
<button v-on:click="changeOne">点我</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
loginType: 'username'
},
methods: {
changeOne() {
if(vm.loginType === 'username') {
vm.loginType = 'email'
} else {
vm.loginType = 'username'
}
}
}
})
</script>
那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素， 不会被替换掉——仅仅是替换了它的 placeholder。
- 这样也不总是符合实际需求，所以 Vue 提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 即可：
<div id="app2">
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
<br />
<button v-on:click="changeTwo">点我</button>
</div>
<script>
var vm = new Vue({
el: '#app2',
data: {
loginType: 'username'
},
methods: {
changeTwo() {
if(vm.loginType === 'username') {
vm.loginType = 'email'
} else {
vm.loginType = 'username'
}
}
}
})
</script>
现在，每次切换时，输入框都将被重新渲染。
注意， label 元素仍然会被高效地复用，因为它们没有添加 key attribute。
7.v-for和v-if
当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用，如下：
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
上面的代码将只渲染未完成的 todo。
而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 ) 上。如：
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>
8.e.target和e.currentTarget的区别
e.currentTarget指向事件所绑定的元素，而e.target始终指向事件发生时的元素。
<div id="app" @click="button_click">
<button>Hello</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'LX'
},
methods: {
button_click(e) {
alert('Hello ' + this.name + ' !')
if(e) {
alert(e.target.tagName)//事件发生时的dom对象
}
console.log('1.事件发生时的元素', e.target, '2.事件绑定的元素', e.currentTarget)
}
}
})
</script>
9.未完待续。。。
拓展——学习中碰到的函数：debounce（防抖动函数），indexOf，capitalize，prevent，splice
- 防抖函数 debounce 指的是某个函数在某段时间内，无论触发了多少次回调，都只执行最后一次。假如我们设置了一个等待时间 3 秒的函数，在这 3 秒内如果遇到函数调用请求就重新计时 3 秒，直至新的 3 秒内没有函数调用请求，此时再执行函数，不然就以此类推重新计时。
推荐博客：https://www.cnblogs.com/songyz/p/10310491.html（主要看后面的两张gif） - indexOf函数可返回某个指定的字符串值在字符串中首次出现的位置。
- capitalize：
（1）首字符会转换成大写，其余字符会转换成小写。
（2）首字符如果是非字母，首字母不会转换成大写，会转换成小写。
str="hello WORLD";
str.capitalize()
'Hello world'
str="123 hello WORLD"
str.capitalize()
'123 hello world'
str="@ Hello WORLD"
str.capitalize()
'@ hello world'
-
prevent和passive
（1）prevent
推荐一个博客，讲的很详细：https://blog.csdn.net/weixin_46683645/article/details/113104692
（2）passive
.passive 修饰符能够提升移动端的性能。
每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。我们加上passive就是为了告诉浏览器，不用查询了，我们没用preventDefault阻止默认动作。
注：passive和prevent冲突，不能同时绑定在一个监听器上。 -
splice（替换函数）
arrayObject.splice(index,howmany,item1,…,itemX)
（1）index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
（2）howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
（3）0item1, …, itemX 可选。向数组添加的新项目。 -
未完待续。。。
最后
以上就是英俊泥猴桃为你收集整理的温故知新-Vue温故知新-Vue的全部内容，希望文章能够帮你解决温故知新-Vue温故知新-Vue所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复