Vue—new Vue()

拼搏现实的明天。 2023-06-06 08:20 19阅读 0赞

### 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">
                
                <h1>count: <input v-model="count"></input></h1><br/>
                
                
                
                <h1>count: {
       { count | format(2) }}</h1><br/>
    
                
                <button  @click="textalter" >alter</button><br/>
    
                
                <div>computed中getter</div><br/>
                <h1>countPlus: <span>{
       {countPlus}}</span></h1><br/>
    
                
                <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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1_size_16_color_FFFFFF_t_70]: /images/20230601/62f6362fac8942a58dd6f5eae0b8529f.png