sass、vue（v-model、v-text、v-html、v-for、v-if、v-show、v-on、修饰符）

浏览器引擎

• 渲染引擎 解析html、css代码
• js引擎 解析、执行js代码

sass

• 是css扩展语言，能减少css代码重复，兼容所有版本css
• sass可以有变量、嵌套、函数、混入
• sass有两种文件格式，.scss、.sass
  - scss 扩展到css3，代码格式更加偏向于css
  - sass版本3.0前，里面不需要{ }。（不常用）

文件转译

1. 打开cmd控制台，借助node
2. 使用插件
3. 使用工具
4. 项目自带

使用cmd

1. 通过node安装，打开cmd，输入npm install sass -g
2. 转译到项目文件夹下，在地址栏下启动cmd
3. 打开cmd，输入sass .\装scss文件的文件夹\scss文件 .\装css文件的文件夹\转译后的css
4. 转译后如果有修改，需要手动转译，或者加入–watch命令，进行监听，自动转译。

sass变量

sass变量有字符串、数字，布尔值
格式$变量
$w:300px;
使用方法

.box{
	width:$w;
	}
1
2
3

作用域

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;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在案例中我们可以看到hover和nth选择器的用法，它不需要像css中那样，总是要写一次类名，只要在想要控制的元素的花括号中写上$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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

sass继承

继承其他DOM元素的样式

.box{
    width: 300px;
    height: 300px;
    background-color: #f0f;
    color: #ff0;
    line-height: 55px;
    margin: 100px auto;
    padding: 20px;
}
// 继承
.box3{
    @extend .box;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

vue

vue可以进行数据的双向绑定
vue的核心：数据驱动，组件化
vue和jQuery虽然都是框架，但是他们也存在区别

1. vue性能更高
2. vue的DOM操作少
3. vue是组件化开发

MVC和MVVM的区别

• MVC （jQuery属于MVC）
  - M：model 数据层
  用于处理应用程序数据逻辑部分。通常模型对象负责在数据库中存取数据。
  - V：view 视图层
  应用程序中处理数据显示的本分。通常视图是依据模型数据创建的。
  - C: controller 控制层
  应用程序处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。
• MVVM（vue属于MVVM）
  - M: model 数据层
  - V：view 视图层
  - VM：viewModel 数据监视层
  - 数据层和视图层通过数据监视层进行转换

如何使用vue

1. 引入vue.js
2. 声明一个容器，通常给id=app
3. 创建一个vue对象 new Vue({})
4. data 不是一个对象，而是一个函数，通过return的方式定义

html代码

    <!-- vue容器 -->
    <div id="app">
        <!-- 视图层 -->
        年纪
                <!-- 插值表达式,将变量渲染在页面中 -->
        {{age}}
        如果能重来，我要选
        <input type="text" v-model="name">{{name}}
    </div>
1
2
3
4
5
6
7
8
9

js代码

    new Vue({
        el:"#app",  // 绑定视图层
        data(){
            // 数据层
            return{
                name:"李白",
                age:750
            }
        }
    })
1
2
3
4
5
6
7
8
9
10

vue的指令

vue的指令一般是这样的格式：v-xxx

单向绑定，内容直接渲染在页面上

• v-text=“变量” 不能解析标签
• v-html=“变量” 可以解析标签

        单向绑定
        <div v-text="text1"></div>
        <div v-html="text1"></div>
1
2
3

双向绑定，针对页面中可修改的数据，只能写一个变量名

• v-model=“变量名”

双向绑定
<input type="text" v-model="val">
<!-- 插值表达式 -->
{{val}}
1
2
3
4

我们可以使用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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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>
1
2
3
4
5
6
7
8
9
10

与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>
1
2
3
4
5

v-for

v-for的用处相当于数组的迭代操作
格式：

v-for="(item，index) in 数组"
1

• item 代表每一项
• index 代表索引
• 数组的位置我们也可以写数字，需要循环几次就写几

            <ul>
                <li v-for="r in arr">{{r}}</li>
            </ul>
1
2
3

v-on 绑定事件

格式： <button v-on:事件 = "触发事件进行的操作/方法/函数">点击事件</button>

简写： <button @事件= "触发事件进行的操作/方法/函数">点击2</button>

修饰符

• 指令修饰符
  .trim 去除首尾的空白

<input type="text" v-model.trim="val"> {{val}}
1

---

事件修饰符

• .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>
1
2
3
4
5
6
7
8
9
10
11

总结

进入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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

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;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

最后送自己一句：路漫漫其修远兮，吾将上下而求索。奋斗才能战胜困难，天生我才的前提其实是天道酬勤