Vue学习的第一天

浏览器引擎 渲染引擎/js引擎 html+css/js

sass css的封装 css预处理 less:bootstrap

sass 是css的扩展语言 减少css代码重复 兼容所有版本css

sass 变量 嵌套 函数 混入

sass .scss（新版） .sass（旧版）

.scss 扩展到css3 代码更加偏向于css

.sass 版本3.0之前 没有{ }

sass 文件转译

1.cmd控制台

2.插件

3.工具

4.项目自带

cmd 转译 需要安装sass 用npm安装 node.js V8引擎+JS底层库

通过cmd安装 npm install sass -g

转译 到项目文件夹下 地址栏下启动cmd

sass .\sass\文件.scss .\css\文件.css

如果有修改 需要手动转译一下

监听:sass --watch .\sass\zhuanyi.scss .\css\zhuanyi.css

scss中可以使用：

js 里 var let const a = ""

字符串 数字 布尔

$声明变量

作用域  全局 局部

$w:300px;   //全局
.box{
    $font:30px; //局部
    $c:50px!global;    //局部转全局

    width: $w; 
    height: $w;
    background: #0f0;
    font-size: $font;
}

.box2{
    font-size: $c;
}

引入其它的sass文件

@import "common.scss"; //变量也一起引入

一个通用的scss文件  公共样式 样式初始化  所有的全局变量

$c:100px;
$d:50px;
.box{
    height: $a; 
    background-color: $b;
    .fu{
        height: $c;
        background: #00f;
        .zi{
            height: $d;
            background: #f00;
        }
    }
    &:hover{
        background: yellow;
        span{
            color: aqua;
        }
    }
}
// &:hover{}
// &:nth-of-type()

sass 封装一套样式

混入 mixin

@mixin 混入名(e,v){ }

引用

@include 混入名(x,y)

@mixin box(){
    width: 200px;
    height: 200px;
    background: #0f0;
}
.box{
    @include box()
}

@mixin style($a,$b,$c){
    width: $a;
    height: $b;
    background: $c;
}

.box{
    @include style(100px, 100px, #0f0)
}

@extend 继承  继承其它dom元素的样式

相当于css并集选择器

.aa{
    width: 100px;
    height: 200px;
    background: #00f;
}

.box{
    @extend .aa;
    font-size: 30px;
    color: #fff;
}

 框架  JQ  封装好的js框架

React angular  TS  js的超集

创始人：尤雨溪

MVC(jq,原生) MVVM(vue)

MVC  M:model  数据层   V:view  视图层    c:controller(控制层)

MVVM M:model  数据层  v:view  视图层   VM:viewModel(数据监视层)

view  <-> viewModel <-> model

双向数据绑定

vue的核心： 数据驱动  组件化

JQ和vue的区别

        1.vue的性能高

        2.vue的dom操作少

        3.vue是组件化开发

    <div id="app">
        <!-- 视图层 -->
        {{nickName.split("").reverse().join("")}}
        <!-- 插值表达式    object.defineProperty -->
        <input type="text" v-model="age">{{age}}
    </div>

<script>
    let vm = new Vue({
        el:"#app",  //绑定视图层
        // data:{},
        data(){
            // 数据层
            return{
                nickName:"马士洋",
                age:18
            }
        }
    })
</script>

如何使用vue

        1.申明一个容器，给id= "app"

        2.创建一个vue对象，new Vue = ({})

        3.data不是一个对象，而是一个函数，通过return方式定义

        4.引入vue.js

vue指令-1

vue指令  v-xxx

单向绑定 直接渲染至页面

v-text ：文本输入

v-html ：可解析标签

双向绑定

v-model="变量名" 涉及到可修改数据  只能写一个变量

        <input type="text" v-model="userName"> {{userName}}
        <br>
        <!-- 单选 复选  下拉框 -->
        <!-- 单选按钮 -->
        <input type="radio" v-model="sex" value="男">男
        <input type="radio" v-model="sex" value="女">女
        <br>{{sex}}

        <!-- 复选框 -->
        爱好：<input type="checkbox" v-model="hobby" value="吃饭">吃饭
        <input type="checkbox" v-model="hobby" value="睡觉">睡觉
        <input type="checkbox" v-model="hobby" value="打游戏">打游戏
        <br>{{hobby}}<br>

        <!-- 下拉框 -->
        城市：<select v-model="city">
            <option value="上海">上海</option>
            <option value="南京">南京</option>
            <option value="堡垒">堡垒</option>
        </select>
        <br>
        {{city}}<br>

v-if

删除dom元素  

页面只判断一次的用v-if  一般用于登录的显示

v-show

添加display：none样式  css样式隐藏元素

对于频繁切换的用v-show  比如轮播图

<div v-if="flag">v-if</div>
<div v-show="flag">v-show</div>
//需要定义flag值

        <div><input type="radio" v-model="num" value="1">1</div>
        <div><input type="radio" v-model="num" value="2">2</div>
        <div><input type="radio" v-model="num" value="3">3</div>
        <div class="box" v-if="num==1">1</div>
        <div class="box" v-if="num==2">2</div>
        <div class="box" v-if="num==3">3</div>
        <!-- v-if v-else-if  v-else-->
        <div>
            <span v-if="score>=90">优秀</span>
            <span v-else-if="score>=80">良好</span>
            <span v-else-if="score>=70">中等</span>
            <span v-else-if="score>=60">及格</span>
            <span v-else>退费去吧</span>
        </div>

        <div><input type="radio" v-model="num" value="1">1</div>
        <div><input type="radio" v-model="num" value="2">2</div>
        <div><input type="radio" v-model="num" value="3">3</div>
        <div class="box" v-show="num==1">1</div>
        <div class="box" v-show="num==2">2</div>
        <div class="box" v-show="num==3">3</div>

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

item  每一项内容

index 索引值  i

        <ul>
            <li v-for="(item,index) in arr">
                {{index}}--{{item.name}}--{{item.age}}
            </li>
        </ul>
        <table>
            <thead>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
            </thead>
            <tbody>
                <tr v-for="(r,i) in arr">
                    <td>{{i+1}}</td>
                    <td>{{r.name}}</td>
                    <td>{{r.age}}</td>
                </tr>
            </tbody>
        </table>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                nickName: "<span>马跃磊</span>",
                userName: "马士洋",
                sex: "",
                hobby: [],
                city: "上海",
                flag: false,
                num: 0,
                score: 50,
                arr: [{
                        name: "彭忠杰",
                        age: 18
                    },
                    {
                        name: "马跃磊",
                        age: 38
                    },
                    {
                        name: "马士洋",
                        age: 8
                    },
                    {
                        name: "曹帅",
                        age: 5.5
                    },
                ]
            }
        },
    });
</script>

v-on:click

缩写@触发事件 = "函数/方法"

<button v-on:click="a">点击</button>彭忠杰今年{{num}}
<button @click="a">点击</button>彭忠杰今年{{num}}

指令修饰符

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

事件修饰符

处理事件流   @事件.修饰符

.stop 阻止冒泡

        <div class="fu" @click="fu">
            <div class="zi" @click.stop="zi"></div>
        </div>

.prevent  阻止默认行为

<a href="http://www.baidu.com" @click.prevent="a">去百度</a>

.capture  阻止捕获  父级事件

        <div class="fu" @click.capture="fu">
            <div class="zi" @click="zi"></div>
        </div>

.self 只自己触发

跳过冒泡事件 值捕获在该元素发生的方法

        <div class="fu" @click="fu">
            <div class="zi" @click.self="zi">
                <div class="bb" @click="a"></div>
            </div>
        </div>

.once 只触发一次

<button @click.once="a">按钮</button>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    num: 18,
                    nickName: ""
                }
            },
            methods: {
                a() {
                    this.num++
                    console.log(this.num);
                    if (this.num >= 20) {
                        console.log("该结婚了");
                    }
                },
                fu() {
                    console.log("fu");
                },
                zi() {
                    console.log("zi");
                }
            }
        });
    </script>