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

Kite学习历程的第三十七天

目录

  • Kite学习历程的第三十七天
    • 1. v-text , v-html指令
    • 2. v-bind 指令
    • 3. v-model 指令
    • 4. v-on 指令
    • 5. v-for指令
    • 6. v-if, 和 v-show指令
    • v-else和v-else-if指令

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: "

hello

" }, 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>

你可能感兴趣的:(每天的学习笔记)