Vue2 基础语法，插值表达式、指令

Vue2 基础语法，插值表达式、指令

1. 插值表达式 {{}}

利用表达式将data中的数据渲染到页面上

表达式就是能算出结果的所有式子，比如运算或者三目运算符等，可以写简单的js语句

使用：

<p1> {{name}} </p1>
<p1> {{monet * sum}} </p1>
<p1> {{user.name}} </p1>

2. 响应式：数据改变，视图自动更新

data中的数据为响应式数据，访问数据使用实例.属性名, 例如app.name

3. 指令

• 内容渲染指令（v-html、v-text）

• 条件渲染指令（v-show、v-if、v-else、v-else-if）

  • 控制显示隐藏，true显示，false隐藏
  • v-show是控制css中的jisplay: none来进行隐藏
  • v-if是直接控制元素的显示和隐藏
  • 根本上就是v-show语句还是正常渲染，只是控制css使其隐藏，v-if是语句都没创建
  • 因此如果是频繁切换显示隐藏的场景使用v-show性能好一点，而v-if需要频繁创建和移除元素节点；不需要频繁切换的场景使用v-if

• 事件绑定指令（v-on）

  1. v-on:事件名="内联语句"，v-on:事件名=methods中的函数名

  2. v-on:简写为@

  3. <!-- 内联语句, 直接在引号里面写代码语句-->
     <button @click="count++">
         +1
     </button>
                                            
     <!-- 绑定事件-->
     <button @click="fn(参数)">
         函数
     </button>
     

• 属性绑定指令 （v-bind）

  1. 动态设置标签的属性，可以使用js里的变量也可以使用data中的数据

  2. v-bind: 简写 :

  3. <image :src="imgUrl"/>
     

  4. 操作class类名和style行内样式

     • 操作class的时候，动态绑定对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类

       <div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>
       

       适用场景：一个类名，来回切换

     • 操作class的时候，动态绑定数组时，数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

       <div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>
       

       使用场景：批量添加或删除类d

     • 操作style行内样式时，动态绑定为对象，键为属性名，值为属性值，对象为js对象，值需要加引号，如果有-分隔可以加引号也可以使用驼峰命名的方式

       <div class="box" :style="{ CSS属性名1: 'CSS属性值', CSS属性名2: CSS属性值 }"></div>
       

• 双向绑定指令（v-model）

  • 本质是一个语法糖，实际上就是对应的属性和事件的合写，例如在输入框上，就是value属性和input事件的合写

  • 数据发生改变，页面会自动变：value

  • 页面输入改变，数据会自动变：@input

  • $event用于在模板中，获取事件的形参

    <template>
      <div>
        <input v-model="modelMsg" type="text"><br>
        <input :value="valueMsg" @input="valueMsg = $event.target.value" type="text">
      </div>
    </template>
    

• 列表渲染指令（v-for）

  1. 语法：v-for=“(item, index) in list” :key=“item.id”
  2. item为list中的每一项，index为索引，index可以省略括号里只有一项的时候括号也可以省略，key为唯一标识，只能是字符串或者数字

4. 指令修饰符

所谓指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 —> 简化代码

• @keyup.enter —>当点击enter键的时候才触发
• v-model.trim —>去除首位空格
• v-model.number —>转数字
• @事件名.stop —> 阻止冒泡
• @事件名.prevent —>阻止默认行为
• @事件名.stop.prevent —>可以连用 即阻止事件冒泡也阻止默认行为