Vue快速入门

最新推荐文章于 2024-07-24 12:54:56 发布

Gypsophyla

最新推荐文章于 2024-07-24 12:54:56 发布

阅读量1k

点赞数 1

分类专栏：框架前端文章标签： vue java javascript

本文链接：https://blog.csdn.net/qq_43601784/article/details/108884150

版权

框架同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

前端

8 篇文章 1 订阅

订阅专栏

文章目录

1.概述
2.快速入门
3.指令
4.组件
5.路由vue-router
- 5.2.vue-router简介和安装
- 5.3.快速入门
6.axios异步通信

1.概述

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2.快速入门

2.1.安装vue

2.1.1.下载安装

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

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

下载解压，得到vue.js文件。

2.1.2.使用CDN

或者也可以直接使用公共的CDN服务：

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

或者：

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

2.1.3.npm安装

直接创建node.js工程
在idea的左下角，有个Terminal按钮，点击打开控制台：
在控制台，安装Vue，输入命令：npm install vue --save
在这里插入图片描述
然后就会在hello-vue目录发现一个node_modules目录，并且在下面有一个vue目录。

node_modules是通过npm安装的所有模块的默认位置。

2.2.vue入门案例

2.2.1.vue声明式渲染

<body>
<div id="app">
    <h2>你好，我叫{{name}}</h2>
</div>
</body>
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
    // 创建vue实例
    var app = new Vue({
        el:"#app", // el即element，该vue实例要渲染的页面元素
        data:{ // 渲染页面需要的数据
            name: "张筱枫"
        }
    });

</script>

首先通过new Vue()来创建Vue实例

然后构造函数接收一个对象，对象中有一些属性：
- el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div
- data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
  - name：这里指定了一个name属性
页面中的h2元素中，通过{{name}}的方式，来渲染刚刚定义的name属性。

测试
在这里插入图片描述

2.2.2.双向绑定

<div id="app">
    <input type="text" v-model="name">
    <h2>你好，我叫{{name}}</h2>
</div>
</body>
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
    // 创建vue实例
    var app = new Vue({
        el:"#app", // el即element，该vue实例要渲染的页面元素
        data:{ // 渲染页面需要的数据
            name: "张筱枫"
        }
    });

</script>

在页面上有一个input ，通过v-model与name进行绑定
同时通过name在页面输出
效果
在这里插入图片描述

2.2.3.事件处理

通过v-on:事件，来进行事件处理，这里设置一个点击事件，每点击一次num+1

<div id="app">
    <input type="text" v-model="name">
    <button  v-on:click="add">+</button>
    <h2>你好，我叫{{name}},今年{{num}}岁</h2>
</div>
</body>

<script>
    // 创建vue实例
    var app = new Vue({
        el:"#app", // el即element，该vue实例要渲染的页面元素
        data:{ // 渲染页面需要的数据
            name: "张筱枫",
            num:"20"
        },
        method:{//方法
            add:function () {
                this.num++;
            }
        }
    });

</script>

在这里插入图片描述

2.3.生命周期钩子

2.3.1生命周期

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

2.3.2.钩子函数

beforeCreated：我们在用Vue时都要进行实例化，因此，该函数就是在Vue实例化时调用，也可以将他理解为初始化函数比较方便一点，在Vue1.0时，这个函数的名字就是init。

created：在创建实例之后进行调用。

beforeMount：页面加载完成，没有渲染。如：此时页面还是{{name}}

mounted：我们可以将他理解为原生js中的window.οnlοad=function({.,.}),或许大家也在用jquery，所以也可以理解为jquery中的$(document).ready(function(){….})，他的功能就是：在dom文档渲染完毕之后将要执行的函数，该函数在Vue1.0版本中名字为compiled。此时页面中的{{name}}已被渲染成峰哥

beforeDestroy：该函数将在销毁实例前进行调用。

destroyed：改函数将在销毁实例时进行调用。

beforeUpdate：组件更新之前。

updated：组件更新之后。

例如：created代表在vue实例创建后；

我们可以在Vue中定义一个created函数，代表这个时期的钩子函数：

<body>

<div id="app">
    <input type="text" v-model="name">
    <button  v-on:click="add">+</button>
    <h2>你好，我叫{{name}},今年{{num}}岁</h2>
</div>
</body>

<script>
    // 创建vue实例
    var app = new Vue({
        el:"#app", // el即element，该vue实例要渲染的页面元素
        data:{ // 渲染页面需要的数据
            name: "张筱枫",
            num:"20"
        },
        method:{//方法
            add:function () {
                this.num++;
            }
        },
        created:function(){
            this.num=100;
        }
    });

</script>

结果
在这里插入图片描述

3.指令

什么是指令？

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是：单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

例如v-on，代表绑定事件。

3.1.插值表达式

3.1.1.花括号

格式：

{{表达式}}

说明：

该表达式支持JS语法，可以调用js内置函数（必须有返回值）
表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
可以直接获取Vue实例中定义的数据或函数
使用v-text和v-html指令来替代{{}}

注意：使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{{}}，加载完毕后才显示正确数据。

3.1.2.v-text和v-html

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

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

示例：

HTML:

<div id="app">
    v-text:<span v-text="hello"></span> <br/>
    v-html:<span v-html="hello"></span>
</div>

JS:

var vm = new Vue({
    el:"#app",
    data:{
        hello: "<h1>hello，world</h1>"
    }
})

3.2.v-model

v-model双向绑定，视图（View）和模型（Model）之间会互相影响。
目前v-model的可使用元素有：

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

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

<body>

<div id="app">
    <input type="checkbox" v-model="language" value="java">java <br/>
    <input type="checkbox" v-model="language" value="c++">c++<br/>
    <input type="checkbox" v-model="language" value="python">python<br/>
    <h1>你选择了:{{language.join(',')}}</h1>
</div>
</body>

<script>
    // 创建vue实例
    var vm = new Vue({
        el:"#app", // el即element，该vue实例要渲染的页面元素
        data:{
            language:[]
        }
    });

</script>

效果：
在这里插入图片描述

3.3.v-on

3.3.1.基本语法

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

语法：

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

事件绑定可以简写，例如v-on:click='add'可以简写为@click='add'

3.3.2.事件修饰符

事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

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

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

阻止默认事件

<div id="app">
    <input type="text" v-model="name">
    <!--右击事件，并阻止默认事件发生-->
    <button  v-on:contextmenu.prevent="num++">+</button>
    <h2>你好，我叫{{name}},今年{{num}}岁</h2>
</div>
</body>

<script>
    // 创建vue实例
    var app = new Vue({
        el:"#app", // el即element，该vue实例要渲染的页面元素
        data:{ // 渲染页面需要的数据
            name: "张筱枫",
            num:"20"
        },
        method:{//方法
            add:function () {
                this.num++;
            }
        },

    });

</script>

效果：（右键“增加一个”，不会触发默认的浏览器右击事件；右键“减少一个”，会触发默认的浏览器右击事件）

3.3.3.按键修饰符

在监听键盘事件时，经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名：

.enter*
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl
.alt
.shift

例如：

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

3.4.v-for

3.4.1.遍历数组

语法：

v-for="item in items"

items：要遍历的数组，需要在vue的data中定义好。
- item：迭代得到的数组元素的别名

示例

<body>
<div id="app">
    <ul >
        <li v-for="user in users">-{{user.name}}-{{user.gender}}-{{user.location}}-</li>
    </ul>
</div>

</body>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            users:[
                 {name: "伊泽瑞尔",gender:"男",location:"下路"},
                 {name: "慎",gender:"男",location:"上路，辅助"},
                 {name: "拉克丝",gender:"女",location:"中路，辅助"}
            ]
        }
    })
</script>

效果
在这里插入图片描述

3.4.2.数组角标

在遍历的过程中，如果需要知道数组角标，可以指定第二个参数：

语法

v-for="(item,index) in items"

items：要迭代的数组
item：迭代得到的数组元素别名
index：迭代到的当前元素索引，从0开始。

示例

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

效果
在这里插入图片描述

3.4.3.遍历对象

v-for除了可以迭代数组，也可以迭代对象。语法基本类似

语法：

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"

1个参数时，得到的是对象的属性值
2个参数时，第一个是属性值，第二个是属性名
3个参数时，第三个是索引，从0开始

示例：

<div id="app">
    <ul >
        <li v-for="(value,key,index) in user">-{{index+1}}.-{{key}}-{{value}}</li>
    </ul>
</div>

</body>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            user:{name: "伊泽瑞尔",gender:"男",location:"下路"}
        }
    })
</script>

效果
在这里插入图片描述

3.4.4.key

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

这个功能可以有效的提高渲染的效率。

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

示例：

<ul>
    <li v-for="(item,index) in items" :key=index></li>
</ul>

这里使用了一个特殊语法：:key="" 我们后面会讲到，它可以让你读取vue中的属性，并赋值给key属性
这里绑定的key是数组的索引，应该是唯一的

3.5.v-if和v-show

3.5.1.基本使用

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

语法：

v-if="布尔表达式"

示例：

<body>
<div id="app">
   <button @click="show = !show">点我</button>
    <br>
    <h1 v-if="show">if为true</h1>

    <h1 v-show="show">show为true</h1>
</div>

</body>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            show:true
        }
    })
</script>
</html>

在这里插入图片描述
由上图可以看到，v-if对应的元素没有渲染，而v-show渲染了仅仅是将display的属性改为none，所以v-if 相比v-show 效率更高，

3.5.2.与v-for结合使用

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

修改v-for中的案例，添加v-if：

<div id="app">

    <ul >
        <li v-if="user.gender=='男'" v-for="(user,index) in users">-{{index+1}}.-{{user.name}}-{{user.gender}}-{{user.location}}</li>
    </ul>
</div>

</body>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            users:[
                {name: "伊泽瑞尔",gender:"男",location:"下路"},
                {name: "慎",gender:"男",location:"上路，辅助"},
                {name: "拉克丝",gender:"女",location:"中路，辅助"}
            ]
        }
    })
</script>

在这里插入图片描述

只显示性别为男的信息

3.5.3.v-else

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

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

<body>
<div id="app">
    <button @click="random=Math.random()">得到一个0-1的随机数</button><span>{{random}}</span>
    <h1 v-if="random>0.6">random > 0.6</h1>
    <h1 v-else-if="random>0.4">0.4 < random <=0.6</h1>
    <h1 v-else>random<=0.4</h1>
</div>

</body>
<script>
    var app = new Vue({
        el: '#app',
        data:{
           random:0
        }
    })
</script>

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

演示：

在这里插入图片描述

3.6.v-bind

html属性不能使用双大括号形式绑定，只能使用v-bind指令。

在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

<div id="app">
    <!--可以是数据模型，可以是具有返回值的js代码块或者函数-->
    <div v-bind:title="title" style="border: 1px solid red; width: 50px; height: 50px;"></div>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            title: "title",
        }
    })
</script>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q1CTU5Yb-1601605655779)(assets/1530025378843.png)]

在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

3.6.1.绑定class样式

数组语法

我们可以借助于v-bind指令来实现：

HTML：

<div id="app">
    <div v-bind:class="activeClass"></div>
    <div v-bind:class="errorClass"></div>
    <div v-bind:class="[activeClass, errorClass]"></div>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            activeClass: 'active',
            errorClass: ['text-danger', 'text-error']
        }
    })
</script>

渲染后的效果：（具有active和hasError的样式）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AcCIzqDR-1601605655787)(assets/1530026818515.png)]

对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

<div v-bind:class="{ active: isActive }"></div>

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness（所有的值都是真实的，除了false,0,“”,null,undefined和NaN）。
示例

<body>
<div id="app">
    <input type="text" v-model="store">
    <input type="button" v-bind:class="{active: store>0 }" value="加入购物车">
</div>
</body>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            store:0
        }
    })
</script>

效果
在这里插入图片描述

你可以在对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。如下模板:

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

和如下 data：

data: {
  isActive: true,
  hasError: false
}

结果渲染为：

<div class="static active"></div>

active样式和text-danger样式的存在与否，取决于isActive和hasError的值。本例中isActive为true，hasError为false，所以active样式存在，text-danger不存在。

3.6.2.绑定style样式

数组语法

数组语法可以将多个样式对象应用到同一个元素上：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

数据：

data: {
    baseStyles: {'background-color': 'red'},
    overridingStyles: {border: '1px solid black'}
}

渲染后的结果：

<div style="background-color: red; border: 1px solid black;"></div>

对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

数据：

data: {
  activeColor: 'red',
  fontSize: 30
}

效果：

<div style="color: red; font-size: 30px;"></div>

3.6.3.简写

v-bind:class可以简写为:class

3.7.计算属性

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

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

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

我们在页面渲染，希望得到yyyy-MM-dd的样式：

<h1>您的生日是：{{
    new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay()
    }}
</h1>

虽然能得到结果，但是非常麻烦。

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

var vm = new Vue({
    el:"#app",
    data:{
        birthday:1429032123201 // 毫秒值
    },
    computed:{
        birth(){// 计算属性本质是一个方法，但是必须返回结果
            const d = new Date(this.birthday);
            return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
        }
    }
})

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

页面使用：

    <div id="app">
       <h1>您的生日是：{{birth}} </h1>
    </div>

效果：

在这里插入图片描述

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要birthday还没有发生改变，多次访问 birthday 计算属性会立即返回之前的计算结果，而不必再次执行函数。

3.8.watch

watch可以让我们监控一个值的变化。从而做出相应的反应。

示例：

<div id="app">
    <input type="text" v-model="message">
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:""
        },
        watch:{
            message(newVal, oldVal){
                console.log(newVal, oldVal);
            }
        }
    })
</script>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JlRyE0fm-1601607972857)(assets/1530030506879.png)]

4.组件

4.1.全局组件

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

<body>
    <div id="app">
<!--        使用定义好的全局组件-->
        <counter></counter>
    </div>
</body>
<script>
    // 定义全局组件，两个参数：1，组件名称。2，组件参数
    Vue.component("counter",{
        template:'<button @click="count++">你点了我{{count}}次</button>',
        data(){
            return{
                count:0
            }
        }
    })

    const app = new Vue({
        el:"#app"
    })
</script>

组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
data必须是一个函数，不再是一个对象。

效果：

在这里插入图片描述

4.2.组件的复用

定义好的组件，可以任意复用多次：

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

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gRdqnFB5-1601618971003)(assets/1530084943778.png)]

每个组件互不干扰，都有自己的count值。

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

当定义这个 <counter> 组件时，它的data 并不是像之前直接提供一个对象：

data: {
  count: 0
}

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

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

如果 Vue 没有这条规则，点击一个按钮就会影响到其它所有实例！

4.3.局部组件

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

因此，对于一些并不频繁使用的组件，采用局部注册。

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

   const counter = {
        template:'<button @click="count++">你点了我{{count}}次</button>',
        data() {
            return {
                count:0
            }
        }
    }

然后在Vue中使用它：

    const app = new Vue({
        el:"#app",
        components:{
            counter1:counter //将在上面定义的对象注册为组件
        }
    })

components就是当前vue对象子组件集合。
- 其key就是子组件名称
- 其值就是组件对象名
效果与刚才的全局注册是类似的，不同的是，这个counter组件只能在当前的Vue实例中使用

4.4.组件通信

通常一个单页应用会以一棵嵌套的组件树的形式来组织：
在这里插入图片描述

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

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

4.4.1.props（父向子传递）

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

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

<body>
<div id="app">
<!--    使用子组件，同时传递title属性-->
    <introduce title="你好啊"></introduce>
</div>
</body>
<script>
    Vue.component("introduce",{
        template:'<h1>{{title}}</h1>',
        props:['title']
    })
    let app = new Vue({
        el:"#app",

    })
</script>

效果：

在这里插入图片描述

4.4.2.props验证

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

  const mylist = {
        template: '\
        <ul>\
        	<li v-for="item in items" :key="item.id">{{item.name}} : {{item.location}}</li>\
        </ul>\
        ',
        props:{
            items:{
                type:Array,
                default:[],
                required:true
            }
        }
    }

这个子组件可以对 items 进行迭代，并输出到页面。
props：定义需要从父组件中接收的属性
- items：是要接收的属性名称
  - type：限定父组件传递来的必须是数组
  - default：默认值
  - required：是否必须

当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。

我们在父组件中使用它：

<<div id="app">
    <mylist :items="heros"></mylist>
</div>

const app = new Vue({
        el:"#app",
        components: {
            mylist
        },
        data:{
            heros:[
                {name:"ez",location:"下路"},
                {name:"vn",location:"下路"},
                {name:"zoe",location:"中路"}
            ]
        }
    })

效果：

在这里插入图片描述

type类型，可以有：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9GYDcdqQ-1601627645112)(assets/1530108427358.png)]

注意：子组件模板有且只有一个根标签

4.4.3.动态静态传递

给 prop 传入一个静态的值：

<introduce title="大家好"/>

给 prop 传入一个动态的值：（通过v-bind从数据模型中，获取title的值）

<introduce :title="title"/>

静态传递时，传入的值都是字符串类型的，但实际上任何类型的值都可以传给一个 props。

<!-- 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个JavaScript表达式而不是一个字符串。-->
<blog-post v-bind:likes="42"></blog-post>

<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:likes="post.likes"></blog-post>

4.4.4.子向父的通信：$emit

子组件接收到父组件属性后，默认是不允许修改的

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

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()函数，用来调用父组件绑定的函数

效果：

在这里插入图片描述

5.路由vue-router

写一个功能，登录注册页点击切换
在这里插入图片描述
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <span>登录</span>
    <span>注册</span>
    <login-form></login-form>
    <register-form></register-form>
</div>
</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="user/login.js"></script>
<script src="user/register.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        components:{
            loginForm: login,
            registerForm: register
        }
    })
</script>
</html>

const login={
    template:'\
    <div>\
    <h2>登录页</h2> \
    用户名：<input type="text"><br/>\
    密&emsp;码：<input type="password"><br/>\
    </div>\
    '
}

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

在这里插入图片描述
通过路由router来实现点击登录注册动态切换

5.2.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>

5.3.快速入门

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


    //创建路由对象
    const router = new VueRouter({
        routes:[//编写路由规则
            {
                path:"/login", //请求路径，以“/”开头
                component:login //组件名称
            },
            {
                path:"/register", //请求路径，以“/”开头
                component:register //组件名称
            }

        ]
    })

创建VueRouter对象，并指定路由参数
routes：路由规则的数组，可以指定多个对象，每个对象是一条路由规则，包含以下属性：
- path：路由的路径
- component：组件名称

在父组件中引入router对象：

const app = new Vue({
        el:'#app',
        components:{
            loginForm: login,
            registerForm: register
        },
        router //引用router对象
    })

页面跳转控制：

<div id="app">
    <!--router-link来指定跳转的路径-->
    <span><router-link to="/login">登录</router-link> </span>
    <span><router-link to="/register">注册</router-link></span>
    <!--vue-router的锚点-->
    <router-view></router-view>
</div>

效果
在这里插入图片描述
注意：单页应用中，页面的切换并不是页面的跳转。仅仅是地址最后的hash值变化。

事实上，总共就一个HTML：index.html

6.axios异步通信

新建一个data.json文件

{
  "name": "张筱枫",
  "age": "22",
  "blogUrl": "https://blog.csdn.net/qq_43601784"
}

导入js

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

在mounted方法中实现axios获取json数据，并将数据返回给data，注意数据的格式要和data中的属性相同

<script>
    let app = new Vue({
        el:"#app",
        data(){
           return{
               info:{
                   name: null,
                   age: null,
                   blogUrl:null
               }}

        },
        mounted() {
            axios.get('data.json').then(response=>(this.info=response.data))
        }
    })
</script>

页面显示

    <div id="app">
        <p>{{info.name}}</p>
        <p>{{info.age}}</p>
        <a :href="info.blogUrl">博客</a>
    </div>

效果
在这里插入图片描述

Gypsophyla

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue快速入门

文章目录1.概述2.快速入门2.1.安装vue2.1.1.下载安装2.1.2.使用CDN2.1.3.npm安装2.2.vue入门案例2.2.1.vue声明式渲染2.2.2.双向绑定2.2.3.事件处理2.3.生命周期钩子2.3.1生命周期2.3.2.钩子函数3.指令3.1.插值表达式3.1.1.花括号3.1.2.v-text和v-html3.2.v-model1.概述Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上
复制链接

扫一扫

专栏目录