温故知新-Vue

最新推荐文章于 2024-07-25 09:51:39 发布

没什么丨好说的

最新推荐文章于 2024-07-25 09:51:39 发布

阅读量135

点赞数

分类专栏： Vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_46683645/article/details/112858187

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

温故知新-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 可选。向数组添加的新项目。
未完待续。。。

没什么丨好说的

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
温故知新-Vue

温故知新-Vue1. v-if和v-show的区别v-if和v-show同为真时，会将内容显示出来，同为假时，会将内容隐藏。不同的是，v-if是直接没有dom，而v-show的dom会存在，只是用display属性将其隐藏。推出：v-if有惰性，切换开销更高，v-show的初始化开销更高。所以需要频繁切换时，推荐使用b-show。不需要频繁切换时，推荐使用v-if。2. v-on和v-bindv-bind指令用于设置HTML属性：v-bind:href 缩写为 :href<!-- 完整语法
复制链接

扫一扫

专栏目录