02 Vue基础语法(1)

不会显示，直到编译结束。

v-bind

绑定属性我们使用v-bind

缩写：:
预期：any (with argument) | Object (without argument)
参数：attrOrProp (optional)
修饰符：.camel - 将 kebab-case attribute 名转换为 camelCase
用法：动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。

v-bind有一个对应的语法糖，也就是简写方式。我们通常会使用语法糖的形式，因为这样更加简洁。

v-bind绑定class

对象语法

语法

• :class="{ className: bool }"
• :class="classObj"
• :class="['abc', 'cba', isActive? 'a' : 'c', {cos: isActive}, classObj]"

1- 对象语法：{'active': boolean}
2- 可以绑定多个class, {'active': isActive, title: true}
3- 对象中的class名称可以不加 ‘’
4- 会将原有的class 和动态绑定的class做一个结合 class="cos" :class="{active: isActive}"
5- 可以直接绑定data中的某个对象 :class="classObj", 绑定的classObj中不建议在对象中再去引用其他变量，我们要把它作为一个纯对象来使用
5- 将返回的对象放到方法，computed, watch 中

<div id="app"></div>
<template id="my-app">
  <div :class="{'active': isActive}">对象语法</div>
  <div :class="{'active': isActive, title: true}">可以绑定多个class</div>
  <div :class="{active: isActive, title: true}">对象中的class名称可以不加引号</div>
  <div class="cos" :class="{active: isActive}">
    会将原有的class属性值和动态绑定的class做一个结合
  </div>
  <div class="cos" :class="classObj">可以直接绑定data中的某个对象</div>
  <div class="cos" :class="getClassObj()">将返回的对象放到方法，computed, watch 中</div>
  <button @click="handleClick">按钮</button>
</template>
<script>
  const App = {
    template: "#my-app",
    data() {
      return {
        isActive: false,
        // classObj: { active: !this.isActive }, // 这里我们不建议在对象中再去引用其他变量，我们要把它作为一个纯对象来使用
        classObj: { active: true, rose: true },
      };
    },
    methods: {
      handleClick() {
        this.isActive = !this.isActive;
      },
      getClassObj() {
        return { active: true, rose: true };
      },
    },
  };
  Vue.createApp(App).mount("#app");
</script>

数组语法

1- 数组语法：['rose', 'abc']
2- 三元运算： ['rose', 'abc', isActive ? 'active': '']
3- 数组中添加对象： ['rose', 'abc', isActive ? 'active': '', {current: isActive}],这里其实写三元有点复杂，所以数组语法中也支持嵌套对象语法。

<div id="app"></div>
<template id="my-app">
  <div class="cos" :class="['rose', 'abc']">数组语法1</div>
  <div class="cos" :class="['rose', 'abc', isActive ? 'active': '']">
    三元运算
  </div>
  <div
       class="cos"
       :class="['rose', 'abc', isActive ? 'active': '', {current: isActive}]"
       >
    数组中添加对象
  </div>
</template>
<script>
  const App = {
    template: "#my-app",
    data() {
      return {
        isActive: false,
        classObj: { active: true, rose: true },
      };
    },
  };
  Vue.createApp(App).mount("#app");
</script>

v-bind绑定style

CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

• 绑定style对象语法

:style="包含css样式的对象"
:style="{属性名: '属性值'}"
1- {color: ‘red’} 这里需要注意属性值必须添加’’, 如果没有引号会将red当做变量去数据中寻找
2- { fontSize: ‘24px’} ,这里也可以写成烤串命名法，但是需要用’’包起来，否则会报错
3- {fontSize: ${finalFontSize}px} 也可以写成字符串拼接
4- :style=”finalStyleObj” 也可以直接绑定对象
5- 也可以写在方法或者计算属性中

<div :style="{color: 'red'}">绑定style对象语法</div>
<div :style="{color: 'red', fontSize: '24px'}">绑定style对象语法</div>
<div :style="{color: 'red', 'font-size': '24px'}">绑定style对象语法</div>
<div :style="{fontSize: `${finalFontSize}px`}">绑定style对象语法</div>
<div :style="finalStyleObj">绑定style对象语法</div>
<script>
  let App = {
    template: '#my-app',
    data() {
      return {
        finalFontSize: 50,
        finalStyleObj: {
          fontSize: '40px',
          color: 'red',
          background: 'blue',
        },
      };
    },
  };
  Vue.createApp(App).mount('#app');
</script>

• 数组语法
  • :style=”[styleObj1, styleObj2]” 会将 两个对象做个合并

    <div :style="[styleObj1, styleObj2]">绑定style对象语法</div>
    <script>
    let App = {
    template: '#my-app',
    data() {
     return {
       styleObj1: {
         fontSize: '65px',
       },
       styleObj2: {
         color: 'pink',
       },
     };
    },
    };
    Vue.createApp(App).mount('#app');
    </script>

    动态绑定属性

    在某些情况下，我们属性的名称可能也不是固定的：
    如果属性名称不是固定的，我们可以使用 :[属性名]='值' 的格式来定义
    这种绑定的方式，我们称之为动态绑定属性；

    <h2 :[name]="value">{{msg}}</h2>

绑定一个对象

如果我们希望将一个对象的所有属性，绑定到元素上的所有属性，应该怎么做呢？
非常简单，我们可以直接使用 v-bind 绑定一个 对象；
这种写法在高阶组件中常用。
案例：info对象会被拆解成div的各个属性

<div v-bind="cos">属性直接绑定一个对象</div>
<!-- 
这里是数据：
cos: {
    name: 'wang',
    age: 28,
    job: 'web',
},
-->

效果如图：

v-on绑定事件

用户进行各种各样的交互的时候，就必须监听用户发生的事件，比如点击、拖拽、键盘事件等等
在Vue中可以使用v-on指令监听事件。

v-on的使用

• 缩写：@
• 预期：Function | Inline Statement | Object
• 参数：event
• 修饰符：
  • .stop - 调用 event.stopPropagation()
  • .prevent - 调用 event.preventDefault()
  • .capture - 添加事件侦听器时使用 capture 模式
  • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调
  • .{keyAlias} - 仅当事件是从特定键触发时才触发回调
  • .once - 只触发一次回调
  • .left - 只当点击鼠标左键时触发
  • .right - 只当点击鼠标右键时触发
  • .middle - 只当点击鼠标中键时触发
  • .passive - { passive: true } 模式添加侦听器
• 用法：绑定事件监听

  <template id="my-app">
   <!-- 1-语法糖绑定事件 -->
   <div @click="handleClick">按钮</div>
   <!-- 2-绑定一个表达式 -->
   <div @click="counter ++">{{counter}}</div>
   <!-- 3-绑定一个对象 -->
   <div v-on="{click: handleClick, mousemove: handleMove}">
     我绑定了点击和鼠标移动事件
   </div>
   <!-- 4- v-on的参数传递 -->
   <div @click="handleClick2">v-on传递参数1</div>
   <div @click="handleClick2($event, 'cos')">v-on传递参数2</div>
  </template>
  <script>
  const app = Vue.createApp({
  template: '#my-app',
  data() {
    return {
      counter: 100,
    };
  },
  methods: {
    handleClick() {
      console.log('click');
    },
    handleMove() {
      console.log('move');
    },
    handleClick2(event, name) {
      // 当按钮发生点击的时候浏览器会生成一个event对象，这个对象中会包含一些常用信息
      // 1- 默认绑定的形式
      console.log(event);
      // 2- 当传递多个参数的时候，第一个参数固定写作 $event，这个值可以拿到事件发生时的事件对象
      console.log(event, name);
    },
  },
  }).mount('#app');
  </script>