Vue基础教程

用户7448351224362
145 阅读14分钟

day01-vue基础、指令

阶段目标 和 课程安排

Vue基础部分的课程安排是什么样的呢？

阶段目标

  1. 学习Vue项目开发中所需的所有基础知识

插件推荐

推荐几个可以提升开发效率的插件，更多的大伙可以自行安装

目标

  1. 能够安装推荐的VSCode的插件，并明确作用

插件

40b014e8-1ff1-4d8b-8066-a91b9c536a64.png

267688fa-46bb-4980-a519-912ca0981608.png

  • Vetur
    • 我们后面写代码，会写在一个叫 .vue文件，vscode默认不是.vue文件，装这个插件，就能让vscode认识这种文件、还提供了一些快捷的代码段
  • Vue VSCode Snippets
    • 提供了更多的跟vue有关代码的代码段
  • vscode离线安装插件
    • vscode的插件位置： C:\Users\你的电脑用户名.vscode\extensions 这个文件夹里有你所有安装过的vscode插件，所以你要备份，就备份这个文件夹
  • 浏览器插件：
    • vue_devtools
    • 作用1：方便我们用来调试用vue写好的网站
    • 作用2：检测某个网站是不是使用vue开发

9116c476-e300-45af-ad61-711fedaf6b4d.png

07b04ffa-9383-4684-8777-8b1e3a367461.png

2c8bdfbc-76aa-44fb-8f71-0754deabcefc.png

fdf8de13-3e78-450b-8741-a76266b698a7.png

dfe56b0c-2b3b-48d0-be6b-6d281a5ffd20.png

Vue简介

在进入语法学习之前，咱们先明确一下Vue是个什么东西?

传送门:官网

传送门:百度指数

  • Vue是一套渐进式的JavaScript框架
    • 渐进式？
      • 循序渐进
      • vue也是提供了很多很多的功能，vue核心插件、vue-router
        • 但我们可以不用一开始全部都用全部都学，而是随着学习的深入根据需要来使用更多的东西
    • 框架？
      • 库
        • 相当于只是封装的一些函数，例如 axios 只能称之为库
        • 因为它只是封装一些函数，但是会改变我们原本的开发模式？不会
      • 框架
        • 它就不只是帮你封装函数了，而是内部提供了一个核心的引擎（js功能），让你根据它预设好的语法来写代码，有可能会让我们的开发代码跟以前不一样

ae468637-7d5f-4b4e-a1da-7b6fc223b1fa.png

小结：

  1. Vue是什么?

Vue基本使用

  • 代码如下
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app" class="box">
        <!-- 把数据放到界面上去渲染，很方便 -->
        <!-- document.querySelector('p')   p.innerText = 数据 -->
        <!-- {{  }} 就是在输出某个变量的值 -->
        <p>{{ msg }}</p>
    </div>
​
    <!-- 下面这个div没有被vue管理 -->
    <div>
        <p>{{ msg }}</p>
    </div>
    
    <!-- 导入vue.js -->
    <script src="./vue.js"></script>
​
    <script>
​
        // 实例化一个vue
        new Vue({
            // 找到某个盒子，并且把这个盒子里的内容交给vue来管理
            // 它可以传入任何选择器，但是一般只用id
            // el: '#app',
            el: '.box',
            // vue里放数据的地方
            // 可以理解为在这里面声明的都是vue里的变量
            data: {
                msg: '马杀鸡'
            }
        })
    </script>
</body>
</html>
  • 简单来说：
    • 准备好界面（学习时准备简单界面即可）
    • 要让这个界面给vue管理，先要导入 vue.js
    • 实例化一个vue，并且将这个界面交给vue管理
    • {{ vue里的变量 }} 可以输出这个变量的值
  • 小结：
    • el属性是干嘛的？
      • 找到某个盒子，把他交给vue管理
    • data 属性是干嘛的？
      • vue里放数据的地方

插值语法

  • 语法
{{ 表达式 }}
    • 表达式：
      • 可以是变量访问，换句话说就是写变量名
      • 还可以写任意的表达式：算术表达式、比较表达式、逻辑表达式、三元表达式........
  • 作用：输出表达式的结果
  • 注意：它里面可以写任意的表达式，但不能写语句：分支语句、循环语句
  • 这个插值语法，有些人也叫做胡子语法

指令介绍

  • 就是Vue框架内部提供的具备特殊作用的html行内属性
  • 特点，一般以 v-开头，写法一般是 v-指令名

v-text与v-html

  • v-text 类似于原生中的innerText
  • v-html 类似于原生中的innerHTML
  • 语法
<标签 v-text="数据"></标签>
<标签 v-html="数据"></标签>
  • 特点：会把数据内容放到双标签里展示，但是v-text遇到标签不会解析，只是当纯文本，v-html遇到标签会解析，他们都会覆盖标签内原有的内容

v-text与插值语法

  • v-text与插值语法遇到标签都不会解析出来，只是当纯文本
  • v-text会覆盖原本所有内容，但是插值语法不会覆盖只是在自己那个位置输出

v-on指令-基本使用

事件绑定指令v-on有多种不同的用法，咱们先来学习最基础的用法

传送门:处理用户输入

  • 作用：
    • 在vue里面用来绑定事件的
  • 语法
<标签 v-on:事件名="vue里的方法名"></标签>
    • 例子
        <button v-on:click="fn1">点我啊</button>
        <!-- 双击 -->
        <button v-on:dblclick="fn1">双击666</button>
        <button v-on:mouseenter="fn2">移入我</button>
  • vue里如何声明一个方法？
    • 是跟data平级的位置写一个 methods，在这里面放方法
new Vue({
    el: '',
    data: {
        
    },
    methods: {
        
        // 这里面就放方法
    }
})
  • 简写形式语法
<标签 @事件名="方法名"></标签>
    • 例
        <!-- 当这个按钮被点击，就调用fn1函数 -->
        <button @click="fn1">点我啊</button>
        <!-- 双击 -->
        <button @dblclick="fn1">双击666</button>
        <button @mouseenter="fn2">移入我</button>
  • 小结
    • vue里面方法的地方在哪？
      • methods里面
    • methods跟谁平级？
      • data
    • methods是一个对象，对象里面放方法
    • 事件的简写是： @事件名="方法"

vue里的this

  • 以后要想访问vue里的变量和方法，在html中不能加this，在js中前面要加this
  • vue里的this，都是指当前的vue实例

计数器-基本功能

接下来咱们通过一个计数器的案例，来巩固刚刚学习的内容

目标：

  1. 能够完成计数器的累加和递减功能

需求：

  1. 点击**-**,递减数字
    1. 比0大才可以点
  3. 点击 + ,递增数字
    1. 比10小才可以点

分析：

  1. 因为数字会变化，所以得用一个变量保存
  2. 给+添加点击事件，点击事件里就是让这个变量++
    • 如果变量小于10，才允许++
  1. 给-添加点击事件，点击事件里就让这个变量--
    • 如果变量大于0，才允许--

v-bind指令-基本使用

如果要操纵属性可以使用v-bind指令

传送门:v-bind指令

目标:

  1. 掌握v-bind指令的使用

作用

  • 用来让某个行内属性不写死
  • 语法
<标签 v-bind:属性名="值"></标签>
<!-- 例如 -->
<!-- 代表href属性不写死，而是取出url这个变量的值，变量是什么那么href的值就是什么 -->
<a v-bind:href="url"></a>
  • 如果v-bind用在style中，应该给一个对象，属性名是样式名，属性值是样式值
<标签 v-bind:style="{ color: 变量名, fontSize:变量名2 }"></标签>
<!-- 例如 -->
<!-- 代表样式color没有写死，而是根据变量color的值来，变量color是什么，那么样式color就是什么 -->
<!-- 代表样式fontSize没有写死，而是根据size的值来，size是什么，fontSize就是什么 -->
<div :style="{ color: color,fontSize: size }">我是div</div>
  • 如果v-bind用在class中，也应该给一个对象，属性名就是 类名，属性值应该给布尔值，为true代表有这个类，为false代表没有这个类
<标签 v-bind:class="{bg: 布尔值}"></标签>
    • 如果布尔值为true，代表有bg这个类，如果为fasle，代表没有bg这个类
  • 简写语法
    • 就是把v-bind:属性名直接变成 :属性名
    • 因为以后用:这种简写形式比较多，那一定要区分，加:代表不写死，去找变量了，不加:就是写死了
  • 完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
​
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
        }
​
        .bg {
​
            background-color: #0f0;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="change">切换跳转地址</button>
        <a v-bind:href="url" target="_blank">跳转</a>
​
        <!-- style，给的是对象 -->
        <!-- 属性名对应的样式名 -->
        <!-- 属性值对应的就是样式值，一般给变量 -->
        <div v-bind:style="{ color: color,fontSize: size }">我是div</div>
​
        <!-- 如果要动态的设置class -->
        <!-- 也是给一个对象 -->
        <!-- 属性名：就是类名 -->
        <!-- 属性值是布尔值，如果给true，代表有这个类名，如果给false代表没有这个类名 -->
        <div class="box" v-bind:class="{bg: isBg}"></div>
​
        <h2>以下是简写</h2>
        <hr>
​
        <a :href="url" target="_blank">跳转</a>
​
        <!-- style，给的是对象 -->
        <!-- 属性名对应的样式名 -->
        <!-- 属性值对应的就是样式值，一般给变量 -->
        <div :style="{ color: color,fontSize: size }">我是div</div>
​
        <!-- 如果要动态的设置class -->
        <!-- 也是给一个对象 -->
        <!-- 属性名：就是类名 -->
        <!-- 属性值是布尔值，如果给true，代表有这个类名，如果给false代表没有这个类名 -->
        <div class="box" :class="{bg: isBg}"></div>
​
    </div>
​
    <script src="./vue.js"></script>
​
    <script>
        new Vue({
            el: '#app',
            data: {
                url: 'http://www.itcast.cn',
                color: 'red',
                size: '36px',
                isBg: true
            },
            methods: {
​
                change () {
​
                    this.url = 'http://www.baidu.com'
                }
            }
        })
    </script>
</body>
</html>

计数器-禁用启用

接下来结合刚刚学习的知识点，来完成计数器的启用禁用功能

目标

  1. 完成在临界值时的启用和禁用效果

需求:

  1. 在等于0和等于5时分别禁用递减和累加

分析：

  • 就是要让 is-disabled' 不写死，对于 - 而言，要num==0 时才有这个类，否则没有这个类
  • 对于+而言， 要num==10时才有这个类，否则没有这个类
  • 代码如下
    <span @click="sub" role="button" class="my-input-number__decrease" :class="{'is-disabled': num == 0}">
        
        
            <span @click="add" role="button" class="my-input-number__increase" :class="{'is-disabled': num == 10}">

图片切换-基本功能

分析

  1. img标签要显示的图片不能写死，要跟图片数组有关，所以给img标签的src属性要改成 v-bind:src代表不写死，动态设置，简写为 :src，值从数组里取，默认取下标0，但是下标以后可能要改变，所以得声明变量index，它的默认值是0
  2. 给下一张加点击事件，点击事件里让下标+1，给上一张加点击事件，点击事件里让下标-1

完整代码

<!DOCTYPE html>
<html lang="zh">
​
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>图片切换</title>
  <link rel="stylesheet" href="./css/index.css" />
</head>
​
<body>
  <div id="swipper">
    <div class="center">
      <!-- 图片 -->
      <img class="cover" :src="imgs[index]" alt="" />
      <!-- 左箭头 -->
      <a @click="prev" href="javascript:void(0)" class="left">
        <img src="./images/prev.png" alt="" />
      </a>
      <!-- 右箭头 -->
      <a @click="next" href="javascript:void(0)" class="right">
        <img src="./images/next.png" alt="" />
      </a>
    </div>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#swipper',
      data: {
        imgs: [
          'https://game.gtimg.cn/images/yxzj/img201606/heroimg/155/155-mobileskin-1.jpg',
          'https://game.gtimg.cn/images/yxzj/img201606/heroimg/174/174-mobileskin-1.jpg',
          'https://game.gtimg.cn/images/yxzj/img201606/heroimg/141/141-mobileskin-1.jpg',
          'https://game.gtimg.cn/images/yxzj/img201606/heroimg/149/149-mobileskin-1.jpg',
          'https://game.gtimg.cn/images/yxzj/img201606/heroimg/115/115-mobileskin-1.jpg'
        ],
        // 控制读取图片的下标，默认从0开始
        // 代表默认显示第一张图片
        index: 0
      },
      methods: {
        // 下一页
        next () {
          this.index++
        },
        // 上一页
        prev() {
          this.index--
        }
      }
    })
  </script>
</body>
​
</html>

v-on指令-内联语句

  • 是指直接把触发事件要执行的代码就写在行内
  • 应用场景
    • 当一个事件触发后，其实只想一句代码，那么有必要专门封装一个函数吗？没必要
      • 例如：刚刚我们写的图片切换，下一张的点击事件和上一张的点击事件函数里面只有一句话，封装函数就有点浪费
  • 如果一个事件触发时，不光一句话，那最好是封装到函数里，然后事件调用函数
  • 如果只有一句话可以直接写在行内

图片切换-逻辑迁移

  • 就是把刚刚我们讲的一句话，直接迁移到行内
 <a @click="index--" href="javascript:void(0)" class="left">
     
     
  <a @click="index++" href="javascript:void(0)" class="right">

v-show与v-if

上面的案例，我们需要在第一张图片时隐藏上一页按钮，在最后一张图片时隐藏下一页的按钮，如何隐藏呢？

  • v-show 和 v-if 都可以用来控制 标签 的显示和隐藏
  • 语法
<标签 v-show="布尔值"></标签>
<标签 v-if="布尔值"></标签>
    • 当布尔值为true，他们就是显示，当布尔值为false，他们就是隐藏
  • 区别
    • v-show是通过css样式：display来控制显示或隐藏，性能相对高一点
    • v-if是通过操作dom树的添加和移除节点来控制的，性能不高
    • 但是v-if可以用双分支、多分支，v-show就只能控制一个分支
  • 总结：
    • 如果是频繁切换显示和隐藏，建议用v-show
    • 如果是一次性决定有或者没有，就用 v-if
  • 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="isShow = !isShow">切换</button>
        <div v-show="isShow">我是v-show控制的</div>
        <div v-if="isShow">我是v-if控制的</div>
​
        <h3>根据张刚有多少钱，决定做什么事</h3>
        <div v-if="money >= 5000">今晚请我去按摩</div>
        <div v-else-if="money >= 2000">今晚请我去洗脚</div>
        <div v-else-if="money >= 1000">请我去吃大餐</div>
        <div v-else-if="money >= 500">请我去上网</div>
        <div v-else>暴打张刚一顿，叫他回去取钱</div>
​
​
        <!-- 双分支也可以用v-if -->
        <!-- 例如根据年龄决定做什么，如果成年了做一件事，未成年做另外一件事 -->
        <div v-if="age >= 18">成年了，去网吧偷耳机</div>
        <div v-else>未成年，去公园捡垃圾</div>
​
​
        <h4>演示v-show做双分支</h4>
        <div v-show="age >= 18">成年了，去网吧偷耳机</div>
        <div v-show="age < 18">未成年，去公园捡垃圾</div>
        
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                isShow: true,
                money: 3000,
                age: 14
            }
        })
    </script>
</body>
</html>

图片切换-箭头效果

使用刚刚学习的2个切换元素显示状态的指令来完成图片切换的剩余功能

目标：

  1. 完成箭头的显示/隐藏效果

需求:

  1. 第一张时，隐藏左箭头
    • 换句话说就是下标为0隐藏，那也就是下标大于0就显示
  1. 最后一张时，隐藏右箭头
    • 换句话说就是下标 为数组长度-1就要隐藏，小于数组长度-1就显示

代码

<a v-show="index > 0" > 
<a v-show="index < imgs.length - 1"  >

v-for指令-基本使用

  • 应用场景：
    • 有一个数组，数组里有多少个元素，就要产生多少个li标签
  • 语法
<标签 v-for="(item, index) in 数组"></标签>
    • 自动实现数组有多少个元素，就会产生多少个这样的标签
    • item是每个元素，index是下标
    • 可以简写，只是拿元素
<标签 v-for="item in 数组"></标签>
  • 示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        <button @click="add">在最后添加一个</button>
        <ul>
            <!-- item是每个元素， index是下标 -->
            <li v-for="(item, index) in list"> {{ item }} ---- {{ index }} </li>
        </ul>
    </div>
​
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                list: ['刘备','关羽','张飞','赵云','黄忠']
            },
            methods: {
​
                add () {
​
                    this.list.push('马超')
                }
            }
        })
​
    </script>
</body>
</html>
  • v-for可以遍历对象
<标签 v-for="(val,key) in 对象"></标签>
    • 对象有几个属性，就会产生多少个标签
    • val就是属性值，key就是属性名
    • 可以简写，就只拿属性值
<标签 v-for="val in 对象"></标签>
  • v-for可以遍历数字
    • 简单来说就是指定次数的循环
<标签 v-for="num in 数字"></标签>

绑定事件时加小括号和不加小括号的区别

  • 事件绑定时的函数如果不加小括号，默认这个函数就有参数，参数就是 事件对象
<button @click="fn1">点我啊 -- 不加小括号</button>


methods: {
 
                fn1 (e) {
                    
                    console.log('123', e) // 事件对象
                }
 }
  • 事件绑定时的函数如果加了小括号，vue会认为你自己想给这个函数传递参数，那么你传什么函数的参数就拿到什么
<button @click="fn1(99)">点我啊 -- 不加小括号</button>
​
​
methods: {
 
                fn1 (e) {
                    
                    console.log('123', e) // 99
                }
 }
  • 如果加了小括号想自己传参，又想拿到事件对象，用$event关键字
<button @click="fn2(99, $event)">点我啊 -</button>
​
methods: {
 
                fn2 (p1,p2) {
                    
                    console.log(p1, p2) // 99 事件对象
                }
 }

v-model指令

  • 这个指令一般是给表单元素使用的
    • 输入框、密码框、单选、多选、文本域、下拉框，这些都叫表单元素
  • 作用：
    • 可以获取表单元素的值，也可以设置表单元素的值
  • 语法
<表单元素 v-model="变量"></表单元素>
  • 也称之为双向绑定
  • 例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="msg = '你好'">修改msg的值</button>
​
        <!-- 获得输入的内容 -->
        <input type="text" v-model="msg">
        <p>{{ msg }}</p>
​
        <!-- 下拉框获得选中的value值 -->
        <select v-model="fruit">
            <option value="apple">苹果</option>
            <option value="orange">橘子</option>
            <option value="banana">香蕉</option>
        </select>
​
        <!-- 要么选中，要么不选中 -->
        <!-- 得到true或false -->
        <input type="checkbox" v-model="chk">
    </div>
​
    <script src="./vue.js"></script>
​
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '',
                fruit: '',
                chk: true
            }
        })
    </script>
</body>
</html>

MVVM设计模式

e77746d6-5639-4f01-a638-0626ee3d029f.png

  • 什么叫设计模式？

    • 代码从上往下写，能不能实现功能，可以。
    • 但是以后维护代码的效率高吗？效率很低，所以我们一般会采取一系列的方法帮助我们把代码做一些改良，不影响原有的功能，但是效果反而更好。所以像这样的经验传下来，就可以称之为设计模式

  • MVVM只是其中一种设计模式

    • vue用的就是模式

  • MVVM是什么？

    • 其实是由三个部分的单词首字母组成

    • M：

      • models
      • 实体层（模体层），指的是数据

    • V

      • views
      • 视图层，指的是 界面

    • VM

      • ViewModel
      • 视图模型层，也就是vue框架实现的功能

事件修饰符

官网文档-修饰符

  • 可以在触发事件时提供一些功能

    • .stop

      • 阻止事件冒泡

    • .prevent

      • 阻止事件默认行为

    • .self

      • 事件只能由自身触发，不能由冒泡触发

    • .键盘码

      • 例如 @keyup.enter 代表只有当 回车键 弹起，才触发

  • 语法

<标签 @事件名.修饰符>
  • 可以同时使用多个，跟顺序无关

总结 和 作业

总结 和 作业

总结:

  1. Vue是个什么?框架/库？
  2. 今天学习的版本是?
    • 2.6版本
    • vue现在默认版本是3.x版
      • 3.x里也要用我们学过的2.x版本的语法，只不过有些地方不一样了
  1. el选项能不能传别的选择器?
  2. 数据定义在哪个选项中?
  3. v-text指令的特点是?
  4. v-html指令能否解析普通的文本?
  5. @keyup限制回车键咋写?
  6. v-bind是绑定元素的什么?
  7. v-if和v-show哪个是操纵display？
  8. 渲染列表（li）用什么指令?
  9. 双向数据绑定的指令是?
  10. MVVM拆开之后是哪几个单词?

作业

  1. v-bind指令绑定class的写成如下形式是什么意思?
    • 自己写代码尝试，总结出是什么效果，写出答案
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
  1. 记事本
    1. 效果可以参考今天的其他资料中的demo
    2. 挑一个自己喜欢的样式的版本来实现
  3. 安装一个全局模块:
    1. 切换到淘宝镜像:nrm use taobao
    2. 安装全局模块:npm install -g @vue/cli
      • win7同学：没法安装最新版，所以win7同学用如下命令
npm i -g @vue/cli@4.x
    1. 确认安装:vue -V

今日单词

单词解释说明
vuevue框架中小型企业爱用
Veturvscode插件
snippets代码片段
Vue VSCode Snippets
vue_devtools作用1： 方便我们用来调试用vue写好的网站 作用2：检测某个网站是不是使用vue开发
VueVue构造函数
el根元素vue里面的创建Vue实例必填的根元素属性
app应用vue中常见的元素id名，#app
datavue里放数据的地方
mehods方法vue里 methods声明方法，与data平级。以后要想访问vue里的变量和方法，在html中不能加this，在js中前面要加this
{{ 表达式 }}插值语法{{ 表达式 }}，有人叫胡子语法
v-text类似于原生中的innerText
v-html类似于原生中的innerHTML
v-on<标签 v-on:事件名="vue里的方法名"></标签>。v-on简写：@；<标签 @事件名="方法名"></标签>。v-on指令-内联语句。@click="fn1"不加小括号，默认有参数——事件对象；@click="fn1"加了小括号，vue会认为你自己想给这个函数传递参数，那么你传什么函数的参数就拿到什么
.stop<标签 @事件名.修饰符>。阻止事件冒泡
.prevent阻止事件冒泡
.self事件只能由自身触发，不能由冒泡触发
.键盘码例如 @keyup.enter 代表只有当 回车键 弹起，才触发
$event如果加了小括号想自己传参，又想拿到事件对象，用event关键字<button@click="fn2(99,event关键字 <button @click="fn2(99, event)">点我啊 - methods: { fn2 (p1,p2) { console.log(p1, p2) // 99 事件对象 } }
v-bind用来让某个行内属性不写死。语法：v-bind:属性名，常简写为 :属性名。加:代表不写死，去找变量了，不加:就是写死了
v-show<标签 v-show="布尔值"></标签>,v-show是通过css样式：display来控制显示或隐藏，性能相对高一点
v-if<标签 v-if="布尔值"></标签>, v-if是通过操作dom树的添加和移除节点来控制的，性能不高
v-for遍历数组：<标签 v-for="(item, index) in 数组"></标签>,<标签 v-for="(item, index) in 数组"></标签>；遍历对象：<标签 v-for="(val,key) in 对象"></标签> <标签 v-for="val in 对象"></标签>；遍历数字：<标签 v-for="val in 对象"></标签>
v-model双向绑定这个指令一般是给表单元素使用的 输入框、密码框、单选、多选、文本域、下拉框，这些都叫表单元素。<表单元素 v-model="变量"></表单元素>
MVVMMVVM设计模式M：models，实体层，指数据；V：views，视图层，指界面；VM：ViewModel，视图模型层，vue框架实现的功能
VM
Listener监听
binding绑定
avatar
文章
阅读
粉丝