Vue基础Day01属性与事件操作

最近在重写 vue 基础讲义，欢迎大爷大娘们 留言 【批评斧正】
记得 留言点赞，爱你们，么么哒 ：）~~

一.核心内容

1.推荐插件安装

• vscode有二个常用插件：vetur，Vue 2 Snippets

  • vetur:让一些vue的关键字能高亮显示，还能进行一些语法的检测。
    • 语法错误检查，包括 CSS/SCSS/LESS/Javascript/TypeScript等
    • 语法高亮，包括 html/css/sass/scss/less/js/ts等

• Vue 2 Snippets：能在平时写代码过程中提示功能更强大,对vue的语法有提示

  • 官网地址(里面列出了相关提示快捷词)： https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets

Vue 2 Snippets

2.vue.js是啥

2.1 简介

• 官网：https://cn.vuejs.org/v2/guide/

• 概念：不是一个新的语言，而是一个 比 webapi 更方便的 js框架，目的就是让开发者更多关心业务和数据，而不是 dom操作本身。

• 特点：

  • 轻量级、高性能、组件化的 MVVM 框架，轻松易上手
  • 双向数据绑定(数据驱动的 Web界面框架)
  • 指令
  • 插件化

2.2 MVVM 模式

• MVVM 模式
  • MVVM是Model-View-ViewModel的简写：模型 - 视图 - 视图模型

MVVM模式

MVVM模式

• 意义
  • 模型 指的是 数据
  • 视图 指的是 页面
  • 视图模型 View 和 Model 的桥梁，是 mvvm模式 的核心
    • 负责两个工作：
    • 工作1：将 模型 转化成 视图：将后端传递的数据转化成所看到的页面
    • 工作2：将 视图 转化成 模型：将所看到的页面转化成后端的数据
• 单向和双向数据绑定
  + 如果 两个工作 都做，就是 双向数据绑定
  + 如果 只做 工作1，就是 单向数据绑定

2.2 vue 与 dom 对比

我们通过 vue 和 dom 对比 来看看 声明是 MVVM 模式

• webapi 获取和操作

您输入了:

• vue 获取和操作

    
    
您输入了:{{msg}}

小结：

数据一旦发生改变，页面上显示也会发生改变
这个过程 由 Vue 来自动完成，不需专门编写修改页面显示的代码了~~~

3.vue 基本使用

3.1 导入 Vue js文件

• 开发版：包含 完整的 警告和调试模式 下载地址
• 生产版：删除了警告，压缩了内容 下载地址
• CDN(内容分发网络)：可以理解成 共享服务器，可用在自己网站中使用 它的 文件地址
  • 开发学习，最新版本：【https://cdn.jsdelivr.net/npm/vue/dist/vue.js】
  • 生产环境，明确版本号：【https://cdn.jsdelivr.net/npm/[email protected]】

3.2 视图布局

• 页面上 必须 有一个 vue 视图容器

    {{ message }} 

3.3 Vue对象

• 在页面中创建的 就是 Vue 对象，扮演着 视图 与 模型 的桥梁角色

• 两个属性：

  • el 属性：视图 选择器，作为 vue 视图显示的容器，确定 vue 的范围

    ​ 可以是任意 选择器 (id/类/元素......)，但不能是 html 和 body

  • data 属性：存放数据的地方，本质上就是一个对象，对象里的成员都可以在视图中使用

• Vue程序 关系图

Vue程序 关系图

小结： 三步法

• 导包 - 将 vue.js 引入到 html页面

• 布局 - 写好页面标签

• Vue实例化 - 创建 vue 实例对象，与页面元素绑定

    
    
    
    



    

    
    

        
        {{ message }}
    

    
    
    

4.常见指令1文本与单双向绑定

• Vue指令：就是标签上的一个自定义属性，只不过这个属性是vue定义的

如何改变一个标签里的内容呢？下面为大家介绍几个 常见 显示用的 指令

4.1 v-text(单向绑)

• 文本内容设置：相当于 innerText，用来将数据 显示到 所在标签中

• 语法：

  • 标签指令 ，用 msg 替换掉 所在标签的内容
  • 插值语法 hi,{{msg}},天气不错~！ ，将 msg 插入到 所在标签 指定位置

  
      
  汪汪汪
      
   hi,{{ msg2 }},天气不错~！
  
  
  
  
  

• 特点：

  • 两者都不解析 html
  • 跟随数据发生改变(通过 控制台 console 直接修改 app._data.message = 新值 可以观察)
  • 单向绑定：只从 model 拿数据显示，自己如果被修改，不会影响 model 中的数据

• 补充：

  • 标签指令 和 插值语法 其实 就是 在 html标签中 写 js 代码
  • 也就意味着，不仅仅只能写 data 中的 属性，只要最终结果是一个数据，就可以显示

  
      
      
  
      
      
  我女朋友就是：{{gfName}}
      
      
  宠物：{{dog.name}}
      
      
  性别：{{dog.gender?"公":"母"}}
      
      
  
  
  
  
  

* 课堂小彩蛋

问题：如果 一个标签 同时用了 两种 语法呢，最终 在 div 中显示哪一个呢？

选项：1.'讨厌~' 2.'死鬼~' 3.都不显示

    {{ msg2 }} 

• 结论：指令内容 覆盖 插值语法内容

4.2 v-html(单向绑)

• 相当于 innerHTML

• 语法：

  • 标签指令 ，用 msg 替换掉 所在标签的内容

    
汪汪汪

4.3 v-model(双向绑)

4.3.1 双向绑定与文本框

如果想将 视图上的内容，设置给 Model呢？比如，将 文本框的内容 设置给 Model。

• 语法：
  • 标签指令 ，监听 标签的 内容，以更新数据
  • 适用元素：input / textarea / select 等
  • data中的初始值会设置给元素

• 执行过程：
  • a.当页面刚打开时，vue 把 data.msg 中的值 设置给了 input 和 div
  • b.当我们修改 input 中的值时:
    • 会立即更新到 data.msg 中，修改了数据
    • 数据一旦改变，就会立即更新到关联的 div 中

执行过程

* 课堂小彩蛋

问题：如果 直接 修改 data.msg 的值， input 和 div 中的值 哪个会改变？
选项：1.input 2.div 3.input 和 div

4.3.2 单选框

你愿意嫁给我吗？（单选按钮）
Yes,I do
No, fx off~
回答：{{will}}

4.3.3 下拉框

• 默认值：设置 某个 选项的 value 值 在 绑定的属性中

你祖籍哪的呢？（下拉框）

    
        湖北省
        湖南省
        广东省
    
    
你的选择：{{provs}}

4.3.4 复选框

• 注意：复选框由于 可以多选，有多个值，所以 需要用 数组 来做绑定
• 默认值：设置多个 复选框value值 在数组中

    
你看中我什么了？（复选按钮） - {{ans}}
    帅气
    海拔
    单手开法拉第的才能

5.常见指令2事件绑定

5.1 v-on(事件绑定)

vue 也有一套类似dom的事件监听机制，事件名差不多，但有点差别

• 语法：
  • 绑定事件：
    • 标签指令：<标签名 v-on:事件名="事件方法名或js代码">
    • 简 写：<标签名 @事件名="事件方法名或js代码"> ，推荐
  • 编写 Vue 方法
    • Vue 中的方法，写在 methods 属性中，注意：vue 方法中 需要通过 this 访问 data 数据

    

    
    
    点我
    双击我
    鼠标移入我

    
    点我
    双击我
    鼠标移入我

* 练习 商品数量

要求：点击 加号，数字 +1 ，点击 减号，数字 -1（不能小于0）

练习 商品数量

• 代码
  • 加号按钮： 点击事件中 直接 将 变量 +1
  • 减号按钮：点击事件中 绑定 方法，在方法中 判断后 将变量 -1

    +
    
    -

5.2 vue中的this

在 vue 的方法中 ，为什么要通过 this才能访问 data中的数据呢？这个 this 到底是谁？

• 概念：
  • methods 中 方法里的 this 就是 Vue实例对象
• 两个用法：
  • methods里的方法中 访问 data ：this.data
  • methods中的 A方法 调用 methods 中的 B方法 ： this.B()
  • 注意：html 标签中 访问 data数据，不需要通过 this 访问

    
    

    点我啊

• 原理：
  • 在 Vue 实例 data 和 method 的 成员 其实 都直接添加到 了 Vue实例中

原理

* 课堂小彩蛋

问题：关于vue 中 this 描述，错误的是：

• a. Vue 实例 data 和 method 的 成员 其实 都直接添加到 了 Vue实例中
• b. method 中 要访问 data数据，需要通过 this 访问
• c. html 标签中 访问 data数据，不需要通过 this 访问
• d. html 标签中 访问 data数据，需要通过 this 访问

5.3 v-on常用的几个修饰符

如何控制事件只在某些特别条件下触发呢？

• 三种常见修饰符：
  • @事件名.stop = "事件处理函数" 阻止冒泡
  • @事件名.prevent="事件处理函数" 阻止默认事件
  • @keyup.enter="事件处理函数" 按键盘回车触发

5.3.1 阻止冒泡

webapi 中，通过 事件参数 event.stopPropagation() 来阻止冒泡，而 vue 中 有更简单语法

• 语法：@事件名.stop = "事件处理函数"

    
box1

5.3.2 阻止默认事件

webapi 中，通过 事件参数 event.preventDefault() 来阻止默认行为，而 vue 中 有更简单语法

• 语法：@事件名.prevent= "事件处理函数"

    
    讨厌，死鬼~~

5.3.3 同时阻止冒泡和默认

Vue中，如果同时要阻止事件冒泡 和 默认行为，也很方便哦

• 语法：@事件名.stop.prevent= "事件处理函数"

    

        
        讨厌，死鬼~~
    

5.3.4 回车键事件

业务中，经常出现输入后按回车键触发事件函数，在Vue中相当简单

• 语法：@keyup.enter= "事件处理函数"

6.常见指令3-其他

6.1 v-bind(其他属性)

在前面我们知道 如何 设置 标签的 text文本 或 html文本，但如果要修改 标签的其他属性呢？

• 语法： v-bind:属性名=msg
• 简写： :属性名=msg
• 注意：是单向绑定

    
请输入图片地址
    
    
请输入图片标题
    
    
    

    
     
     

• PS：v-bind 指令 中的写法
  • 变量
  • 基本运算
  • 三元表达式

6.2 v-bind(class绑定)

6.2.1 绑定变量

class 属性中可能有 一个 或 多个 选择器名，可以用一个变量保存 并 绑定 到 class属性

• 语法：v-bind:class="变量名" 简写：:class="变量名"

• 代码：

hi~~!

6.2.2 绑定对象

class 属性中可能有 一个 或 多个 选择器名，但要根据条件显示，此时，可以用 绑定对象 来解决

• 语法： v-bind:class={类选择器名1:布尔值变量,类选择名2:布尔值变量 ....}

• 简写：:class={类选择器名1:布尔值变量,类选择名2:布尔值变量 ....}

  ​ 如果 对应 类选择器名 后的 bool值是t rue，就会显示选择器；是false，则不会显示在 class属性中

• 实际开发时，我们通常直接 把对象 添加到 data 中

    
    
    
hi~~!

* 练习 切换显示

要求：点击按钮，字体变红放大；再次点击，则还原。

切换显示

    

        点我变色 
        
讨厌，死鬼~~~
    
    
    
    

二.核心案例

1.图片轮播

要求：点击 按钮 切换 图片显示

图片轮播

    上一张
    
    下一张

三.扩展内容

1. v-on事件修饰符

• .stop - 调用 event.stopPropagation()。
• .prevent - 调用 event.preventDefault()。
• .capture - 添加事件侦听器时使用 capture 模式。
• .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
• .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
• .native - 监听组件根元素的原生事件。
• .once - 只触发一次回调。
• .left - (2.2.0) 只当点击鼠标左键时触发。
• .right - (2.2.0) 只当点击鼠标右键时触发。
• .middle - (2.2.0) 只当点击鼠标中键时触发。
• .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

• 示例