编程导航会员会员
登录/注册

coderwhy的vue3课程笔记01-基础预语法

课程资源地址：百度网盘

链接：https://pan.baidu.com/s/1GlPOgb1yv6HJrp_GWQ8ZFg?pwd=fo3w

提取码：fo3w

--来自百度网盘超级会员V6的分享

v-once：用于指定元素或者组件只渲染一次


当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过；用于性能优化


v-bind: 动态绑定一个或多个attribute(ps:属性), 或者向另一个组件传递props值


v-bind的语法糖是 :

<img v-bind:src='src' alt='' />
<img :src='src' />
// 其他写法
<div :[name]="value">哈哈哈</div>
data() {
  return {
    name: "cba",
    value: "kobe"
  }
}
<div :="info">哈哈哈哈</div>
info: {
  name: "why",
  age: 18,
  height: 1.88
}


v-on ：绑定事件


前面我们绑定了元素的内容和属性,在前端开发中另外一个非常重要的特性就是交互 , 所以vue是使用v-on来实现事件监听

v-on的使用：

  1. 缩写 :·@
  2. 参数：event
  3. 修饰符：
  4. stop- 调用 event.stopPropagation()
  5. .prevent - 调用 event.preventDefault()。
  6. .capture－添加事件侦听器时使用capture模式。
  7. .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyAlias}- 仅当事件是从特定键触发时才触发回调。
  8. .once - :只触发一次回调。
  9. .left - 只当点击鼠标左键时触发。
  10. .right - 只当点击鼠标右键时触发。
  11. .middle - 只当点击鼠标中键时触发。
  12. .passive-{ passive: true }模式添加侦听器☐ 用法：绑定事件监听
<button v-on:click="btn1Click($event,'syh')">按钮1</button>
<div class="area" v-on:mousemove="mouseMove">div</div>
<div class="area" @="{click: btn1Click, mousemove: mouseMove}"></div>
methods: {
  btn1Click() {
    console.log("按钮1发生了点击");
  },
  mouseMove() {
    console.log("鼠标移动");
  }
}


v-show和 v-if的区别


首先

  1. v-show是不支持template
  2. v-show不可用和v-else一起使用；

其次，本质的区别：

  1. v-show元素无论是否需要显示。它的Dom实际上都存在
  2. v-if当条件为false的时候；其对应的原生压根不会渲染到dom中

最后；使用场景

  1. 如果我们的原生需要在显示和隐藏之间频繁的切换，那么使用v-show否则就使用v-if

注意：

因为v-if是一个指令，所有必须将其添加到一个元素上；但是我们切换的是多个元素呢？这个时候我们就可以使用template

<template v-if="isShowHa">
  <h2>哈哈哈哈</h2>
  <h2>哈哈哈哈</h2>
  <h2>哈哈哈哈</h2>
</template>


v-for列表渲染


基本使用

基本格式是： item in arr

item是我们给每项元素起的一个别名， arr是数组名称

当我们遍历一个数组的时候有时候会需要拿到数组的索引

我们可以使用格式：(item, index) in arr;

 <template id="my-app">
   <h2>电影列表</h2>
   <ul>
     <!-- 遍历数组 -->
     <li v-for="(movie, index) in movies">{{index+1}}.{{movie}}</li>
   </ul>
   <h2>个人信息</h2>
   <ul>
     <!-- 遍历对象 -->
     <li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}</li>
   </ul>
   <h2>遍历数字</h2>
   <ul>
     <li v-for="(num, index) in 10">{{num}}-{{index}}</li>
   </ul>
 </template>
​
const App = {
    template: '#my-app',
    data() {
      return {
        movies: [
          "星际穿越",
          "盗梦空间",
          "大话西游",
          "教父",
          "少年派"
        ],
        info: {
          name: "why",
          age: 18,
          height: 1.88
        }
      }
    }
  }

注意：


当我们需要循环(v-for)包括多个元素或者判断包括多个元素（v-if）的时候，我们可以使用templete来包裹这多个元素。


vue对原生数组的封装（使用其方法会触发ui变化）


  1. push()``pop() shift() unshift()``splice() sort() reverse() 上面的是直接改变原生数组
  2. filter() concat() slice() 不会改变原数组


Vue3的Options-API


在实际开发中，我们会遇到一些情况，比如我们可能需要对数据进行一些转化后再显示，或将多个数据结合起来进行显示；如果把这些逻辑直接写在template中，这样就会使得UI里放逻辑，就违背了vue设计的愿景, 这个时候compute计算属性就产生了


computed 计算属性


对于任何响应式数据的复杂逻辑，都应该放在使用computed

计算属性将被混入到组件实例中。所有getter和setter的上下文自动绑定为组件实例

使用方法：

data() {
      return {
        firstName: "Kobe",
        lastName: "Bryant",
        score: 80,
        message: "Hello World"
      }
    },
    computed: {
      // 定义了一个计算属性叫fullname
      fullName() {
        return this.firstName + " " + this.lastName;
      },
      result() {
        return this.score >= 60 ? "及格": "不及格";
      },
      reverseMessage() {
        return this.message.split(" ").reverse().join(" ");
      }
    }



watch 监听器


我理解为当data变化后watch定义的函数来执行data变化产生的副作用

使用：

data() {
return {
  // 侦听question的变化时, 去进行一些逻辑的处理(JavaScript, 网络请求)
  question: "Hello World",
  anwser: ""
}
},
watch: {
// question侦听的data中的属性的名称
// newValue变化后的新值
// oldValue变化前的旧值
question: function(newValue, oldValue) {
  console.log("新值: ", newValue, "旧值", oldValue);
  this.queryAnswer();
}
},

监听器watch的配置选项：

  1. watch只是在侦听info的引用变化，对于内部属性的变化说不会做出相应的，我们可以使用选项deep进行更深层的侦听；
  2. 另外一个属性，是希望一开始就会立即执行一次：
  3. 这个时候我们使用immediate选项
  4. 这个时候无论后面的数据是否有变化，侦听的函数都会有限执行一次；
watch: {
      // 默认情况下我们的侦听器只会针对监听的数据本身的改变(内部发生的改变是不能侦听)
      // info(newInfo, oldInfo) {
      //   console.log("newValue:", newInfo, "oldValue:", oldInfo);
      // }
​
      // 深度侦听/立即执行(一定会执行一次)
      info: {
        handler: function(newInfo, oldInfo) {
          console.log("newValue:", newInfo.nba.name, "oldValue:", oldInfo.nba.name);
        },
        deep: true, // 深度侦听
        // immediate: true // 立即执行
      },
//也可以监听info的属性
'info.name': function(){
        console.log(this.info.name, 'info.name');
      }
    },

watch的其他使用方法

const unwatch = this.$watch("info", function(newInfo, oldInfo) {
        console.log(newInfo, oldInfo);
      }, {
        deep: true,
        immediate: true
      })


v-model绑定表单数据


  1. v-model指令可以在表单 input，textarea以及select元素上创建双向数据绑定，
  2. 它会根据控件类型自动选择正确的方法来更新元素
  3. v-model本质上是语法糖，它负责监听用户的输入事件来更新数据，并在极端场景下进行一些特殊处理；

v-model的原理 ：两个操作

  1. v-bind绑定value属性的值；
  2. v-on绑定input事件监听到函数中，函数会获取最新的值赋值到绑定的属性中

具体使用

//绑定textarea article是一个字符串
<textarea v-model="article"> </textarea>
​
//绑定checkbox -单个勾选框 isAgree是一个布尔值
<input id='agreement' type="checkbox" v-model="isAgree" />
//绑定checkbox -多个复选框 hobbies是一个数组
<label for="basketball">
 <input id="basketball" type="checkbox" v-model="hobbies" value="basketball"> 篮球
</label>
<label for="football">
 <input id="football" type="checkbox" v-model="hobbies" value="football"> 足球
</label>
<label for="tennis">
 <input id="tennis" type="checkbox" v-model="hobbies" value="tennis"> 网球
</label>
​
//radio gender是一个字符串 是input的value
<label for="male">
 <input id="male" type="radio" v-model="gender" value="male">男
</label>
<label for="female">
 <input id="female" type="radio" v-model="gender" value="female">女
</label>
​
// 绑定select fruit是一个字符串的时候就是单选，如果是一个数组就是多选
<select v-model="fruit" multiple size="2">
 <option value="apple">苹果</option>
 <option value="orange">橘子</option>
 <option value="banana">香蕉</option>
</select>


v-model 的修饰符


1. -lazy

默认情况下，v-model在进行双向绑定时，绑定的是input事件那么每次输入后就会将最新的值和绑定的属性进行同步，如果我们加上lazy符号那么绑定的事件切换为change事件，只有在提交时候才会触发

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

2. - number

如果我们希望将输入转化为数字，那么就使用.number在可以转化的情况下，会将其转化为number类型

<input type='text' v-model.number = 'message' />

3. -trim

如果要自动过滤掉用户输入的空白字符，可以给v-model后面在上.trim修饰符


组件化开发


定义一个全局组件

// 使用app注册一个全局组件app.component()
// 全局组件: 意味着注册的这个组件可以在任何的组件模板中使用
<script>
app.component("component-a", {
 template: "#component-a",
 data() {
   return {
     title: "我是标题",
     desc: "我是内容, 哈哈哈哈哈",
  };
},
 methods: {
   btnClick() {
     console.log("按钮的点击");
  },
},
});
</script>
//模板
<template id="component-a">
  <h2>{{title}}</h2>
  <p>{{desc}}</p>
  <button @click="btnClick">按钮点击</button>
</template>
// 使用
<component-a></component-a>

在通过app.component注册一个组价的时候，第一个参数是组件的名称，第二个是一个对象


注册局部组件


全局组价是在程序一开始就会执行，全局组件就会被注册好， 但是有时候我们的某些组件在刚开始并没有被用到。并且全局组件webpack打包时候也是对其打包，用户在下载对应JavaScript包时候也会增加包的大小

所以我们在开发中使用组件应采用局部注册：

  1. 局部注册是在我们需要使用到的组件中，通过component属性选择来进行注册，类似于computed,methods
  2. 该components选项对应的是一个对象，对象中的键值对是 组件的名称：组件对象
 <template id="component-a">
   <h2>我是组件A</h2>
   <p>我是内容, 哈哈哈哈</p>
 </template>
 <script>
   const ComponentA = {
     template: "#component-a"
  }
   const App = {
     template: '#my-app',
     components: {
       ComponentA: ComponentA
    },
  }
   const app = Vue.createApp(App);
   app.mount('#app');
 </script>


CodeWhy
Vue
笔记
0个评论
全部评论
点击登录，快来和大家讨论吧～
表情
图片
暂无评论
luckySnail
luckySnail
等级
内容推荐
更多
AI编程 技术研究报告 聚焦中国市场：工具生态、技术原理与工作流变革
2
7 种智能体（Agent）设计模式深度解析
17
第一天学习
0
数据库事务基础
2
智能协同云图库-进入编辑报错解决
4
作者分享
更多
使用半年 Claude Code ，总结下我的最佳实践
13
为什么 LLMs 无法真正构建软件
3
没写一行代码，让 AI 给我做了一个翻译神器
5
拆巨资让 Claude Code 和 Codex 住进了我的终端里
9
使用 Cursor 从 0 到 1 开发一个全栈 chatbox 项目
19
下载 APP