vue指令（三）

一、指令的概念

用于辅助开发者渲染页面的基本架构。
指令分为6大类：
①属性绑定
v-bind：为元素的属性动态绑定属性值。
错误例子：
不能使用插值表达式直接动态绑定属性值。

<input type="text" placeholder="{
   {inputValue}}">

 const vm = new Vue({
   
      el: '#app',
      data: {
   
      inputValue: '请输入内容',
      }
      })

正确案例v-bind：

<input type="text" v-bind:placeholder="inputValue">

const app = Vue.createApp({
   //vue3
      data(){
   
      	return {
   
      		inputValue:'请输入内容'
      }},
}).mount('#app');

v-bind: 可以直接简写成:

<input type="text" :placeholder="inputValue">

const app = Vue.createApp({
   //vue3
      data(){
   
      	return {
   
      		inputValue:'请输入内容'
      }},
}).mount('#app');

②事件绑定
v-on事件绑定指令，用来控制DOM绑定事件监听。
v-on的事件处理函数需要在实例中methods节点进行声明。
用法:
1、 v-on:绑定事件=“事件处理函数名称”。

<button v-on:click="addCount">count + 1</button>

2、简写形式：v-on:改为@

<button @click="addCount">count + 1</button>

3、事件简单可以直接把业务逻辑写在事件处理函数名称中

<button @click="count += 1">count + 1</button>

4、例子

<h3>count值为：{
   {
   count}}</h3>
<button v-on:click="addCount">count + 1</button>

const app = Vue.createApp({
   
            data(){
   
                return {
   
                    count: 0,
                }
            },
            methods: {
   
                //点击count+1
                addCount() {
   
                    this.count += 1
                }
            },
}).mount('#app');

事件对象event：
@所绑定事件处理函数中，可以用evevt来接收对象。
例子：

<button v-on:click="colorChange">----button切换颜色----</button>

const app = Vue.createApp({
   
      data(){
   
        return {
   
          count