跟着文档学框架——Vue2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue实例</title>
    <script src="vue.js"></script>
</head>
<body>
    <button v-on:click="appear" id="example">就是这里,没有宝藏哦~</button>
<script>

实现双向绑定

    var data1 = { a: 1 }; //设定元素属性及初值
    var vm = new Vue({    //新建vue
        data:data1        //绑定
    });
    vm.a = 2;
    console.log(data1.a);
    data1.a = 3;
    console.log(vm.a);

预知需要改变的系列属性 提前在data中设定初值

    var data2 = { a:1 };
    var vm2 = new Vue({
        data:data2
    });
    vm2.b=5;
    console.log(data2);//未能读取 data2.b 属性及值,需要在data中设初值
    var data2_ = { a:1,b:0 };
    var vm2_ = new Vue({
        data:data2_
    });
    vm2_.b=5;
    console.log(data2_);//能购读取 data2.b 属性及值,值为5

举例data属性及初值

    /*
    data:{
      newTodoText:'',
      visitCount:0,
      hideCompletedTodos:false,
      todos:[],
      error:null
    }*/

Vue实例 设定了一些有用的实例属性以及方法 用 $作为前缀区分 内置不需要设初值


    var data3 = { a: 1 };
    var vm3 = new Vue({
        el: '#example',
        data: data3,
        methods:{
            appear:function(){
                data3.a == 2?data3.a =1:data3.a =2;
            }
        }
    });
    console.log(vm3.$data === data3); // => true
    console.log(vm3.$el === document.getElementById('example'));// => true
    // $watch 是一个实例方法
    vm3.$watch('a', function (newValue, oldValue) {
        // 这个回调将在 `vm.a` 改变后调用
        alert('噔 噔 噔  噔~ ');
        alert('啥都没有*(^-^)* ')
    });

生命周期钩子 在vue中补充添加属性及值,指向原来的参数


    // created 钩子可以用来在一个实例被创建之后执行代码:
    new Vue({
        data:{ a:1 },
        created:function(){
            console.log('a is:'+this.a);//可以在内部执行
        }
    });

    var vm4_ = new Vue({
        data:{ a:1 }
    });
    console.log(vm4_.a);//值为1



</script>
</body>
</html>

附带本节所有代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue实例</title>
    <script src="vue.js"></script>
</head>
<body>
    <button v-on:click="appear" id="example">就是这里,没有宝藏哦~</button>
<script>
    //实现双向绑定
    var data1 = { a: 1 }; //设定元素属性及初值
    var vm = new Vue({    //新建vue
        data:data1        //绑定
    });
    vm.a = 2;
    console.log(data1.a);
    data1.a = 3;
    console.log(vm.a);


    //预知需要改变的系列属性  提前在data中设定初值
    var data2 = { a:1 };
    var vm2 = new Vue({
        data:data2
    });
    vm2.b=5;
    console.log(data2);//未能读取 data2.b 属性及值,需要在data中设初值
    var data2_ = { a:1,b:0 };
    var vm2_ = new Vue({
        data:data2_
    });
    vm2_.b=5;
    console.log(data2_);//能购读取 data2.b 属性及值,值为5


    /*举例data属性及初值
    data:{
      newTodoText:'',
      visitCount:0,
      hideCompletedTodos:false,
      todos:[],
      error:null
    }*/


    //Vue实例 设定了一些有用的实例属性以及方法 用 $作为前缀区分 内置不需要设初值
    var data3 = { a: 1 };
    var vm3 = new Vue({
        el: '#example',
        data: data3,
        methods:{
            appear:function(){
                data3.a == 2?data3.a =1:data3.a =2;
            }
        }
    });
    console.log(vm3.$data === data3); // => true
    console.log(vm3.$el === document.getElementById('example'));// => true
    // $watch 是一个实例方法
    vm3.$watch('a', function (newValue, oldValue) {
        // 这个回调将在 `vm.a` 改变后调用
        alert('噔 噔 噔  噔~ ');
        alert('啥都没有*(^-^)* ')
    });


    //生命周期钩子 在vue中补充添加属性及值,指向原来的参数
    // created 钩子可以用来在一个实例被创建之后执行代码:
    new Vue({
        data:{ a:1 },
        created:function(){
            console.log('a is:'+this.a);//可以在内部执行
        }
    });

    var vm4_ = new Vue({
        data:{ a:1 }
    });
    console.log(vm4_.a);//值为1



</script>
</body>
</html>

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 119,453评论 16 133
  • Vue是一款高度封装的、开箱即用的、一栈式的前端框架,既可以结合webpack进行编译式前端开发,也适用基于gul...
    uinika阅读 2,705评论 2 7
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 4,175评论 0 29
  • 下载安装搭建环境 可以选npm安装,或者简单下载一个开发版的vue.js文件 浏览器打开加载有vue的文档时,控制...
    冥冥2017阅读 4,738评论 0 42
  • 清明节日到,家族共聚餐。 就近龙凤去,消费八百三。 2016.4.3于老区 注释:龙凤,老区龙凤祥大酒店。
    观海听涛_6ae8阅读 119评论 0 0