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去出发某个方法。