浏览器引擎
- 渲染引擎 解析html、css代码
- js引擎 解析、执行js代码
sass
- 是css扩展语言,能减少css代码重复,兼容所有版本css
- sass可以有变量、嵌套、函数、混入
- sass有两种文件格式,.scss、.sass
- scss 扩展到css3,代码格式更加偏向于css
- sass版本3.0前,里面不需要{ }。(不常用)
文件转译
- 打开cmd控制台,借助node
- 使用插件
- 使用工具
- 项目自带
使用cmd
- 通过node安装,打开cmd,输入
npm install sass -g
- 转译到项目文件夹下,在地址栏下启动cmd
- 打开cmd,输入sass .\装scss文件的文件夹\scss文件 .\装css文件的文件夹\转译后的css
- 转译后如果有修改,需要手动转译,或者加入–watch命令,进行监听,自动转译。
sass变量
sass变量有字符串、数字,布尔值
格式$变量
$w:300px;
使用方法
.box{
width:$w;
}
作用域
sass变量同样也分为全局变量、局部变量
- 在花括号里面声明,就是局部变量
- 在花括号外面声明,就是全局变量
局部变量转全局变量
$:300px !global;
sass嵌套
sass文件中可以引入其他的sass文件
@import "url"
引入sass文件- 我们还可以通过这样的方式修改父级和子级的样式
.box2{ // 父级
$line:30px !global; // 局部变量转全局变量
p{ // 子级
color: $commonBlue;
font-size: 22px;
line-height: 40px;
&:hover{ // 给子盒子添加hover效果
color: #e63;
};
&:nth-of-type(3){ // 选择器
font-size: $line;
text-decoration: underline;
color: $color;
}
}
&:hover{ // 给父盒子添加hover效果
background-color: #ff23ff;
}
}
在案例中我们可以看到hover和nth选择器的用法,它不需要像css中那样,总是要写一次类名,只要在想要控制的元素的花括号中写上 h o v e r 或 者 hover或者 hover或者nth-of-type()就可以了
sass混入
sass混入是指通过表达式封装一套样式,需要使用时引入就可以了
混入@mixin name(a,b){}
参数也可以不写
引入@include name;
// 混入 @mixin
@mixin style() {
height: 300px;
width: 300px;
background-color: rgb(139, 139, 189);
}
// 引入
.box4{
@include style();
color: #a6345a;
margin: 100px auto;
}
// 混入传参
@mixin needPhy($a,$b) {
font-size: $a;
line-height: $b;
}
// 引入
.box4{
@include needPhy(30px, 40px);
padding: $commonPadding;
}
sass继承
继承其他DOM元素的样式
.box{
width: 300px;
height: 300px;
background-color: #f0f;
color: #ff0;
line-height: 55px;
margin: 100px auto;
padding: 20px;
}
// 继承
.box3{
@extend .box;
}
vue
vue可以进行数据的双向绑定
vue的核心:数据驱动,组件化
vue和jQuery虽然都是框架,但是他们也存在区别
- vue性能更高
- vue的DOM操作少
- vue是组件化开发
MVC和MVVM的区别
- MVC (jQuery属于MVC)
- M:model 数据层
用于处理应用程序数据逻辑部分。通常模型对象负责在数据库中存取数据。
- V:view 视图层
应用程序中处理数据显示的本分。通常视图是依据模型数据创建的。
- C: controller 控制层
应用程序处理用户交互的部分。通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据。 - MVVM(vue属于MVVM)
- M: model 数据层
- V:view 视图层
- VM:viewModel 数据监视层
- 数据层和视图层通过数据监视层进行转换
如何使用vue
- 引入vue.js
- 声明一个容器,通常给id=app
- 创建一个vue对象 new Vue({})
- data 不是一个对象,而是一个函数,通过return的方式定义
html代码
<!-- vue容器 -->
<div id="app">
<!-- 视图层 -->
年纪
<!-- 插值表达式,将变量渲染在页面中 -->
{{age}}
如果能重来,我要选
<input type="text" v-model="name">{{name}}
</div>
js代码
new Vue({
el:"#app", // 绑定视图层
data(){
// 数据层
return{
name:"李白",
age:750
}
}
})
vue的指令
vue的指令一般是这样的格式:v-xxx
单向绑定,内容直接渲染在页面上
- v-text=“变量” 不能解析标签
- v-html=“变量” 可以解析标签
单向绑定
<div v-text="text1"></div>
<div v-html="text1"></div>
双向绑定,针对页面中可修改的数据,只能写一个变量名
- v-model=“变量名”
双向绑定
<input type="text" v-model="val">
<!-- 插值表达式 -->
{{val}}
我们可以使用v-model对input框、单选框、复选框、下拉框进行很多的操作,比如选中某一个选项时,能获取到该选项的文本内容,还可以进行默认选项的设定
<div id="app">
<label ><input type="radio" v-model="sex" value="男">男</label>
<label ><input type="radio" v-model="sex" value="女">女</label><br>
{{sex}} <br>
复选框<br>
<label><input type="checkbox" v-model="hobby" value="睡觉">睡觉</label>
<label><input type="checkbox" v-model="hobby" value="吃很多饭">吃很多饭</label>
<label><input type="checkbox" v-model="hobby" value="吃饭">吃饭</label><br>
{{hobby}} <br>
下拉框
<select v-model="city">
<option value="南京">南京</option>
<option value="天津">天津</option>
<option value="北京">北京</option>
</select> <br>
{{city}}
</div>
<script>
new Vue({
el: '#app',
data() {
return {
sex:"男",
hobby:["吃很多饭"],
city:""
}
},
});
</script>
v-if、v-show
用法:
- v-if=“par”
par可以是变量可以是数字也可以是表达式,当它转换成布尔值后,为true元素就显示,为false就隐藏,v-show也是这样使用
它们都是能够控制元素显示和隐藏的,但是它们也是存在区别的
- v-if 直接删除DOM元素,一般页面只做一次判断时使用它,一般用于登录的显示
- v-show 它让元素隐藏的原理是,给元素添加行内样式“display:none”,对于频繁切换显示隐藏时使用它,比如轮播图
<div class="smallbox2" v-show="1">这是v-show=“1”</div>
<div class="smallbox2" v-show="0">这是v-show=“0”</div>
<!-- 当val==n 成立时,这个元素就显示出来-->
<div class="smallbox" v-if="val==1">1</div>
<div class="smallbox" v-if="val==2">2</div>
<div class="smallbox" v-if="val==3">3</div>
<div class="smallbox" v-show="val==1">1</div>
<div class="smallbox" v-show="val==2">2</div>
<div class="smallbox" v-show="val==3">3</div>
与if条件语句类似,v-if
还有配套的v-else-if
和v-else
<input type="text" v-model="score">{{score}}
<span v-if="score>=90">优秀</span>
<span v-else-if="score>=80">良好</span>
<span v-else-if="score>=70">中等</span>
<span v-else>及格</span>
v-for
v-for的用处相当于数组的迭代操作
格式:
v-for="(item,index) in 数组"
- item 代表每一项
- index 代表索引
- 数组的位置我们也可以写数字,需要循环几次就写几
<ul>
<li v-for="r in arr">{{r}}</li>
</ul>
v-on 绑定事件
格式: <button v-on:事件 = "触发事件进行的操作/方法/函数">点击事件</button>
简写: <button @事件= "触发事件进行的操作/方法/函数">点击2</button>
修饰符
- 指令修饰符
.trim 去除首尾的空白
<input type="text" v-model.trim="val"> {{val}}
事件修饰符
- .stop 阻止冒泡
- .prevent 阻止默认事件
- .capture 阻止事件捕获
- .self 跳过冒泡事件,只捕获在该元素发生的方法
- .once 只触发一次
<div @click.once = "fu" class="fu">
只能执行一次
<div @click.self="zi" class="zi">
只有点它自己才会输出
<div @click.stop="sunzi" class="sunzi">阻止冒泡</div>
<!-- <div @click="sunzi" class="sunzi">阻止冒泡</div> -->
</div>
</div>
<hr>
阻止默认行为
<a href="http://www.baidu.com" @click.prevent = "">取消点击去百度</a>
总结
进入vue阶段,虽然说语法上与之前学习的相差很大,但是其中还是存在很多的共同之处的,就比如v-text与之前的innerText作用基本相同,只不过vue中,指令的格式较之以前比较特殊:v-xxx。
不过也有可能是因为才初次接触vue,没有到达一些复杂的操作,希望后面能有一个顺利的学习过程。
总结一下今天的学习内容,最后再分享一个vue中是如何进行tab切换的。
今天学习了vue中的基本的一些指令,
- v-text、v-html这是对元素文本内容的一个操作,其中v-html可以对标签进行解析。
- v-model 这也是对元素文本进行操作,不过它是双向绑定的,一般就是针对在页面中可以改变的数据,如果再页面中改变了,那么这个变量也会发生改变
- v-show v-if是控制元素隐藏、出现的,从目前来看,以后肯定是v-show会更常用一些,但是v-if和v-else搭配起来能完成先判断再进行出现隐藏的操作,也有一定的实用性
- v-on 就相当于我们原生js的事件绑定,可以用@进行简写
- 还有许多的修饰符,指令修饰符、事件修饰符等等
最后,vue给我的感觉比较像我们之前调用接口。我们的变量、方法、内容都储存在了newVue中,我们在需要使用的时候进行调用就可以了。
tab切换案例
最后是tab页面的案例
html和js代码
<div id="app">
<div>
<button v-for="r in list" @click="getIndex(r.id)">{{r.name}}</button>
</div>
<ul>
<li v-for="r in list" v-show="index==r.id">
<h3>{{r.name}}</h3>
<p>{{r.contents}}</p>
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
index:1,
list:[
{
name:"生查子元夕",
contents:"去年元夜时,花市灯如昼。月上柳梢头,人约黄昏后。今年元夜时,月与灯依旧。不见去年人,泪湿春衫袖。",
id:1
},
{
name:"题龙阳县青草湖",
contents:"西风吹老洞庭波,一夜湘君白发多。醉后不知天在水,满船清梦压星河。",
id:2
},
{
name:"离思五首",
contents:"曾经沧海难为水,除却巫山不是云。取次花丛懒回顾,半缘修道半缘君。",
id:3
},
]
}
},
methods: {
getIndex(i){
this.index=i;
}
},
});
</script>
css代码
*{
margin: 0;
padding: 0;
list-style: none;
}
button{
padding: 5px 10px;
background-color: rgb(113, 201, 236);
color: #fff;
border: 0;
margin: 15px 10px;
border-radius: 8px;
cursor: pointer;
}
最后送自己一句:路漫漫其修远兮,吾将上下而求索。奋斗才能战胜困难,天生我才的前提其实是天道酬勤