vue 踩坑（一）

1、后来添加的html代码，样式应用不上去

后来添加的html代码，比如是append进去的，这样的话我们写的样式只适合本页面使用的scoped, 但是这样的样式就是应用不上去。

这就很尴尬了。
后来才知道，后续添加的html片段是没有经过vue编译过得，所以本页面的样式是应用不上的，但是我们可以通过全局的样式控制住。

2、v-model
这真是一个神奇的东西啊，好用的一笔

一般form表单会使用v-model比较多，实现数据的双向绑定

<input v-model="sth" /><input v-bind:value="sth" v-on:input="sth = $event.target.value" />

其实第一行就是第二行的语法糖，其实转化的话就是转成第二句话了。

要理解这行代码，首先你要知道 input 元素本身有个 oninput 事件，这是 HTML5 新增加的，类似 onchange ，每当输入框内容发生变化，就会触发 oninput ，把最新的value传递给 sth。进而实现了数据双向绑定。

总结：
在给元素添加v-model属性时，默认会把value作为元素的属性，然后把input 事件作为实时传递value的触发事件。

如果v-model绑定在组件上：

<div id="demo">  <currency-input v-model="price"></currentcy-input>  <span>{{price}}</span></div><script src="https://cdn.bootcss.com/vue/2.3.0/vue.js"></script><script>Vue.component('currency-input', {  template: `    <span>      <input        ref="input"        :value="value"        <!--为什么这里把 'input' 作为触发事件的事件名？`input` 在哪定义的？-->        @input="$emit('input', $event.target.value)"      >    </span>  `,  props: ['value'],// 为什么这里要用 value 属性，value在哪里定义的？貌似没找到啊？})var demo = new Vue({  el: '#demo',  data: {    price: 100,  }})</script>

value就作为了组件的props传递的值，然后@input就作为要接收的值，所以可以直接$emit(‘input’),这样父元素就可以接收到

<currency-input v-model="price"></currentcy-input><!--上行代码是下行的语法糖  <currency-input :value="price" @input="price = arguments[0]"></currency-input>

v-model 也有缺点，它提供的是value属性和oninput事件。但是很多时候我们不是需要value属性，而是checked属性，并且当你点击时候不是oninput事件，而是onchange事件。

所以我们很多时候就可以根据双向绑定的原理来写出语法糖的部分

<input type="checkbox" :checked="status" @change="status = $event.target.checked" />

如果用到组件上：

<my-checkbox v-model="foo"></my-checkbox>Vue.component('my-checkbox', {  tempalte: `<input                type="checkbox"               @change="$emit('input', $event.target.checked)"               :checked="value"             />`  props: ['value'],})

checkbox

 <div class="app">        <input type="checkbox" id="jack" value="jack" v-model="checkedNames">        <label for="jack">jack</label>        <input type="checkbox" id="John" value="John"  v-model="checkedNames">        <label for="jack">John</label>        <input type="checkbox" id="Mike" value="Mike"  v-model="checkedNames">        <label for="jack">Mike</label>        <br>        <span>Checked names:{{checkedNames}}</span>    </div>

这边就是选择一个checkbox之后然后就往checkedNames添加一个值？？？ 运行虽然成功了，但是我总感觉应该是重置啊，所以我还没有理解啊。。。

【这里啊，如果绑定的值是数组，都是push的，就是一个数组的值，但是如果是变量的话就是直接修改原来变量的值】

3、
这里遇到了一个超级好用的东西，就是直接写赋值语句，和类名的动态处理

这边写了一个active类出现的条件是：
activeRuleIndex == index

这边就是点击时候添加一个active类，一般情况下，肯定是走一个函数，然后把index给传过去，然后修改activeRuleIndex的值。但是这种我们也可以直接改变值：@click=”activeRuleIndex = index”;

这样看起来很简单，但是完美的解决了改变activeRuleIndex的值，因为前面的：class是绑定的值，所以当activeRuleIndex改变的时候，class也会跟着改变。

4、refs

<div class="main scrool_y" ref="scroll">                    <div class="text_center pt15 pb15"><span class="tip-color">10:20 机器人聊天记录</span></div>                    <div v-for="(item,index) in list1" :key="index">                        <div ref="chats">                            <div class="time inline-block">{{item.role +"  "+ item.time}}</div><br/>                            <div class="contain inline-block"><span :class='getCurrentClass(index+1)' v-html='listContent(item.content)'></span></div>                        </div>                    </div>                </div>

在页面中写的时候就是ref属性，然后js处理的时候是：this.$refs.chats 这样取出来的是dom对象。
好处就是：减少dom节点的消耗

5、js的控制滚动条的滚动
this.$refs.main.scrollto(0,document.querySelectorAll(‘.left .main > div:eq(2)’)[0].offsetTop);

offsetTop: 可以是相对父元素的高度，但是父元素要设置成为position:relative或者position： absolute

6、this.$set(item,’selectvalue’,”)
对应的参数分别是：整个对象、添加的Key值，添加的key所对应的值

一般我们在知道，如果我们data声明的变量，如果这个数据绑定的，后边就是实现双向绑定，但是如果后续再添加的就不会实现双向绑定了，如果想要双向绑定的话，就要通过$set方法进行添加就可以

7、map（）函数和forEach（）还有$.each()函数
map()和forEach函数都是js的函数，each()是jquery的函数
map会返回一个新的数组，原来的数组不会改变，就是满足callback函数的新数组
forEach 只要开始了就不好停止，除非有异常情况，一般对源数据做处理。
each可以再满足什么条件的时候停止下来，return false.

8、es6里边的括号函数是没有this范围的，都是全局的this的

$(window).resize(()=> {   this.resetHeight();}).trigger('resize');

如果（）换成function（）写的话，就是会出现闭包的问题，所以this就要在外边重新的定义一下。
trigger（’resize’）是直接js去出发某个方法。