vue基础（二）

vue基础指令

1、 v-html 指令的作用

• 在设置元素的innerHTML

• 内容中有html结构会被解析为标签

• v-text指令无论内容是什么,只会解析为文本

   <div id="app">
          <p v-html="content"></p>
          <p v-text="content"></p>
          <p v-pre>{
      {msg}}</p>  
          <!-- {
       {}}相当于原样输出 --></div>
  

  
      <script>
          let app = new Vue({
       
              el: '#app',
              data: {
       
                msg:"哈哈哈",
                  //  content:"我是百度",
                  content: "<a href='#'> 我是百度</a>"
              }
          })
      </script>
  

2、 v-bind 指令的作用

• ​ v-bind指令的作用是:为元素绑定属性

• ​ 完整写法是v-bind:属性名

• ​ 简写的话可以直接省略v-bind,只保留:属性名

  <div id="app">
           <img v-bind:src="imgSrc">
           <img :src="imgSrc" :title="imgTitle" :class="{active:isactive}" @click="changesActive"> 
  </div>
  

      <script>
            let app = new Vue({
       
                el: "#app",
                data: {
       
                    imgSrc: "https://img0.baidu.com/it/u=3122136587,3938996930&fm=26&fmt=auto",
                    imgTitle: '图片标题',
                    isactive: false,
                },
                methods: {
       
                    changesActive: function () {
       
                        this.isactive = !this.isactive
                    }
                }
            })
        </script>
  

3、 v-text 指令的作用

• ​ v-text指令的作用是:设置标签的内容(textContent)

• ​ 默认写法会替换全部内容,使用插值表达式{份}可以替换指定内容

   <div id="app">
         程序员{
      {message+'哈哈哈'}}
          <p v-text="info"></p>
          <!-- <p v-text="info" +'世界'></p> -->
          <!-- v-text 不能设置字符串的拼接 -->
      </div>
  

  
      <script>
          let app = new Vue({
       
              el: '#app',
              data: {
       
                  message: 'hello vue',
                  info: '你好呀',
              }
          })v-cloak 
      </script>
  

4、 v-pre 指令的作用

​ 不识别插值表达式，也就是当使用 v-pre 指令时，{ { }}不再起作用， 相当于原样输出

 <div id="app">
        <p v-pre>{
  {msg}}</p>  
    </div>
    <script>
        let app