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前，里面不需要{ }。（不常用）

文件转译

打开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中那样，总是要写一次类名，只要在想要控制的元素的花括号中写上hover或者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;}

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