Vue中的基本指令操作v-xxx 指令

最新推荐文章于 2022-06-08 14:53:09 发布

Kiteyy

最新推荐文章于 2022-06-08 14:53:09 发布

阅读量149

点赞数

分类专栏：每天的学习笔记文章标签： vue html java

本文链接：https://blog.csdn.net/weixin_46554504/article/details/107621446

版权

每天的学习笔记专栏收录该内容

63 篇文章 0 订阅

订阅专栏

Kite学习历程的第三十七天

1. v-text , v-html指令

v-html: 可以在翻译data中数据是将样式正确耳朵显示
v-text: 则会将样式代码显示出来


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 
    1. 插值表达式 : 只能使用在标签体中
        1.1 花括号
        1.2 插值闪烁
 -->
<body>
    <div id="app">
        {{msg}}  {{1 + 1}}  {{hello()}} <br/>
        <span v-html = "msg"></span>
        <br/>
        <span v-text = "msg"></span>
        <br/>
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "<h1> hello <h1>"
            },
            methods: {
                hello(){
                    return "world"
                }
            },
        });
    </script>
</body> 
</html>

2. v-bind 指令

可以用于css属性， style样式的绑定，对属性进行增强

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 给html的属性进行绑定: 属于单项绑定 -->
    <div id = "app">
        <a  v-bind:href="link">跳转到百度</a>
        <!-- class, style 的属性进行增强 使用方法： {class名称：加上vue中的data属性值，data属性定义为：true  or  false} -->
        <span v-bind:class="{active:isActive,'text-danger':hasError}">你好css</span>
        <span v-bind:style="{color: color1,fontSize: size}">你好style</span>
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                // 跳转地址
                link: "http://www.baidu.com",
                isActive: true,
                hasError: true,
                color1: 'red',
                size: '36px'
            }
        });
    </script>

</body>
</html>

3. v-model 指令

主要用于表单项，或者自定义组件，是一个双向绑定的指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- v-model  主要用于表单项，自定义组件 -->
    <!-- 
        通过vue打印选中的多选框中的内容
     -->
     <div id = "app">
        精通的编程语言：<br/>
        <input v-model = "language" type = "checkbox" value="Java" >Java<br/>
        <input v-model = "language" type = "checkbox" value="PHP" >PHP<br/>
        <input v-model = "language" type = "checkbox" value="C++" >C++<br/>
        选中的语言：<br>
        <!-- 通过，为连接符 -->
        {{language.join(",")}}
     </div>
     


    <script src="../node_modules/vue/dist/vue.js"></script>
     <script>
         let vm = new Vue({
             el: "#app",
             data: {
                language: []
             }
         });
     </script>

</body>
</html>

4. v-on 指令

主要用于响应事件：
v-on 可以使用@进行代替
事件修饰符
stop：阻止事件冒泡到父元素
prevent：阻止默认事件发生
capture：使用事件捕获模式
self：只有元素自身触发事件才可以进行执行（冒泡或者捕获都不执行）
once：只执行一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- v-on： 使用于响应事件  v-on可以使用@符号进行替换-->
    <div id = "app">
        <!-- 事件中直接书写js片段 -->
        <button @click="num++">点赞</button>
        <button @click.ctrl="num=10">点赞变为10</button>
        <!-- 事件中指定一个回调函数，必须是vue实例中定义的函数 -->
        <button @click="cancle">取消</button>
        
        <h1>有{{num}}个赞</h1>
        
        <!-- 
            事件修饰符 
            stop： 阻止事件冒泡到父元素
            prevent：阻止默认事件发生
            capture：使用事件捕获模式
            self： 只有元素自身触发事件才可以进行执行（冒泡或者捕获都不执行）
            once：只执行一次
        -->
        <div style="border: 1px solid red; padding: 20px;" @click.once="hello">
            大Div
            <div style="border: 1px solid blue; padding: 20px;" @click.stop="hello">
                小Div
                <a href="http://www.baidu.com" @click.prevent.stop = "hello">跳转百度</a>
            </div>
        </div>
            
    </div>

    <!-- 
        按键修饰符：

     -->
    <input type="text" v-model = "num" @keyup.up="num+=2" @keyup.down="num-=2"><br/>


    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                num: 1,
                qq: "http:www.qq.com"
            },
            methods: {
                cancle(){
                    this.num--;
                },
                hello(){
                    alert("我被点击了！");
                }
            },
        });
    </script>
</body>
</html>

5. v-for指令


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <!-- : key 来区分不同的元素，注意：要具有唯一性 -->
            <li v-for="(user, index) in users" :key="user.name">
                当前索引：{{index}}====>姓名： {{user.name}}====》 性别：{{user.gender}}====》年龄： {{user.age}}<br>
                <!-- 1. 显示user信息：v-for="item in items" -->
                <!-- 2. 获取数组下标：v-for="{item, index} in items" -->
                <!-- 
                     3. 遍历对象：
                     v-for= "vlue in object"
                     v-for= "(value, key) in object"
                     v-for= "(value, key, index) in object" 前面为键值对的值，后面为属性
                 -->
                 当前对象信息：
                 <span v-for="(v, k, i) in user">Key: {{k}} ===>  value: {{v}} ===> 索引：{{i}}</span>
                 <!-- 4. 遍历对象的时候都加上：key来进行区分不同的数据，提高vue的渲染效率 -->
            </li>
        </ul>
    </div>



    
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        let app = new Vue({
            el: "#app",
            data:{
                users: [
                    {name:"柳岩", gender: "女", age: 122},
                    {name:"柳岩2", gender: "女", age: 132},
                    {name:"柳岩3", gender: "女", age: 142},
                    {name:"柳岩4", gender: "女", age: 112},
                    {name:"柳岩5", gender: "女", age: 12}
                ]
            }
        });
    </script>
</body>
</html>

6. v-if, 和 v-show指令


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        v-if: 条件判断。当得到的结果为true时，所在的元素才会被渲染
        v-show： 当前得到的结果为true时，所在的元素才会被显示
     -->
     
    <div id = "app">
        <button @click="show = !show">点我！</button>
        <!-- 1. 使用v-if显示 ： 当show为true时显示，false不显示-->
        <h1 v-if="show"> if=看到我</h1>
        <!-- 2. 使用v-show显示 : 修改style上的标签-->
        <h1 v-show="show"> show=看到我</h1>
    </div>


    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        let app = new Vue({
            el: "#app",
            data: {
                show: true
            }
        });
    </script>

</body>
</html>

v-else和v-else-if指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button v-on:click="random=Math.random()">点我呀！</button>

        <span>{{random}}</span>

        <h1 v-if="random>=0.5">
            看到我啦！ &gt;=0.5
        </h1>

        <h1 v-else-if="random>=0.2">
            看到我啦！ &gt;=0.2
        </h1>

        <h1 v-else-if="random>=0.2">
            看到我啦！ &gt;=0.2
        </h1>

        <h1 v-else=>
            看到我啦！ &gt;=0.2
        </h1>
    </div>
    
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {random: 1}
        });

    </script>
</body>
</html>