海娩
海娩

vue杂记

用key管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做，除了使 Vue 变得非常快之外，还有一些有用的好处。
例如，如果你允许用户在不同的登录方式之间切换

//html
 

          

              
              
              
          

      


//js

当然，在不用复用元素的时候，就可以用key来写值，使得重新渲染新的元素
v-show VS v-if

v-show是一开始就会渲染好，之后改变的属性是类似于display属性的切换
v-if是惰性的，只有在第一次条件为真时才会开始渲染
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

对象属性检测更改

对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。

 
    
            
  • {{birthTime}}
    •
image.png

像这样，如果动态添加根节点vm的属性就会报错。那么，如果真的要改变根节点属性时该怎么办呢？？？值得探讨
可以这么想象其原理，建筑一座城堡时，先筑好一个地基包围起来即元素，就可以动态的往城墙里面添加东西，但是地基无法改变，因为一动起来其他各个部门都有可能收到不同程度的干扰或损伤。

非根节点就可以动态添加属性
          
    
            
  • {{mianmian.birthTime}}
    •
image.png
动态添加多个属性

应该用

     vm.mianmian = Object.assign({}, vm.mianmian, {
        age: 20,
        birthTime: '20170928'
    })

而不应该用

   Object.assign(vm.mianmian, {
         age: 20,
         birthTime: 20170928
     })

下面这样的方法不会报错，但是没什么效果。

问题： template和div这些元素有什么不一样，为什么总要单独拿出来说？

template是模板，特别是运用在组件的时候，作为模板，是最外层框架。另外，在搭建项目时，也是一般作为组件的最外层元素

v-model VS v-bind

感觉上的话可以把v-model类似于绑定一个容器，你可以通过这个容器得到容器里面的值，而v-bind就是绑定容器内具体的部分，是具体的值。

     

            
            {{ toggle }}
        


    var vm=new Vue({
            el:'#app',
            data:{
               toggle: '',
               a: 'hello ',
               b: 'world'
          }
     })
image.png

组件

组件要先定义，在vue元素创建之前就要先定义好组件，这样才能被vue元素使用。要确保在初始化根实例之前注册了组件

is属性

浏览器中一些标签元素比如

,
    ,
      ,