10.16 冯娜
学习日志
trim:自动过滤用户输入的首尾空白字符
绑定class和style
（1）style
绑定内联样式：
a、将style属性看成一个对象来绑定，每个css属性都是对象中的一个属性。css属性值都是对象中的属性值。
<元素 ：style="{css属性名1：css变量1，css属性名2：css变量2，...}">
data：{
变量1：属性值1，
变量2：属性值2
...
}
注意：若属性名中含有“-”，那么属性名要用引号包裹住。
b、 ：style='一个变量'，在data中将变量定义为一个对象
<元素：style='变量名'>
data:{
变量名：{
css
}
}
优点：即使有多个元素刚好都要同时修改CSS属性值的时候，因为不同的元素绑定的对象不同，所以不同的对象内，是可以包含相同属性名的。可以避免多个元素之间的css属性相互干扰。
（2）绑定class
a、使用对象语法,直接在HTML中使用匿名对象
<元素：class=‘{class 名1：变量名1，class名2：变量名2，...}’>
data:{
//变量名在这里，我们可以看作是是否启用类名的一个开关按钮
//true||false,
变量1：true
}
案例：
1、使用Vue：
//Vue的基本使用步骤
//1、需要提供标签用于填充数据
//2、引入vue.js库文件
//3、可以使用vue的语做功能了
//4、把vue提供的数据填充到标签里面
//v-cloak指令的用法
//1、提供样式：
//【v-cloak】{
//display:none;
//}
//2、在插值表达式所在的标签中添加v-cloak指令
//原理：先通过样式隐藏内容，然后再内存中进行值的替换，替换好之后再显示最终的结果
//v-once 的应用场景：若显示的信息后续不需要再修改，可以使用v-once,这样可以提高性能
var vm= new Vue({
el:'#app',
data:{
msg:'Hello world',
msg1:'
html
',
info:'ninhao'
}
});
2、事件绑定：
<div>
<button v-on:click='num++'>点击</button>
<button @click="num++">点击加一</button>
<button v-on:click="handle">点击2</button>
<button @click="handle()">点击三</button>
<button v-on:click="handle(123)">点击传参</button>
</div>
</div>
<script type="text/javascript" src="../学习练习/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle: function() {
console.log(this === vm)
this.num++;//this就是vm 也就是vue的实例对象
}
}
})
</script>
3、
面试题
1、当marigin-top、padding-top的值是百分比时，相对最近的父级块级元素的width，相对最近父级块级元素的width
2、CSS Sprites 精灵图，是一种网页图片应用处理方式。允许你将一个页面涉及到的所有零星图片都包含在一张大图中去，这样，当访问页面时，载入图片就不会像以前那样一幅一幅的慢慢显示出来了。它可以减少图片的字节，解决了网页设计时在图片命名上的困扰，从而提高了网页的制作的效率。更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便。
3、DOM，文件对象模型，提供了树状结构的表示方法，在HTML element内的text内容也是text node。
4、css默认的定位类型是：static（没有定位，遵循正常的文档流对象）
定位类型：
（1）flxed定位：元素的位置相对于浏览器窗口固定位置，即使窗口是滚动的它也不会移动。
（2）relative定位：相对定位元素的定位是相对其正常位置。
（3）absolute定位：绝对定位的元素的位置相对于最近的一定位元素
（4）sticky定位：粘贴定位；position：sticky；基于用户的滚动位置来定位。是依赖于用户的滚动，在position：relative与position：fixed定位之间切换。
近期评论