Vue入门教程_html-js-css

Vue实战 1.0 简介

什么是vue?

渐进式 JavaScript 框架,让我们很少的 *** 作页面dom,甚至不 *** 作,就可以实现视图与数据的绑定在使用vue的时候,不要引用jQuery

**渐进式 **

易用

已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！

灵活

不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。

高效

20kB min+gzip 运行大小超快虚拟 DOM 最省心的优化

1.1 vue 版本选择(开发,与生产)


<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>


<script src="https://cdn.jsdelivr.net/npm/vue@2">script>

1.2 第一个入门程序




    
    Title



    {{ msg }}
    {{ user.name }}

el 表示vue对象的作用范围,在该范围内都可以使用vue的语法data 表示存放vue对象的一些数据,绑定的数据可以通过{{数据名}} 取出来使用{{}} 取值的时候可以书写表达式列如{{ name.toLocaleUpperCase()+“oop” }}el 中可以书写任意的css选择器,在使用vue开发是建议使用id选择器

1.3 v-text与v-html

v-text

可以获取vue中data的数据,以文本的形式渲染到元素中(类似于jQuery中的innerText)

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    <del v-text="msg">del> 
    <span v-text="msg">span>
div>
body>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg: "你好"
        }
    });
script>
html>

总结
使用{{}}代表插值表达式于v-text的区别
使用v-text会将标签中原有的数据覆盖,{{}}不会覆盖使用v-text可以避免在网络延迟是,出现数据未渲染的闪烁情况,{{}}在网络情况差时渲染数据,会出现闪烁情况

v-html

可以获取vue中data的数据,以html的形式渲染到元素中(类似于jQuery中的innerHTML)

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    <span v-html="msg">span>
div>
body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg: "你好"
        }
    });
script>
html>

总结
使用{{}}代表插值表达式于v-html的区别
使用v-html会将标签中原有的数据覆盖,{{}}不会覆盖使用v-html可以避免在网络延迟是,出现数据未渲染的闪烁情况,{{}}在网络情况差时渲染数据,会出现闪烁情况使用v-html可以解析html,而{{}}不会

1.4 vue事件绑定(v-on)

语法

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    <button type="button" v-on:click="getDate">点我显示时间button>
    <span v-text="msg">span>
div>
body>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg:""
        },
        //methods用来定义vue中的事件
        methods: {
            getDate: function () {
                //在事件函数中,this就是vue实例
                this.msg = new Date();
            }
        }
    });
script>
html>

事件总结在vue中使用v-on:事件名完成事件于元素的绑定在vue中事件函数统一的放在vue对象实例中methods属性管理在vue事件函数中this就代表vue对象实例

事件绑定简化写法

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    <span v-text="age">span>
    <input type="button" value="点击我增长一岁" @click="increment">
    
    <input type="button" value="点击我增长一岁" v-on:click="increment">
div>
body>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            age: 16
        },
        methods: {
            increment: function () {
                this.age++;
            }
        }
    });
script>
html>

事件绑定简化写法总结日后在开发vue中可以使用 @事件名=事件函数的方式,替换v-on:事件名=事件函数的写法

事件函数简写

methods: {
    // increment: function () {
    //     this.age++;
    // }
    increment() {
        this.age++;
    }
}

1.5 v-show v-if v-bind

V-show 用来表示标签是否显示(其底层是控制的是display属性)不会修改DOM

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    <input type="button" value="点击我显示时间" @click="showdate">
    
    <p v-show="show" v-text="msg">p>
div>
body>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            show: false,
            msg: ""
        }, methods: {
            showdate() {
                this.msg = new Date();
                this.show = !this.show;
            }
        }

    });
script>
html>

总结在使用v-show可以直接使用bool值控制,可可以书写bool表达式控制

v-if 于v-show差不多不过(底层控制的是DOM元素) 会修改DOM

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<div id="app">
    <ul>
        <li v-if="msg==='男'">男li>
        <li v-else-if="msg==='女'">女li>
        <li v-else>双性li>
    ul>
    <input type="button" value="男" @click="sex('男')"><br>
    <input type="button" value="女" @click="sex('女')"><br>
    <input type="button" value="中性" @click="sex('中性')"><br>

div>

body>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg: "男"
        }, methods: {
            sex(data) {
                this.msg = data;
            }
        }

    });
script>
html>

v-bind(重点)用来把标签的属性绑定到vue对象属性上

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .aa {
            color: pink;
            display: block;
            background: black;
            width: 100px;
        }
    style>
head>
<body>
<div id="app">
    <input type="text" v-bind:value="msg">
    
    <span :class="css">你好span>
div>
body>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg: "请输入文本",
            css: "aa"
        }, methods: {}

    });
script>
html>

总结 v-bind可以将标签的属性,绑定到vue实例对象属性中, 可以简写为:属性=vue对象中的属性(单向绑定)

1.6 v-for

v-for用来遍历属性

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    <span>{{ user }}span>
    <hr>
    
    
    
    
    <span v-for="(value,key,index) in user" :key="user.id">
        [{{ index }}]{{ key }}:{{ value }}<br>
    span>
    <hr>
    
    <ul style="list-style-type: circle">
        <li v-for="(v,index) in arr">
            [{{ index }}]{{ v }}
        li>
    ul>

div>
body>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            user: {
                id: 1,
                name: "ppl",
                age: 22,
                sex: "女"
            },
            arr: [1, 2, 3, 4, 5, 6]
        }, methods: {}

    });
script>
html>

总结在使用v-for遍历对象的时候加上 :key=对象的唯一标识

1.7 v-model(数据双向绑定)

v-model作用,用来绑定元素的属性于vue实例对象的属性,使他们的值保持一致

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    
    <input type="text" v-model:value="msg">{{ msg }}
    <input type="button" value="点击我显示名字" @click="ss">
div>
body>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg: ""
        },
        methods: {
            ss() {
                this.msg = "李四";
            }
        }
    });
script>
html>

总结
v-model可以实现数据的双向绑定

所谓双向绑定,视图属性值改变时vue对象数据属性改变,vue对象数据属性改变时,视图属性值改变
MVVM架构(双向绑定机制)
M model(vue中的数据)

VM ViewMode(相当于监听器 )

V View(视图页面,展示数据)

1.8 事件修饰符

修饰符用来与事件连用,用来决定事件触发的条件或阻止事件触发的机制

常用的事件修饰符
.stop.prevent.capture.self.once.passive

stop事件修饰符

作用,用来阻止事件冒泡

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .aa {
            background: rebeccapurple;
            width: 200px;
            height: 200px;
        }

        body {
            margin: 0;
            padding: 0;
        }
    style>
head>
<body>
<div id="app">
    <div class="aa" @click="test2">
        
        <button type="button" @click.stop="test">点击我button>
    div>
div>

body>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    const app = new Vue({
        el: "#app",
        data: {}, methods: {
            test() {
                alert("我被点击了button");
            },
            test2() {
                alert("div");
            }
        }

    });
script>
html>

prevent事件修饰符

用来阻止标签的默认行为

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

self事件修饰符

用来针对当前标签的事件的触发,只触发自己标签上的特定动作的事件,只关心自己标签上触发的事件,不会监听事件冒泡


<div id="app" @click.self="test">
    
    <a href="https://www.baidu.com" @click.prevent="test">百度a>
    
    <button type="button" @click.stop="test">点击我button>
    <button type="button" @click="test">点击我button>
div>

once事件修饰符

作用,特定的定事件只触发一次

  
    <button type="button" @click.once="test">点击我只会触发一次button>
 
    <a href="https://www.baidu.com" @click.prevent.once="test">百度a>

1.9 按键修饰符

作用:用来与键盘中的按键事件绑定在一起,修饰键盘按键事件

常见的按键修饰符
.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    
    <input type="text" @keyup.enter="search('回车触发')"><br>
    <input type="text" @keyup.tab="search('table健触发')"><br>
    <input type="text" @keyup.delete="search('delete健触发')"><br>
    <input type="text" @keyup.esc="search('退出健触发')"><br>
    <input type="text" @keyup.space="search('空格健触发')"><br>
    <input type="text" @keyup.up="search('上健触发')"><br>
div>
body>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    const app = new Vue({
        el: "#app",
        data: {}, methods: {
            search(msg) {
                alert("搜索:" + msg);
            }
        }

    });
script>
html>

2.0 Axios 介绍

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

如何使用Axios程序

引入axios

AxiosGet请求

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">script>
head>
<body>

body>
<script>
    //   axios get请求,参数1请求地址, then成功回调函数,cache失败回调函数
    axios.get("http://localhost:7777/tts/mm").then(function (response) {
        alert(JSON.stringify(response.data));
    }).catch(function (error) {
    console.log(error);
  });
script>
html>

AxiosPost请求

 let user = {
        name: "ppl",
        password: "11111"
    };
    axios.post("http://localhost:7777/tts/" + JSON.stringify(user)).then(function (response) {
        alert(JSON.stringify(response.data));
    }).catch(function (error) {
    console.log(error);
  });

Axios并发请求

什么是并发请求:在同一时刻想服务发起多个请求,最后再集中的处理每个请求的相应结果

//    并发请求
const x = () => {
    return axios.get("http://localhost:7777/tts/mm");
};
const y = () => {
    let user = {
        name: "ppl",
        password: "11111"
    };
    return axios.post("http://localhost:7777/tts/" + JSON.stringify(user));
};
//用来发送一组请求的,参数1函数数组
axios.all([x(), y()]).then(
    //将一组函数的结果汇总处理,参数,对应的是x的回调函数,y的回调函数
    axios.spread(function (xdata, ydata) {
        alert(JSON.stringify(xdata.data));
        alert(JSON.stringify(ydata.data));
    }));

2.1 Vue生命周期

生命周期钩子=======>也可以理解为生命周期函数

VUE对象的生命周期

初始化运行时销毁时

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    <span id="sp">{{ msg }}span>
    <input type="text" v-model:value="ss">
    <span id="sp2" v-text="ss">span>
div>
body>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg: "嘿嘿",
            ss: ""
        },
        methods: {},
        //1.生命周期第一个函数,在调用该函数时vue对象实例只完成了自身事件绑定初始化与生命周期函数初始化的工作,也就是vue中还没有data,el,methods这些相关的属性
        beforeCreate() {
            alert("beforeCreate()=>" + this.msg);
        },
        //2.生命周期第二个函数,在执行该函数时,vue对象实例已经初始化了data,methods这些属性
        created() {
            alert("created()=>" + this.msg);
        },
        //3.生命周期第三个函数,在执行该函数时,vue将el属性指定的范围,作为模板编译
        beforeMount() {
            alert("beforeMount()=>" + document.getElementById("sp").innerText);
        },
        //4.生命周期第四个函数,在执行该函数时,vue已经将数据渲染到页面中,并更新了页面
        mounted() {
            alert("mounted()=>" + document.getElementById("sp").innerText);
        },
        //5.生命周期第五个函数,在vue对象实例data属性被修改时触发,页面显示的依然是原始数据
        beforeUpdate() {
            alert("beforeUpdate()=>" + document.getElementById("sp2").innerText);
        },
        //6.生命周期第六个函数,在vue对象实例时触发beforeUpdate后执行,会更新虚拟DOM,也就是页面数据会被更新
        updated() {
            alert("updated()=>" + document.getElementById("sp2").innerText);
        },
        //7.生命周期第七个函数,在vue对象实例时销毁前触发,vue对象实例数据还没被销毁
        beforeDestroy() {
            alert("beforeDestroy()=>vue对象销毁前" + this.msg);
        },
        //8.生命周期第八个函数,在vue对象实例时销毁后触发,vue对象实例数据以被销毁无法使用
        destroyed() {

            alert("destroyed()=>vue对象销毁后");
        }
    });
script>
html>

2.2 Vue组件组件作用

作用, 用来减少vue实例对象中的代码量,日后在用vue开发中可以根据不同业务功能将页面划分多个不同的组件平凑起来,方便日后维护

全局组件注册

全局组件注册在vue实例中,日后在任意vue实例的范围内都可以使用

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">

    <login>login>
div>
body>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    //注册全局组件,参数1组件名,参数2组件配置对象 template: 用来书写组件的html代码,在模板中必须存在一个(容器)
    Vue.component("login", {
        template: "用户登录"
    });
    const app = new Vue({
        el: "#app",
        data: {},
        methods: {}
    });
script>
html>

注意事项
创建vue全局组件时,template中必须存在一个root元素必须要在vue作用范围才能使用如果组件名以驼峰命名列如userLogin 在使用时需要转换为 user-login

局部组件注册

介绍:通过将组件注册到vue实例中components属性完成组件注册,不会对Vue对象造成代码的污染

第一种写法

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    <login>login>
div>
body>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    //对象声明
    let login = {
        template: "你好呀!"
    }
    const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        //存放局部组件
        components: {
            //注册局部组件
            login: login
        }
    });
script>
html>

第二种写法

DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Titletitle>
	head>
	<body>
		<div id="app">
			<login>login>
		div>
		
		<template id="loginTemplate">
			<a href="">你好呀!a>
		template>
	body>
	
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
	<script>
		//对象声明
		let login = {
			template: '#loginTemplate'
		}
		const app = new Vue({
			el: "#app",
			data: {},
			methods: {},
			//存放局部组件
			components: {
				//注册局部组件
				  login
			}
		});
	script>
html>

Props使用

作用,用来给组件传递数据的

传递静态数据

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    <login user-value="管理员">login>
div>
<template id="loginTemplate">
    <div><h2>欢迎:{{ userValue }}h2>div>
template>
body>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    //对象声明
    let login = {
      	//用来接受传递的值
        props: ['userValue'],
        template: '#loginTemplate'
    }
    const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        //存放局部组件
        components: {
            //注册局部组件
            login
        }
    });
script>
html>

传递动态属性

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    
    <login :user-name="name" :user-age="age">login>
div>
<template id="loginTemplate">
    <div>
        <h2>欢迎:{{ userName }}h2>
        <span>年龄为:{{ userAge }}span>
    div>
template>
body>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    //对象声明
    let login = {
        props: ['userName', 'userAge'],
        template: '#loginTemplate'
    }
    const app = new Vue({
        el: "#app",
        data: {
            name: "管理员",
            age: 23
        },
        methods: {},
        //存放局部组件
        components: {
            //注册局部组件
            login
        }
    });
script>
html>

props单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

组件定义自己的数据

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    <login :username="username">login>
div>
body>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    const login = {
        props: ['username'],
        template: '欢迎:{{name}} {{username}}',
        //存放组件定义的数据
        data() {
            //保存传递的数据
            return {name: this.username};
        }
    }
    const app = new Vue({
        el: "#app",
        data: {
            username: "王五"
        },
        methods: {},
        //存放局部组件
        components: {
            login
        }
    });
script>
html>

组件使用自定义数据,与事件

使用自定义数据

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    <login>login>
div>
body>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    const login = {
        template: '',
        data() {
            return {
                users: [
                    {name: '张三', age: 23},
                    {name: '张流', age: 35},
                    {name: '王码', age: 55},
                ]
            };
        }
    }
    const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components: {
            login
        }
    });
script>
html>

使用事件

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    <login>login>
div>
body>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    const login = {
        template: ' ',
        data() {
            return {
                users: [
                    {name: '张三', age: 23},
                    {name: '张流', age: 35},
                    {name: '王码', age: 55},
                ],
                showls: false
            };
        },
        methods: {
            but() {
                this.showls = !this.showls;
            }
        }
    }
    const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components: {
            login
        }
    });
script>
html>

在子组件中调用传递的事件

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    
    <login :list="users" @add="add">login>
div>
body>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    const login = {
        template: '{{us}}',
        props: ['list'],
        data() {
            return {
                users: this.list
            };
        },
        methods: {
            addu() {
                //想调用另一个组件的事件函数这里传入的是aa
                this.$emit('add');
            }
        }
    }
    const app = new Vue({
        el: "#app",
        data: {
            users: [{name: "张三", age: 12}]
        },
        methods: {
            //添加用户
            add() {
                this.users.push({
                    name: "小三",
                    age: 22
                });
            }
        },
        components: {
            login
        }
    });
script>
html>

插槽slot

作用:可以扩展现有的组件,让组件变的更灵活

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    
    {{ msg }}{{ count }}
    <login>login>
    <hr>
    
    <login><span>欢迎进入主页span>login>
    <hr>
    
    <login><span slot="bb">欢迎进入主页span>login>
    <hr>
    
    <login><span slot="aa">管理员:{{ name }}span>
        <button slot="bb" type="button" @click="add">点我button>
    login>
div>
body>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    const login = {
        template: '用户登录'
    }
    const app = new Vue({
        el: "#app",
        data: {
            msg: "vue插槽slot介绍",
            name: "王五",
            count: 0
        }, methods: {
            add() {
                this.count++;
            }
        },
        components: {
            login
        }

    });
script>
html>

总结

在组件中定义事件与使用与在vue实例对象内部定义基本一致

如何向子组件传递数据使用props

如何在子组件定义自己的属性 data(){ return {key:value}}

组件中的this代表当前组件

如果想向子组件传递事件,使用v-on:传递给子组件的函数名=传递的函数,在子组件使用 this.$emit(‘传递的函数名’);

插槽类似于现实中的usb接口,可以动态的拔插,在组件模板中使用定义插槽,插槽也可以有名字,在组件中使用插槽直接在组件标签内部使用要想把元素插到对应的插槽上使用slot=插槽名属性

2.3 Vue计算属性

计算属性可以可以理解为属性函数,不过带缓存

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    
    <span>平均工资为{{ sum }}span>
    
    <button type="button" @click="add">点击新增工资button>
div>
body>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            moneys: [1000, 2500.23, 2000, 3600, 4000, 50020.3]
        }, methods: {
            add() {
                this.moneys.push(22);
            }
        },
        //存放计算属性,返回值会被缓存在内存中,当vue监听到响应式依赖发生变化时候会更新对应计算属性缓存
        computed: {
            sum() {
                //计算平均值
                let sum = 0;
                for (let key in this.moneys) {
                    sum += this.moneys[key];
                }
                return sum / this.moneys.length;
            }
        }
    });
script>
html>

2.4 Vue路由(Router)

路由作用:帮我们按一定的路由规则进行请求的转发,从而帮我们实现统一的管理请求于控制页面跳转的机制

使用路由

在线的CDN

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    <p>
        
        
        
        <router-link to="/login">登录router-link>
        <router-link to="/register">注册router-link>
        
        <a href="#/login">登录a>
    p>
    
    
    <router-view>router-view>
div>
body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script src="https://unpkg.com/vue-router@3">script>
<script>
    //声明组件模板
    const login = {
        template: '登录'
    };
    const register = {
        template: '注册'
    };
    //  创建路由对象
    const router = new VueRouter({
        routes: [
            {path: '/login', component: login},
            {path: '/register', component: register}
        ]
    })
    const app = new Vue({
        el: "#app",
        data: {}, methods: {},
        components: {},
        //设置路由对象
        router: router
    });
script>
html>

router-link

作用可便于我们编写url不需要加#符号了

属性 tag可以绑定元素,以该元素替换router-link,不管生命元素都会给它添加单击事件,默认渲染的是a标签

属性to值为要跳转的路径

默认路由

//  创建路由对象
const router = new VueRouter({
    routes: [
        // {path: "/", component: login},
        //默认页面为/login,推荐使用
        {path: "/", redirect: "/login"},
        {path: '/login', component: login},
        {path: '/register', component: register}
    ]
})

作用:在第一次进入页面时,显示一个默认的组件

路由中参数的传递 第一种方式

通过?号传参,在组件中通过this.$route.query.传递的参数名,取出传递的数据

第二种方式 RESTful风格传递与接收

如果使用RESTful那么路由配置路径得修改为/:传递参数绑定的名, 在组件取出时使用this.$route.params.传递绑定的参数名,方式取出

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    <router-link to="/login?id=22">登录router-link>
    
    <router-link to="/register/小花">注册router-link>
    
    <router-view>router-view>
div>
body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script src="https://unpkg.com/vue-router@3">script>
<script>
    //  声明组件模板
    const login = {
        template: '用户登录',
        data() {
            return {}
        }, methods: {},
        created() {
            //如果以?拼接方式,数据都放在query里面
            alert(this.$route.query.id);
        }
    }
    const register = {
        template: '用户注册',
        created() {
            //如果是以RESTful风格传递方式,数据都放在params中
            alert(this.$route.params.name);
        }
    }
    //创建路由对象
    const router = new VueRouter({
        routes: [
            {path: "/login", component: login},
            //RESTful风格路由
            {path: "/register/:name", component: register},
        ]
    });
    const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        //注册路由对象
        router
    });
script>
html>

嵌套路由

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    <router-link to="/user">用户 *** 作router-link>
    <router-view>router-view>
div>
<template id="userapp">
    
    <div>
        <h2>用户管理h2>
        <router-link to="/user/add">添加用户router-link>
        <router-link to="/user/del">删除用户router-link>
        <router-view>router-view>
    div>
template>
body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script src="https://unpkg.com/vue-router@3">script>
<script>
    const user = {
        template: '#userapp'
    }
    const useradd = {
        template: "添加用户"
    }
    const userdel = {
        template: "删除用户"
    }
    //创建路由对象
    const router = new VueRouter({
        routes: [
            {
                path: "/user", component: user,
                //子路由
                children: [
                    {path: "add", component: useradd},
                    {path: "del", component: userdel}
                ]
            }
        ]
    });
    const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        //注册路由对象
        router
    });
script>
html>

2.5 Vue-cli脚手架

什么是cli

命令行界面（英语： command-line interface ，缩写： CLI ）是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。也有人称之为字符用户界面（ CUI ）

Vue-cli是什么

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统

Vue脚手架的安装

环境准备

在命令行输入node -v 如果没有提示需要安装Node.js

配置npm国内镜像在命令行输入

npm config set registry https://registry.npm.taobao.org

修改本次仓库存放位置
npm config set cache "/Users/admin/config/npm-resource/node_cache/"
npm config set prefix "/Users/admin/config/npm-resource/node_global/"
配置仓库环境变量

/Users/admin/config/npm-resource/node_global/bin

安装脚手架与webpack

在命令行输入以安装脚手架与webpack
npm install -g vue-cli
npm install -g webpack-cli
npm install -g webpack

使用脚手架开发项目

创建脚手架的第一个命令
vue init webpack 项目名

项目结构

hello --------------------------->项目名

build ---------------------------->用来给webpack使用打包的build
config ---------------------->用来配置整个项目的目录node_modules ------------->用来管理项目中使用的依赖src -------------------->用来书写Vue源代码[重点] assets ----------------->用来存放静态资源[重点]components ------------>用来书写Vue的组件[重点]router -------------------->用来配置项目中的路由[重点]App.vue ----------------->项目中的根组件[重点]main.js ------------------>项目中的主入口[重点] .static ----------------------->其他静态资源.babelrc -------------------->将es6语法转换为es5语法.editorconfig --------------->项目编辑配置.gitignore ------------------->Git版本控制.postcssrc.js --------------->源码的相关jsindex.html ---------------->项目的主页package.json ------------->类似于maven中的pom.xml文件管理依赖package-lock.json -------->对package.json的加锁文件README.md -------------->项目的说明文件
如何运行?

进入到项目文件夹

使用命令 npm start

如何访问项目?

Your application is running here: http://localhost:8080

vue-cli项目的开发方式

一切皆组件,一个组件无非是 Js代码,css样式,html代码

日后在使用vue-cli开发时不再编写html代码,编写的是一个个组件(以.vue结尾的文件),经过打包后会编译成可以运行的html文件

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/940276.html

Vue入门教程

发表评论

评论列表（0条）