vue 实例

最新推荐文章于 2022-10-19 12:57:39 发布

杰仔要努力

最新推荐文章于 2022-10-19 12:57:39 发布

阅读量151

点赞数 1

分类专栏：前端vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_27399/article/details/89457552

版权

前端vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一下是今天学习vue的笔记，特此记录

<html>
<head>
 <title>vue</title>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
 <div id="app">
   <!--<span>{{a}}</span> 
   <span>{{b}}</span>-->
 </div>
 <div id="app-2">
   <span>{{a}}</span> 
   <span>{{b}}</span>
 </div>
  
 <script>
   //我们的数据对象
   var data={a:1}
   
   var data2={
      a:123,
      b:null
   }

   //每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的
   //一个Vue应用由一个通过new Vue 创建的根Vue实例以及可选的嵌套的，可复用的组件树组成
   //并且所有的Vue组件都是Vue实例，并且接受相同的选项对象
    var vm=new Vue({
       el:'#app',
       //选项
       //当创建一个Vue实例时，可以传入一个选项对象
       //使用这些选项来创建你想要的行为
       //data:data //（1）当这个Vue实例被创建时它将data对象中的所有属性加入到Vue的响应式系统中，当这些属性的值发生改变时，视图将会产生响应，匹配更新为新的值
       data:{
          c:123
       } 
        
    })
    //vm.b='hi vue'  //注意：只有当实例被创建时data中存在的属性才是响应式的，也就是说只有 a才是响应式的，新添加的b属性不是响应式的
                   //如果我们在控制台改变b的值是不会触发视图的更新的，只有改变a的值才会触发视图的更新，这时视图会把b的值一起更新
                   //如果一个属性后来会用，但是一开始是不存在的那么我们需要给属性一些初始值，
                   //比如：字符串的初始值设置为'',null,数组设置为空数组[],数值设置为0.。等
                   //参见例子2：app2


    vm.a==data.a //==>true 原因：见（1）处
    
    vm.a=2 //设置Vue的属性也会影响到原始数据
    //因此
    console.log('data.a:'+data.a) //==> 2  ,反之亦然
     
     Object.freeze(data2) //阻止修改现有的属性 调用这个函数之后 现有的属性不可修改，同时响应系统无法再追踪变化
    data2.b='hello vue' //==>data2.b=null
    var app2=new Vue({
       el:'#app-2',
       data:data2
    })
    //app2.b='hello world' 

    //除了数据属性，Vue实例还暴露了一些有用的实例属性与方法，他们都有前缀$
    vm.$data===data //=>true
    vm.$el===document.getElementById('app') //=>true
    //$watch是一个实例方法
    vm.$watch('c',function(newValue,oldValue){
        //这个回调方法将在vm.c改变后调用
        console.log('c改变了！！！'+newValue) // 注意如想发现对象内部值得变化，可以在选项参数中指定deep:true,但监听数组不需要
    })

   //实例声明周期钩子
   //每个实例在被创建时都要经过一系列的初始化过程，在这个过程中用户可以通过运行一些叫声明周期钩子的函数来在不同的阶段添加自己的代码
   var app3=new Vue({
      data:{
         a:1
      },
      created:function(){ //created 钩子 在实例被创建之后执行
         console.log('a is:'+this.a) 
      }
   })
   //实例被创建之后会输出 "a is 1"
   //还有其他钩子 
   //注意：不要再选项属性或回调上使用箭头函数 
   //比如：created:()=>console.log(this.a) 
   //因为箭头函数并没有this，this会作为变量一直向上级词法作用域查找，直到找到
 </script>
</body>
</html>

杰仔要努力

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 实例

一下是今天学习vue的笔记，特此记录<html><head> <title>vue</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body> <div id...
复制链接

扫一扫