Day02-Vue基础

Day02-Vuejs基础

一 Vue基础语法

常用指令

• v-html、v-text
• v-show
• v-if、v-else-if、v-else
• v-on
• v-bind
• v-for

1 文本指令

header.vue

<template>
  <div class="header">
    <h2>{{title1}}</h2>【{{title2}}】
    <p v-text="title2"></p>
    <p v-html="title2"></p>
  </div>
</template>

<script>
export default {
   data(){
    return{
      title1:"蜗牛学苑",
      title2:`<a href="https://www.jd.com">拼团业务</a>`,
    }
   }
}
</script>

{{}}插值表达式: 再指定标签中间,插入我们动态值

v-text指令：向双标签插入文本

v-html 指令：向双标签插入html代码

2 判断指令

v-show：

    <ul>
      <li v-show="false">aaaaaa</li>
    </ul>

v-show:接收的是boolean值

注意:v-show实现的是标签的显示和隐藏,当值为false时,表签会隐藏起来,我们只是看不见,但是它还在页面

<script>
export default {
   data(){
    return{
      flag:2
    }
   }
}
</script>

    <ul>
      <li v-show="false">aaaaaa</li>
      <li v-if="flag == 0">bbbbbbbb</li>
      <li v-else-if="flag == 1">cccccccccc</li>
      <li v-else>ddddddddddddd</li>
    </ul>

v-if、v-else-if、v-else

区别：

v-if值false，直接在页面上删除这个节点

v-show值false，通过内联样式 display:none 来控制他不显示

3 事件绑定指令

在Vue中任何的事件都是直接绑定标签上面，事件类型由你自己来定

   methods:{
    fun1(){
      alert("我被点了")
    },
    fun2(){
      alert("我又被点了")
    }
   }

    <button v-on:click="fun1()">点我啊</button>
    <button @click="fun2()">再点我啊</button>

v-on:事件类型 或 @事件类型

4 属性动态绑定

<template>
  <div>
    <a v-bind:href="link" >跳转1</a>
    <a :href="link">跳转2</a>
  </div>
</template>

<script>
export default {
  data(){
    return{
      link:"https://www.jd.com",
    }
  }
}
</script>

v-bind: 属性名可以简写为:属性名

二 选项卡实战