vue小知识点汇总

<div :val="1"></div>，给属性val前面加v-bind，认为值是js表达式，1则认为是数组，要是不加v-bind，认为值是字符串，1则认为是字符串
对数组的改变不能使用数组索引，只能用这几个方法：push, pop, shift, unshift, splice
模板占位符<template></template>：可以包裹一些元素，在循环的过程中并不会被渲染到页面上
```
<template v-for="item in list">
      <div>{{item}}</div>
 </template>
```
html对象的遍历：v-for = "(item,key) of obj"
Vue.set()方法等于实例.$set()，可以改变数组，对象

H5的规范中表格tbody下写tr，但是模板也是tr，模板要替换原来的tr，标签上增加is属性<tr is="row"></tr>(组合标签增加is)

  <body>
    <div id="app">
      <table>
        <tbody>
          <tr is="row"></tr>
          <tr is="row"></tr>
          <tr is="row"></tr>
        </tbody>
      </table>
    </div>
    <script>
      Vue.component("row",{
        template:"<tr><td>this is row</td></tr>"
      });
      var app = new Vue({
        el:'#app',
      })
    </script>
  </body>

实例化new Vue中data可以是一个对象，其他（例如组件）中data必须是一个函数，并且有返回对象，子组件多个地方调用，值不会互相影响

      Vue.component("row",{
        data:function(){
          return {
            content:"this is row"
          }
        },
        template:"<tr><td>{{content}}</td></tr>"
      });

标签中ref（引用）属性：在原生标签中(例如：<div ref="one"></div>)，通过this.$refs.one获取的是dom元素，若是在组件标签中使用（例如：<item ref="two"></item>）,通过this.$refs.two获取的是组件的引用

组件上使用原生事件，给事件上加native修饰符，否则组件上的事件被认为自定义事件

<body>
    <div id="app">
      <child @click.native = "handleClick"></child>
    </div>
    <script>
      Vue.component("child",{
        template:"<div>aaa</div>"
      });
      var app = new Vue({
        el:'#app',
        methods:{
          handleClick:function(){
            alert(11);
          }
        }
      })
    </script>
  </body>

动态组件<component :is="type"></component>，只需要动态的改变type值为组件名称（例如组件名为child-one），可以切换对应的组件（component是vue自带的标签），type值改变后，对之前的组件销毁，对新的组件重新生成，耗性能，不建议使用
多个组件之间来回切换使用v-if，可以在每个组件的template中增加v-once，即使上个组件隐藏了，也不会销毁，会放到内存中，下次使用从内存中取，提高性能（例如：template:`<div v-once>aaa</div>`）

posted on 2019-07-09 23:32 崭新开始阅读(355) 评论(0) 编辑收藏举报