首页 > 其他分享> > VUE之常用指令

VUE之常用指令

2022-07-27 22:00:20 作者：互联网

v-text:

　　解决了VUE中插值表达式 {{}} 造成的闪烁问题

v-on:

　　监听用户事件

　　注意：（在写alert触发函数的时候把methods写成了method顺便找到一些问题）

mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情 （dom渲染完成 组件挂载完成 ）

methods中一般都是定义的需要事件触发的一些函数。每次只要触发事件，就会执行对应的方法。

如果把computed中的方法写到method中会浪费性能。computed必须返回一个值页面绑定的才能取得值，

而methods中可以只执行逻辑代码，可以有返回值，也可以没有。

v-bind:

　　无法像v-model一样实现双向数据绑定

　作用:
　　1.将数据对象绑定在DOM任意属性中
　　2.可以给DOM对象绑定一个或多个特性，例如动态绑定style和class

以上的实例代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js常用指令测试</title>

</head>
<body>
<!--实现再body区域显示一个测试-->
<div id="app">
   <!-- {{name}}-->
                                                            <!-- <a href="http://localhost:90/vuetest/vue_02.html">HTML2</a>-->
    <a v-bind:href="url">HTML2</a>
    <a :href="url">HTML2</a>                                <!--   v-bind可以省略  -->
    <span v-text="name"></span>
    <input type="test" v-model="num1" />+
    <input type="test" v-model="num2" >=

 <!--   {{Number.parseInt(num1) + Number.parseInt(num2)}}-->
 <!--<span v-text="Number.parseInt(num1) + Number.parseInt(num2)"></span>-->
    <span v-text="result"></span>                                                                    <!--双向绑定-->
    <button v-on:click="change" >计算</button>
    <div v-bind:style="{ fontSize: size + 'px'}">Java__VUE</div>
</div>
</body>
  <!--引用vue类库-->
    <script src="vue.min.js"></script>
<script>
    //编写MVVM的model部分以及VM部分
    var VM = new Vue({
        el:'#app',  //VM接管了app区域的管理
        data:{      //model数据
            name:'测试',
            num1:0,
            num2:0,
            result:0,
            url:'http://localhost:90/vuetest/vue_02.html',
            size:100

        },
        /*mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情 （dom渲染完成 组件挂载完成 ）

        methods中一般都是定义的需要事件触发的一些函数。每次只要触发事件，就会执行对应的方法。

        如果把computed中的方法写到method中会浪费性能。computed必须返回一个值页面绑定的才能取得值，

        而methods中可以只执行逻辑代码，可以有返回值，也可以没有。
        * */
        methods:{
            change:function() {
                this.result = Number.parseInt(this.num1) + Number.parseInt(this.num2),
                alert("计算结果="+this.result)
            }
        }
    });
</script>
</html>

v-if和v-for:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js常用指令测试</title>

</head>
<body>
<!--实现再body区域显示一个测试-->
<div id="app">
    <ul>
    <li v-for="(item,index) in list" :key="index" v-if="index % 2 == 0">{{index}}--{{item}}</li>
    <li v-for="(value,key) in user">{{key}}--{{value}}</li>
    <li v-for="(item,index) in userlist" :key="item.user.uname">
        <div v-if="item.user.uname == 'itboy'"  style="background: #00f50c">
            {{index}}--{{item.user.uname}}--{{item.user.age}}
        </div>
            <!--  另外一个不显示了   加了个else  -->
        <div v-else="">
            {{index}}--{{item.user.uname}}--{{item.user.age}}
        </div>
    </li>
    </ul>
</div>
</body>
  <!--引用vue类库-->
    <script src="vue.min.js"></script>
<script>
    //编写MVVM的model部分以及VM部分
    var VM = new Vue({
        el:'#app',  //VM接管了app区域的管理
        data:{      //model数据
            list:[1,2,3,4,5],
            user:{uname:'itcast',age:10},
            userlist:[
                {user:{uname:'itcast',age:10}},
                {user:{uname:'itboy',age:10}},
            ]
        }
    });
</script>
</html>

标签：常用,VUE,methods,--,绑定,VM,uname,指令,user
来源： https://www.cnblogs.com/lksses/p/16526210.html