2020-10-18 Vue指令（2）

Vue指令

一、设置标签的文本值（textContent）

• v-text指令的作用是：设置标签的内容（textContent）
• 默认写法会替换全部内容，使用插值表达式{{}}可以替换指定内容
• 内部支持写表达式
  代码如下（示例）：

  <div id="info">
    <h3 v-text = "message"></h3>
    <h4 v-text = "message + '?'"></h4>
    <h5>我叫{{name}}</h5>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  new Vue({
  el: '#info',
  data: {
    message:'how are you',
    name:'blacksunlight'
  }
})

二、设置标签的innerHTML

• v-html指令的作用是：设置元素的innerHTML
• 内容中html的结构会被解析为标签
• v-text指令无论内容是什么，只会解析为文本
• 解析文本使用v-text，需要解析html结构使用v-html

所以，能用v-html的地方就不用v-text QvQ
代码如下（示例）：

  <div id="info">
    <h3 v-text = "message"></h3>
    <h3 v-html = "message"></h3>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  new Vue({
  el: '#info',
  data: {
    message:'<a href = "#">ITsuperman</a>',
  }
})

三、为元素绑定事件

• v-on指令的作用是：为元素绑定事件
• 事件名不需要写on-xxx
• 指令可以简写为@xxx
• 绑定的方法需要定义在methods属性中
• 方法内部通过this关键字可以访问定义在data中的数据

代码如下（示例）：

  <div id="info">
    <input type="button" value="v-on简写" @click = "dodo">
    <input type="button" value="v-on指令" v-on:click = "dodo">
    <input type="button" value="双击" @dblclick = "dodo">
    <h3 @mouseenter = "cooler">{{cool}}</h3>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  new Vue({
  el: '#info',
  data:{
    cool:"超级帅"
  },
  methods:{
    dodo:function(){
      console.log("我超级帅");
    },
    cooler:function() {
      this.cool = this.cool + "帅"
    }
  }
})

---