Vue2基础语法速通1

最新推荐文章于 2024-11-12 16:34:34 发布

Zhillery

最新推荐文章于 2024-11-12 16:34:34 发布

阅读量443

点赞数

分类专栏： # Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/delete_you/article/details/129532163

版权

Vue 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

文章详细介绍了Vue的基本概念和用法，包括插值语法、v-bind模板绑定、双向数据绑定v-model、el和data的原型格式写法、MVVM模型的理解、数据代理的原理，以及事件处理和事件修饰符的使用，同时讲解了键盘事件的监听方式。

摘要由CSDN通过智能技术生成

Vue 插值语法与实例化

以对象形式声明 vue 实例 v
在 data(){}方法的 return 内写入我们需要注册的属性，以 key value 键值对的形式！
{{name}} 插值语法格式，双大括号里面写 data 中定义的变量名称
createApp(v) 注册 Vue 实例 v
mount(‘#v’) 我们看到顶部 div 的 id 为 v，那么这条代码就是将 vue 实例的作用域控制于拥有该 id 的标签上

<!-- 插值语法 -->
<div id="v">
  <div>这是我的名字:{{name}}</div>
</div>

<script>
  const v = {
    data() {
      return {
        name: "lily",
      };
    },
  };
  Vue.createApp(v).mount("#v");
</script>

v-bind 模板绑定

专门绑定元素属性
v-bind 后接元素属性，即可将属性内容变成 data 里面的变量（此时无需双大括号）
v-bind:可以简写为一个冒号 :

<a v-bind:href="url">123456</a> // 完整形式 <a :href="url">123456</a> //
简写格式

双向数据绑定

单向数据绑定：使用 v-bind，只有后台修改值能影响网页内容，反过来不行
双向数据绑定：使用 v-model，后台和网页内容完全同步，任何一方修改都会影响对方
注意，v-model 仅可以对表单内部（即输入类）属性使用！
v-model:value=““可以简写为 v-model=””，因为 v-model 的默认附加属性就是 value
v-model.lazy 表示触发 change 事件后才执行数据同步
v-model.number 自动将数据转换成数值形式后才同步
v-model.trim 自动清除用户输入的空白字符

单向数据绑定：<input type="text" v-bind:value="name" /> 双向数据绑定：<input
  type="text"
  v-model:value="name"
/>

el 和 data 的另一种写法->使用原型格式

已下方代码为例，若我们直接使用 console.log(v)将会输出 v 实例的内容，在开发者模式下，我们点开该 vue 实例，里面加了
美元符号$的是我们可以操作的内容，而加了短下划线的是 vue 底层实现内容
最重要的是属性 proto 它是 vue 的原型

$mount 可以直接指定该 vue 实例挂载的元素，代替 el
data 的另一种写法就是函数式写法（这种写法的好处是可以在函数内部通过 this 取得当前 vue 实例）

<script>
  const v = new Vue({
  	<!-- data函数式写法 -->
  	data:funtion(){
  		console.log(this)
  		return{
  			name:'helloworld'
  		}
  	}
  })
  v.$mount(".root")	// 外部挂载写法
</script>

MVVM 模型

M 模型(model):对应 data 内部数据
V 视图(view):对应模板
VM 视图模型(viewmodel):对应 vue 实例对象

设目前有 vue 实例名称为 vm，则有以下性质

data 中的所有属性都出现在 vm 身上
vm 身上所有的属性，以及 vue 实例中原型（proto）中的所有属性都可以直接作为模板调用

数据代理

以 JS 代码作为示例

Object.defineProperty 设置单个数据代理（所谓代理就是让某个对象代替某个对象执行操作）
第一个参数为欲执行代理的对象，第二个参数为被执行对象的属性
第三个参数则写 getter 和 setter 方法，他表示当我调用对象 obj2 时应当执行的动作
因为 obj2 为 obj1 的代理，且重写了 obj2 的 getter、setter 方法，故执行 obj2.x 时返回 100

<script>
  let obj1 = { x: 100 };
  let obj2 = { y: 200 };

  Object.defineProperty(obj2, "x", {
    get() {
      return obj1.x;
    },
    set(val) {
      obj1.x = val;
    },
  });
</script>

以 vue 作为示例
假设目前有 vue 实例 vm，则

实例对象 vm 实际上是作为数据域 data 的代理而出现的
vm.name === vm._data.name 从实例对象 vm 中取出 data 中的属性可以按照左边两种形式的写法
使用插值语法时，也可以按照上方格式来写，因为插值语法实际上就是对实例 vm 的调用！！！

<body>
  <div class="root">
    <div>{{_data.name}}</div>
    <div>{{name}}</div>
  </div>
</body>

<script>
  const v = new Vue({
    el: ".root",
    data: {
      name: "tomes",
    },
  });
</script>

事件处理

所谓事件处理，就是为 vue 实例内增加一些方法，方法全部写在 methods 里面

所有 methods 内的方法都写普通函数而最好避免写箭头函数
箭头函数的 this 指向 window；而普通函数的 this 指向当前所在的 vue 实例对象
v-on:click=““或者简写@click=”” 用来指定元素点击后使用的方法，双引号内直接写方法名称即可
v-on 内部的方法如果要传参，务必加上小括号，不传参的直接省略小括号

<body>
  <div class="root">
    <button @click="swin($event,123)"></button>
    <button v-on:click="svm"></button>
  </div>
</body>

<script>
  methods:{
  	svm:(e)=>{
  		console.log(this)	// 不要用箭头函数
  	},
  	swin(e,num){
  		console.log(this)	// 一般用普通函数
  	}
  }
</script>

事件修饰符

vue 中最常用的事件修饰符

prevent:阻止默认事件（常用）
stop:阻止事件冒泡（常用）
once:事件只触发一次（常用）4.capture:使用事件的捕获模式
self:只有 event.target 是当前操作的元素是才触发事件
passive:事件的默认行为立即执行，无需等待事件回调执行完毕

特殊：
@click.prevent.self 会阻止元素本身及其子元素的点击的默认行为
@click.self.prevent 只会阻止对元素自身的点击的默认行为

<body>
  <div class="root">
    <a href="#" @click.prevent="show">阻止默认事件</a>

    <div class="demo1" @click="show">
      <div @click.stop="show">阻止事件冒泡</div>
    </div>

    <button @click.once="show">事件只会被触发一次</button>
  </div>
</body>

passive 和滚轮事件解析

@wheel=“” 事件：每检测到一次鼠标滚轮滚动就触发一次方法；
@scroll=“” 事件：鼠标滚轮滚动和滑动条滚动都可以触发该方法
给 wheel 加了 passive 修饰后，无需等待 show 回调方法执行完毕，就可马上执行 wheel 的初始动作（即滚动内容下移）

键盘事件

按下某个案件即触发方法，最常用的是@keyup

常见键代码：enter 回车 delete 退格 esc 退出 space 空格 tab 换行
在常见键代码中，除了 tab 必须使用@keydown 触发，其他都使用@keyup 触发
对于控制性按键如 ctrl alt shift 等
对于控制性按键，@keyup 表示按下修饰键后再按下其他键，待其他键松开后才触发事件
对于控制性按键，@keydown 表示正常触发事件

<body>
  <div class="root">
    <input type="text" @keyup.enter="show" />

    <input type="text" @keydown.tab="show" />

    <input type="text" @keyup.caps-lock="show" />

    <input type="text" @keyup.ctrl="show" />
    <input type="text" @keydown.ctrl="show" />
  </div>
</body>