【编程鹿】学Vue.js这一篇就够了「万字学会|通俗易懂」

时间  2021-01-09
标签 javascript css html vue java node python react webpack ios 栏目 JavaScript 繁體版
原文   原文链接

vue概述

mvvm模式javascript

  • M：即Model，模型，包括数据和一些基本操做
  • V：即View，视图，页面渲染结果
  • VM：即View-Model，模型与视图间的双向操做（无需开发人员干涉）

在MVVM以前，开发人员从后端获取须要的数据模型，而后要经过DOM操做Model渲染到View中。然后当用户操做视图，咱们还须要经过DOM获取View中的数据，而后同步到Model中。css

而MVVM中的VM要作的事情就是把DOM操做彻底封装起来，开发人员不用再关心Model和View之间是如何互相影响的：html

  • 只要咱们Model发生了改变，View上天然就会表现出来。
  • 当用户修改了View，Model中的数据也会跟着改变。

把开发人员从繁琐的DOM操做中解放出来，把关注点放在如何操做Model上。vue

mvvm模式的优点：java

  1. 低耦合

视图（View）能够独立于Model变化和修改，一个ViewModel能够绑定到不一样的"View"上，当View变化时Model能够不变，当Model变化时View也能够不变node

  1. 可重用性

能够把一些视图逻辑放在一个ViewModel里面，让多个View重用这段视图逻辑代码python

  1. 独立开发

开发人员能够专一于业务逻辑和数据的开发（ViewModel），设计人员能够专一于页面设计。react

而咱们今天要学习的，就是一款MVVM模式的框架：Vuewebpack

快速入门

安装vue

下载安装

下载地址：https://github.com/vuejs/vueios

能够下载2.5.16版本https://github.com/vuejs/vue/archive/v2.5.16.zip

下载解压，获得vue.js文件。能够在页面中直接经过script引入vue.js文件

使用cdn

或者也能够直接使用公共的CDN服务：

<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue 入门案例（演示用，不作讲解）

HTML模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>{{name}}，很是酷！</h2>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#app", // el即element，要渲染的页面元素
        data: {
            name: "Vue测试"
        }
    });
</script>
</body>
</html>
  • 首先经过new Vue()来建立Vue实例
  • 而后构造函数接收一个对象，对象中有一些属性：
    • el ：是element的缩写，经过id 选中要渲染的页面元素，本例中是一个 div
    • data：数据，数据是一个对象，里面有不少属性，均可以渲染到视图中
      • name ：这里指定了一个name属性
  • 页面中的 h2 元素中，经过{{name}} 的方式，来渲染刚刚定义的 name 属性

更神奇的在于，当你修改name属性时，页面会跟着变化。

双向绑定

对刚才的案例进行简单修改：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="num">
    <h2>
      {{name}}，很是酷！
      有{{num}}个酷炫功能！
    </h2>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#app", // el即element，要渲染的页面元素
        data: {
            name: "Vue测试",
            num: 1
        }
    });
</script>
</body>
</html>
  • 在data中添加了新的属性： num
  • 在页面中有一个 input 元素，经过 v-model 与 num 进行绑定
  • 同时经过 {{num}} 在页面输出

能够观察到，输入框的变化引发了data中的num的变化，同时页面输出也跟着变化。

  • input与num绑定，input的value值变化，影响到了data中的num值
  • 页面 {{num}} 与数据num绑定，所以num值变化，引发了页面效果变化。

没有任何dom操做，这就是双向绑定的魅力。

事件处理

在页面添加一个按钮：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="num">
    <button v-on:click="num++">点我</button>
    <h2>
      {{name}}，很是酷！
      有{{num}}个酷炫功能！
    </h2>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#app", // el即element，要渲染的页面元素
        data: {
            name: "Vue测试",
            num: 1
        }
    });
</script>
</body>
</html>
  • 这里用 v-on 指令绑定点击事件，而不是普通的 onclick ，而后直接操做num
  • 普通onclick是没法直接操做num的

Vue 实例

建立Vue实例

每一个 Vue 应用都是经过用 Vue 函数建立一个新的 Vue 实例开始的：

var vm = new Vue({
	// 选项
})

在构造函数中传入一个对象，而且在对象中声明各类Vue须要的数据和方法，包括：

  • el
  • data
  • methods
  • … …等

接下来，一一介绍。

模板或元素

每一个Vue实例都须要关联一段Html模板，Vue会基于此模板进行视图渲染；能够经过el属性来指定。

例如一段html模板：

<div id="app">

</div>

而后建立Vue实例，关联这个div

var vm = new Vue({
	el:"#app"
})

这样，Vue就能够基于id为 app 的div元素做为模板进行渲染了。在这个div范围之外的部分是没法使用vue特性的。

数据

当Vue实例被建立时，它会尝试获取在data中定义的全部属性，用于视图的渲染，而且监视data中的属性变化，当data发生改变，全部相关的视图都将从新渲染，这就是“响应式“系统。

html：

<div id="app">
	<input type="text" v-model="name"/>
</div>

js：

var vm = new Vue({
		el:"#app",
		data:{
			name:"ZHANGSAN"
	}
})
  • name的变化会影响到 input 的值
  • input中输入的值，也会致使vm中的name发生改变

方法

Vue实例中除了能够定义data属性，也能够定义方法，而且在Vue的做用范围内使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button v-on:click="add">点我</button>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {},
        methods: {
            add: function () {
                console.log("点我了...233")
            }
        }
    });
</script>
</body>
</html>

生命周期钩子函数

每一个 Vue 实例在被建立时都要通过一系列的初始化过程 ：建立实例，装载模板，渲染模板等。Vue为生命周期中的每一个状态都设置了钩子函数（监听函数）。每当Vue实例处于不一样的生命周期时，对应的函数就会被触发调用。

全部的生命周期钩子自动绑定 this 上下文到实例中，所以你能够访问数据，对属性和方法进行运算。

20200710065238953

生命周期

每一个 Vue 实例在被建立以前都要通过一系列的初始化过程

生命周期函数 含义
beforeCreate（vue对象建立前） 组件实例刚被建立，组件属性计算以前，好比data属性等
created（建立后） 模板编译、挂载以前
mounted（载入后） 模板编译、挂载以后
beforeUpdate（更新前） 组件更新以前
updated（更新后） 组件更新以后
beforeDestroy（销毁前） 组件销毁前调用
destroyed（销毁后） 组件销毁后调用

vm.$el ：Vue 实例使用的根 DOM 元素

vm.$root ：当前的 Vue 实例。

Vue在实例化的过程当中，会调用这些生命周期的钩子，给咱们提供了执行自定义逻辑的机会。那么，在这些vue钩子中，vue实例到底执行了那些操做，咱们先看下面执行的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs生命周期</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{message}}
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            message: 'hello world'
        },
        beforeCreate: function () {
            console.log(this);
            showData('建立vue实例前', this);
        },
        created: function () {
            showData('建立vue实例后', this);
        },
        beforeMount: function () {
            showData('挂载到dom前', this);
        },
        mounted: function () {
            showData('挂载到dom后', this);
        },
        beforeUpdate: function () {
            showData('数据变化更新前', this);
        },
        updated: function () {
            showData('数据变化更新后', this);
        },
        beforeDestroy: function () {
            showData('vue实例销毁前', this);
        },
        destroyed: function () {
            showData('vue实例销毁后', this);
        }
    });

    function showData(process, obj) {
        console.log(process);
        console.log('data 数据：' + obj.message)
        console.log('挂载的对象：')
        console.log(obj.$el)
    }
</script>
</body>
</html>

钩子函数

例如：created表明在vue实例建立后；

能够在Vue中定义一个created函数，表明这个时期的构造函数：

建立示例html页面以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{msg}}
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            // 初始化为空
            msg: ""
        },
        // 钩子函数
        created() {
            // this 表示Vue实例
            this.msg = "hello vue.created";
            console.log(this)
        }
    });
</script>
</body>
</html>

this

能够看下在vue内部的this变量是谁，在created的时候，打印this

var app = new Vue({
        el:"#app",
        data:{
            msg: ""
        },
        //钩子函数
        created() {
            //this表示vue实例
            this.msg = "hello vue. created.";
            console.log(this);
        }
    });

控制台的输出； 在这里插入图片描述 总结： this 就是当前的Vue实例，在Vue对象内部，必须使用 this 才能访问到Vue中定义的data内属性、方法等。

应用场景

  1. 在beforeCreate生命周期函数运行时，能够添加loading动画

  2. 在created生命周期函数运行时，能够结束loading动画，还能够作一些初始化，实现函数自执行等操做

  3. 最常用的是mounted生命周期函数

能够发起后端数据请求，取回数据

能够接收页面之间传递的参数

能够子组件向父组件传递参数等

指令

什么是指令？

指令 (Directives) 是带有 v- 前缀的特殊属性。例如在入门案例中的v-model，表明双向绑定。

插值表达式

花括号

格式：

{{表达式}}

说明：

  • 该表达式支持JS语法，能够调用js内置函数（必须有返回值）
  • 表达式必须有返回结果。例如 1 + 1，没有结果的表达式不容许使用，如：var a = 1 + 1;
  • 能够直接获取Vue实例中定义的数据或函数

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{msg}}
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            msg: "hello vue."
        }
    });
</script>
</body>
</html>

插值闪烁

使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的 {{}} ，加载完毕后才显示正确数据，称为插值闪烁。解决办法是经过v-text和v-html替换

v-text 和 v-html

使用v-text和v-html指令来替代 {{}}

说明：

  • v-text：将数据输出到元素内部，若是输出的数据有HTML代码，会做为普通文本输出
  • v-html：将数据输出到元素内部，若是输出的数据有HTML代码，会被渲染

示例，改造原页面内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--{{msg}}-->
    v-text：<span v-text="msg"></span><br/>
    v-html：<span v-html="msg"></span><br/>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
//            msg: "hello vue."
            msg: "<h2>hello vue.</h2>"
        }
    });
</script>
</body>
</html>

而且不会出现插值闪烁，当没有数据时，会显示空白。

v-model

刚才的v-text和v-html能够看作是单向绑定，数据影响了视图渲染，可是反过来就不行。

接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。

既然是双向绑定，必定是在视图中能够修改数据，这样就限定了视图的元素类型。

目前v-model的可以使用元素有：

  • input
  • select
  • textarea
  • checkbox
  • radio
  • components（Vue中的自定义组件）

基本上除了最后一项，其它都是表单的输入项。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="checkbox" value="Java" v-model="language">Java<br/>
    <input type="checkbox" value="PHP" v-model="language">PHP<br/>
    <input type="checkbox" value="Swift" v-model="language">Swift<br/>
    <h2>
        你选择了：{{language.join(",")}}
    </h2>
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            language: []
        }
    });
</script>
</body>
</html>
  • 多个 checkbox 对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型
  • radio对应的值是input的value值
  • input 和 textarea 默认对应的model是字符串
  • select 单选对应字符串，多选对应也是数组

v-on

基本用法

v-on指令用于给页面元素绑定事件。

语法：

v-on:事件名="js片断或函数名"

简写语法：

@事件名="js片断或函数名"

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--直接写js片断-->
    <button @click="num++">增长</button>
    <!--使用函数名，该函数必需要在vue实例中定义-->
    <button @click="decrement">减小</button>
    <h2>
        num={{num}}
    </h2>
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            num: 1
        },
        methods: {
            decrement() {
                this.num--;
            }
        }
    });
</script>
</body>
</html>

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是很是常见的需求。

尽管咱们能够在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。以前提过，修饰符是由点开头的指令后缀来表示的。

  • .stop ：阻止事件冒泡
  • .prevent ：阻止默认事件发生
  • .capture ：使用事件捕获模式
  • .self ：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
  • .once ：只执行一次

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--直接写js片断-->
    <button @click="num++">增长</button>
    <!--使用函数名，该函数必需要在vue实例中定义-->
    <button @click="decrement">减小</button>
    <h2>
        num={{num}}
    </h2>
    <hr>
    事件冒泡测试：<br/>
    <div style="background-color: lightblue;width: 100px;height: 100px" @click="print('div被点击了')">
        <button @click.stop="print('点击了button')">点我试试</button>
    </div>
    <br>阻止默认事件：<br>
    <a href="http://www.baidu.com" @click.prevent="print('点击了超连接')">百度</a>
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            num: 1
        },
        methods: {
            decrement() {
                this.num--;
            },
            print(str) {
                console.log(str);
            }
        }
    });
</script>
</body>
</html>

v-for

遍历数据渲染页面是很是经常使用的需求，Vue中经过v-for指令来实现。

遍历数组

语法：

v-for="item in items"
  • items：要遍历的数组，须要在vue的data中定义好。
  • item：循环变量

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="user in users">
            {{user.name}} -- {{user.age}} -- {{user.gender}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            users: [
                {"name": "小明", "age": 13, "gender": "男"},
                {"name": "小红", "age": 13, "gender": "女"},
                {"name": "小绿", "age": 4, "gender": "男"}
            ]
        }
    });
</script>
</body>
</html>

数组角标

在遍历的过程当中，若是须要知道数组角标，能够指定第二个参数：

语法：

v-for="(item,index) in items"
  • items：要迭代的数组
  • item：迭代获得的数组元素别名
  • index：迭代到的当前元素索引，从0开始。

示例：

<div id="app">
    <ul>
        <li v-for="(user,index) in users">
            {{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
        </li>
    </ul>
</div>

遍历对象

v-for除了能够迭代数组，也能够迭代对象。语法基本相似

语法：

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
  • 1个参数时，获得的是对象的值
  • 2个参数时，第一个是值，第二个是键
  • 3个参数时，第三个是索引，从0开始 示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="user in users">
            {{user.name}} -- {{user.age}} -- {{user.gender}}
        </li>
    </ul>

    <hr>

    <ul>
        <li v-for="(user,index) in users">
            {{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
        </li>
    </ul>

    <hr>

    <ul>
        <!--1个参数时，获得的是对象的值-->
        <li v-for="value in person">
            {{value}}
        </li>
    </ul>
    <hr>
    <ul>
        <!--2个参数时，第一个是值，第二个是键-->
        <li v-for="(value,key ) in person">
            {{value}}--{{key}}
        </li>
    </ul>
    <hr>
    <ul>
        <!--3个参数时，第三个是索引，从0开始-->
        <li v-for="(value,key,index ) in person">
            {{value}}--{{key}} -- {{index}}
        </li>
    </ul>

</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            users: [
                {"name": "小明", "age": 13, "gender": "男"},
                {"name": "小红", "age": 13, "gender": "女"},
                {"name": "小绿", "age": 4, "gender": "男"}
            ],
            person: {"name": "zhangsan", "age": 13, "gender": "男", "address": "中国"}
        }
    });
</script>
</body>
</html>

key

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。若是数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每一个元素，而且确保它在特定索引下显示已被渲染过的每一个元素。

若是使用key这个功能能够有效的提升渲染的效率；key通常使用在遍历完后，又增、减集合元素的时候更有意义。

可是要实现这个功能，你须要给Vue一些提示，以便它能跟踪每一个节点的身份，从而重用和从新排序现有元素，你须要为每项提供一个惟一 key 属性。理想的 key 值是每项都有的且惟一的 id。 也就是key是该的惟一标识。

示例：

<ul>
	<li v-for="(item,index) in items" :key="index"></li>
</ul>
  • 这里使用了一个特殊语法： :key="" 后面会讲到，它可让你读取vue中的属性，并赋值给key属性
  • 这里绑定的key是数组的索引，应该是惟一的

v-if 和 v-show

基本使用

v-if，顾名思义，条件判断。当获得结果为true时，所在的元素才会被渲染。

语法：

v-if="布尔表达式"

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">

    <button @click="show = !show">点我</button>
    <h2 v-if="show">
        hello vuejs.
    </h2>
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            show: true
        }
    });
</script>
</body>
</html>

与 v-for 结合

当v-if和v-for出如今一块儿时，v-for优先级更高。也就是说，会先遍历，再判断条件。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">

    <button @click="show = !show">点我</button>
    <h2 v-if="show">
        hello vuejs.
    </h2>
    <hr>
    <ul>
        <li v-for="(user,index) in users" v-if="user.gender=='女'" :key="index" style="background-color: deeppink">
            {{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            show: true,
            users: [
                {"name": "北京大学", "age": 8, "gender": "男"},
                {"name": "清华大学", "age": 12, "gender": "女"},
                {"name": "复旦大学", "age": 4, "gender": "男"},
                {"name": "南开大学", "age": 2, "gender": "女"}
            ]
        }
    });
</script>
</body>
</html>

v-else

可使用 v-else 指令来表示 v-if 的“else 块”：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">

    <button @click="show = !show">点我</button>
    <h2 v-if="show">
        hello vuejs.
    </h2>
    <hr>
    <ul v-if="show">
        <li v-for="(user,index) in users" v-if="user.gender=='女'" :key="index" style="background-color: deeppink">
            {{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
        </li>
        <li v-else style="background-color: blue">
            {{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            show: true,
            users: [
                {"name": "北京大学", "age": 8, "gender": "男"},
                {"name": "清华大学", "age": 12, "gender": "女"},
                {"name": "复旦大学", "age": 4, "gender": "男"},
                {"name": "南开大学", "age": 2, "gender": "女"}
            ]
        }
    });
</script>
</body>
</html>

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，不然它将不会被识别。 v-else-if ，顾名思义，充当 v-if 的“else-if 块”，能够连续使用：

<div v-if="type === 'A'">
	A
</div>
<div v-else-if="type === 'B'">
	B
</div>
<div v-else-if="type === 'C'">
	C
</div>
<div v-else>
	Not A/B/C
</div>

相似于 v-else ， v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素以后。

v-show

另外一个用于根据条件展现元素的选项是 v-show 指令。用法大体同样：

<h1 v-show="ok">Hello!</h1>

不一样的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。 v-show 只是简单地切换元素的 CSS 属性display 。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="show = !show">点我</button>
    <h2 v-if="show">
        hello vuejs.
    </h2>
    <hr>
    <ul v-if="show">
        <li v-for="(user,index) in users" v-if="user.gender=='女'" :key="index" style="background-color: deeppink">
            {{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
        </li>
        <li v-else style="background-color: blue">
            {{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
        </li>
    </ul>
    <hr>
    <h2 v-show="show">
        你好，世界！
    </h2>
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            show: true,
            users: [
                {"name": "北京大学", "age": 8, "gender": "男"},
                {"name": "清华大学", "age": 12, "gender": "女"},
                {"name": "复旦大学", "age": 4, "gender": "男"},
                {"name": "南开大学", "age": 2, "gender": "女"}
            ]
        }
    });
</script>
</body>
</html>

v-bind

属性上使用vue数据

看这样一个案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            color: white;
        }

        .red {
            background-color: red;
        }

        .blue {
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="color='red'">红色</button>
    <button @click="color='blue'">蓝色</button>
    <div :class="">
        点击按钮改变背景颜色
    </div>
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            color: "red"
        }
    });
</script>
</body>
</html>

解读：

  • 页面有两个按钮，点击时，会改变Vue实例中的color值，这个值与前面定义的CSS样式一致。
  • 目前div的class为空，但愿实现点击按钮后，div的class样式会在.red和.blue之间切换

该如何实现？

你们可能会这么想，既然color值会动态变化为不一样的class名称，那么咱们直接把color注入到class属性就行了，因而就这样写：

<div class="{{color}}"></div>

这样写是错误的！由于插值表达式不能用在标签的属性中。

此时，Vue提供了一个新的指令来解决：v-bind，语法：

v-bind:属性名="Vue中的变量"

例如，在这里咱们能够写成：

<div v-bind:class="color"></div>

不过，v-bind太麻烦，所以能够省略，直接写成： ，:属性名='属性值' ，即：

<div :class="color"></div>

class属性的特殊用法

上面虽然实现了颜色切换，可是语法却比较啰嗦。

Vue对class属性进行了特殊处理，能够接收数组或对象格式

对象语法：能够传给 :class 一个对象，以动态地切换 class：

<div :class="{ red: true,blue:false }"></div>
  • 对象中，key是已经定义的class样式的名称，如本例中的： red 和 blue
  • 对象中，value是一个布尔值，若是为true，则这个样式会生效，若是为false，则不生效。

以前的案例能够改写成这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            color: white;
        }

        .red {
            background-color: red;
        }

        .blue {
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="color='red'">红色</button>
    <button @click="color='blue'">蓝色</button>
    <!--v-bind 简写为 :-->
    <div :class="color">
        点击按钮改变背景颜色
    </div>
    <hr>
    <br>
    <button @click="bool=!bool">点我改变下面色块的颜色</button>
    <div :class="{red:bool, blue:!bool}">
        点击按钮改变背景颜色
    </div>
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            color: "red",
            bool:true
        }
    });
</script>
</body>
</html>

首先class绑定的是一个对象： {red:bool, blue: !bool}

red和blue两个样式的值分别是bool和!bool，也就是说这两个样式的生效标记刚好相反，一个生效，另外一个失效。

bool默认为true，也就是说默认red生效，blue不生效

如今只须要一个按钮便可，点击时对bool取反，天然实现了样式的切换

计算属性

在插值表达式中使用js表达式是很是方便的，并且也常常被用到。

可是若是表达式的内容很长，就会显得不够优雅，并且后期维护起来也不方便，例以下面的场景，有一个日期的数据，可是是毫秒值：

data:{
	birthday:1429032123201 // 毫秒值
}

在页面渲染，但愿获得yyyy-MM-dd的样式则须要以下处理：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <h2>
    你的生日是：
    {{new Date(birthday).getFullYear()}}-{{new Date(birthday).getMonth()+1}}-{{new Date(birthday).getDay()}}
	</h2>
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            birthday: 1429032123201
        }
    });
</script>
</body>
</html>

虽然能获得结果，可是很是麻烦。

Vue中提供了计算属性，来替代复杂的表达式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <h2>
    你的生日是：
    {{new Date(birthday).getFullYear()}}-{{new Date(birthday).getMonth()+1}}-{{new Date(birthday).getDay()}}
    </h2>
    <hr>
    <h2>
    computed计算方式；你的生日为：{{birth}}
    </h2>

</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            birthday: 1429032123201
        },
        computed: {
            birth() {
                const date = new Date(this.birthday);
                return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDay();
            }
        }
    });
</script>
</body>
</html>

计算属性本质就是方法，可是必定要返回数据。而后页面渲染时，能够把这个方法当成一个变量来使用。

过滤器

说明

​ 官方说法：Vue.js 容许你自定义过滤器，可被用于一些常见的==文本格式化==。过滤器能够用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。

​ 通俗的来讲：过滤器是对即将显示的数据作进一步的筛选处理，而后进行显示，值得注意的是过滤器并无改变原来的数据，只是在原数据的基础上产生新的数据。

​ 过滤器的种类：

  • 全局过滤器
  • 局部过滤器

过滤器的使用步骤

定义过滤器

  • 全局过滤器

    Vue.filter('过滤器名称', function (value[,param1,...] ) {  
//逻辑代码
})

  • 局部过滤器

    new Vue({       
 	filters: {      
    	'过滤器名称': function (value[,param1,...] ) { 
       		// 逻辑代码     
      	} 
    }    
})

应用过滤器

{{ 表达式 |  过滤器名字}}

过滤器不带参数

案例1：日期格式化

<body>
    <div id="myDiv">
        {{birthday | dateFormat }}
    </div>
    <script src="../js/vue.js"></script>
    <script src="../js/moment.js"></script>		// 须要引入一个日期处理的一个工具类
    <script type="text/javascript">

      	// 定义过滤器
        Vue.filter("dateFormat",function(value){
            return moment(value).format("YYYY-MM-DD HH:mm:ss");
        });

        const app = new Vue({
            el: "#myDiv",
            data: {
                birthday: new Date()
            }
        });
    </script>
</body>

案例2：文本格式化

<body>
    <div id="myDiv">
        {{message | messageFormat}} <br/>
        {{message }}							// 值并无改变
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">

        Vue.filter("messageFormat",function(value){
            return value.replace("很棒","优秀");
        });

        const app = new Vue({
            el: "#myDiv",
            data: {
                message: "HelloWorld,是一个很棒的青年"
            }
        });
    </script>
</body>

过滤器带参数

<body>
    <div id="myDiv">
        {{birthday | dateFormat }}     <br/>		// 不传递格式化标准就用完整写法
        {{birthday | dateFormat("YYYY-MM-DD") }}	// 传入了格式化标准就用传递的写法进行格式化
    </div>
    <script src="../js/vue.js"></script>
    <script src="../js/moment.js"></script>
    <script type="text/javascript">

        Vue.filter("dateFormat",function(value,pattern = "YYYY-MM-DD HH:mm:ss"){
            return moment(value).format(pattern);
        });

        const app = new Vue({
            el: "#myDiv",
            data: {
                birthday: new Date()
            }
        });
    </script>
</body>

watch

监控

watch可让咱们监控一个值的变化。从而作出相应的反应。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <input v-model="message">
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            message: "hello vue"
        },
        watch: {
            message(newValue, oldValue) {
                console.log("新值：" + newValue + "；旧值：" + oldValue)
            }
        }
    });
</script>
</body>
</html>

深度监控

若是监控的是一个对象，须要进行深度监控，才能监控到对象中属性的变化，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <input type="text" v-model="message">
    <hr>
    <br>
    <input type="text" v-model="person.name"><br>
    <input type="text" v-model="person.age">
    <button @click="person.age++">+</button>
    <h2>
        姓名为：{{person.name}}；年龄为：{{person.age}}
    </h2>
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            message: "hello vue",
            person: {"name": "zhangsan", "age": 12}
        },
        watch: {
            message(newValue, oldValue) {
                console.log("新值：" + newValue + "；旧值：" + oldValue)
            },
            person: {
                // 开启深度监控，能够监控到对象属性值的变化
                deep: true,
                // 监控的处理办法
                handler(obj) {
                    console.log("name = " + obj.name + ", age=" + obj.age);
                }
            }
        }
    });
</script>
</body>
</html>

变化：

之前定义监控时，person是一个函数，如今改为了对象，而且要指定两个属性：

  • deep:表明深度监控，不只监控person变化，也监控person中属性变化
  • handler：就是之前的监控处理函数

组件化

在大型应用开发的时候，页面能够划分红不少部分。每每不一样的页面，也会有相同的部分。例如可能会有相同的头部导航。

可是若是每一个页面都独自开发，这无疑增长了咱们开发的成本。因此咱们会把页面的不一样部分拆分红独立的组件，而后在不一样页面就能够共享这些组件，避免重复开发。

全局组件

咱们经过Vue的component方法来定义一个全局组件。

<div id="app">
    <!--使用定义好的全局组件-->
    <counter></counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    // 定义全局组件，两个参数：1，组件名称。2，组件参数
    Vue.component("counter",{
        template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',
        data(){
            return {
                count:0
            }
        }
    })
    var app = new Vue({
        el:"#app"
    })
</script>
  • 组件其实也是一个Vue实例，所以它在定义时也会接收：data、methods、生命周期函数等
  • 不一样的是组件不会与页面的元素绑定，不然就没法复用了，所以没有el属性。
  • 可是组件渲染须要html模板，因此增长了template属性，值就是HTML模板
  • 全局组件定义完毕，任何vue实例均可以直接在HTML中经过组件名称来使用组件了。
  • data必须是一个函数，再也不是一个对象。

组件的复用

定义好的组件，能够任意复用屡次：

<div id="app">
    <!--使用定义好的全局组件-->
    <counter></counter>
    <counter></counter>
    <counter></counter>
</div>

你会发现每一个组件互不干扰，都有本身的count值。怎么实现的？

组件的data属性必须是函数！

当咱们定义这个counter组件时，它的data 并非像这样直接提供一个对象：

data: {
  count: 0
}

取而代之的是，一个组件的 data 选项必须是一个函数，所以每一个实例能够维护一份被返回对象的独立的拷贝：

data: function () {
  return {
    count: 0
  }
}

若是 Vue 没有这条规则，点击一个按钮就会影响到其它全部实例！

局部注册

一旦全局注册，就意味着即使之后你再也不使用这个组件，它依然会随着Vue的加载而加载。

所以，对于一些并不频繁使用的组件，咱们会采用局部注册。

咱们先在外部定义一个对象，结构与建立组件时传递的第二个参数一致：

const counter = {
    template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',
    data(){
        return {
            count:0
        }
    }
};

而后在Vue中使用它：

var app = new Vue({
    el:"#app",
    components:{
        counter:counter // 将定义的对象注册为组件
    }
})
  • components就是当前vue对象子组件集合。
    • 其key就是子组件名称
    • 其值就是组件对象的属性
  • 效果与刚才的全局注册是相似的，不一样的是，这个counter组件只能在当前的Vue实例中使用

组件通讯

一般一个单页应用会以一棵嵌套的组件树的形式来组织：

image-20201001195026231

  • 页面首先分红了顶部导航、左侧内容区、右侧边栏三部分
  • 左侧内容区又分为上下两个组件
  • 右侧边栏中又包含了3个子组件

各个组件之间以嵌套的关系组合在一块儿，那么这个时候不可避免的会有组件间通讯的需求。

父向子传递

  1. 父组件使用子组件时，自定义属性（属性名任意，属性值为要传递的数据）
  2. 子组件经过props接收父组件属性

父组件使用子组件，并自定义了title属性：

<div id="app">
    <h1>打个招呼：</h1>
    <!--使用子组件，同时传递title属性-->
    <introduce title="父组件传递的消息"/>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    Vue.component("introduce",{
        // 直接使用props接收到的属性来渲染页面
        template:'<h1>{{title}}</h1>',
        props:['title'] // 经过props来接收一个父组件传递的属性
    })
    var app = new Vue({
        el:"#app"
    })
</script>

传递复杂数据

咱们定义一个子组件，并接受复杂数据：

const myList = {
        template: '\
        <ul>\
        	<li v-for="item in items" :key="item.id">{{item.id}} : {{item.name}}</li>\
        </ul>\
        ',
        props: {
            items: {
                type: Array,
                default: [],
                required: true
            }
        }
    };
  • 这个子组件能够对 items 进行迭代，并输出到页面。
  • props：定义须要从父组件中接收的属性
    • items：是要接收的属性名称
      • type：限定父组件传递来的必须是数组
      • default：默认值
      • required：是否必须

咱们在父组件中使用它：

<div id="app">
    <h2>百知已开设以下课程：</h2>
    <!-- 使用子组件的同时，传递属性，这里使用了v-bind，指向了父组件本身的属性lessons -->
    <my-list :items="lessons"/>
</div>
var app = new Vue({
    el:"#app",
    components:{
        myList // 当key和value同样时，能够只写一个
    },
    data:{
        lessons:[
            {id:1, name: 'java'},
            {id:2, name: 'python'},
            {id:3, name: 'ui'},
        ]
    }
})

子向父的通讯

来看这样的一个案例：

<div id="app">
    <h2>num: {{num}}</h2>
    <!--使用子组件的时候，传递num到子组件中-->
    <counter :num="num"></counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    Vue.component("counter", {// 子组件，定义了两个按钮，点击数字num会加或减
        template:'\
            <div>\
                <button @click="num++">加</button>  \
                <button @click="num--">减</button>  \
            </div>',
        props:['num']// count是从父组件获取的。
    })
    var app = new Vue({
        el:"#app",
        data:{
            num:0
        }
    })
</script>
  • 子组件接收父组件的num属性
  • 子组件定义点击按钮，点击后对num进行加或减操做

咱们尝试运行，好像没问题，点击按钮试试：

image-20201001200426862

子组件接收到父组件属性后，默认是不容许修改的。怎么办？

既然只有父组件能修改，那么加和减的操做必定是放在父组件：

var app = new Vue({
    el:"#app",
    data:{
        num:0
    },
    methods:{ // 父组件中定义操做num的方法
        increment(){
            this.num++;
        },
        decrement(){
            this.num--;
        }
    }
})

可是，点击按钮是在子组件中，那就是说须要子组件来调用父组件的函数，怎么作？

咱们能够经过v-on指令将父组件的函数绑定到子组件上：

<div id="app">
    <h2>num: {{num}}</h2>
    <counter :count="num" @inc="increment" @dec="decrement"></counter>
</div>

在子组件中定义函数，函数的具体实现调用父组件的实现，并在子组件中调用这些函数。当子组件中按钮被点击时，调用绑定的函数：

Vue.component("counter", {
            template:'\
                <div>\
                    <button @click="plus">加</button>  \
                    <button @click="reduce">减</button>  \
                </div>',
            props:['count'],
            methods:{
                plus(){
                    this.$emit("inc");
                },
                reduce(){
                    this.$emit("dec");
                }
            }
        })
  • vue提供了一个内置的this.$emit()函数，用来调用父组件绑定的函数

路由vue-router

场景模拟

如今咱们来实现这样一个功能：

一个页面，包含登陆和注册，点击不一样按钮，实现登陆和注册页切换。

编写父组件

为了让接下来的功能比较清晰，咱们先新建一个文件夹：src

而后新建一个HTML文件，做为入口：index.html

而后编写页面的基本结构：

<div id="app">
    <span>登陆</span>
    <span>注册</span>
    <hr/>
    <div>
        登陆页/注册页
    </div>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app"
    })
</script>

编写登陆及注册组件

接下来咱们来实现登陆组件，之前咱们都是写在一个文件中，可是为了复用性，开发中都会把组件放入独立的JS文件中，咱们新建一个user目录以及login.js及register.js。

编写组件，这里咱们只写模板，不写功能。

login.js内容以下：

const loginForm = {
    template:'\
    <div>\
    <h2>登陆页</h2> \
    用户名：<input type="text"><br/>\
    密码：<input type="password"><br/>\
    </div>\
    '
}

register.js内容：

const registerForm = {
    template:'\
    <div>\
    <h2>注册页</h2> \
    用&ensp;户&ensp;名：<input type="text"><br/>\
    密&emsp;&emsp;码：<input type="password"><br/>\
    确认密码：<input type="password"><br/>\
    </div>\
    '
}

在父组件中引用

<div id="app">
    <span>登陆</span>
    <span>注册</span>
    <hr/>
    <div>
        <!--<loginForm></loginForm>-->
        <!--
            疑问：为何不采用上面的写法？
            因为html是大小写不敏感的，若是采用上面的写法，则被认为是<loginform></loginform>
            因此，若是是驼峰形式的组件，须要把驼峰转化为“-”的形式
         -->
        <login-form></login-form>
        <register-form></register-form>
    </div>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="user/login.js"></script>
<script src="user/register.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        components: {
            loginForm,
            registerForm
        }
    })
</script>

问题

咱们期待的是，当点击登陆或注册按钮，分别显示登陆页或注册页，而不是一块儿显示。

可是，如何才能动态加载组件，实现组件切换呢？

虽然使用原生的Html5和JS也能实现，可是官方推荐咱们使用vue-router模块。

vue-router简介和安装

使用vue-router和vue能够很是方便的实现 复杂单页应用的动态路由功能。

官网：https://router.vuejs.org/zh-cn/

使用npm安装：npm install vue-router --save

在index.html中引入依赖：

<script src="../node_modules/vue-router/dist/vue-router.js"></script>

快速入门

新建vue-router对象，而且指定路由规则：

// 建立VueRouter对象
const router = new VueRouter({
    routes:[ // 编写路由规则
        {
            path:"/login", // 请求路径
            component:loginForm // 组件名称
        },
        {path:"/register",component:registerForm},
    ]
})
  • 建立VueRouter对象，并指定路由参数
  • routes：路由规则的数组，能够指定多个对象，每一个对象是一条路由规则，包含如下属性：
    • path：路由的路径
    • component：组件名称

在父组件中引入router对象：

var vm = new Vue({
    el:"#app",
    components:{// 引用登陆和注册组件
        loginForm,
        registerForm
    },
    router // 引用上面定义的router对象
})

页面跳转控制：

<div id="app">
    <!--router-link来指定跳转的路径-->
    <span><router-link to="/login">登陆</router-link></span>
    <span><router-link to="/register">注册</router-link></span>
    <hr/>
    <div>
        <!--vue-router的锚点-->
        <router-view></router-view>
    </div>
</div>
  • 经过 router-view 来指定一个锚点，当路由的路径匹配时，vue-router会自动把对应组件放到锚点位置进行渲染
  • 经过 router-link 指定一个跳转连接，当点击时，会触发vue-router的路由功能。

单文件组件

vue-cli3开发单文件组件

Vue.component('组件名',{

})
new Vue({})

缺点

  • 全局定义组件的名字时不能重复
  • 字符串模板 es6提供了模板字符串 \
  • 不支持css

在vue中把.vue的文件称为 单文件组件

Vue CLI3 脚手架

基本配置

  • 安装Nodejs
    • 保证Node.js8.9或更高版本
    • 终端中输入node -v,保证已安装成功
  • 安装淘宝镜像源
    • npm install -g cnpm --registry=https://registry.npm.taobao.org
    • 之后的npm能够用cnpm代替
  • 安装Vue Cli3脚手架
    • cnpm install -g @vue/cli
  • 检查其版本是否正确
    • vue --version

快速原型开发

在命令行工具cmd，或者Intellij IDEA的Terminal中进入想要构建项目的目录，输入

vue init webpack project-name

回车,webpack默认版本为2.0。

接下来会出现几个提示，分别是输入项目名称、描述、做者等，按实际状况选择便可。

？Project name ---- 项目名称，init命令时也填了个project-name，若是无需更改，直接回车便可；

？Project description ---- 项目描述，按需填写。无需填写能够直接回车；

？Author ---- 做者

？Vue build ---- 构建模式，通常默认第一个；

？Install vue-router? ---- 是否安装vue-router。选Y。后边构建项目会用到。

？Use ESLint to lint yout code? ---- 格式校验，按需；

？Set up unit tests ---- 测试相关，按需；

？Setup e2e tests with Nightwatch? ---- 测试相关，按需；

？Should we run ‘npm install’ for you after the project has been created? ---- 按需，这里我选Yes, use NPM。若是选No，后续本身在目标

目录下执行npm install便可。这样构建出来的项目，能够直接运行。进入项目所在目录，执行npm run dev，执行完看到如下提示：

Your application is running here: http://www.javashuo.com/tag/http://localhost:8080

在浏览器打开http://localhost:8080，看到这个页面，接下来就能够开始开发了。

分析Vue脚手架生成的项目结构

​ node_modules:依赖包目录 ​ public：静态资源目录 ​ src：源码目录 ​ src/assets:资源目录 ​ src/components：组件目录 ​ src/views:视图组件目录 ​ src/App.vue:根组件 ​ src/main.js:入口js ​ src/router.js:路由js ​ babel.config.js:babel配置文件

使用单文件组件开发购物车

<template>
  <div id="app">
    <h1>{{title}}</h1>
    <ul>
      <li v-for="item in cartList" :key="item.id">
        <h2>{{item.title}}</h2>
        <p>${{item.price}}</p>
      </li>
    </ul>
    <my-cart :title="title" :cart-list="cartList"></my-cart>
  </div>
</template>

  <script>
    import  MyCart from './components/Cart';
    export default {
      name:"app",
      data() {
        return {
          cartList:[
            {id:1,title:"vue实战",price:188,active:true,count:2},
            {id:2,title:"react实战",price:288,active:false,count:1}],
          title:"购物车"
        };
      },
      components:{MyCart}
    }
  </script>

购物车文件代码：

<template>
    <div>
      <h1>{{title}}</h1>
      <table border="1">
        <tr>
          <th>#</th>
          <th>课程</th>
          <th>单价</th>
          <th>数量</th>
          <th>总价</th>
        </tr>
        <tr v-for="(c,index) in cartList" :key="c.id">
          <td>
            <input type="checkbox" v-model="c.active">
          </td>
          <td>{{c.title}}</td>
          <td>{{c.price}}</td>
          <td>
            <button @click="substract(index)">-</button>
            {{c.count}}
            <button @click="add(index)">+</button>
          </td>
          <td>¥{{c.price*c.count}}</td>
        </tr>
        <tr>
          <td></td>
          <td colspan="2">{{activeCount}}/{{count}}</td>
          <td colspan="2">¥{{total}}</td>
        </tr>
      </table>
    </div>
</template>

<script>
    export default {
      name:"cart",
      props:['title','cartList'],
      methods: {
        remove(i) {
          if (window.confirm("肯定是否要删除?")) {
            this.cartList.splice(i, 1);
          }
        },
        substract(i) {
          let count = this.cartList[i].count;
          count > 1 ? (this.cartList[i].count -= 1) : this.remove(i);
        },
        add(i) {
          this.cartList[i].count++;
        }
      },
      computed:{
        count(){
          return this.cartList.length;
        },
        activeCount(){
          return this.cartList.filter(v=>v.active).length;
        },
        total(){
          let sum=0;
          this.cartList.forEach(c=>{
            if(c.active){
              sum+=c.price*c.count;
            }
          });
          return sum;
        }
      }
    }
</script>


<style scoped>

</style>

Vuejs Ajax

Vuejs 并无直接处理ajax的组件，但可使用axios组件实现对异步请求的操做。

Axios简介

# 若是使用npm则能够以下安装
npm install axios

axios应用

方法说明

axios可使用的方法有：

  • axios(config)

config请求配置

这些是建立请求时能够用的配置选项。只有 url 是必需的。若是没有指定 method ，请求将默认使用 get 方法。

{
	// `url` 是用于请求的服务器 URL
	url: '/user',
	
	// `method` 是建立请求时使用的方法
	method: 'get', // 默认是 get
	
	// `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
	// 它能够经过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
	baseURL: 'https://some-domain.com/api/',
	
	// `params` 是即将与请求一块儿发送的 URL 参数
	// 必须是一个无格式对象(plain object)或 URLSearchParams 对象
	params: {
		ID: 12345
	},
	
	// `data` 是做为请求主体被发送的数据
	// 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
	// 在没有设置 `transformRequest` 时，必须是如下类型之一：
	// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
	// - 浏览器专属：FormData, File, Blob
	// - Node 专属： Stream
	data: {
		firstName: 'Fred'
	},
	
	// `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
	// 若是请求话费了超过 `timeout` 的时间，请求将被中断
	timeout: 1000
}

响应结构

{
	// `data` 由服务器提供的响应
	data: {},
	
	// `status` 来自服务器响应的 HTTP 状态码
	status: 200,
	
	// `statusText` 来自服务器响应的 HTTP 状态信息
	statusText: 'OK',
	
	// `headers` 服务器响应的头
	headers: {},
	
	// `config` 是为请求提供的配置信息
	config: {}
}

axios方法示例

能够经过向 axios 传递相关配置来建立请求

axios(config)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(user,index) in users" :key="index">
            {{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            users: []
        },
        created() {
            // 初始化加载数据
            axios({
                method: "get",
                url: "data.json"
            }).then((res) => {
                console.log(res);
                // 将获取数据设置到users属性
                // 不能使用this，在axios回调函数中表示窗口，不是vue实例
                app.users = res.data;
            }).catch(error => {
                alert(error);
            })
        }
    });
</script>
</body>
</html>

综合案例

购物车综合案例

第一步：实现图书的列表显示

<body>
    <div id="myDiv">
        <table border="1">
            <tr>
                <td>图书编号</td>
                <td>图书名称</td>
                <td>出版日期</td>
                <td>价格</td>
                <td>购买数量</td>
                <td>操做</td>
            </tr>
            <tr v-for="book in books">
                <td>{{book.id}}</td>
                <td>{{book.name}}</td>
                <td>{{book.pubDate}}</td>
                <td>{{book.price}}</td>
                <td>
                    <button>-</button>
                    {{book.number}}
                    <button>+</button>
                </td>
                <td>
                    <button>删除</button>
                </td>
            </tr>
        </table>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el: "#myDiv",
            data: {
                books: [
                    {id: 1, name: '天龙八部', pubDate:'1988-02' ,price: 80.00, number: 1},
                    {id: 2, name: '射雕英雄传', pubDate:'2000-09', price: 20.00, number: 1},
                    {id: 3, name: '倚天屠龙记', pubDate:'1986-12', price: 60.00, number: 1},
                    {id: 4, name: '鹿鼎记', pubDate:'2001-05', price: 70.00, number: 1}
                ]
            }
        });
    </script>
</body>

第二步：价格小数问题处理

方式一：methods

<body>
    <div id="myDiv">
        <table border="1">
            <tr>
                <td>图书编号</td>
                <td>图书名称</td>
                <td>出版日期</td>
                <td>价格</td>
                <td>购买数量</td>
                <td>操做</td>
            </tr>
            <tr v-for="book in books">
                <td>{{book.id}}</td>
                <td>{{book.name}}</td>
                <td>{{book.pubDate}}</td>
                <td>{{getPrice(book.price)}}</td>
                <td>
                    <button>-</button>
                    {{book.number}}
                    <button>+</button>
                </td>
                <td>
                    <button>删除</button>
                </td>
            </tr>
        </table>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el: "#myDiv",
            data: {
                books: [
                    {id: 1, name: '天龙八部', pubDate:'1988-02' ,price: 80.01, number: 1},
                    {id: 2, name: '射雕英雄传', pubDate:'2000-09', price: 20.00, number: 1},
                    {id: 3, name: '倚天屠龙记', pubDate:'1986-12', price: 60.00, number: 1},
                    {id: 4, name: '鹿鼎记', pubDate:'2001-05', price: 70.00, number: 1}
                ]
            },
            methods: {
                getPrice(price){
                    return '￥' + price.toFixed(2);
                }
            }
        });
    </script>
</body>

方式二：过滤器

==能够应用到插值表达式或v-bind表达式中，能够作格式化。==
<body>
    <div id="myDiv">
        <table border="1">
            <tr>
                <td>图书编号</td>
                <td>图书名称</td>
                <td>出版日期</td>
                <td>价格</td>
                <td>购买数量</td>
                <td>操做</td>
            </tr>
            <tr v-for="book in books">
                <td>{{book.id}}</td>
                <td>{{book.name}}</td>
                <td>{{book.pubDate}}</td>
                <td>{{book.price | getPrice}}</td>
                <td>
                    <button>-</button>
                    {{book.number}}
                    <button>+</button>
                </td>
                <td>
                    <button>删除</button>
                </td>
            </tr>
        </table>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el: "#myDiv",
            data: {
                books: [
                    {id: 1, name: '天龙八部', pubDate:'1988-02' ,price: 80.01, number: 1},
                    {id: 2, name: '射雕英雄传', pubDate:'2000-09', price: 20.00, number: 1},
                    {id: 3, name: '倚天屠龙记', pubDate:'1986-12', price: 60.00, number: 1},
                    {id: 4, name: '鹿鼎记', pubDate:'2001-05', price: 70.00, number: 1}
                ]
            },
            filters: {
                getPrice(price){
                    return '￥' + price.toFixed(2);
                }
            }
        });
    </script>
</body>

第三步：数量加减操做

<body>
    <div id="myDiv">
        <table border="1">
            <tr>
                <td>图书编号</td>
                <td>图书名称</td>
                <td>出版日期</td>
                <td>价格</td>
                <td>购买数量</td>
                <td>操做</td>
            </tr>
            <tr v-for="book in books">
                <td>{{book.id}}</td>
                <td>{{book.name}}</td>
                <td>{{book.pubDate}}</td>
                <td>{{book.price}}</td>
                <td>
                    <button @click="decrement(book)" v-bind:disabled="book.number < 2">
                      -
                  	</button>
                    {{book.number}}
                    <button @click="increment(book)">+</button>
                </td>
                <td>
                    <button>删除</button>
                </td>
            </tr>
        </table>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el: "#myDiv",
            data: {
                books: [
                    {id: 1, name: '天龙八部', pubDate:'1988-02' ,price: 80.01, number: 1},
                    {id: 2, name: '射雕英雄传', pubDate:'2000-09', price: 20.00, number: 1},
                    {id: 3, name: '倚天屠龙记', pubDate:'1986-12', price: 60.00, number: 1},
                    {id: 4, name: '鹿鼎记', pubDate:'2001-05', price: 70.00, number: 1}
                ]
            },
            methods: {
                decrement(book){
                    book.number--;
                },
                increment(book){
                    book.number++;
                }
            }
        });
    </script>
</body>

第四步：移除按钮

<body>
    <div id="myDiv">
        <table border="1">
            <tr>
                <td>图书编号</td>
                <td>图书名称</td>
                <td>出版日期</td>
                <td>价格</td>
                <td>购买数量</td>
                <td>操做</td>
            </tr>
            <tr v-for="(book,index) in books">
                <td>{{book.id}}</td>
                <td>{{book.name}}</td>
                <td>{{book.pubDate}}</td>
                <td>{{book.price}}</td>
                <td>
                    <button @click="decrement(book)" v-bind:disabled="book.number < 2">-</button>
                    {{book.number}}
                    <button @click="increment(book)">+</button>
                </td>
                <td>
                    <button @click="deleteHandle(index)">删除</button>
                </td>
            </tr>
        </table>
        <h2 v-if="books.length <= 0">
            购物车空空如也
        </h2>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el: "#myDiv",
            data: {
                books: [
                    {id: 1, name: '天龙八部', pubDate:'1988-02' ,price: 80.01, number: 1},
                    {id: 2, name: '射雕英雄传', pubDate:'2000-09', price: 20.00, number: 1},
                    {id: 3, name: '倚天屠龙记', pubDate:'1986-12', price: 60.00, number: 1},
                    {id: 4, name: '鹿鼎记', pubDate:'2001-05', price: 70.00, number: 1}
                ]
            },
            methods: {
                deleteHandle(index){
                    this.books.splice(index,1);
                }
            }
        });
    </script>
</body>

第五步：计算最终价格

<body>
    <div id="myDiv">
        <table border="1">
            <tr>
                <td>图书编号</td>
                <td>图书名称</td>
                <td>出版日期</td>
                <td>价格</td>
                <td>购买数量</td>
                <td>操做</td>
            </tr>
            <tr v-for="(book,index) in books">
                <td>{{book.id}}</td>
                <td>{{book.name}}</td>
                <td>{{book.pubDate}}</td>
                <td>{{book.price}}</td>
                <td>
                    <button @click="decrement(book)" v-bind:disabled="book.number < 2">-</button>
                    {{book.number}}
                    <button @click="increment(book)">+</button>
                </td>
                <td>
                    <button @click="deleteHandle(index)">删除</button>
                </td>
            </tr>
        </table>
        <h1>总价：{{totalPrice | getPrice}}</h1>
        <h2 v-if="books.length <= 0">
            购物车空空如也
        </h2>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el: "#myDiv",
            data: {
                books: [
                    {id: 1, name: '天龙八部', pubDate:'1988-02' ,price: 80.01, number: 1},
                    {id: 2, name: '射雕英雄传', pubDate:'2000-09', price: 20.00, number: 1},
                    {id: 3, name: '倚天屠龙记', pubDate:'1986-12', price: 60.00, number: 1},
                    {id: 4, name: '鹿鼎记', pubDate:'2001-05', price: 70.00, number: 1}
                ]
            },
            filters: {
                getPrice(price){
                    return '￥' + price.toFixed(2);
                }
            },
            computed: {
                totalPrice(){
                    return this.books.reduce((sum,book)=>{
                        return sum  + book.price;
                    },0)
                }
            }
        });
    </script>
</body>

图书管理综合案例

第一步：实现列表、新增和删除

<body>
    <div id="myDiv">
        id: <input type="text" v-model="id"/>
        图书名称: <input type="text" v-model="name"/>
        <button @click="add">添加</button>
        <table border="1">
            <tr>
                <td>图书编号</td>
                <td>图书名称</td>
                <td>出版日期</td>
                <td>操做</td>
            </tr>
            <tr v-for="(book,index) in books">
                <td>{{book.id}}</td>
                <td>{{book.name}}</td>
                <td>{{book.pubDate}}</td>
                <td>
                    <a href="" @click.prevent="deleteHandle(index)">删除</a> //阻止事件默认行为
                </td>
            </tr>
        </table>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el: "#myDiv",
            data: {
                id: '',
                name: '',
                books: [
                    {id: 1, name: '天龙八部', pubDate: new Date()},
                    {id: 2, name: '射雕英雄传', pubDate: new Date()},
                ]
            },
            methods: {
                add(){
                    let book = {id:this.id, name:this.name , pubDate:new Date()};
                    this.books.push(book);
                },
                deleteHandle(index){
                    this.books.splice(index,1);
                }
            }
        });
    </script>
</body>

第二步：实现搜索筛选

<body>
    <div id="myDiv">
        id: <input type="text" v-model="id"/>
        图书名称: <input type="text" v-model="name"/>
        <button @click="add">添加</button>

        根据图书名称搜索：<input type="text" v-model="kw"/>

        <table border="1">
            <tr>
                <td>图书编号</td>
                <td>图书名称</td>
                <td>出版日期</td>
                <td>操做</td>
            </tr>
            <tr v-for="(book,index) in search(kw)">
                <td>{{book.id}}</td>
                <td>{{book.name}}</td>
                <td>{{book.pubDate}}</td>
                <td>
                    <a href="" @click.prevent="deleteHandle(index)">删除</a>
                </td>
            </tr>
        </table>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el: "#myDiv",
            data: {
                id: '',
                name: '',
                kw: '',
                books: [
                    {id: 1, name: '天龙八部', pubDate: new Date()},
                    {id: 2, name: '射雕英雄传', pubDate: new Date()},
                ]
            },
            methods: {
                add(){
                    let book = {id:this.id, name:this.name , pubDate:new Date()};
                    this.books.push(book);
                },
                search(kw){
                    let result = [];
                    this.books.forEach((item)=>{
                        if (item.name.includes(kw)){
                            result.push(item);
                        }
                    });
                    return result;
                }
            }
        });
    </script>
</body>
==换种方式实现：==
search(kw){
    return this.books.filter((item)=>{
        return item.name.includes(kw);
    })
}

第三步：日期格式化

<body>
    <div id="myDiv">
        id: <input type="text" v-model="id"/>
        图书名称: <input type="text" v-model="name"/>
        <button>添加</button>

        根据图书名称搜索：<input type="text" v-model="kw"/>

        <table border="1">
            <tr>
                <td>图书编号</td>
                <td>图书名称</td>
                <td>出版日期</td>
                <td>操做</td>
            </tr>
            <tr v-for="(book,index) in books">
                <td>{{book.id}}</td>
                <td>{{book.name}}</td>
                <td>{{book.pubDate | dateFormat}}</td>
                <td>
                    <a href="">删除</a>
                </td>
            </tr>
        </table>
    </div>
    <script src="../js/vue.js"></script>
    <script src="../js/moment.js"></script>
    <script type="text/javascript">
        Vue.filter("dateFormat",(value)=>{
            return moment(value).format("YYYY-MM-DD");
        });
        const app = new Vue({
            el: "#myDiv",
            data: {
                id: '',
                name: '',
                kw: '',
                books: [
                    {id: 1, name: '天龙八部', pubDate: new Date()},
                    {id: 2, name: '射雕英雄传', pubDate: new Date()},
                ]
            }
        });
    </script>
</body>

第四步：优化添加功能

==需求：上面的案例中，咱们须要点击添加按钮实现添加一本书，有时候是这样子的，咱们按下回车键也能够添加，下面就来作这个功能。==

按下enter键实现添加方式1

图书名称: <input type="text" v-model="name" @keyup.enter="add"/>  // 可行

按下enter键实现添加方式2

图书名称: <input type="text" v-model="name" @keyup.13="add"/>  // 键码可行

按下F2键实现添加方式1

图书名称: <input type="text" v-model="name" @keyup.f2="add"/>	// 可行，低版本不可行

按下F2键实现添加方式2

图书名称: <input type="text" v-model="name" @keyup.113="add"/>	// 可行，经过键码表明F2可行

按下F2键盘实现添加方式3

==经过键码表明F2可行，可是阅读性很差，能够自定义按键修饰符，主要是处理低版本Vue的问题。==

图书名称: <input type="text" v-model="name" @keyup.f2="add"/>
Vue.config.keyCodes.f2 = 113

第五步：页面打开的时候就搜索框得到焦点

根据图书名称搜索：<input type="text" v-model="kw" v-focus/>
Vue.directive("focus",{
    inserted: function(el){
        el.focus();
    }
});

第五步：实现修改功能

<body>
    <div id="myDiv">
        id: <input type="text" v-model="id" :disabled="disable"/>
        图书名称: <input type="text" v-model="name"/>
        <button @click="handle">提交</button>

        根据图书名称搜索：<input type="text" v-model="kw"/>

        <table border="1">
            <tr>
                <td>图书编号</td>
                <td>图书名称</td>
                <td>出版日期</td>
                <td>操做</td>
            </tr>
            <tr v-for="(book,index) in books">
                <td>{{book.id}}</td>
                <td>{{book.name}}</td>
                <td>{{book.pubDate}}</td>
                <td>
                    <a href="" @click.prevent="update(book.id)">修改</a>
                    <a href="">删除</a>
                </td>
            </tr>
        </table>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el: "#myDiv",
            data: {
                id: '',
                name: '',
                kw: '',
                disable: false,
                books: [
                    {id: 1, name: '天龙八部', pubDate: new Date()},
                    {id: 2, name: '射雕英雄传', pubDate: new Date()},
                ]
            },
            methods: {
                // 添加和修改重用
                handle(){
                    if(this.disable){
                        // 为true,就表示修改
                        this.books.forEach((item)=>{
                            if(item.id == this.id){
                                item.name = this.name;
                                return item;
                            }
                        });
                        // 修改完毕以后还须要对disable设置为true表示容许添加
                        this.disable = false;
                        this.id = "";
                        this.name = "";
                    }else{
                        // 就表示添加
                        let book = {id:this.id, name:this.name , pubDate:new Date()};
                        this.books.push(book);
                    }
                },
                update(bookId){
                    // 0、禁止修改id文本框
                    this.disable = true;

                    // 一、根据bookId查找出要编辑的图书
                    let book = this.books.filter((item)=>{
                        return item.id == bookId;
                    });
                    // 二、把获取到的图书填充到表单中
                    this.id = book[0].id;
                    this.name = book[0].name;
                }
            }
        });
    </script>
</body>

第六步：使用计算属性统计图书种类

<h1>总共有{{totalCount}}种不一样种类的书</h1>
computed: {
    totalCount(){
        return this.books.length;
    }
}

第七步：不能添加剧复的图书【监听器】

<body>
    <div id="myDiv">
        id: <input type="text" v-model="id" :disabled="disable"/>
        图书名称: <input type="text" v-model="name"/>
        <button @click="handle" :disabled="flag">提交</button>

        根据图书名称搜索：<input type="text" v-model="kw"/>

        <table border="1">
            <tr>
                <td>图书编号</td>
                <td>图书名称</td>
                <td>出版日期</td>
                <td>操做</td>
            </tr>
            <tr v-for="(book,index) in books">
                <td>{{book.id}}</td>
                <td>{{book.name}}</td>
                <td>{{book.pubDate}}</td>
                <td>
                    <a href="" @click.prevent="update(book.id)">修改</a>
                    <a href="">删除</a>
                </td>
            </tr>
        </table>
        <h1>总共有{{totalCount}}种不一样种类的书</h1>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el: "#myDiv",
            data: {
                id: '',
                name: '',
                kw: '',
                disable: false,
                flag: false,
                books: [
                    {id: 1, name: '天龙八部', pubDate: new Date()},
                    {id: 2, name: '射雕英雄传', pubDate: new Date()},
                ]
            },
            computed: {
                totalCount(){
                    return this.books.length;
                }
            },
            methods: {
                // 添加和修改重用
                handle(){
                    if(this.disable){
                        // 为true,就表示修改
                        this.books.forEach((item)=>{
                            if(item.id == this.id){
                                item.name = this.name;
                                return item;
                            }
                        });
                        // 修改完毕以后还须要对disable设置为true表示容许添加
                        this.disable = false;
                        this.id = "";
                        this.name = "";
                    }else{
                        // 就表示添加
                        let book = {id:this.id, name:this.name , pubDate:new Date()};
                        this.books.push(book);
                    }
                },
                update(bookId){
                    // 0、禁止修改id文本框
                    this.disable = true;

                    // 一、根据bookId查找出要编辑的图书
                    let book = this.books.filter((item)=>{
                        return item.id == bookId;
                    });
                    // 二、把获取到的图书填充到表单中
                    this.id = book[0].id;
                    this.name = book[0].name;
                }
            },
            watch:{
                name(value){
                    let result = false;
                    this.books.forEach((item)=>{
                        if (item.name == value){
                            result = true;
                            return;
                        }
                    })
                    if (result){
                        console.log("11");
                        this.flag = true;
                    }else{
                        this.flag = false;
                    }
                }
            }
        });
    </script>
</body>

第八步：图书数据的初始化

mounted(){
    // 模拟ajax请求获取数据
    let result = [
                {id: 1, name: '天龙八部', pubDate: new Date()},
                {id: 2, name: '射雕英雄传', pubDate: new Date()}
                ];

    this.books = result;
},
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程