Vue实例练习

来源：互联网发布：centos mysql配置文件编辑：程序博客网时间：2024/06/14 00:40

多思考，其实没有看起来那么简单，你得想清楚。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="vue.js"></script></head><body>     <p id="app-1"></p>     <p id="app-2"></p></body><script>    //this is an example to tell us 每个 Vue 实例都会代理其 data 对象里所有的属性    var data1={a:1}//js中的JSON格式，其中a 是Key, value 是 1    var vm=new Vue({        el:"#app-1",        data:data1    })    vm.a === data1.a    data1.a=3    //这些被代理的属性是响应的    document.write(vm.a)    //定义在直接用类名（这里就是方法名）’.’一个方法，那么这个实际上创建的是一个静态方法；    // 而用prototype’.’的一个方法，实际上创建的是一个实例方法，实例方法是需要创建实例对象进行访问的，    //实例属性和方法与代理属性和方法    document.write("     "+vm.$data.a)    document.write("     "+data1.a)   // document.write("     "+vm.data.a)//wrong and no show ,Cannot read property 'a' of undefined    // /document.write("     "+vm.data1.a)//wrong and no show   var app2=new Vue({       el:"#app-2",       data:{           a:1       },       created:function () {           document.write("     "+"the app-2 living example create")       },       mounted:function () {           document.write("     "+"the el of app-2 living example change to app-3 ")//el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子       },       updated:function () {           document.write("     "+"the data of app-2 living example  change ")//由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。       },       destoryed:function () {           document.write("     "+"the app-2 living example  destory ")       }   })</script></html>

阅读全文

0 0