Vue学习总结（二）

最新推荐文章于 2024-05-29 17:10:32 发布

copyup

最新推荐文章于 2024-05-29 17:10:32 发布

阅读量107

点赞数

分类专栏： Vue笔记

本文链接：https://blog.csdn.net/lc199411/article/details/113243786

版权

Vue笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue知识点总结二

1. 事件监听

基本用法

<body>
  <div id="app">
    <button v-on:click="onClick"></button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
      const app = new Vue({
          el: '#app',
          methods: {
              onClick() {
                  console.log('按钮被点击')
              }
          }
      })
  </script>
</body>

通过例子可以看出，Vue事件监听是通过v-on指令实现，基本结构为v-on:事件名="函数调用"，如果函数体比较简单可以直接在=后面写函数实现的代码。

事件监听的语法糖写法： @事件名="函数调用"

带参数的事件监听

事件函数的参数分为两种

默认参数
默认参数不需要在调用时显式地传入参数，比如列表选择器中的selected事件，只需要在实现函数的时候写明参数。

所有的事件监听函数都可以传入一个默认参数$event，即此事件的详情，如果同时需要自定义参数和此参数可以通过 $event的形式显式传入，如onClick( $event)

自定义参数
自定义参数需要在事件函数调用的地方显式地传入参数，举个栗子：

<button v-on:click="onClicked('被按了以下')"></button>

那么在实现函数时就需要实现带参数的函数：

onClick(message) {
	console.log(message)
}

v-on修饰符

stop——阻止事件冒泡，相当于调用event.stopPropagation()方法
prevent——阻止默认事件，相当于调用preventDefaultEvent()方法
once——此修饰符表明该事件只触发一次
native——自定义组件事件监听时需加此修饰符

键盘事件

keyCode | keyAlias
由键代码和键操作组成，例子如下：

<input type="text" @keyup.enter="enter" />

enter() {
	console.log('回车')
}

该例子实现当输入框中检测到Enter键弹起时触发enter方法。

2. 条件判断

条件判断通过v-if、v-else、v-else-if指令实现，符合指令条件的标签节点会显示，否则不会渲染此节点。
下面这个小例子展示了条件判断指令的用法：

<body>
   <div id="app">
     <input type="number" id="input-age">
     <button @click="onClick">雅称</button>
     <div v-if="isShow">
       <h3 v-if="age == 13 || age==14">豆蔻年华</h3>
       <h3 v-else-if="age == 15">及笄之年</h3>
       <h3 v-else-if="age == 16">破瓜</h3>
       <h3 v-else-if="age == 24">花信年华</h3>
       <h3 v-else>没什么特别的叫法</h3>
     </div>
   </div>
   <script src="./js/vue.js"></script>
   <script>
       const app = new Vue({
           el: '#app',
           methods: {
               onClick() {
                   this.age = document.getElementById('input-age').value
                   this.isShow = true
               }
           },
           data() {
               return {
                   isShow: false,
                   age: 0
               }
           }
       })
   </script>
 </body>

v-show指令也可以用来控制组件是否显示，如果v-show指令的值为false，则相当于组件样式为display: none
两者区别：v-if指令控制得是组件是否渲染，而v-show控制得是组件是否显示

3. 循环

v-for指令可以用在列表子元素中，多个子元素标签可以写为一个，通过v-for来填充每一个子元素的值，并且列表会随着数组的变化而发生响应式改变。
下面介绍两种用法

v-for指令遍历数组

<ul>
	<li v-for="(item,index) in array">{{index+1}}.{{item}}</li>
</ul>

item是数组中每一个元素的值，index是相应的索引。如果in前面只有一个变量，则默认为数组中的元素而不是索引。

v-for指令遍历对象

<ul>
	<li v-for="(value, key, index) in object">{{index+1}}.{{key}}:{{value}}</li>
</ul>

value是对象中每个键值对的值，key是相应的键，index是相应的索引（一般不使用），in前面只有一个变量时默认是对象中键值对的值，有两个变量时从左到右依次为值、键。

列表中常常使用key属性来区分不同的标签，举例如下：
<ul>
	<li v-for="item in letters" :key="item">{{item}}</li>
</ul>

补充（数组函数）：

给定一个数组nums = [10, 20, 111, 222, 444, 40, 50]

筛选函数

let newNums = nums.filter(function(n) {
	return n < 100
})

上述例子会返回由数组nums中比100小的数组成的新数组。

对每个元素执行相同的运算

let new2Nums = newNums.map(function(n) {
	return n * 2
})

上述例子会返回由数组newNums中每个元素变为原来2倍组成的新数组。

对数组元素汇总

let total = new2Nums.reduce(function(preValue, n) {
	return preValue + n
}, 0)

上述例子会返回数组中各个元素的和。

以上三个操作可以合并为以下箭头函数的写法：

let total = nums.filter(
	n => n < 100
).map(
	n => n*2
).reduce(
	(pre, n) => pre + n
)

4. 数据绑定（通过`v-model`指令实现）

前端最常见的需求就是获取表单中的值，一般实现思路是监听输入框或按钮事件，当事件触发时获取相应的组件然后取其值初始化变量，v-model内部实现其实差不多，有了v-model这些操作就不用我们自己写了，用法举例如下：

<body>
   <div id="app">
     <input type="text" v-model="message">
     <br>
     <h2>您输入的信息是：{{message}}</h2>
     </div>
   </div>
   <script src="./js/vue.js"></script>
   <script>
       const app = new Vue({
           el: '#app',
           data() {
               return {
                   message: ''
               }
           }
       })
   </script>
 </body>

除此之外v-model还可以用于诸如radio、checkbox等input标签以及select下拉列表等有value属性的标签。

v-mode修饰符

lazy修饰符

<input type="text" v-model="message" />
<input type="text" v-model.lazy="message" />
<h2>{{message}}</h2>

用lazy修饰符修饰的数据绑定会在用户输入完成之后进行数据的更新。

number修饰符

字符输入<input type="number" v-model="age" />
<h2>{{age}}-{{typeof age}}</h2>
数字输入<input type="number" v-model.number="age" />
<h2>{{age}}-{{typeof age}}</h2>

用number修饰符使数据更新为number类型，上面的例子中如果在字符输入中输入数字则typeof age打印为string，在数字输入中输入数字则typeof age打印为number。

trim修饰符
trim修饰符用来去掉用户开头和结尾输入的空格，但是中间输入的多个空格会变为1个。举例如下：

名字：<input type="text" v-model.trim="name" />
<h2>您输入的名字是：{{name}}</h2>

copyup

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习总结（二）

Vue知识点总结二1. 事件监听基本用法带参数的事件监听v-on修饰符键盘事件2. 条件判断1. 事件监听基本用法<body> <div id="app"> <button v-on:click="onClick"></button> </div> <script src="../js/vue.js"></script> <script> const app = new
复制链接

扫一扫