v-bind

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

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

<template>
  <div id="app">
    <h1>{{msg}}</h1>
    <h2>{{ obj.name }}</h2>
    <h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3>
  <img v-bind:src="img" alt="">
  <a v-bind:href="url">点我</a>
  <!-- v-bind可以省略 -->
  <img :src="img" alt=""> 
  <a :href="url">点我</a>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg:"你好呀!",
      obj: {
        name: "小vue",
        age: 5
      },
      img:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
      url:"http://www.baidu.com"
    }
  }
}
// console.log(1234566);
</script>

<style scoped>

</style>

目标:用v-bind给标签class设置动态的值

语法 :class="{类名: 布尔值}" ,true使用, false不用

<template>
  <div>
    <button v-on:click="bool=!bool">切换类名</button>
    <div :class="{redClass:bool}">动态绑定class</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
     bool:true
    }
  },
  
}
</script>
<style scoped>
.redClass{
  color: red;
}
</style>

目标:给标签动态设置style的值

语法 :style="{css属性名: 值}"

<template>
  <div>
    <button @click="colorStr='green'">变成绿色</button>
    <button @click="colorStr='blue'">变成蓝色</button>
    <button @click="colorStr='red'">变成红色</button>
    <div :style="{color:colorStr,fontSize:'80 px'}">动态绑定 style</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
    //设置默认颜色
     colorStr:'red'
    }
  },
  
}
</script>

<style scoped>

</style>

v-on

目标: 给标签绑定事件

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

<template>
  <div>
    <h1>当前数量:{{count}}</h1>
    <button v-on:click="()=>{count+=1}">点击</button>
      <!--简写-->
    <button v-on:click="count=count+=1">点击</button>
    <h1>当前金额:{{money}}</h1>
    <!-- 简写 -->
    <button v-on:click="money+=10">点击</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      count:1,
      money:10
    }
  }
}
</script>

<style scoped>

</style>

v-on事件对象

语法:

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

<template>
  <div>
    <h1>当前数量:{{count}}</h1>
    <button v-on:click="()=>{count+=1}">点击</button>
    <!-- 简写 -->
    <button v-on:click="addFn">点击触发add</button>
    <button v-on:click="addFncount(-10)">减少10个</button>
    <!-- 增加10 -->
    <!-- v-on: 简写用  @ 替代 -->
    <button @click="addFncount(10)">增加10个</button>
  </div>
</template>

<script>
export default {
  data () {
    return {//返回的其实是一个对象
      count:1,
    }
  },
  methods:{
addFn(){
  console.log("点击触发add");
  this.count+=1
},
// 带参数的写法
addFncount(num){
  this.count+=num 
}
  },
}
</script>

<style scoped>

</style>

v-on修饰符

语法:

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

<template>
  <div>
<h1>事件修饰符</h1>
<div class="box" @click="faterFn">父元素</div>
  <!-- .stop阻止事件冒泡 -->
  <button @click.stop="btn">.stop阻止事件冒泡</button>
  <!-- .prevent阻止默认事件 -->
  <!-- 可以同时多个事件一起 阻止默认+阻止冒泡 -->
  <a href="http://www.baidu.com" @click.prevent.stop="btn3">.prevent阻止事件冒泡</a>
  <button @click.once="btn">.once程序运行期间,只触发一次事件处理函数</button>

  </div>
</template>

<script>
export default {
  methods:{
    faterFn(){
      console.log("faterFn被点击了");
    },
    btn(){
      console.log(111);
    },
    btn3() {
      console.log("被点击了,但是没有跳转,设置了阻止默认行为");
    }, 
  }

}
</script>

<style scoped>

</style>

v-on按键修饰符

语法:

• @keyup.enter - 监测回车按键
• @keyup.esc - 监测返回按键
• @keyup.字母 - 监测返回对应的字母按键

<template>
  <div>
    <input type="text" @keydown.enter="enterFn" placeholder="enter键触发" />
    <hr />
    <!-- 修饰符只能小写字母 -->
    <!-- 但是键盘输入大小写都能触发事件 -->
    <input type="text" @keydown.a="aFn" placeholder="a键触发" />
    <hr />
    <input type="text" @keydown.K="KFn" placeholder="k键触发" />
  </div>
</template>

<script>
export default {
  methods: {
    enterFn() {
      console.log("按下enter键");
    },
    aFn() {
      console.log("按下a键");
    },
    KFn() {
      console.log("按下K键");
    },
  },
};
</script>

<style scoped>
</style>

v-model

• 语法: v-model="vue数据变量"
• 双向数据绑定
  • 数据变化 -> 视图自动同步
  • 视图变化 -> 数据自动同步

<template>
  <div>
<h1>v-model双向数据绑定</h1>
用户名<input type="text" v-model="username">
密码<input type="password" v-model="password">
<button @click="loginBtn">登录</button>
  </div>
</template>

<script>
export default {
  data () {
    return{
      username:"匿名用户",
      password:"123456"
    
  },
  methods:{
    loginBtn(){
      console.log("用户名:",this.username);
      console.log("密码:",this.password);
    }
  }

}
</script>

下拉菜单写在select,value在option上

<template>
  <div>
# 注意-model是给select标签绑定,value在option上   
    <div>
      <select v-model="city">
        <option value="广州">广州</option>
        <option value="上海">上海</option>
        <option value="杭州">杭州</option>
        <option value="北京">北京</option>
        <option value="深圳">深圳</option>
      </select>
    </div>
    <!-- 复选框 -->
    <div>
      <label
        ><input
          type="checkbox"
          name=""
          value="唱歌"
          v-model="hobby"
        />唱歌</label
      >
      <label
        ><input
          type="checkbox"
          name=""
          value="爬山"
          v-model="hobby"
        />爬山</label
      >
      <label
        ><input
          type="checkbox"
          name=""
          value="睡觉"
          v-model="hobby"
        />睡觉</labe
      >
      <label
        ><input
          type="checkbox"
          name=""
          value="吃饭"
          v-model="hobby"
        />吃饭</label
      >
    </div>
    <!-- 单选框 -->
    <div>
      <label><input type="radio" value="男" v-model="gender" />男</label>
      <label><input type="radio" value="女" v-model="gender" />女</label>
    </div>
    <div>
      <!-- 自我介绍 -->
      <!-- 失去焦点再收集数据 -->
      <textarea v-model.lazy="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 下拉框默认城市
      city: "广州",
      // 设置为具体某个就["吃饭"]
      // 复选框收集多个数据,初始值要设置为数组
      hobby: [],
      // 单选框默认性别
      gender: "男",
      // 自我介绍
      intro: "",
    };
  },
};
</script>

v-model用在复选框时,v-model的vue变量分两种

# 非数组 – 关联的是checked属性
# 数组  – 关联的是value属性
<template>
  <div><input type="checkbox" checked="text" v-model="text" />学习</div>
</template>

<script>
export default {
  data() {
    return {
    //text: true,
      text: "",
    };
  },
};
</script>

v-model修饰符

语法: v-model.修饰符="Vue数据变量"

# .number  以parseFloat转成数字类型
# .trim     去除字符串首尾空白字符
# .lazy     失去焦点后才收集数据(change)而非inupt时
<template>
  <div>
    <input type="text" v-model.trim="username" />
    <input type="text" v-model.number="age" />
    <textarea name="" id="" cols="30" rows="10" v-model.lazy="text"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "哈哈哈",
      age: 18,
      text: "",
    };
  },
};
</script>

v-text/v-html

语法:

• v-text="vue数据变量"
• v-html="vue数据变量"

<template>
  <div>
    <p v-text="str"></p>
    <p v-html="str"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: "<span>我是一个span标签</span>"
    }
  }
}
</script>

v-show/v-if

语法:

• v-show="vue变量"
• v-if="vue变量"

原理

• v-show 用的display:none隐藏 (频繁切换使用)
• v-if 直接从DOM树上移除
• v-if可以配合v-else或者v-else-if使用

高级

• v-else的使用

<template>
  <div>
#    <!-- true的看的见 -->
#    <!-- v-show后可接变量再去给变量设置布尔值,也可直接接布尔值 -->
    <h1>v-show后可接变量,也可直接接布尔值</h1>
    <h1 v-show="true">这是v-show的盒子接布尔值</h1>
    <h1 v-show="isok">这是v-show的盒子接变量</h1>
    <button @click="isok = !isok">显示或隐藏接变量的</button>
#    <!-- 写成事件型 -->
    <button @click="btnFn">显示或隐藏接变量的</button>
#    <!-- false 看不见 -->
    <h1 v-if="isNo">v-if的盒子</h1>

    <div>
 #     <!-- 判断语句 -->
 #     <!-- 如果满足age>18就输出v-if的,不满足的就输出v-else -->
      <p v-if="age > 18">满18啦</p>
      <p v-else>18都没有</p>
 #    v-show 让盒子显示或隐藏 display:none 
 #     v-if   让盒子创建或者删除  性能开销更大
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //
      isok: true,
      isNo: false,
      age: 20,
    };
  },
  methods: {
  
    btnFn() {
#     取反
      this.isok = !this.isok;
    },
  },
};
</script>

v-if 和v-else

<template>
  <div>
    <button v-on:click="isShow = !isShow">切换状态</button>

    <ul v-if="isShow">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
#  v-else书写需要和v-if同级 
#  v-else和v-if互斥
#  应用场景: 列表状态与空状态切换,加载状态切换
    <div v-else>空状态</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
    };
  },
};
</script>

v-for

语法:

• v-for="(值变量, 索引变量) in 目标结构"
• v-for="值变量 in 目标结构"

目标结构:

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

注意:

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

<template>
  <div>
    <h1>列表渲染 v-for</h1>
    <ul>
#           v-for="值变量 in 目标结构"
#           :key ="唯一标识"

      <li v-for="item in arr" :key="item">{{ item }}</li>
      <!-- 注意:v-for的临时变量不能用到v-for范围外 -->
    </ul>
    <button @click="btn">11</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: ["刘备", "关羽", "张飞"],
    };
  },
  methods: {
    btn() {
#    重复添加就会报错,出现重复键---key得唯一
      this.arr.push("11");
    },
  },
};
</script>

带下标的

#           v-for="(值变量,下标) in 目标结构"
<template>
  <div>
    <h1>列表渲染 v-for</h1>
    <ul>
      <li v-for="item in arr" :key="item">{{ item }}</li>
    </ul>
    <h1>获取下标(索引)</h1>
    <ul>
      <li v-for="(item, index) in arr" :key="item">{{ item }}---{{ index }}</li>
    </ul>
    <h1>数组的每一项是对象--项目常见</h1>
    <ul>
      <li v-for="(item, index) in arrObj" :key="item">
        {{ item.id }}----{{ index }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: ["刘备", "关羽", "张飞"],
      arrObj: [
        { id: "1", name: "刘备" },
        { id: "2", name: "曹操" },
        { id: "3", name: "孙权" },
      ],
    };
  },
};
</script>

其他的使用

# key的要求:唯一不重复的字符串或者数值
<template>
  <div>
    <h1>列表渲染 v-for</h1>
    <h2>遍历对象</h2>
    <div>
      <ul>
        <li v-for="(value, key) in obj" :key="key">{{ key }} : {{ value }}</li>
      </ul>
    </div>
    <h2>遍历数字</h2>
    <div>
      <ul>
        <li v-for="item in 10" :key="item"></li>
      </ul>
    </div>
    <h1>数组的每一项是对象--项目常见</h1>
    <div>
      <ul>
        <!-- :key=item 报错,因为没有唯一   :key要唯一标识 -->
        <li v-for="(item, index) in list" :key="item.id">
          {{ item.id }}----{{ index }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        username: "哈哈",
        age: "18",
        sex: "女",
      },
      arr: ["刘备", "关羽", "张飞"],
      list: [
        { id: "1", name: "诸葛亮" },
        { id: "2", name: "曹操" },
        { id: "3", name: "孙权" },
      ],
    };
  },
};
</script>

v-for更新监测

# 数组采用会改变原始数据的更新方法, 才导致v-for更新页面
# 这些方法会触发数组改变, v-for会监测到并更新页面
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

#  这些方法不会触发v-for更新
slice()
filter()
concat()
# 注意: vue不能监测到数组里赋值的动作而更新, 如果需要请使用Vue.set() 或者this.$set(), 或者覆盖整个数组

<template>
  <div>
    <button v-on:click="btn01">点击翻转</button>
    <button v-on:click="btn02">截取前两位</button>
    <button v-on:click="btn03">将第一位修改为其他值</button>
    <h1>请选择喜欢的项目</h1>
    <label v-for="item in arr" :key="item">
      <input type="checkbox" v-model="hobby" v-bind:value="item" />{{ item }}
    </label>
    <h2>选中的列表</h2>
    <ul>
      <li v-for="item in hobby" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: ["科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"],
      hobby: [],
    };
  },
  methods: {
    btn01() {
      this.arr.reverse();
    },
    btn02() {
      // this.arr.slice(0, 2)这样是不会直接影响到原数组的,所以重新赋值给this.arr
      this.arr = this.arr.slice(0, 2);
    },
    btn03() {
      // vue2 常见问题:直接通过下标修改,数据变化,但是视图不会更新
      // this.arr[0] = "呜呜呜";
      // console.log(this.arr);
      // 解决方法 $set
      // this.$set(原数组,数组下标,'修改后的值')
      this.$set(this.arr, 0, "烦躁");
    },
  },
};
# 口诀:
# 数组方法会改变原数组,就会导致v-for更新,页面更新
# 数组方法不会改变原数组,而是返回新数组,就不会导致v-for更新,可采用覆盖原数组或者this.$set()
# 
</script>