Vue零基础

2020-02-13

Vue

字数统计: 841字 | 阅读时长≈ 3分钟

在div标签中显示hello Vue

首先，创建Vue实例(确保head里已经引入vue.js文件)，div中可使用插值表达式的语法调用data里的数据

<body>
  <div id="root">{{content}}</div>
  <script>
       var root=new Vue({
           el:'#root',
           data:{
               content:'hello Vue'
           }
       })
  </script>
</body>

el : 限制了vue实例处理的dom的范围

data : 定义一些数据

设置两秒后显示Bye Vue

<body>
    <div id="root">{{content}}</div>
    <script>
       var vm=new Vue({
            el:'#root',
            data:{
                content:'Hello Vue'
            }
         })
       setTimeout(function(){
           vm.$data.content="Bye Vue"
        },2000)      
    </script>   
</body>

setTimeout中也可使用Vue.set()方法改变content中的数据

1	Vue.set(vm.content)="Bye Vue"

计算属性、方法和侦听器

计算属性computed

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。对于任何复杂逻辑，你都应当使用计算属性

例子

<body>
    <div id="root">{{fullName}}</div>
    <script>
        var vm=new Vue({
            el:'#root',
            data:{
                firstName:'zhang',
                lastName:'jin'
            },
            //计算属性
            computed:{
                fullName:function(){
                    return this.firstName+' '+this.lastName
                }
            }
        })
    </script>  
</body>

在这里插入图片描述

计算属性有缓存机制，它依赖两个变量firstName和lastName，当依赖值变化时就会执行一次计算，即其它内容发生变化时不会影响已经计算过的fullName

方法计算method

当然也可使用方法来实现计算，不过方法没有缓存机制，任何值改变都会导致页面所有内容渲染（相当于fullName又计算一次），故要实现同样的效果，优先使用计算属性computed,++注意插值表达式里内容要改为方法++

<body>
    <div id="root">{{fullName()}}</div>
    <script>
        var vm=new Vue({
            el:'#root',
            data:{
                firstName:'zhang',
                lastName:'jin'
            },
            //计算属性
            // computed:{
            //     fullName:function(){
            //         return this.firstName+' '+this.lastName
            //     }
            // }
            methods:{
                fullName:function(){
                  return  this.firstName+' '+this.lastName
                }
            }
        })
    </script>  
</body>
</html>

watch监听器

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。

主要用于监听依赖是否发生变化，没改变的话就用缓存机制

<body>
    <div id="root">{{fullName}}--{{age}}</div>
    <script>
        var vm=new Vue({
            el:'#root',
            data:{
                firstName:'zhang',
                lastName:'jin',
                fullName:'zhang jin',
                age:22
            },
           watch:{
                firstName:function(){
                    this.firstName+' '+this.lastName;
                }
                lastName:function(){
                    this.firstName+' '+this.lastName;
                }
           }
        })
    </script>  
</body>
</html>

计算属性的setter和getter

<body>
    <div id="app">{{fullName}}</div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                firstName:"zhang",
                lastName:"jin"
            },
            computed:{
                fullName:{
                     get:function(){
                     return  this.firstName+" "+this.lastName
                     },
                   set:function(value){
                      console.log(value);
                      var arr=value.split(" "); //将获取的字符串按空格分开，放在arr数组中
                      this.firstName=arr[0];
                      this.lastName=arr[1];
                    }
                }
            }
        })
    </script>   
</body>

在这里插入图片描述