VUE 常见指令

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、pandas是什么？
• 二、使用步骤
  • 1.引入库
  • 2.读入数据
• 总结

---

前言

插值表达式，专业术语称为mastach语法，就是通过两队花括号包含的一个表达式，可以直接执行js表达式语句，完成数据和页面的连接

指令：包含简单DOM操作功能的组件

Vue中提供自己的内建指令、也可根据实际情况自定义指令

指令格式：v-名称 固定语法格式

目录

文章目录

前言

一、v-text

二、v-html

三、v-once

四、v-show

五、v-if

六、v-bind

七、v-on

八、v-for

九、v-modle

总结

---

---

一、v-text

名称：文本渲染指令

描述：输出指令表达式对应的数据，数据中的html标签按照文本输出

  html内容

<!--html内容-->

<div id="app">
    <p>
      v-text指令：<span v-text="message"></span>
    </p>
</div>

 js内容

<script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "指令语法中，当成标签的属性存在的；<strong>值是对应的表达式</strong>",
      }
    })
</script>

二、v-html

名称：超文本/富文本渲染指令

描述：输出指令对应表达式的数据，数据中的html标签按照html输出，渲染解释并执行代码

！！注意：该指令在实际使用时，数据一般为完全安全的数据，可能会造成xss漏洞

  html内容

<!--html内容-->

<div id="app">
    <p>
      v-html指令：<span v-html="message"></span>
    </p>
</div>

 js内容

<!-- js内容 -->
<script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "指令语法中，当成标签的属性存在的；<strong>值是对应的表达式</strong>",
      }
    })
</script>

三、v-once

名称：单次加载指令

描述：针对网页中一些特殊的数据进行一次性加载的指令，例如：logo、导航菜单、友情链接等类似的视图结构，在很长时间范围内不发生变化

 html内容

<!--html内容-->

<div id="app">
    <p>
      v-once指令：<span v-html="message" v-once></span>
    </p>
</div>

 js内容

<!-- js内容 -->
<script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "指令语法中，当成标签的属性存在的；<strong>值是对应的表达式</strong>",
      }
    })
</script>

四、v-show

名称：条件渲染指令

描述：按照条件的真假通过display控制一个元素的显示/隐藏

 html内容

<!--html内容-->

<div id="app">
    <p>
      v-show网站欢迎语：<span v-show="isLogin">尊敬的用户您好，欢迎访问本系统</span>
    </p>
</div>

 js内容

<!-- js内容 -->
<script>
    const app = new Vue({
      el: "#app",
      data: {
      isLogin: false,      
    }
   })
</script>

五、v-if

名称：条件渲染指令

描述：按照给定的条件通过DOM加载完成一个元素的显示/隐藏

 html内容

<!--html内容-->

<div id="app">
     <p>
          v-if网站欢迎语：<span v-if="isLogin">尊敬的用户您好，欢迎访问本系统</span>
                        <span v-else>登录 | 注册</span>
          <br />
          年龄： <span v-if="age <= 20">弱冠之年</span>
                <span v-else-if="age > 20 && age <= 30">而立之年</span>
                <span v-else-if="age > 30 && age <= 40">不惑</span>
                <span v-else-if="age > 40 && age <= 50">知命</span>
                <span v-else>百度一下...</span>
        </p>
</div>

 js内容

<!-- js内容 -->
<script>
    const app = new Vue({
      el: "#app",
      data: {
      isLogin: false,  
      age : 20    
    }
   })
</script>

六、v-bind

名称：属性绑定指令

描述：将变量的值动态的绑定到标签元素的属性上

 html内容

<!--html内容-->

<div id="app">
    <p>
      <!-- v-bind指令，用于给标签的属性动态绑定变量，实现了动态控制标签属性的功能 -->
      <img v-bind:src="img"/>
    </p>
</div>

 js内容

<!-- js内容 -->
<script>
    const app = new Vue({
      el: "#app",
      data: {
      img: './2.webp',      
    }
   })
</script>

七、v-on

名称：事件绑定指令

描述：给指定元素/标签，添加事件处理机制

 html内容

<!--html内容-->

<div id="app">
    <p>
      <!-- v-on:事件名称="事件函数名称" -->
      <!-- v-on绑定事件指令 -->
      <!-- 事件名称：原生JS提供的事件类型 -->
      <button v-on:click="showMsg">点击我试试</button>
      <!-- vue针对事件绑定操作，提供了简写语法 -->
      <button @click="showArticle">再点击我试试</button>
    </p>
</div>

 js内容

<!-- js内容 -->
<script>
    const app = new Vue({
      el: "#app",
      data: {
      img: './2.webp',      
    },
      methods: {
        showMsg() {
          alert("天子守国门，君王死社稷")
        },
        showArticle() {
          console.log("本是后山人，偶作前堂客；醉舞经阁半卷书，坐井说天阔")
        }
      }
   })
</script>

八、v-for

名称：列表渲染指令

描述：将列表数据进行循环渲染

状态绑定：通过key属性完成对应数据的状态保持

~~关于key属性：值需要满足：

~~必须是当前列表渲染数据的一部分，索引和当前数据无关，只是一个计数器值，必须是唯一的

 html内容

<!--html内容-->

<div id="app">
 <p>
      渲染输出数据：v-for指令
      <!-- 基本渲染语法 ：v-for指令的值：就是一个循环语句 -->
      <ul>
        <li v-for="item in techs">{{ item }}</li>
      </ul>

      <!-- v-for指令使用时，可以添加一个遍历索引：(item, index) in techs -->
      <ul>
        <li v-for="(item, index) in techs">{{index}} - {{item}}</li>
      </ul>

      <!-- v-for指令渲染动态变化的数据时，需要动态绑定一个key属性，完成状态保持 -->
      <ul>
        <li v-for="(item, index) in techs" :key="item">
          {{index}} - {{item}}
        </li>
      </ul>
    </p>
</div>

 js内容

<!-- js内容 -->
<script>
    const app = new Vue({
      el: "#app",
      data: {
      img: './2.webp',   
      techs: [
        "Pyhton", "C", "Java", "C++", "C#", "JavaScript"
      ]   
    }
   })
</script>

九、v-modle

名称：表单数据绑定指令

描述：作用在表单元素上的，用于数据双向绑定的执行；是VUE特点之一

  html内容

<!--html内容-->

<div id="app">
     账号：<input type="text" v-model="username"><br />
    密码：<input type="password" v-model="userpass"></br />
    <button @click="submit">提交</button>
</div>

 js内容

<!-- js内容 -->
<script>
    const app = new Vue({
      el: "#app",
      data: {
        username: '',
        userpass: ''
      },
      methods: {
        submit() {
          // v-model指令绑定数据之后，可以直接操作表单数据；省略原生js获取数据的步骤
          console.log("提交表单数据：", this.username, this.userpass)
        }
      }
    })
</script>

---

总结

今天总结了vue的常见指令，欢迎补充