vue基本指令

1.{{}}插值语句，可以直接显示data中的数据

  <template>
     <div>
        <a>{{num}}</a>
     </div>
  
  </template>
  
  
  <script>
  export default {
    data() {
      return{
       num: 1231456465465465465
     }
   },
 }
 </script>

2.v-bind声明式渲染

语法糖： @

用法：v-bind: ***="data的数据对象名称"，缩写->   : ***="data的数据对象名称"
动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象。

在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。没有参数时，可以绑定到一个包含键值对的对象。

注意此时 class 和 style 绑定不支持数组和对象。

3.条件渲染：

<template>
  <div>
    <!-- 如果判定为真，执行当前标签的内容 -->
    <div v-if = "isok==1">
    isok is 1!
    </div>
    <!-- 如果判断失败，判断v-else-if所在的标签，若真，执行 -->
    <div v-else-if="isok==2">
      isok is 2!
    </div>
    <!-- 若假，执行v-else所在的标签 -->
    <div v-else>
      isok is not 1 and 2!
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      isok: 3,
    }
  }
}
</script>

4.v-on语法--语法糖@

用法： v-on: click="方法名"----缩写--> @click="方法名"

<template>
  <div>
    <router-view></router-view>
    <button @click = "btn1">显示</button>
    <button @click = "btn2">消失</button>
    <div style="width: 20%;height:200px;border:1px black solid;background-color:red" v-if = "show">
      HI,GoodBoy
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return{
      show: true,
    }
  },
  methods: {
    btn1(){
      this.show = true
    },

    btn2() {
      this.show = false
    }
  }
  
}
</script>

5.v-show---控制是否显示

<template> 
    <div v-show="isShow" style="height:100px;weight:100px;background:yellow;border:1px solid black;color: red;">
      {{name2}}
     </div>
</template>
......
export default{
  data(){
        return{
          isShow:true
        }
    }
}        

6.v-if && v-show的区别

v-if: 通过控制dom节点的存在与否来控制显示或隐藏

v-show: 通过设置display元素来控制, block是默认显示，none是不显示。

7.v-html && v-text

前者可以正常显示html元素内容，但不可以触发事件，即假html

后者以字符串形式显示。

<template>
  <div>
    <p v-html="code" ></p>
    <p v-text="code"></p>
  </div>
</template>
......
export default {
  data(){
    return{
      // code: '<button @click="btn">按钮</button>'
      code: '<p>hello</p>'
    }
  },

8.v-for

注：遍历数组时，for中可存放两个自变量（值，下标）

遍历对象时，可存放三个（值，键，下标）

<template>
  <div>
    <ul>
      <li v-for="value,key in object">
        {{key}}:{{value}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      object: {
        Myname: 'coderwchh',
        Myage: 10,
      }
    }
  }
}
</script>

<style>
div {
  font-size: 15px;
}
</style>