码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift

  • VUE学习第三篇----VUE实例

    1、当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

    html网页文件如下所示：

    1. <html>
    2. <head>
    3. <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    4. </head>
    5. <body>
    6.  
    7. </body>
    8. <script >
    9. // 我们的数据对象
    10. var data = { a: 1 }
    11.  
    12. // 该对象被加入到一个 Vue 实例中
    13. var vm = new Vue({
    14.   data: data
    15. })
    16.  
    17. // 获得这个实例上的 property
    18. // 返回源数据中对应的字段
    19. vm.a == data.a // => true
    20.  
    21. // 设置 property 也会影响到原始数据
    22. vm.a = 2
    23. console.log(data.a) // => 2
    24.  
    25. // ……反之亦然
    26. data.a = 3
    27. console.log(vm.a) // => 3
    28. </script>
    29. </html>

    2、这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。

    html网页文件如下所示：

    1. <html>
    2. <head>
    3. <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    4. </head>
    5. <body>
    6. <div id="app">
    7.   <p>{{ foo }}</p>
    8.   <!-- 这里的 `foo` 不会更新！ -->
    9.   <button v-on:click="foo = 'baz'">Change it</button>
    10. </div>
    11. </body>
    12. <script >
    13. var obj = {
    14.   foo: 'bar'
    15. }
    16.  
    17. Object.freeze(obj)
    18.  
    19. new Vue({
    20.   el: '#app',
    21.   data: obj
    22. })
    23. </script>
    24. </html>

    1. vue.js:5129 [Vue warn]: Error in v-on handler: "TypeError: Cannot assign to read only property 'foo' of object '#'"
    2.  
    3. (found in <Root>)
    4. warn$2 @ vue.js:5129
    5. logError @ vue.js:3746
    6. globalHandleError @ vue.js:3742
    7. handleError @ vue.js:3709
    8. invokeWithErrorHandling @ vue.js:3725
    9. invoker @ vue.js:1540
    10. original_1._wrapper @ vue.js:8038
    11. vue.js:3750 TypeError: Cannot assign to read only property 'foo' of object '#'
    12.     at Proxy.proxySetter (vue.js:4341:32)
    13.     at click (eval at createFunction (vue.js:11655:18), <anonymous>:3:126)
    14.     at invokeWithErrorHandling (vue.js:3718:32)
    15.     at HTMLButtonElement.invoker (vue.js:1540:22)
    16.     at original_1._wrapper (vue.js:8038:37)
      17.  

      3、除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。例如：
       

      1. <html>
      2. <head>
      3. <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
      4. </head>
      5. <body>
      6. <div id="example"></div>
      7. </body>
      8. <script >
      9. var data = { a: 1 }
      10. var vm = new Vue({
      11.   el: '#example',
      12.   data: data
      13. })
      14.  
      15. console.log(vm.$data === data) // => true
      16. console.log(vm.$el === document.getElementById('example')) // => true
      17.  
      18. // $watch 是一个实例方法
      19. vm.$watch('a', function (newValue, oldValue) {
      20.   // 这个回调将在 `vm.a` 改变后调用
      21. })
      22. </script>
      23. </html>
       

       

      4、实例生命周期钩子
       

      每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
       

      比如 created 钩子可以用来在一个实例被创建之后执行代码：
       

      1. <html>
      2. <head>
      3. <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
      4. </head>
      5. <body>
      6. <div id="example"></div>
      7. </body>
      8. <script >
      9. new Vue({
      10.   data: {
      11.     a: 1
      12.   },
      13.   created: function () {
      14.     // `this` 指向 vm 实例
      15.     console.log('a is: ' + this.a)
      16.   }
      17. })
      18. // => "a is: 1"
      19. </script>
      20. </html>
       

       

      也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。
       

      不要在选项 property 或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
       

      1. <html>
      2. <head>
      3. <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
      4. </head>
      5. <body>
      6. <div id="example"></div>
      7. </body>
      8. <script >
      9. new Vue({
      10.   data: {
      11.     a: 1
      12.   },
      13.   created: ()=> {
      14.     // `this` 指向 vm 实例
      15.     console.log('a is: ' + this.a)
      16.   }
      17. })
      18. // => "a is: 1"
      19. </script>
      20. </html>
       

       

       

       

       

       

      
                
                    
                

                
    17. 

                    相关阅读:
      
                    
Springboot全局异常和自定义异常                            
      
列表的基础应用                            
      
《运营之光3.0》全新上市——跨越时代，自我颠覆的诚意之作                            
      
【刷题专栏—突破思维】142. 环形链表 II                            
      
接雨水【Leecode 42】（坐标轴上的故事)                            
      
CentOS-7-x86_64 iso镜像的安装（Linux操作系统）                            
      
div+css网页html成品学生作业包含10个html页面——动漫主题海贼王                            
      
【M365运维】给从本地同步到O365的DL添加 Send As权限                            
      
计算机毕业设计springboot基于springboot和vue的音乐网站gk1c4源码+系统+程序+lw文档+部署                            
      
jemter ramp-up                            
      
                          
                
      18. 
                
    18. 
                    原文地址：https://blog.csdn.net/heming20122012/article/details/136626256
                
      19. 

            
        

        
      
            
        
                
      • 
                    最新文章
                
        • 
                
      • 
                    
攻防演习之三天拿下官网站群                            
        
数据安全治理学习——前期安全规划和安全管理体系建设                            
        
企业安全 | 企业内一次钓鱼演练准备过程                            
        
内网渗透测试 | Kerberos协议及其部分攻击手法                            
        
0day的产生 | 不懂代码的"代码审计"                            
        
安装scrcpy-client模块av模块异常，环境问题解决方案                            
        
leetcode hot100【LeetCode 279. 完全平方数】java实现                            
        
OpenWrt下安装Mosquitto                            
        
AnatoMask论文汇总                            
        
【AI日记】24.11.01 LangChain、openai api和github copilot                            
        
                            
                
        • 
            
      

            
        
                
      • 
                    热门文章
                
        • 
                
      • 
                    
十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！                            
        
奉劝各位学弟学妹们，该打造你的技术影响力了！                            
        
五年了，我在 CSDN 的两个一百万。                            
        
Java俄罗斯方块，老程序员花了一个周末，连接中学年代！                            
        
面试官都震惊，你这网络基础可以啊！                            
        
你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法                            
        
心情不好的时候，用 Python 画棵樱花树送给自己吧                            
        
通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！                            
        
13 万字 C 语言从入门到精通保姆级教程2021 年版                            
        
10行代码集2000张美女图，Python爬虫120例，再上征途                            
        
                            
                
        • 
            
      

        
      
    




    
    
    
    

      
    
      
        
      
            
      
                
      
                    Copyright © 2022 侵权请联系2656653265@qq.com   
                    京ICP备2022015340号-1
                
      
                
      
                    正则表达式工具
                    cron表达式工具
                    密码生成工具
                
      
                
      
                    
                    
      京公网安备 11010502049817号