首页 > 其他 > 详细

Vue速查清单1

时间:2020-08-28 00:14:35      阅读:102      评论:0      收藏:0      [点我收藏+]

数据双向绑定:v-model=""

访问元素:app.$el,app为Vue实例,通过$el访问Vue绑定对象的html元素,同document.getElementByName、Id、TagName、ClassName所取得的对象一样

插值与表达式:{{  }}

过滤器:{{ data | filter }}

跳过数据绑定:v-pre

示例代码:

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" v-model="name" placeholder="your Name">
        <!-- v-model 数据绑定 -->
        <!-- placeholder 缺失占位符 -->
        <h1>Hello , {{ name }}</h1>
        <div> {{ num / 10 }} </div>
        <div> {{ isOk ? ‘Ok‘ : ‘!OK‘ }} </div>
        <div> {{ num | filterA(‘A‘) | filterB(‘B‘) }} </div>
        <div v-pre> {{ 此处不会被编译 }} </div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                name: ‘‘,
                num: 100,
                isOk: false
            },
            filters: {
                filterA: function (e1, e2) {
                    return e1 + e2
                    // 第二个参数为filter传入的参数
                    // 此处将return 100A
                },
                filterB: function (e1, e2) {
                    return e1 + e2
                }
            }
        })
        console.log(app.$el.innerHTML)
    </script>
</body>

</html>

 

Vue速查清单1

原文:https://www.cnblogs.com/MobiusMap/p/13574386.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!