VUE第一天学习

2020-02-10 本文已影响0人誩先生

一、vue简介

1.为什么要学习vue框架

framework，能够让程序人员更好的专注于业务逻辑，更快、更高效的开发网站程序。

三大框架

angular 谷歌 2009

react FaceBook 2013

vue 尤雨溪 2014 发布 2016加入阿里

前端饭碗级别的技能

使用比较广泛

生态好（插件、UI库）

2.vue是什么

vue和jquery一样是前端的js库

jquery解决的是原生js选择dom节点困难的问题

vue前端模块化开发方法，属于前端微架构

vue以数据驱动的一种无DOM操作方式

3.如何学习vue

解决问题能力：【百度，关键词、问同学、问老师】

学习能力：【阅读文档能力、阅读源码的能力】

官网：cn.vuejs.org

4.vue优点

(1)渐进式框架

做自己应该做的事情（必须做的），不主张、不强调

(2)轻量级框架

(3)数据双向绑定【MVVM设计模式】

(4)指令系统 v-xxxx指令

(5)单页面应用 single page application SPA

缺点：

(1)兼容性 ie9以下

(2)错误提示不是很明确

5.vue的核心

数据驱动页面、组件化

6.mvvm设计模式

m:model数据模型层

v:view视图层

vm:viewmodel 视图模型层

二、vue基础

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

1.下载

(1)script设置src属性

(2)npm

2.使用

<!-- 第一步：引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 第二步：设置作用范围（挂载点） -->
<div id="app">
    <!-- 模板语法：mustache -->
     {{ msg }} 
</div>
<script>
    // 第三步：实例化vue类
    new Vue({
        el:"#app",//element相当于querySelector
        data:{
            msg:"欢迎来到ujiuye学习web前端"
        }
    });
</script>

3.基本指令

(1)展示内容

{{ }} mustache语法，单行js语法

v-html 可以解析html标签及语法（非常危险，XSS，必须html内容可控，必要相信用户输入的内容）

v-text

(2)判断【重点】

v-if v-else

v-else-if

v-show

v-if 只有条件表达式满足时，指定的标签才会在页面结构中存在并显示

v-show 不论条件表达式是否满足，指定的标签都会在页面结构中存在，当表达式满足时，会在页面中显示，否则就会增加一个display:none。

使用场景：如果需要频繁的切换某个标签是显示还是不显示，应该用v-show

(3)v-for 循环【重点】

(4)v-model 【重点】表单元素数据双向绑定

(5)v-on:具体的事件名称 --不仅仅可以用click

v-on:事件名可以简写成 @事件名

(6)v-bind 属性绑定

v-bind:属性名(可以是系统自带的属性，也可以是自定义的属性)

v-bind:属性名可以简写成:属性名

特殊的属性：

class 字符串或者对象

style 对象

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本指令</title>
    <script src="./js/vue.js"></script>
    <style>
        img{
            width:300px;
            height: 300px;
        }
        .red{
            color:red;
        }
        .green{
            color:green;
        }
        .big{
            font-size:30px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 内容展示 -->
        <p>{{ str }}</p>
        <p v-text="num"></p>
        <p v-html="str"></p>
        <hr>
        <!-- 条件判断 -->
        <p v-if="num>5">变量num大于5</p>
        <p v-else>变量num不大于5</p>
        <!-- <p v-else-if="表达式">变量num不大于5</p> -->
        <p v-show="show">哈哈</p>
        <hr>
        <!-- v-for循环 -->
        <ul>
            <li v-for="brand of arr">{{ brand }}</li>
        </ul>
        <hr>
        <!-- v-model指令 数据双向绑定 -->
        <input type="text" v-model="num">
        <input type="radio" v-model="sex" value="男">男
        <input type="radio" v-model="sex" value="女">女
        <p>选中的是:{{ sex }}</p>
        <hr>
        <!-- v-on事件绑定 -->
        <!-- {{ say() }} -->
        <!-- <button v-on:click="say">点击</button> -->
        <!-- 需要传递参数时，必须要加括号 -->
        <button @click="say('小明')">点击</button>
        <button @contextmenu="say('小明')">右键</button>
        <hr>
        <!-- 属性绑定 -->
        <!-- <img v-bind:src="imgarr[imgidx]"> -->
        <img :src="imgarr[imgidx]">
        <button @click="imgchange">下一张</button>
        <!-- 特殊的属性 -->
        <p :class="msgClass">{{ msg }}</p>
        <button @click="msgClass='green'">点击改变颜色</button>
        <!-- 对象格式，表达式为true表示使用指定的类名，为false时表示不使用指定的类型 -->
        <p :class="{red:false,big:true}">{{ msg }}</p>
        <p :style="styleA">{{ msg }}</p>
        <button @click="changeStyle">动态style</button>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                num:1,
                str:"<em>hello</em>",
                show:false,
                arr:['苹果','华为','小米','vivo'],
                sex:'男',
                imgidx:0,
                imgarr:[
                    'http://t7.baidu.com/it/u=3204887199,3790688592&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1581910111&t=590ab7fbfe87e8c9a9d2f1bc438531af',
                    'http://t9.baidu.com/it/u=3363001160,1163944807&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1581910111&t=6bd78dba28a616e8a13cb6cfdede2e5b',
                    'http://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1581910111&t=b9edd5cd31fb6818e9db4bcf424ba7a5'
                ],
                msg:'疫情当前--不要出门，静待春暖花开',
                msgClass:'red big',
                styleA:{
                    color:'blue'
                }
            },
            methods:{
                say:function(name){
                    alert('hello'+name);
                },
                imgchange(){
                    this.imgidx++;
                    if(this.imgidx>2){
                        this.imgidx=0;
                    }
                },
                changeStyle:function(){
                    this.styleA = {
                        color:'red'
                    }
                }
            }
        })
    </script>
</body>
</html>

三、事件修饰符

1.prevent 阻止默认事件

<button @contextmenu.prevent="contextmenu">点击</button>
<form @submit.prevent="">
    <input type="text">
    <!-- button在form表单中不写type属性，默认是submit -->
    <button>提交</button>
</form>

2.stop阻止事件冒泡

<div class="box" @click="boxClick">
    <div class="small" @click.stop="smallClick"></div>
</div>

3.capture 捕获事件

在事件冒泡的情况下，哪个事件有capture修饰符，那么这个事件就优先执行（提升了事件的优先级）

<div class="box" @click.capture="boxClick">
    <div class="small" @click="smallClick"></div>
</div>

4.self修饰符

self修饰符的作用是控制操作的元素是它本身时才会触发对应的事件函数

5.once修饰符

控制指定的事件只执行一次

四、表单元素修饰符

1.lazy

表单元素添加了lazy修饰符之后，不会实时地进行数据双向绑定，而是执行change事件时才会进行数据的双向绑定

2.number

不改变用户行为，而是改变数据的类型为number

3.trim

过滤用户输入内容左右两侧的空格

五、其他修饰符

keydown.down

.up

.left

.right

keycode值

.13

keyup

百度搜索案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符案例</title>
    <script src="./js/vue.js"></script>
    <style>
        .selected{
            background-color: red;
            color:#fff;
        }
    </style>
</head>
<body>
    <div id="box">
        <input type="text" v-model="str" 
            @keydown.down="down"
            @keydown.up.prevent="up"
            @keydown.13="enter"
        >
        <button @click="searchBd">搜索</button>
        <ul>
            <li v-for="(item,index) of arr" v-if="4>index" :class="{selected:index===idx}">{{ index }}--{{ item }}</li>
        </ul>
    </div>
    <script>
        var vue = new Vue({
            el:"#box",
            data:{
                str:'',
                idx:-1,
                arr:[]
            },
            methods:{
                searchBd(){
                    // 模拟script标签进行跨域请求
                    // 创建一个script标签
                    var s = document.createElement("script");
                    // 设置script标签的src属性
                    s.src = "http://suggestion.baidu.com/su?cb=callback&wd="+this.str;
                    // 把script标签追加到页面中
                    document.body.appendChild(s)
                },
                down(){
                    console.log('方向键向下执行了')
                    this.idx++;
                    if(this.idx>=4){
                        this.idx = -1;
                    }
                    console.log(this.idx)
                    this.str = this.idx==-1? '' : this.arr[this.idx]
                },
                up(){
                    console.log('方向键向上执行了');
                    this.idx--;
                    if(this.idx < -1){
                        this.idx = 4;
                    }
                },
                enter(){
                    console.log('回车键执行了')
                    window.open('https://www.baidu.com/s?wd='+this.str);
                }
            }
        });
        function callback(result){
            // result.s.splice(4,6);
            // console.log(result.s);
            vue.arr = result.s
        }
    </script>
</body>
</html>

六、侦听器

监听变量，当变量值发生改变的时候，就会触发指定的函数。

1.普通监听

语法格式(一)：

new Vue({

watch:{

要监听的变量名(){

...

}

})

语法格式(二)

new Vue({
    watch:{
        要监听的变量名:{
            handler(newVal,oldVal){
                ...
            }
        }
    }
})

2.深度监听

如果要监听的变量类型是对象或者数组的话，普通监听方式就不起作用了。

要用到深度监听

语法格式：

new Vue({
    watch:{
        要监听的变量名:{
            handler(newVal,oldVal){
                ...
            },
            deep:true//才会进行深度监听
        }
    }
})

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侦听器</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="str">
        <ul>
            <li v-for="item of arr">{{ item }}</li>
        </ul>
        <button @click="test">点击</button>

        <input type="text" v-model="userinfo.name">
    </div>
    <script>
        var vue = new Vue({
            el:"#app",
            data:{
                str:"",arr:[],
                userinfo:{name:'zhang'}
            },
            methods:{
                test(){
                    var a = 20
                    var b = a
                    console.log(a,b)
                    b = 10;
                    console.log(a,b)
                    var jsona = { name:'zhang',age:20 }
                    var jsonb = jsona;
                    jsonb.age = 18
                    console.log(jsona)
                    console.log(jsonb)
                }
            },
            watch:{
                // 普通监听
                // str(){
                //     // console.log('str变量发生了改变')
                //     var script = document.createElement("script");
                //     script.src = "http://suggestion.baidu.com/su?cb=getContent&wd="+this.str;
                //     document.body.appendChild(script)
                // }
                str:{
                    handler(newVal,oldVal){
                        this.arr = []
                        if(newVal!=''){
                            var script = document.createElement("script");
                            script.src = "http://suggestion.baidu.com/su?cb=getContent&wd="+this.str;
                            document.body.appendChild(script)
                        }
                    }
                },
                // 深度监听
                userinfo:{
                    handler(){
                        console.log('用户信息被修改了')
                    },
                    deep:true
                }
            }
        });
        function getContent(result){
            vue.arr = result.s
        }

    </script>
</body>
</html>

作业：

请求接口实现功能

例如：https://api.asilu.com/weather/?city=城市名称&callback=回调函数名称

要求结合监听实现实时效果，只要内容变化，就进行接口的请求，并把结果显示在页面上。