Vue实列

 Vue实例：

    在Vue项目中，每个Vue应用都是通过Vue构造器创建新的Vue实例开始的。

<script>
    var vm=new Vue({
        //选项
    })
</script>

   上面代码中第3行用于Vue实例进行配置

        Vue实列进行选项：data    methods    components    computed    filters    el    watch

 

  • el唯一根标签：

               el表示唯一根标签，class或id选择器可用来将页面结构与Vue实例对象vm中的el绑定。

<div id="app">{{name}}</div>
<script>
    var vm=new vue({
        el:'#app',
        data:{
            name:'Vue实例创建成功！'
        }
    })
</script>

 

  • data初始化数据：

                              ① Vue实例的数据对象为data，Vue会将data的属性转换为getter，setter，

                                      从而让data的属性能够响应数据变化。

                              ② 可以通过vm.$data访问原始数据对象。Vue实例也代理了data对象上所有的属性，

                                    因此访问vm.data相当于访问vm.$data.name。

<div id="app">
    <p>{{name}}</p>  //通过{{}}插值语法将data初始化数据绑定到p元素中
</div>
<script>
    var vm=new vue({
        el:"#app",
        data:{
             name:'定义初始化数据'
        }
    })
    console.log(vm.$data.name)
    console.log(vm.name)
</script>

 

  • methods定义方法：

                      用来定义方法，通过Vue实例可以直接访问这些方法。在定义的方法中，this指向Vue实例本身。

                        定义在methods属性中的方法可以作为页面中的事件处理方法使用，当事件触发后，

                    执行相应的事件处理方法。

<div id="app">
    <!--为button按钮绑定click事件--!>
 //添加了click属性，表示绑定单击事件，事件处理方法为showInfo
    <button click="showInfo">点击</button> 
    <p>{{msg}}</p>
</div>
<script>
 var vm=new vue({
     el:"app",
     data:{
       msg:''
    },
   methods:{
//定义事件处理方法showInfo    用于改变msg的内容
     showInfo(){    
       this.msg='触发单击事件'
        }
  }
})
</script>

 

  • computed计算属性：

                                 当有一些数据需要随着其它数据变得时，就需要使用computed计算属性。

                                  在事件处理方法中，this指向的Vue实列的计算属性结果会被缓存起来，

                               只有依赖的响应式属性变化时，才会重新计算，返回最终 结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="vue.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>总价格：{{totalPrice}}</p>
        <p>单价：{{price}}</p>
        <p>数量：{{num}}</p>
    <div>
        <button click="num == 0 ? 0 : num--">减少数量</button>
        <button click="num++">增加数量</button>
    </div>
</div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                price:20,
                num:0
            },
            computed:{
                totalPrice(){
                    return this.price*this.num
                }
            }
        })
    </script>
</body>
</html>

 

  • watch状态监听：

                    监听当前Vue实列中的数据变化，就会调用当前数据所绑定的事件处理方法。

<div id="app">
    <!--v-model用于表单控件元素上创建双向数据绑定!>
  <input type="text" v-model="cityName">
</div>
<script>
 var vm=new Vue({
   el:'app',
   data:{
      cityName:'guangzho'
 },
 watch:{
     cityName(newName,oldName){
          console.log(newName,oldName)
    }
  }
})

  • filters过滤器：

                       通过数据绑定可以将data数据绑定到页面中，页面中的数据经过逻辑层处理后展示最终结果。

                         数据的变除了Vue逻辑层进行操作外，还可以通过过滤器来实现。过滤器通常用于数据进行格式化，

                      字符串首字母该大写，日期格式化等。过滤器有两种使用方式。

               1.在插入值表达式中使用过滤器：

                                  通过“{{data}}”语法，可以将data中的数据插入页面中，该语法就是插值表达式。

                                     在插值表达式中还可以使用过滤器来对数据进行处理，语法为“{{data|filter}}”。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="vue.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>{{message|toUpcase}}</div>
    </div>
    <script>
            var vm=new Vue({
                el:'#app',
                data:{
                    message:'helloworld'
                },
                filters:{
                    //将helloworld转换为HELLOWORLD
                    toUpcase (value){
                        return value ? value.toUpperCase() : ''
                    }
                }
    })
    </script>
  
</body>
</html>
//message作为参数传递到toUpcase过滤器中执行，toUpcase将返回的最终结果展示到页面中。
//符号"|"称为管道符，管道符之前代码执行的结果会传到后面作为参数进行处理。在多个参数进行传递时，
//第一个参数就是前一个方法执行的结果，如value就是helloworld。

          2. 在v-bind属性绑定中使用过滤器：

                             v-bind用于属性绑定，如“v-bind:id=data”表示绑定id属性，值为data。

                                 在data后面可以加过滤器，语法为“data|filter”。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
    <div v-bind:id="dataId | formatId">helloworld</div>
    </div>
    <script>
    var vm=new Vue({
        el:'#app',
        data:{
            dataId:'dffl'
        },
        filters:{
            formatId(value){
                //字符串处理
                return value ? value.charAt(1)+value.indexOf('f'):''
            }
        }
    })
    </script>
    <!-- 
        id属性通过v-bind与data中的dataId绑定，并且通过管道符传递给了formatId进行处理；
        chartAt()是字符处理方法，参数为索引值，当前获取的是索引为1的字符f，
        而indexOf()方法的参数为指定字符，当前获取的是字符d所在的索引为0
     -->
</body>
</html>

posted @ 2022-09-01 22:07  zjw_rp  阅读(32)  评论(0)    收藏  举报