Vue—new Vue()

1.new Vue()创建一个新的 Vue 实例

2.el挂在原色

el绑定的元素内，都是Vue的作用范围

3.data数据对象

当一个Vue实例被创建时，它将data对象中的所有的属性加入到Vue的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
            <!-- data中绑定 -->
            <h1>count: <input v-model="count"></input></h1><br/>
            
            <!-- filters使用 -->
            <!-- {{ count | format(2) }}
                 特别注意：
                 1.方法format默认第一个参数是count，且省略
                 2是第二个参数
            -->
            <h1>count: {{ count | format(2) }}</h1><br/>

            <!-- methods使用 -->
            <button  @click="textalter" >alter</button><br/>

            <!-- computed中getter -->
            <div>computed中getter</div><br/>
            <h1>countPlus: <span>{{countPlus}}</span></h1><br/>

            <!-- computed中setter -->
            <div>computed中setter</div><br/>
            <button  @click="add(1)" >add</button><br/>
            <h1>countPlus: <span>{{countPlus}}</span></h1><br/>
    </div>
</body>
</html>
<script>
    var vm = new Vue({
        el: '#app', 
        data:{
            count:1,
        },

        //方法
        methods:{
            textalter:function(){
                alert(this.count);
            },
            add:function(v){
                this.countPlus = this.countPlus + v;
            },
        },

        //过滤器
        filters:{
            format: function (a,n) {
                debugger;
                return a + "--" + n
          }
        },

        //钩子函数，钩子函数在Vue创建实例时调用
        mounted:function(){
            alert(this.count);
        },

        //计算属性: 所有getter和setter的this上下文自动地绑定为Vue实例
        computed:{
            countPlus:{
                get:function(){
                    return this.count + 1
                },
                set:function(value){
                    this.count = value - 1
                }
            },
        },

        //侦听属性,观察和响应 Vue 实例上的数据变动
        watch:{
            //侦听:count
            count: function (val) {
                alert(this.count);
            },
        }
    })
</script>

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/sinat_16998945/article/details/102488163
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-03-07 22:10:04
阅读 ( 716 )
分类：前端

Vue—new Vue()

1.new Vue()创建一个新的 Vue 实例

2.el挂在原色

3.data数据对象

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看