vue的基础指令及修饰符

vue基础-插值表达式

目的: 在dom标签中, 直接插入内容

又叫: 声明式渲染/文本插值

语法: {{ 表达式 }}

总结: dom中插值表达式赋值, vue的变量必须在data里声明

vue基础-MVVM设计模式

目的: 转变思维, 用数据驱动视图改变, 操作dom的事, vue源码内干了

设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。

演示: 在上个代码基础上, 在devtool工具改变M层的变量, 观察V层(视图的自动同步)

等下面学了v-model再观察V改变M的效果

• MVVM，一种软件架构模式，决定了写代码的思想和层次

  • M： model数据模型 (data里定义)
  • V： view视图 （html页面）
  • VM： ViewModel视图模型 (vue.js源码)

• MVVM通过数据双向绑定让数据自动地双向同步 不再需要操作DOM

  • V（修改视图） -> M（数据自动同步）
  • M（修改数据） -> V（视图自动同步）

1.在vue中，不推荐直接手动操作DOM！！！

**2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！

vue指令-v-bind

目标: 给标签属性设置vue变量的值

vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头

每个指令, 都有独立的作用

• 语法：v-bind:属性名="vue变量"
• 简写：:属性名="vue变量"

<a v-bind:href="url">我是a标签a>
<img :src="imgSrc">

总结: 把vue变量的值, 赋予给dom属性上, 影响标签显示效果

vue指令-v-on

目标: 给标签绑定事件

• 语法
  • v-on:事件名=“要执行的少量代码”
  • v-on:事件名=“methods中的函数”
  • v-on:事件名=“methods中的函数(实参)”
• 简写: @事件名=“methods中的函数”

<p>你要买商品的数量: {{count}}p>
<button v-on:click="count = count + 1">增加1button>
<button v-on:click="addFn">增加1个button>
<button v-on:click="addCountFn(5)">一次加5件button>

<button @click="subFn">减少button>

<script>
    export default {
        // ...其他省略
        methods: {
            addFn(){ // this代表export default后面的组件对象(下属有data里return出来的属性)
                this.count++
            },
            addCountFn(num){
                this.count += num
            },
            subFn(){
                this.count--
            }
        }
    }
script>

总结: 常用@事件名, 给dom标签绑定事件, 以及=右侧事件处理函数

vue指令-v-on事件对象

目标: vue事件处理函数中, 拿到事件对象

• 语法:
  • 无传参, 通过形参直接接收
  • 传参, 通过$event指代事件对象传给事件处理函数

ue指令-v-on修饰符

目的: 在事件后面.修饰符名 - 给事件带来更强大的功能

• 语法:
  • @事件名.修饰符=“methods里函数”
    • .stop - 阻止事件冒泡
    • .prevent - 阻止默认行为
    • .once - 程序运行期间, 只触发一次事件处理函数

vue指令-v-on按键修饰符

目标: 给键盘事件, 添加修饰符, 增强能力

• 语法:
  • @keyup.enter - 监测回车按键
  • @keyup.esc - 监测返回按键

vue指令 v-model修饰符

目标: 让v-model拥有更强大的功能

• 语法:
  • v-model.修饰符=“vue数据变量”
    • .number 以parseFloat转成数字类型
    • .trim 去除首尾空白字符
    • .lazy 在change时触发而非inupt时

vue指令 v-text和v-html

目的: 更新DOM对象的innerText/innerHTML

• 语法:
  • v-text=“vue数据变量”
  • v-html=“vue数据变量”
• 注意: 会覆盖插值表达式

vue指令 v-show和v-if

目标: 控制标签的隐藏或出现

• 语法:
  • v-show=“vue变量”
  • v-if=“vue变量”
• 原理
  • v-show 用的display:none隐藏 (频繁切换使用)
  • v-if 直接从DOM树上移除
• 高级
  • v-else使用

vue指令-v-for

目标: 列表渲染, 所在标签结构, 按照数据数量, 循环生成

• 语法

  • v-for=“(值, 索引) in 目标结构”
  • v-for=“值 in 目标结构”

• 目标结构:

  • 可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)

• 注意:

  v-for的临时变量名不能用到v-for范围外