wangxu123445678

阶段五模块二 Vue

内容输出来源：拉钩教育Java就业训练营

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

自底向上逐层应用：作为渐进式框架要实现的目标就是方便项目增量开发(即插即用)。

为什么使用Vue

声明式渲染: 前后端分离是未来趋势
渐进式框架: 适用于各种业务需求
简单易学: 国人开发,中文文档,不存在语言障碍,易于理解和学习

1 Vue.js基础

1.1 Vue.js的使用

在html页面使用script引入vue.js的库即可使用。

远程CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
本地
<script src="vue.min.js"></script>

1.2 Vue入门程序


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue入门title>
    
    
    
    
    <script src="vue.min.js">script>
head>
<body>
    
    <div id="app">
        
        {{name}}
    div>
body>
<script>
    //3. 创建vue实例
    var VM = new Vue({
        //定义 Vue实例挂载的元素节点,表示vue接管该div
        el:'#app',
        //4.定义model模型数据对象
        data:{
        	name:"哈拉少"
        }
    });
script>
html>

{{}}: 插值表达式

插值表达式的作用?
通常用来获取Vue实例中定义的数据(data)
属性节点中不能够使用插值表达式
el: 挂载点

el的作用 ?
定义 Vue实例挂载的元素节点,表示vue接管该区域

Vue的作用范围是什么 ?
Vue会管理el选项命中的元素,及其内部元素

el选择挂载点时,是否可以使用其他选择器 ?
可以,但是建议使用 ID选择器

是否可以设置其他的DOM元素进行关联 ?
可以但是建议选择DIV, 不能使用HTML和Body标签
data: 数据对象

Vue中用到的数据定义在data中

data中可以写复杂类型

渲染复杂类型数据的时候,遵守js语法

<script>
    //创建vue实例
    var VM = new Vue({
        el:'#app',
        data:{
        	name:"雷霆八嘎",
            //对象类型数据
            school:{
                name:"拉钩教育",
                mobile:"1001001"
        	},
            //数组类型
            names:["小斌","张百万","刘能"]
        }
    });
script>

1.3 Vue常用指令

指令是带有 v- 前缀的特殊属性。通过指令来操作DOM元素

1.3.1 v-text 指令

作用: 获取data数据, 设置标签的内容.
注意: 默认写法会替换全部内容,使用插值表达式{{}}可以替换指定内容.

<body>
    <div id="app">
        
        <h2 v-text="message">百度h2>
        
        <h2>{{message}}百度h2>
        
        <h2 v-text="message+1">h2>
        <h2 v-text="message+'abc'">h2>
    div>
    <script>
        var VM = new Vue({
            el:"#app",
            data:{
            message:"Java程序员"
            }
        })
    script>
body>

1.3.2 v-html指令

作用: 设置元素的 innerHTML (可以向元素中写入新的标签)

<body>
    <div id="app">
        
        {{message}}
        <h2 v-text="message">h2>
        <h2 v-html="message">h2>
        
        <h2 v-html="url">h2>
        <h2 v-text="url">h2>
    div>
body>
<script src="./js/vue.min.js">script>
<script>
    var VM = new Vue({
        el: "#app",
        data: {
        message: "Java程序员",
        url: "百度一下",
        },
    });
script>

1.3.3 v-on指令

作用: 为元素绑定事件, 比如: v-on:click,可以简写为 @click=“方法”
绑定的方法定义在 VUE实例的, method属性中

<div id="app">
    
    <input type="button" value="点击按钮" v-on:click="show">
    
    <input type="button" value="点击按钮" @click="show">
   
    <input type="button" value="双击按钮" @dblclick="show">
    
<h2 @click="changeFood">{{food}}h2>
div>
<script>
    var VM = new Vue({
        el:"#app",
        //通过methods ,专门存放Vue中的方法
        methods:{
            show:function(){
            alert("123!")
            },
            changeFood:function(){
                //使用this获取
                console.log(this.food);
                //在VUE中不需要考虑如何更改DOM元素, 重点放在更改数据,数据更新之后,使用数据
                的那个元素会同步更新
                this.food+="真好吃!";
            }
    	}
    })
script>

1.3.4 v-show指令

作用: v-show指令, 根据真假值,切换元素的显示状态

<body>
    <div id="app">
        <input type="button" value="切换状态" @click="changeShow" />
        <img v-show="isShow" src="./img/car.gif" />
        <img v-show="age > 18" src="./img/car.gif" />
    div>
body>
<script src="js/vue.min.js">script>
<script>
    var VM = new Vue({
        el: "#app",
        data: {
            isShow: true,
            age: 19,
            },
        methods: {
            changeShow: function () {
                //触发方法, 对isShow进行取反
                this.isShow = !this.isShow;
            },
        },
    });
script>

1.3.5 v-if指令

作用: 根据表达值的真假,切换元素的显示和隐藏( 操纵dom 元素 )

频繁切换使用 v-show，反之使用v-if

<body>
    <div id="app">
        <input type="button" value="切换显示状态" @click="changeShow">
        <img v-if="isShow" src="./img/car.gif" alt="">
    div>
body>
<script src="./vue.min.js">script>
<script>
    var VM = new Vue({
        el:"#app",
        data:{
        	isShow:false
        },
        methods: {
            changeShow:function(){
            	this.isShow = !this.isShow;
            }
        }
    })
script>

1.3.6 v-bind

作用: 设置元素的属性（比如:src,title,class）

<body>
    <div id="app">
        
        <img v-bind:src="imgSrc" alt="">
        
        <img :src="imgSrc" alt="" :title="imgTitle">
        
        <div :style="{ fontSize: size + 'px'}">v-bind指令div>
    div>
body>
<script src="./vue.min.js">script>
<script>
    var VM = new Vue({
        el:"#app",
        data:{
            imgSrc:"./img/lagou.jpg",
            imgTitle:"拉钩教育",
            size:100
        }
    })
script>

1.3.7 v-for指令

作用: 根据数据生成列表结构

<body>
    <div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">
        <ul>
            
            <li v-for="(item,index) in arr">
            	{{index+1 }}城市: {{item}}
            li>
        ul>
        
        <h2 v-for="p in persons" v-bind:title="p.name">
        	{{p.name}}
        h2>
    div>
body>
<script src="./vue.min.js">script>
<script>
    var VM = new Vue({
        el:"#app",
        data:{
            //普通数组
            arr:["上海","北京","天津","杭州"],
            //对象数组
            persons:[
                {name:"尼古拉斯·赵四"},
                {name:"莱安纳多·小沈阳"}
            ]
        },
        methods: {
        	add:function(){
                //push 添加
                this.persons.push({name:"多利安·刘能"})
            },
            remove:function(){
                this.persons.shift();
            }
        }
    })
script>

数组经常和 v-for结合使用,数组有两个常用方法:
push() 向数组末尾添加一个或多个元素
shift() 把数组中的第一个元素删除

语法是: (item,index) in 数据
item和index 可以结合其他指令一起使用
数组的长度变化,会同步更新到页面上,是响应式的

1.3.8 v-on指令

传递自定义参数 : 函数调用传参
事件修饰符: 对事件触发的方式进行限制

<body>
    <div id="app">
        
        <input
            type="button"
            value="礼物刷起来"
            @click="showTime(666,'爱你老铁!')"
        />
        
        <input type="text" @keyup.enter="hi" />
    div>
body>
<script src="./js/vue.min.js">script>
<script>
    var VM = new Vue({
        el: "#app",
        data: {},
        methods: {
            showTime: function (p1, p2) {
            console.log(p1);
            console.log(p2);
        	},
            hi: function () {
            	alert("你好吗?");
            },
        },
    });
script>

1.3.9 MVM模式

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式.
MVVM模式将页面,分层了 M 、V、和VM ,解释为：
Model: 负责数据存储
View: 负责页面展示
View Model: 负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ibx55bDZ-1614681371432)(Vue.assets/任务一 Vue.jpg)]

1.3.10 v-model指令

作用: 获取和设置表单元素的值(实现双向数据绑定)
双向数据绑定
单向绑定: 就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。
双向绑定: 用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。

什么情况下用户可以更新View呢？
填写表单就是一个最直接的例子。当用户填写表单时，View的状态就被更新了，如果此时MVVM框架可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定：

<body>
    <div id="app">
        <input type="button" value="修改message" @click="update" />
        
        
        
        <input type="text" v-model="message" />
        <input type="text" v-model="password" />
        <h2>{{message}}h2>
    div>
body>
<script src="./js/vue.min.js">script>
<script>
    //VM 业务逻辑控制
    var VM = new Vue({
        el: "#app",
        //Model 数据存储
        data: {
            message: "拉钩教育训练营",
            password: 123,
        },
        methods: {
            update: function () {
            	this.message = "拉钩";
            },
        },
    });
script>

2 axios

VUE中结合网络数据进行应用的开发
目前十分流行网络请求库,专门用来发送请求,其内部还是ajax,进行封装之后使用更加方便
axios作用: 在浏览器中可以帮助我们完成 ajax异步请求的发送.

2.1 axios入门

1.导包

也可导入本地包axios.min.js


<script src="https://unpkg.com/axios/dist/axios.min.js">script>

请求方式,以GET和POST举例

GET

axios.get(地址?key=value&key2=value2).then(function(response){},function(error){});

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4RHeJrlg-1614681371434)(Vue.assets/任务一 Vue-1614674171302.jpg)]

POST

axios.post(地址,{key:value,key2:value2}).then(function(response)
{},function(error){})

根据接口文档, 访问测试接口,进行测试

<body>
    <input type="button" value="get请求" id="get">
    <input type="button" value="post请求" id="post">
body>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script>
    /*
    请求地址:https://autumnfish.cn/api/joke/list
    请求方法:get
    请求参数:num(笑话条数,数字)
    响应内容:随机笑话
    */
    document.getElementById("get").onclick=function(){
        axios.get("https://autumnfish.cn/api/joke/list?num=1")
        .then(function(response){
            //请求成功,调用
            console.log(response);
        },function(error){
            //请求失败,调用
            console.log(error)
        });
  	}
    /*
        请求地址:https://autumnfish.cn/api/user/reg
        请求方法:post
        请求参数:username(用户名,字符串)
        响应内容:注册成功或失败
        */
    document.getElementById("post").onclick=function(){
        axios.post("https://autumnfish.cn/api/user/reg",{username:"张百万"})
        .then(function(response){
        	console.log(response);
        },function(error){
        	console.log(error);
        });
    }
script>

axios 必须导包才能使用
使用get或者post方法,就可以发送请求
then方法中的回调函数,会在请求成功或者请求失败的时候触发
通过回调函数的形参可以获取响应的内容,或者错误信息

2.2 获取笑话案例

<body>
    <div id="app">
        <input type="button" value="点击获取一个笑话" @click="getJoke">
        <p>{{joke}}p>
    div>
body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script>
    /*
    请求地址:https://autumnfish.cn/api/joke
    请求方法:get
    请求参数:无
    响应内容:随机笑话
    */
    var VM = new Vue({
        el:"#app",
        data:{
        	joke:"笑笑更健康"
        },
        methods: {
            getJoke:function(){
                console.log(this.joke);//笑笑更健康
                var that = this; //把this保存起来
                //异步访问
                axios.get("https://autumnfish.cn/api/joke").then(
                    function(response){
                        //获取data中的笑话
                        console.log(response.data);
                        //console.log(this.joke); //undefined 没有获取到this
                        that.joke=response.data;
                    },
                    function(error){}
                )
            }
        }
    })
script>

axios回调函数中this指向已经改变,无法访问data中的数据
解决方案: 将this进行保存,回调函数中直接使用保存的this即可

3 computed计算属性

在Vue应用中，在模板中双向绑定一些数据或者表达式，但是表达式如果过长，或者逻辑更为复杂时，就会变得臃肿甚至难以维护和阅读。

computed 的作用: 减少运算次数, 缓存运算结果. 运用于重复相同的计算.

<body>
    <div id="app">
        
        
        <h1>{{res2}}h1>
        <h1>{{res2}}h1>
    div>
body>
<script src="vue.min.js">script>
<script>
    var VM = new Vue({
        el: "#app",
        data: {
            a: 10,
            b: 20,
        },
        methods: {
            res: function () {
                console.log("res方法执行");
                return this.a * this.b;
            },
        },
        //使用计算属性进行优化 减少运算次数,用于重复相同的运算
        computed: {
            res2: function () {
                console.log("res2方法执行");
                return this.a * this.b;
            },
        },
    });
script>

4 filter过滤器

过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。

4.1 过滤器使用位置

双括号插值内

{{ msg | filterA }} 
msg是需要处理的数据, filterA是过滤器, | 这个竖线是管道,通过这个管道将数据传输给过滤器进行过滤 加工操作

v-bind绑定的值的地方。

 {{ msg }}

4.2 过滤器

4.2.1 局部过滤器

通过过滤器给电脑价格前面添加一个符号¥

<body>
    <div id="app">
    	<p>电脑价格: {{price | addIcon}}p>
    div>
body>
<script src="./vue.min.js">script>
<script>
    var VM = new Vue({
        el: "#app", //挂载点
            data: {
            	price: 200,
            },
        methods: {}, //方法
        computed: {}, //计算属性
        //局部过滤器
        filters: {
            //处理函数,value = price ,是固定参数
            addIcon(value) {
            	return "¥" + value;
            },
        },
    });
script>

4.2.2 全局过滤器

将用户名开头字母大写

先创建全局过滤器，再创建Vue实例

<body>
    <div id="app">
    	<p>{{user.name | changeName}}p>
    div>
body>
<script src="./vue.min.js">script>
<script>
    //在创建Vue实例之前 创建全局过滤器
    Vue.filter("changeName", function (value) {
        //将姓名开头字母大写,然后再重新拼接
        return value.charAt(0).toUpperCase() + value.slice(1);
    });
    var VM = new Vue({
        el: "#app", //挂载点
        data: {
        	user: { name: "tom" },
        },
    });
script>

5 watch侦听器

Vue.js 提供了一个方法 watch，它用于观察Vue实例上的数据变动。
作用: 当你有一些数据需要随着其它数据变动而变动时，可以使用侦听属性

监听姓名变化,实时显示

<body>
    <div id="app">
        <label>名：<input type="text" v-model="firstName" />label>
        <label>姓：<input type="text" v-model="lastName" />label>
        {{fullNameComputed}}
    div>
body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            firstName: "",
            lastName: "",
            fullName: "",
        },
        //监听，程序在运行的时候，实时监听事件
        watch: {
            //参数说明：1、新值，2、旧值
            firstName:function(newValue, oldValue) {
            	this.fullName = newValue + " " + this.lastName;
            },
            lastName:function(newValue, oldValue) {
            	this.fullName = this.firstName + " " + newValue;
            },
        },
        computed: {
            fullNameComputed() {
            	return this.firstName + " " + this.lastName;
            },
        },
    });
script>

6 Component组件

组件（Component）是自定义封装的功能。在前端开发过程中，经常出现多个网页的功能是重复的，而且很多不同的页面之间，也存在同样的功能。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

vue的组件有两种: 全局组件和局部组件

组件名以小写开头，采用短横线分割命名: 例如 hello-Word
组件中的data 必须是一个函数,注意与Vue实例中的data区分
在template模板中, 只能有一个根元素

6.1 全局组件

6.2 局部组件

相比起全局组件，局部组件只能在同一个实例内才能被调用。局部组件的写法和全局组件差不多。唯一不同就是：局部组件要写在Vue实例里面。

<body>
    <div id="app">
    	<web-msg>web-msg>
    div>
body>
<script src="./vue.min.js">script>
<script>
    var VM = new Vue({
        el: "#app",
        components: {
            //组件名称
            "web-msg": {
            //组件内容
                template: "{{msg1}}
{{msg2}}
",
                data() {
                    return {
                        msg1: "开发ing...",
                        msg2: "开发完成!",
                    };
                },
            },
        },
    });
script>

7 Vue生命周期

7.1 钩子函数

钩子函数是在一个事件触发的时候，在系统级捕获到了他，然后做一些操作。

函数	说明
beforeCreate()	在创建Vue实例之前,可以执行这个方法. 例如加载动画操作
created()	实例创建完成,属性绑定好了,但是DOM页面还没有生成.
beforeMount()	模板已经在内存中编辑完成了，尚未被渲染到页面中.
mounted()	内存中的模板已经渲染到页面，用户已经可以看见内容.
beforeUpdate()	数据更新的前一刻 , 组件在发生更新之前,调用的函数
updated()	updated执行时，内存中的数据已更新，并且页面已经被渲染
beforeDestroy ()	钩子函数在实例销毁之前调用
destroyed ()	钩子函数在Vue 实例销毁后调用

8 Vue Router 路由

8.1 什么是路由

在Web开发中，路由是指根据URL分配到对应的处理程序。路由允许我们通过不同的 URL 访问不同的内容。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EJsIXOtk-1614681371435)(Vue.assets/任务一 Vue-1614680587731.jpg)]

8.2 路由相关概念

router

是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用（SPA）变得易如反掌 ,router 就相当于一个管理者，它来管理路由。
route

ruter相当于路由器, route就相当于一条路由.比如: Home按钮 => home内容，这是一条route,news按钮 => news内容，这是另一条路由。
routes

是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， {about按钮 => about 内容}]
router-link组件

router-link 是一个组件，是对标签的一个封装. 该组件用于设置一个导航链接，切换不同 HTML内容。 to 属性为目标地址，即要显示的内容
router-view 组件

路由导航到指定组件后,进行渲染显示页面.

8.3 使用路由

1.Vue.js 路由需要载入 vue-router 库

//方式1: 本地导入
<script src="vue-router.min.js">script>
//方式2: CDN
<script src="https://unpkg.com/vue-router/dist/vue-router.js">script>

2.使用步骤

定义路由所需的组件
定义路由每个路由都由两部分 path (路径) 和component (组件)
创建router路由器实例 ,管理路由
创建Vue实例, 注入路由对象, 使用$mount() 指定挂载点

Vue 的 $m o u n t () 为手动挂载，在项目中可用于延时挂载（例如在挂载之前要进行一些其他操作、判断等），之后要手动挂载上。 n e w V u e 时， * * e l * * 和 * *$ mount**并没有本质上的不同。

3.HTML

<body>
    <div id="app">
        <h1>渣浪.comh1>
        <p>
            
            <router-link to="/home">go to homerouter-link>
            <router-link to="/news">go to newsrouter-link>
        p>
        
        <router-view>router-view>
    div>
body>

4.JS

<script src="./vue.min.js"></script>
<script src="./vue-router.min.js"></script>
<script>
    //1.定义路由所需的组件
    const home = { template: "首页
" };
    const news = { template: "新闻
" };
    //2.定义路由 每个路由都有两部分 path和component
    const routes = [
        { path: "/home", component: home },
        { path: "/news", component: news },
    ];
    //3.创建router路由器实例,对路由对象routes进行管理.
    const router = new VueRouter({
    	routes: routes,
    });
    //4.创建Vue实例, 调用挂载mount函数,让整个应用都有路由功能
    const VM = new Vue({
    	router,
    }).$mount("#app"); //$mount是手动挂载代替el
</script>

router-link 组件来导航,to属性指定链接 -->
go to home
go to news

```