vue基础指令

指令概述：

指令：英文单词directive，描述了一种简单的功能操作，如获取焦点；简单的DOM操作在Vue中统一的被封装成指令进行操作；

什么是指令：包含了简单的DOM操作功能的组件！

Vue中提供了自己的内建指令（掌握）、根据实际情况自定义指令（了解）

Vue中的指令都是：v-名称 固定语法格式

一、v-text指令

指令名称：文本渲染指令

指令描述：输出指令对应表达式的数据，即使数据中包含了html标签，不会进行编译解释直接原样输出

<div class="app">
        <label for="">账号：</label><input type="text" v-model = "userName">
        <p>
            您输入了账号:{{userName}}
        </p>
    </div>
    <script>
        const app = new Vue({
            el:'.app',
            data:{
                userName:''
            }
        })

二、v-html

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

指令描述：输出指令对应表达式的数据，数据中一旦包含html标签，会进行渲染解释并执行代码

注意事项：该指令在实际使用时一般解释完全安全的数据，可能会造成XSS漏洞

//可以实现html标签实现
<p>
    v-html指令：<span v-html="message"></span>
</p>

三、v-once

指令名称：单次加载指令

指令描述：针对网页中一些特殊的数据进行一次性加载的指令

什么样的数据，网页中只加载一次？为什么数据更新时这些特殊数据不需要更新？

一般来说都是配合使用不会单独使用，可以减少资源的浪费

网页中的logo、导航菜单、友情链接等等类似的视图结构，往往很长时间都不会发生变化！

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

六、 v-show

指令名称：条件渲染指令

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

注意事项：如果网页中一个视图结构，需要频繁的进行显示/隐藏的切换，建议通过v-show指令实现

<p>
    v-show网站欢迎语：<span v-show="isLogin">尊敬的用户您好，欢迎访问本系统</span  
</p>
//相当于出现或者消失有两种状态

七、v-if

指令名称：条件渲染指令

指令描述：根据给定的条件，通过DOM加载完成一个元素的显示/隐藏的切换

注意事项：页面中某些元素很长时间才会出现显示和隐藏的切换，建议使用v-if指令操作

 年龄： <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>
//多个信息切换时用这个

八、v-bind

指令名称：属性绑定指令

指令描述：可以通过该指令，将一个变量的值动态的绑定到标签元素的属性上

 <p>
            <!-- 正常，图片直接通过路径访问：<img src="1.webp"/> -->
        </p>
        <p>
            <!-- v-bind指令，用于给标签的属性动态绑定变量，实现了动态控制标签属性的功能 -->
            <img v-bind:src="img" />
        </p>
        <p>
            <!-- v-bind指令控制属性的操作，项目中非常常见的功能，提供了简写语法-->
            <img :src="img2" :title="info" />
        </p>

九、v-on

指令名称：事件绑定指令

指令描述：Vue可以通过指令，给指定元素/标签，添加事件处理机制，弹出提示语句等

    <button v-on:click="showMsg">点击我试试</button>
      <!-- vue针对事件绑定操作，提供了简写语法 -->
      <button @click="showArticle">再点击我试试</button>
  showMsg() {
                    alert("天子守国门，君王死社稷")
                },
                showArticle() {
                    console.log("本是后山人，偶作前堂客；醉舞经阁半卷书，坐井说天阔")
                }

十、v-for【重点掌握】

指令名称：列表渲染指令

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

基本语法：

<div id="app">
        当前用户：<input type="text" @keyup = 'addUser'>
        <ul>
            <!-- 
                :key属性，执行数据的状态绑定是
                值：必须是当前列表渲染数据的一部分，索引和当前数据无关，只是一个计数器
                值：必须是唯一的
             -->
             <li v-for = "item in accounts":key = "item.id">

                <input type="checkbox">
                {{item.id}}:{{item.name}}
             </li>
        </ul>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                accounts: [
                    { id: 3, name: 'tom' },
                    { id: 2, name: 'jquery' },
                    { id: 1, name: 'html' },
                ]
            },
            methods: {
                addUser(e) {
                    if (e.keyCode === 13) {
                        console.log('用户按下啦回车键')
                        let name = e.target.value;
                        let id = this.accounts.length > 0 ? this.accounts[0].id + 1:1

                        //数组的开头，添加一个数据
                        this.accounts.unshift({id,name})
                        e.target.value = ''
                    }
                }
            }
        })

十一、v-model

<div id="app">
        账号：<input type="text" v-model = 'username'><br>
        密码：<input type="password" v-model = 'userpass'><br>
        <button @click = "submit">提交</button>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                username:'',
                userpass:''
            },
            methods:{
                submit(){
                    console.log('提交表单数据',this.username,this.userpass)
                }
            }
        })