VUE之常用指令

2022-07-27 22:00:20 阅读：143 来源： 互联网

标签：常用 VUE methods -- 绑定 VM uname 指令 user

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

VUE之常用指令