Vue实例练习

最新推荐文章于 2022-07-30 09:04:21 发布

佳悦

最新推荐文章于 2022-07-30 09:04:21 发布

阅读量533

点赞数

分类专栏： Html+Css+Vue.js+Jquery 文章标签： vuejs 实例属性生命钩子

本文链接：https://blog.csdn.net/drunkpragrammer/article/details/77587728

版权

Html+Css+Vue.js+Jquery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

<!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

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue实例练习

多思考，其实没有看起来那么简单，你得想清楚。 Title //this is an example to tell us 每个 Vue 实例都会代理其 data 对象里所有的属性 var data1={a:1}//js中的JSON格式，其中a 是Key, value 是 1 var vm=new Vue
复制链接

扫一扫