vuejs的遇到的问题小结

 1.v-model

针对表单控件元素创建双向数据绑定，在v-model指令后面还可以添加多个参数（number，lazy, debounce）。

<div id="example">
    <form>
        姓名：
        <input type="text" v-model="data.name" placeholder="姓名"/>
        <br />
        性别：
        <input type="radio" id="one" value="One" v-model="data.sex"/>
        <label for="man">男</label>
        <input type="radio" id="two" value="Two" v-model="data.sex"/>
        <label for="male">女</label>
        <br />
        <input type="checkbox" id="jack" value="book" v-model="data.interest"/>
        <label for="jack">阅读</label>
        <input type="checkbox" id="john" value="swim" v-model="data.interest"/>
        <label for="john">游泳</label>
        <input type="checkbox" id="move" value="game" v-model="data.interest"/>
        <label for="move">游戏</label>
        <input type="checkbox" id="mike" value="song" v-model="data.interest"/>
        <label for="mike">唱歌</label>
        <br />
        身份：
        <select v-model="data.identity">
            <option value="teacher" selected>教师</option>
            <option value="doctor">医生</option>
            <option value="lawyer">律师</option>
        <select>          
    </form>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#example',
        data: {
            data:{
                name:'',
               sex:'',
               interest:[],
               identity:''
            }
        }
    })
</script>

处理组件v-model指令的源码在createComponent函数中的：

 if (isDef(data.model)) {
    transformModel(Ctor.options, data);
  }

2. 给button设置disabled

链接：https://www.cnblogs.com/wrestle-mania/p/6939571.html

3.v-html

v-html对应指令有v-text。

<div id="example">
  <p v-html = "html"></p>
  {{html}}
</div>
<script type="text/javascript">
    new Vue({
       el:"#example",
       data:{
         html:"<p>效果一样</p>"
       }
    });
</script>

4.vuejs中过渡效果大量使用了动画。

5.调试工具的安装：

参考博客：http://www.cnblogs.com/lolDragon/p/6268345.html

6. 父组件执行子组件的方法：  this.$refs.refname.childMethods(); ref 如果不在组件中使用，获取用来获取dom节点。

7.http-proxy-middleware

  前端开发中涉及到的请求代理到API服务器上，方便与服务器对接。

8.事件触发获取当前的dom

https://www.cnblogs.com/tongrenlu/p/9512539.html

9.在方法中，要调用生命周期函数可以使用：hook,类似：

this.$once('hook:beforeDestroy',function(){
    console.log('xxx')
})

10.在部分IOS手机下echart画图会导致内存太大，以致页面奔溃，解决办法如下：

https://www.jianshu.com/p/d6d7294b2bf5

11. 子组件中的slot向父组件的模板中传值。使用scope或者scope-group。一般来说，slot是父组件传递给子组件。

<parent :childData="currentData">
   <template scope="data">
      <div>{{data.attr1}}</div>
   </template>
</parent>
<child>
 <slot :attr1="childData"></slot>
</child>

作用域插槽的是父组件提供插槽模板，子组件中提供数据先展示。默认插槽和具名插槽子组件不需要提供数据。

12. 动画的高级组件。动态组件，虚拟组件,还有异步组件。

13.子组件中设置inheritAttrs属性会从父组件继承属性数据作为子组件的根节点的属性。

14. ref循环赋值，并引用

<div v-for="(item, index) in obj" :key="index">
   <div :ref=`shareArr_${index}`>
</div>

//使用
var dom  = this.$refs[shareArr_index][0]

 15.filters中注册的函数都是纯函数，不能使用this,如果需要传递this中的值，使用： flag | dealFilter(kk), kk为this中的成员。