Vue.js基础指令

  • v-clock:插值表达式的闪烁问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
    
        [v-cloak]{

            display: none;  

        }

    </style>
</head>
<body>
    
    <div id="app">

        <p v-cloak>{
   
   {str1}}</p>
        <p v-cloak>{
   
   {str2}}</p>

    </div>
    
    <script>
    
        var vm = new Vue({

            el : "#app",    //el元素表现的是要指定为哪个标签进行相应的vuejs的操作
            data : {    //data是vuejs中对于数据的表达,数据约定俗成的都是以json的形式来呈现的
                //data属性中,存放的是el中要使用到的数据
                //这里的data就是MVVM中M,专门用来表现数据的组件
                "str1" : "HelloWorld1", 
                "str2" : "HelloWorld2"

            }

        });

    </script>

</body>
</html>
  • v-text v-html { {var1}}
<body>
    
    <div id="app">
        
        <!-- 
            
            在vuejs中,为了为页面中的元素渲染值(为前端标签对中的内容赋值) 
            可以使用3种形式:
                插值表达式{
   
   {str}}
                v-text
                v-html
        
        
        -->

        <!-- 使用插值表达式为标签对中的内容赋值 -->
        <p>==============={
   
   {str1}}===============</p>
        <p v-text="str2">=====================</p>
        <p v-html="str3">=====================</p>

    </div>
    
    <script>
    
        var vm = new Vue({

            el : "#app",    
            data : {
                "str1" : "aaa", 
                "str2" : "bbb",
                "str3" : "ccc"
            }

        });

    </script>

</body>
  • v-bind:绑定属性的指令 提供简写:v-bind:title --> :title
<div id="app">
    
    <!-- 以下input标签对value属性中的值,使用vm对象,由vm对象将data中的信息动态的赋予到该value属性值当中 -->
    <!-- 
        
        必须使用指令属性v-bind来完成 
        我们需要将v-bind:加在我们需要绑定的属性的前面
    
    -->
    <input type="text" :value="str1"/>
    <p :title="str2">content...</p>
    <input type="button" value="submit" :title="str3+'Hello World'"/>

</div>

<script>

    var vm = new Vue({

        el : "#app",    
        data : {
            "str1" : "aaa", 
            "str2" : "bbb",
            "str3" : "ccc"
        }

    });

</script>
  • v-on
    v-on:click="fun1"的形式来绑定事件
    相当于原生 js 中的 onclick
    v-on–>@
<body>
    
    <div id="app">
        
        
        <input type="text" :value="str1"/>
        
        <input type="button" value="点击1" v-on:click="fun1"/>

        <input type="button" value="点击2" onclick="fun12()"/>

        <input type="button" value="点击3" @click="fun2"/>
    </div>
    
    <script>
    
        function fun12(){

            alert("abc1");

        }

        var vm = new Vue({

            el : "#app",    
            data : {
                "str1" : "aaa"
            },
            //methods:表示vuejs中对于绑定事件函数的定义,可以同时定义多个函数,多个函数之间使用逗号来进行分隔
            methods:{

                fun1(){

                    alert("abc2");

                },
                fun2(){

                    alert("aaaaaa");

                }

            }

        });

    </script>

</body>
  • .stop 阻止冒泡:内层事件只触发一次,不向外扩散
<body>
    
    <div id="app">
        
        <div style="width:200px;height:200px;background-color:red" @click="fun1">

            <div style="width:100px;height:100px;background-color:blue" @click.stop="fun2">

                


            </div>


        </div>
        

    </div>
    
    <script>
    
       

        var vm = new Vue({

            el : "#app",    
            data : {
                "str1" : "aaa"
            },
            //methods:表示vuejs中对于绑定事件函数的定义,可以同时定义多个函数,多个函数之间使用逗号来进行分隔
            methods:{

                fun1(){

                    alert("触发外层div");

                },
                fun2(){

                    alert("触发内层div");

                }
                

            }

        });

    </script>

</body>
  • .prevent 阻止超链接默认的行为
<body>
    
    <div id="app">
        
        
        <a href="http://www.baidu.com" @click="fun1">点击1</a>

        <a href="http://www.baidu.com" @click.prevent="fun1">点击2</a>

    </div>
    
    <script>
    
       

        var vm = new Vue({

            el : "#app",    
            data : {
                "str1" : "aaa"
            },
            //methods:表示vuejs中对于绑定事件函数的定义,可以同时定义多个函数,多个函数之间使用逗号来进行分隔
            methods:{

                fun1(){

                    alert("触发外层div");

                },
                fun2(){

                    alert("触发内层div");

                }
                

            }

        });

    </script>

</body>
  • .capture 捕获触发事件的机制,触发由外至内
<body>
    
    <div id="app">
        
        <div style="width:200px;height:200px;background-color:red" @click.capture="fun1">

            <div style="width:100px;height:100px;background-color:blue" @click="fun2">

                


            </div>


        </div>
        

    </div>
    
    <script>
    
       

        var vm = new Vue({

            el : "#app",    
            data : {
                "str1" : "aaa"
            },
            //methods:表示vuejs中对于绑定事件函数的定义,可以同时定义多个函数,多个函数之间使用逗号来进行分隔
            methods:{

                fun1(){

                    alert("触发外层div");

                },
                fun2(){

                    alert("触发内层div");

                }
                

            }

        });

    </script>

</body>
  • .self 当前元素冒泡停止,但是事件冒泡向外扩散
<body>
    
    <div id="app">
        
        <div style="width:200px;height:200px;background-color:red" @click="fun1">

            <div style="width:100px;height:100px;background-color:blue" @click.self="fun2">

                <input type="button" value="点击" @click="fun3"/>

            </div>


        </div>
        

    </div>
    
    <script>
    
       

        var vm = new Vue({

            el : "#app",    
            data : {
                "str1" : "aaa"
            },
            //methods:表示vuejs中对于绑定事件函数的定义,可以同时定义多个函数,多个函数之间使用逗号来进行分隔
            methods:{

                fun1(){

                    alert("触发外层div");

                },
                fun2(){

                    alert("触发内层div");

                },
                fun3(){

                    alert("点击按钮");

                }
                

            }

        });

    </script>

</body>
  • v-model 数据双向绑定
    
    <div id="app">
        
        <h3>{
   
   {str1}}</h3>
        
        <input type="text" v-model:value="str1"/>

    </div>
    
    <script>
    
       

        var vm = new Vue({

            el : "#app",    
            data : {
                "str1" : "aaa"
            },
            //methods:表示vuejs中对于绑定事件函数的定义,可以同时定义多个函数,多个函数之间使用逗号来进行分隔
            methods:{

                fun1(){

                    alert("触发外层div");

                },
                fun2(){

                    alert("触发内层div");

                },
                fun3(){

                    alert("点击按钮");

                }
                

            }

        });

    </script>

</body>

实现计算器功能:

<body>
    
    <div id="app">
        
        <input type="text" v-model="num1"/>
        
        <select v-model="csign">

            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>

        </select>

        <input type="text" v-model="num2"/>

        <input type="button" value="=" @click="count"/>

        <input type="text" v-model="result"/>

    </div>
    


    <script>
    
       

        var vm = new Vue({

            el : "#app",    
            data : {
                num1 : 0,
                num2 : 0,
                csign : "+",
                result : 0

            },
            //methods:表示vuejs中对于绑定事件函数的定义,可以同时定义多个函数,多个函数之间使用逗号来进行分隔
            methods:{

                count(){

                    if(this.csign=="+"){


                        //直接取得的数值暂时是不能够直接计算的,默认的情况会按照字符串拼接的形式来触发+符号
                        //默认拼接字符串: 1+1=11
                        //在做数学计算之前,需要将数值格式化,才能够计算,使用parseInt方法做数值格式化的操作
                        this.result = parseInt(this.num1)+parseInt(this.num2); 

                    }else if(this.csign=="-"){

                        this.result = parseInt(this.num1)-parseInt(this.num2); 
                        
                    }else if(this.csign=="*"){

                        this.result = parseInt(this.num1)*parseInt(this.num2); 
                        
                    }else if(this.csign=="/"){

                        this.result = parseInt(this.num1)/parseInt(this.num2); 
                                            
                    }

                }
                

            }

        });

    </script>

</body>
  • v-for 遍历数据
<body>
    
    <div id="app">
        
        <!-- 直接使用插值表达式 引用数组 通过下标展现所需元素 -->
        <!-- <p>{
   
   {cityList[0]}}</p>
        <p>{
   
   {cityList[1]}}</p>
        <p>{
   
   {cityList[2]}}</p>
        <p>{
   
   {cityList[3]}}</p>
        <p>{
   
   {cityList[4]}}</p> -->

        <!-- 
            
            使用v-for指令的形式遍历字符串数组 
        
            语法:元素 in 数组

        -->
        <!-- <p v-for="city in cityList">

            {
   
   {city}}

        </p> -->

        <!-- 在以上需求的基础上 遍历出所有的元素以及对应的下标 -->
        <p v-for="(city,i) in cityList">

            {
   
   {i}}--------------{
   
   {city}}

        </p>

    </div>
    


    <script>
    
       

        var vm = new Vue({

            el : "#app",    
            data : {
                
                cityList : ["北京","上海","广州","深圳","沈阳"]

            },
            //methods:表示vuejs中对于绑定事件函数的定义,可以同时定义多个函数,多个函数之间使用逗号来进行分隔
            methods:{

                
                

            }

        });

    </script>

</body>
<body>
    
    <div id="app">
        
        <!-- 每一次遍历出来的元素,代表一个城市信息对象 -->
        <p v-for="(city,i) in cityList" :key="city.id">

            <!-- 对象以  .属性名 的形式来取得属性值 -->
            {
   
   {i}}------------------{
   
   {city.id}}-----------{
   
   {city.name}}

        </p>


    </div>
    


    <script>
    
       

        var vm = new Vue({

            el : "#app",    
            data : {
                
                cityList : [

                    {id:"A0001",name:"北京"},
                    {id:"A0002",name:"上海"},
                    {id:"A0003",name:"广州"},
                    {id:"A0004",name:"深圳"},
                    {id:"A0005",name:"沈阳"},

                ]

            },
            //methods:表示vuejs中对于绑定事件函数的定义,可以同时定义多个函数,多个函数之间使用逗号来进行分隔
            methods:{

                
                

            }

        });

    </script>

</body>

猜你喜欢

转载自blog.csdn.net/weixin_44971379/article/details/111464584

相关文章