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、事件绑定:

{{num}}
        <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定位之间切换。

标签

评论