首页 > 其他分享> 文章详细

vue入门

2022-07-04 12:37:09 阅读：107 来源： 互联网

标签：function el vue 入门 app Vue 组件 data

1.Vue.js

1.1 Vue.js 介绍

1.1.1 Vue.js是什么?

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，

Vue 被设计为可以自底向上逐层应用.

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与

现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

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

官方网站: https://cn.vuejs.org/v2/guide/ 作者尤雨溪是中国人.

1.1.2 为甚么使用Vue?

1. 声明式渲染: 前后端分离是未来趋势

2. 渐进式框架: 适用于各种业务需求

3. 简单易学: 国人开发,中文文档,不存在语言障碍,易于理解和学习

1.2 Vue.js 基础

1.2.1 Vue.js的使用

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

远程CDN

本地

2. Vue-CLI脚手架:使用vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形

1.2.2 入门程序

创建一个vuetest目录, 并且在目录下创建 01_vue入门程序.html 文件.

代码编写步骤：

1、定义html，引入vue.js

2、定义app div，此区域作为vue的接管区域

3、定义Vue实例，接管app区域。

4、定义model（数据对象）

5、在app中展示数据

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Vue入门</title>

<!-- 1.创建HTML文件， 引入vue.js 有两种方式-->

<!-- 第一种 引入 vue.js的CDN地址 -->

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

</script> -->

<!-- 第二种 本地导入 -->

<script src="vue.min.js"></script>

</head>

<body>

<!-- 2. 定义app div，此区域作为vue的接管区域 -->

<div id="app">

<!-- {{}} 双括号是VUE中的差值表达式,将表达式的值输出到HTML页面 -->

{{name}}

</div>

</body>

<script>

//3. 创建vue实例

var VM = new Vue({

//定义 Vue实例挂载的元素节点,表示vue接管该div

el:'#app',

//4.定义model模型数据对象

data:{

name:"哈拉少"

}

});

</script>

</html>

1. {{}}: 插值表达式

1. 插值表达式的作用?

通常用来获取Vue实例中定义的数据(data)

属性节点中不能够使用插值表达式

2. el: 挂载点

1. el的作用 ?

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

2. Vue的作用范围是什么 ?

Vue会管理el选项命中的元素,及其内部元素

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

4. 是否可以设置其他的DOM元素进行关联 ?

可以但是建议选择DIV, 不能使用HTML和Body标签

3. data: 数据对象

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

2. data中可以写复杂类型

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

<body>

<!-- 此区域作为vue的接管区域 -->

<div id="app">

{{name}} <br>

{{school.name}} {{school.mobile}}<br>

<ul>

<li>{{names[0]}}</li>

<li>{{names[1]}}</li>

<li>{{names[2]}}</li>

</ul>

</div>

</body>

<script>

//创建vue实例

var VM = new Vue({

el:'#app',

data:{

name:"雷霆八嘎",

//对象类型数据

school:{

name:"拉钩教育",

mobile:"1001001"

},

//数组类型

names:["小斌","张百万","刘能"]

}

});

</script>

1.2.3 声明式渲染的好处

Vue中的声明式渲染,简单理解就是我们声明数据,Vue帮我们将数据渲染到HTML.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Document</title>

</head>

<body>

<div id="app">

<h2>{{name}}</h2>

</div>
</body>

<!--

jQuery中，如果 DOM 发生变化, js代码也需要做相应的改变，高耦合 .

<script src="./js/jquery-1.8.3.min.js"></script>

<script>

$(document).ready(function () {

$("#app").append("<h2>Hello Word! !</h2>");

});

</script> -->

<!-- 在用 Vue中，只需要定义好展示数据，并把它放在 DOM 合适的位置就可以. -->

<script src="js/vue.min.js"></script>

<script>

var VM = new Vue({

el: "#app", //挂载点

data: {

name: "Hello Word! !",

},

});

</script>

</html>

1.2.4 Vue常用指令

根据官网的介绍，指令是带有 v- 前缀的特殊属性。通过指令来操作DOM元素

1. v-text 指令

作用: 获取data数据, 设置标签的内容.

注意: 默认写法会替换全部内容,使用插值表达式{{}}可以替换指定内容.

代码示例

<body>

<div id="app">

<!-- v-text 获取data数据,设置标签内容,会覆盖之前的内容体-->

<h2 v-text="message">百度</h2>

<!-- 使用插值表达式,不会覆盖 -->

<h2>{{message}}百度</h2>

<!-- 拼接字符串 -->

<h2 v-text="message+1"></h2>

<h2 v-text="message+'abc'"></h2>

</div>

<script>

var VM = new Vue({

el:"#app",

data:{

message:"Java程序员"

}
})

</script>

</body>

</html>

2. v-html 指令

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

代码示例

<body>

<div id="app">

<!-- 获取普通文本 -->

{{message}}

<h2 v-text="message"></h2>

<h2 v-html="message"></h2>

<!-- 设置元素的innerHTML -->

<h2 v-html="url"></h2>

<h2 v-text="url"></h2>

</div>

</body>

<script src="./js/vue.min.js"></script>

<script>

var VM = new Vue({

el: "#app",

data: {

message: "Java程序员",

url: "<a href='https://www.baidu.com'>百度一下</a>",

},

});

</script>

3. v-on 指令

作用: 为元素绑定事件, 比如: v-on:click,可以简写为 @click="方法"

绑定的方法定义在 VUE实例的, method属性中

语法格式

<div id="app">

<!-- 使用v-on 绑定click 点击事件 -->

<input type="button" value="点击按钮" v-on:click="方法名">

<!-- 使用 @符号也可以绑定-->

<input type="button" value="点击按钮" @click="方法名">

</div>

var VM = new Vue({

el:"#app",

//通过methods ,专门存放Vue中的方法

methods:{

方法名:function(){

alert("123!")

}
}
})

代码示例

<body>

<div id="app">

<!-- 使用v-on 绑定click 点击事件 -->

<input type="button" value="点击按钮" v-on:click="show">

<!-- 简写 @方式 -->

<input type="button" value="点击按钮" @click="show">

<!-- 双击事件 -->

<input type="button" value="双击击按钮" @dblclick="show">

<!-- 绑定点击事件 -->

<h2 @click="changeFood">{{food}}</h2>

</div>

</body>

<script src="vue.min.js"></script>

<script>

var VM = new Vue({

el:"#app",

data:{

food:"麻辣小龙虾"

},

//通过methods ,专门存放Vue中的方法

methods:{

show:function(){

alert("程序员!")

},

changeFood:function(){

//使用this获取

console.log(this.food);

//在VUE中不需要考虑如何更改DOM元素, 重点放在更改数据,数据更新之后,使用数据

的那个元素会同步更新

this.food+="真好吃!";

}

}

})

</script>

4. 计数器案例

1) 编码步骤

1. data中定义数据: 比如 num 值为1

2. methods中添加两个方法: 比如add(递增) ,sub(递减)

3. 使用{{}} 将num设置给 span标签

4. 使用v-on 将add,sub 分别绑定给 + ,- 按钮

5. 累加到10 停止

6. 递减到0 停止

2) 页面准备

<body>
<div id="app">
<!-- 计算功能区域 -->
<div>
<input type="button" class="btn btn_plus">
<span>{{num}}</span>
<input type="button" class="btn btn_minus">
</div>
</div>
</body>
<script src="vue.min.js"></script>
<script>
//创建VUE实例
var VM = new Vue({
el:"#app",
data:{
num:1
}
})
</script>
3) 案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/inputNum.css">
</head>
<body>
<div id="app">
<!-- 计算功能区域 -->
<div>
<input type="button" class="btn btn_plus" @click="add">
<span>{{num}}</span>
<input type="button" class="btn btn_minus" @click="sub">
</div>
</div>
</body>
<script src="vue.min.js"></script>
<script>
//创建VUE实例
var VM = new Vue({
el:"#app",
data:{
num:1
},
methods: {
add:function(){
//console.log("add");
if(this.num < 10){
this.num++;
}else{
alert("别点啦!最大了!")
}
},
sub:function(){
//console.log("sub");
if(this.num > 0){
this.num--;
}else{
alert("别点啦!最小了!")
}
}
}
})
</script>
</html>

4) 案例总结

创建VUE实例时: el(挂载点) , data(数据) , methods(方法)

v-on 指令的作用是绑定事件,简写为 @

方法中使用this关键字,获取data中的数据

v-text 与 {{}} 的作用都是用来设置元素的文本值

5. v-show指令

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

页面准备

<body>
<div id="app">
<img src="./img/car.gif" alt="">
</div>
</body>
<script src="vue.min.js"></script>
<script>
var VM = new Vue({
el:"#app"
})
</script>

代码示例

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

v-show 指令总结

原理是修改元素的display,实现显示或者隐藏

指令后面的内容,最终会解析为布尔值

值为true 显示, 为false 则隐藏

数据改变之后,显示的状态会同步更新

6. v-if 指令

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

代码示例

<body>

<div id="app">

<input type="button" value="切换显示状态" @click="changeShow">

<img v-if="isShow" src="./img/car.gif" alt="">

</div>

</body>

<script src="./vue.min.js"></script>

<script>

var VM = new Vue({

el:"#app",

data:{

isShow:false

},
methods: {

changeShow:function(){

this.isShow = !this.isShow;

}

}

})

</script>

v-if 指令总结

v-if 指令的作用: 根据表达式的真假切换元素的显示状态

本质是通过操作dom元素,来切换显示状态

表达式为true 元素存在与dom树,为false从dom树中移除

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

7. v-bind 指令

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

语法格式: v-bind:属性名=表达式

var VM = new Vue({

el:"#app",

data:{

imgSrc:"图片地址"

}

})

v-bind 可以省略，简写为冒号：

代码示例

<body>

<div id="app">

<!-- 使用v-bind设置src属性值 -->

<img v-bind:src="imgSrc" alt="">

<!-- 简写 设置title -->

<img :src="imgSrc" alt="" :title="imgTitle">

<!-- 设置class -->

<div :style="{ fontSize: size + 'px'}">v-bind指令</div>

</div>

</body>

<script src="./vue.min.js"></script>

<script>

var VM = new Vue({

el:"#app",

data:{

imgSrc:"./img/lagou.jpg",

imgTitle:"拉钩教育",

size:100

}

})

</script>

v-bind指令总结

v-bind 指令的作用是：为元素绑定属性

完整写法 v-bind:属性名，可以简写为 :属性名

8. v-for 指令

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

语法结构

<div id="app">

<ul>

<li v-for="item in arr"></li>

</ul>

</div>

var VM = new Vue({

el:"#app",

data:{

arr:[1,2,3,4,5],

objArr:[

{name:"tom"},

{name:"jack"}

]

}

})

代码示例

<body>

<div id="app">

<input type="button" value="添加数据" @click="add">

<input type="button" value="移除数据" @click="remove">

<ul>

<!-- 在li标签中获取数组元素 -->

<li v-for="(item,index) in arr">

{{index+1 }}城市: {{item}}

</li>

</ul>

<!-- 使用h2标签显示

v-for 结合 v-bind一起使用

-->

<h2 v-for="p in persons" v-bind:title="p.name">

{{p.name}}

</h2>

</div>

</body>

<script src="./vue.min.js"></script>

<script>

var VM = new Vue({

el:"#app",

data:{

//普通数组

arr:["上海","北京","天津","杭州"],

//对象数组

persons:[

{name:"尼古拉斯·赵四"},

{name:"莱安纳多·小沈阳"}

]

},

methods: {

add:function(){

//push 添加

this.persons.push({name:"多利安·刘能"})

},

remove:function(){

this.persons.shift();
}

}

})

</script>

v-for指令总结

v-for 指令的作用: 根据数据生成列表结构

数组经常和 v-for结合使用,数组有两个常用方法:

push() 向数组末尾添加一个或多个元素

shift() 把数组中的第一个元素删除

语法是: (item,index) in 数据

item和index 可以结合其他指令一起使用

数组的长度变化,会同步更新到页面上,是响应式的

9. v-on 指令补充

1. 传递自定义参数 : 函数调用传参

2. 事件修饰符: 对事件触发的方式进行限制

代码示例

<body>

<div id="app">

<!-- 函数传参 -->

<input

type="button"

value="礼物刷起来"

@click="showTime(666,'爱你老铁!')"

/>

<!-- 事件修饰符 指定哪些方式可以触发事件 -->

<input type="text" @keyup.enter="hi" />

</div>

</body>

<script src="./js/vue.min.js"></script>

<script>

var VM = new Vue({

el: "#app",

data: {},

methods: {

showTime: function (p1, p2) {

console.log(p1);

console.log(p2);

},

hi: function () {

alert("你好吗?");

},

},

});

</script>

总结

事件绑定方法,可以传入自定义参数

定义方法时,需要定义形参,来接收实际的参数

事件的后面跟上 .修饰符可以对事件进行限制

.enter 可以限制触发的按键为回车

事件修饰符有许多使用时可以查询文档

10. MVVM模式

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式.

MVVM模式将页面,分层了 M 、V、和VM ,解释为：

Model: 负责数据存储

View: 负责页面展示

View Model: 负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示

<body>

<div id="app">

<!-- View 视图部分 -->

<h2>{{name}}</h2>

</div>

</body>

<script src="./js/vue.min.js"></script>

<script>

//创建的vue实例,就是 VM ViewModel

var VM = new Vue({

el: "#app",

//data就是MVVM模式中的 model

data: {

name: "hello",

},

});

</script>

首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关

键。

从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如

果有变化，则更改Model中的数据；

从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的

DOM元素。

MVVM的思想,主要是为了让我们的开发更加的方便,因为MVVM提供了数据的双向绑定

11. v-mode 指令

作用: 获取和设置表单元素的值(实现双向数据绑定)

双向数据绑定

单向绑定: 就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动

更新。

双向绑定: 用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。

什么情况下用户可以更新View呢？

填写表单就是一个最直接的例子。当用户填写表单时，View的状态就被更新了，如果此时

MVVM框架可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定：

代码示例

<body>

<div id="app">

<input type="button" value="修改message" @click="update" />

<!-- View 视图 -->

<!-- <input type="text" v-bind:value="message" /> -->

<!-- v-model 实现双向数据绑定 -->

<input type="text" v-model="message" />

<input type="text" v-model="password" />

<h2>{{message}}</h2>

</div>

</body>

<script src="./js/vue.min.js"></script>

<script>

//VM 业务逻辑控制

var VM = new Vue({

el: "#app",

//Model 数据存储

data: {

message: "拉钩教育训练营",

password: 123,

},

methods: {

update: function () {

this.message = "拉钩";

},

},

});

</script>

v-model指令总结

v-model 指令的作用是便捷的设置和获取表单元素的值

绑定的数据会和表单元素值相关联

双向数据绑定

1.2.5 实现简单记事本

1.功能介绍

2.新增内容

步骤

1. 生成列表结构(v-for 数组)

2. 获取用户输入(v-model 双向绑定)

3. 回车,新增数据(v-on .enter事件修饰符)

4. 页面布局不熟悉,可以通过审查元素的方式快速找到元素

<body>

<!-- VUE示例接管区域 -->

<section id="app">

<!-- 输入框 -->

<header class="header">

<h1>VUE记事本</h1>

<!-- v-on 绑定事件 -->

<input v-model="inputValue" @keyup.enter="add"

autofocus="autofocus" autocomplete="off" placeholder="输入日程"

class="new-todo"/>

</header>

<!-- 列表区域 -->

<section class="main">

<ul class="listview">

<li class="todo" v-for="(item,index) in list">

<div class="view">

<span class="index">{{index+1}}</span> <label>{{item}}

</label>

<button class="destroy"></button>

</div>

</li>

</ul>

</section>

</section>

</body>

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

<script>

var VM = new Vue({

el:"#app",

data:{

list:["写代码","吃饭","睡觉"],

inputValue:"996还是997"

},

methods: {

//新增方法

add:function(){

//将用户输入的内容添加到list

this.list.push(this.inputValue);

}

}

})

</script>

3.删除内容

步骤

1. 点击删除指定的内容( 根据索引删除元素)

2. 在methods中添加一个删除的方法,使用splice函数进行删除

<!-- 列表区域 -->

<section class="main">

<ul class="listview">

<li class="todo" v-for="(item,index) in list">

<div class="view">

<span class="index">{{index+1}}</span> <label>{{item}}</label>

<!-- 删除按钮 -->

<button class="destroy" @click="remove(index)"></button>

</div>

</li>

</ul>

</section>

//删除方法

remove:function(index){

console.log(index);

//使用splice(元素索引,删除几个) 根据索引删除

this.list.splice(index,1);

}

4.统计操作

步骤

1. 统计页面信息的个数,就是列表中的元素的个数.

2. 获取 list数组的长度,就是信息的个数

<footer class="footer">

<span class="todo-count"> <strong>{{list.length}}</strong> items left

</span>

<button class="clear-completed">

Clear

</button>

</footer>

总结:

1. 基于数据的开发方式

2. v-text设置的是文本,可以使用简化方式 {{}}

5.清空数据

步骤:

1. 点击清除所有信息

2. 本质就是清空数组

<button class="clear-completed" @click="clear()">Clear</button>

//清空数组元素

clear:function(){

this.list=[];

}

1.3 axios

1.3.1 Ajax回顾

1.3.1.1 什么是Ajax?

Ajax 是指一种创建交互式网页应用的开发技术。Ajax = 异步 JavaScript 和 XML。

1.3.1.2 Ajax的作用

Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分

进行更新（局部更新）。传统的网页如果需要更新内容，必须重载整个网页页面。

简单记: Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术, 维护用户体验

性, 进行网页的局部刷新.

1.3.1.3 异步与同步

浏览器访问服务器的方式

同步访问: 客户端必须等待服务器端的响应,在等待过程中不能进行其他操作

异步访问: 客户端不需要等待服务的响应,在等待期间,浏览器可以进行其他操作

1.3.1.4 案例演示

ajax.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Document</title>

</head>

<body>

  

 

 

<input type="text" />

<input type="button" value="Jquery发送异步请求" onclick="run1()" />

</body>

<script src="./jquery-1.8.3.min.js"></script>

<script>

function run1() {

//JQuery Ajax方式 发送异步请求

$.ajax({

url: "/ajax",

async:true,

data: { name: "天青" },

type: "post",

dataType:"text",

success: function (res) {

console.log(res)

alert("响应成功" + res);

},

error: function () {

alert("响应失败!");

}

});

}

</script>

</html>

servlet

@WebServlet("/ajax")

public class AjaxServlet extends HttpServlet {

@Override

protected void doGet(HttpServletRequest req, HttpServletResponse resp)

throws ServletException, IOException {

//1.获取请求数据

String username = req.getParameter("name");

//模拟业务操作,造成的延时效果

try {

Thread.sleep(5000);

} catch (InterruptedException e) {

e.printStackTrace();

}

//2.打印username

System.out.println(username);

resp.getWriter().write("hello hello");

}

@Override

protected void doPost(HttpServletRequest req, HttpServletResponse resp)

throws ServletException, IOException {

doGet(req, resp);

}

}

1.3.1 axios介绍

VUE中结合网络数据进行应用的开发

目前十分流行网络请求库,专门用来发送请求,其内部还是ajax,进行封装之后使用更加方便

axios作用: 在浏览器中可以帮助我们完成 ajax异步请求的发送.

Vue2.0之后，尤雨溪推荐大家用axios替换JQuery ajax

1.3.2 axios入门

使用步骤:

1. 导包

2. 请求方式,以GET和POST举例

GET

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

{});

POST

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

{},function(error){})

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

接口1:随机笑话

请求地址:https://autumnfish.cn/api/joke/list

请求方法:get

请求参数:num(笑话条数,数字)

响应内容:随机笑话

接口2:用户注册

请求地址:https://autumnfish.cn/api/user/reg

请求方法:post

请求参数:username(用户名,字符串)

响应内容:注册成功或失败

代码示例

<body>

<input type="button" value="get请求" id="get">

<input type="button" value="post请求" id="post">

</body>

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

<script>

/*

请求地址:https://autumnfish.cn/api/joke/list

请求方法:get

请求参数:num(笑话条数,数字)

响应内容:随机笑话

*/

document.getElementById("get").onclick=function(){

axios.get("https://autumnfish.cn/api/joke/list?num=1")

.then(function(response){

//请求成功,调用

console.log(response);

},function(error){

//请求失败,调用

console.log(error)

});

}

/*

请求地址:https://autumnfish.cn/api/user/reg

请求方法:post

请求参数:username(用户名,字符串)

响应内容:注册成功或失败

*/

document.getElementById("post").onclick=function(){

axios.post("https://autumnfish.cn/api/user/reg",{username:"张百万"})

.then(function(response){

console.log(response);

},function(error){

console.log(error);

});

}

</script>

1.3.3 axios总结

1. axios 必须导包才能使用

2. 使用get或者post方法,就可以发送请求

3. then方法中的回调函数,会在请求成功或者请求失败的时候触发

4. 通过回调函数的形参可以获取响应的内容,或者错误信息

1.3.4 获取笑话案例

通过vue+axios 完成一个获取笑话的案例.

接口: 随机获取一条笑话

请求地址:https://autumnfish.cn/api/joke

请求方法:get

请求参数:无

响应内容:随机笑话

代码示例

<body>

<div id="app">

<input type="button" value="点击获取一个笑话" @click="getJoke">

<p>{{joke}}</p>

</div>

</body>

<!-- 引入vue + axios -->

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

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

<script>

/*

请求地址:https://autumnfish.cn/api/joke

请求方法:get

请求参数:无

响应内容:随机笑话

*/

var VM = new Vue({

el:"#app",

data:{

joke:"笑笑更健康"

},

methods: {

getJoke:function(){

console.log(this.joke);//笑笑更健康

var that = this; //把this保存起来

//异步访问

axios.get("https://autumnfish.cn/api/joke").then(

function(response){

//获取data中的笑话

console.log(response.data);

//console.log(this.joke); //undefined 没有获取到this

that.joke=response.data;

},

function(error){}

)

}

}

})

</script>

案例总结

1. axios回调函数中this指向已经改变,无法访问data中的数据

2. 解决方案: 将this进行保存,回调函数中直接使用保存的this即可

1.3.5 天气查询案例

1.3.5.1 需求分析

功能分析: 回车查询

1.输入内容,点击回车 (v-on.enter)

2.访问接口,查询数据 (axios v-model)

3.返回数据,渲染数据

1.3.5.2 接口文档

请求地址:http://wthrcdn.etouch.cn/weather_mini

请求方法:get

请求参数:city (要查询的城市名称)

响应内容:天气信息

1.3.5.3 案例演示

自定义JS文件

作为一个标准的应用程序,我们将创建VUE实例的代码,抽取到main.js 文件中

main.js

请求地址:http://wthrcdn.etouch.cn/weather_mini

请求方法:get

请求参数:city (要查询的城市名称)

响应内容:天气信息

var VM = new Vue({

el:"#app",

data:{

city:'',

//定义空数组接收天气信息

weatherList:[]

},

//编写查询天气方法

methods: {

searchWeather:function(){

console.log("天气查询");

console.log(this.city);

//保存this,方便在回调函数中使用

var that = this;

//调用接口

axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)

.then(function(respose){

//console.log(respose);

//只获取天气数组

console.log(respose.data.data.forecast);

that.weatherList = respose.data.data.forecast;

},function(error){});

}

}

})

<body>

<div class="wrap" id="app">

<div class="search_form">

<div class="logo">天气查询</div>

<div class="form_group">

<!-- 3.绑定点击事件,回车触发,通过v-model绑定数据 -->

<input v-model="city" @keyup.enter="searchWeather" type="text"

class="input_txt" placeholder="请输入要查询的城市"/>

<button class="input_sub">回车查询</button>

</div>

</div>

<ul class="weather_list">

<!-- 遍历天气信息 -->

<li v-for="item in weatherList">

<div class="info_type"><span class="iconfont">{{item.type}}</span>

</div>

<div class="info_temp">

<b>{{item.low}}</b>

~

<b>{{item.high}}</b>

</div>

<div class="info_date"><span>{{item.date}}</span></div>

</li>

</ul>

</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->

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

<!-- 官网提供的 axios 在线地址 -->

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

<!-- 2.引入自己的js -->

<script src="./js/main.js"></script>

</body>

1.3.5.4 案例总结

1. 应用的逻辑代码,建议与页面进行分离,使用单独的JS编写

2. axios回调函数中的 this的指向改变,无法正常使用, 需要另外保存一份

3. 服务器返回的数据比较的复杂时,获取数据时要注意层级结构

1.3.6 解决页面闪烁问题

我们发现访问天气预报案例页面时, 使用插值表达式的地方出现了闪烁问题,如何解决呢?

v-cloak指令

作用: 解决插值表达式闪烁问题

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我

们可以使用 v-cloak 指令来解决这一问题。

1) 添加样式

<style>

/* 通过属性选择器,设置添加了v-cloak */

[v-cloak] {

display: none;

}

</style>

2) 在id为app的div中添加 v-cloak

1.4 computed 计算属性

1.4.1 什么是计算属性

在Vue应用中，在模板中双向绑定一些数据或者表达式，但是表达式如果过长，或者逻辑更为复杂

时，就会变得臃肿甚至难以维护和阅读，比如下面的代码:

<div>

写在双括号中的表达式太长了,不利于阅读

</div>.

将这段操作text.split(',').reverse().join(',') 放到计算属性中,最终返回一个结果值就可以

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

1.4.1 代码示例

<body>

<div id="app">

<!-- <h1>{{a*b}}</h1>

<h1>{{a*b}}</h1> -->

<!-- <h1>{{res()}}</h1>

<h1>{{res()}}</h1> -->

<h1>{{res2}}</h1>

<h1>{{res2}}</h1>

</div>

</body>

<script src="vue.min.js"></script>

<script>

var VM = new Vue({

el: "#app",

data: {

a: 10,

b: 20,

},

methods: {

res: function () {

console.log("res方法执行");

return this.a * this.b;

},

},

//使用计算属性进行优化 减少运算次数,用于重复相同的运算

computed: {

res2: function () {

console.log("res2方法执行");

return this.a * this.b;

},

},

});

</script>

1.4.2 computed总结

1. 定义函数也可以实现与计算属性相同的效果,都可以简化运算。

2. 不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会

重新求值。

1.5 ﬁlter 过滤器

1.5.1 什么是过滤器

过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原

来的数据，只是在原数据的基础上产生新的数据。

数据加工车间,对值进行筛选加工.

1.5.2 过滤器使用位置

1. 双括号插值内

{{ msg | filterA }} msg是需要处理的数据, filterA是过滤器, | 这个竖线是管道,通过这个管道

将数据传输给过滤器进行过滤加工操作

2. v-bind绑定的值的地方。

1.5.3 过滤器

1.局部过滤器

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

<body>

<div id="app">

<p>电脑价格: {{price | addIcon}}</p>

</div>

</body>

<script src="./vue.min.js"></script>

<script>

var VM = new Vue({

el: "#app", //挂载点

data: {

price: 200,

},

methods: {}, //方法

computed: {}, //计算属性

  

 

 

//局部过滤器

filters: {

//处理函数,value = price ,是固定参数

addIcon(value) {

return "¥" + value;

},

},

});

</script>

2.全局过滤器

需求: 将用户名开头字母大写

<body>

<div id="app">

<p>{{user.name | changeName}}</p>

</div>

</body>

<script src="./vue.min.js"></script>

<script>

//在创建Vue实例之前 创建全局过滤器

Vue.filter("changeName", function (value) {

//将姓名开头字母大写,然后再重新拼接

return value.charAt(0).toUpperCase() + value.slice(1);

});

var VM = new Vue({

el: "#app", //挂载点

data: {

user: { name: "tom" },

},

});

</script>

1.5.4 总结

1. 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

2. 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示

1.6 watch 侦听器

1.6.1 什么是侦听器

Vue.js 提供了一个方法 watch，它用于观察Vue实例上的数据变动。

作用: 当你有一些数据需要随着其它数据变动而变动时，可以使用侦听属性

1.6.2 案例演示

需求: 监听姓名变化,实时显示

<body>

<div id="app">

<label>名：<input type="text" v-model="firstName" /></label>

<label>姓：<input type="text" v-model="lastName" /></label>

{{fullNameComputed}}

</div>

</body>

<script>

var app = new Vue({

el: "#app",

data: {

firstName: "",

lastName: "",

fullName: "",

},

//监听，程序在运行的时候，实时监听事件

watch: {

//参数说明：1、新值，2、旧值

firstName(newValue, oldValue) {

this.fullName = newValue + " " + this.lastName;

},

lastName(newValue, oldValue) {

this.fullName = this.firstName + " " + newValue;

},

},

computed: {

fullNameComputed() {

return this.firstName + " " + this.lastName;

},

},

});

</script>

1.7 Component 组件

1.7.1 组件介绍

组件（Component）是自定义封装的功能。在前端开发过程中，经常出现多个网页的功能是重复

的，而且很多不同的页面之间，也存在同样的功能。

我们将相同的功能进行抽取,封装为组件,这样，前端人员就可以在组件化开发时，只需要书写一次代

码，随处引入即可使用。

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

为一个组件树

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

1.7.2 全局组件

语法格式:

Vue.component("组件名称", {

data(){ //组件数据

return {}

methods: { // 组件的相关的js方法

方法名(){

// 逻辑代码

}

})

注意:

1. 组件名以小写开头，采用短横线分割命名: 例如 hello-Word

2. 组件中的data 必须是一个函数,注意与Vue实例中的data区分

3. 在template模板中, 只能有一个根元素

<body>

<div id="app">

<!-- 使用组件,可以使用多次 -->

<lagou-header></lagou-header>

<lagou-header></lagou-header>

<lagou-header></lagou-header>

</div>

</body>

<script src="./vue.min.js"></script>

<script>

//全局组件

Vue.component("lagou-header", {

//组件的命名一般使用短横线方式,组件中的模板只能有一个根元素

template: "<div>头部组件的HTML代码<h1 @click='hello'>{{msg}}</h1><div>",

data() {

//组件中的data是一个函数

return {

msg: "hello这里是组件中的data数据",

};
},

methods: {

hello() {

alert("嗨 你好!");

},

},

});

var VM = new Vue({

el: "#app",

data: {},

methods: {},

});

</script>

1.7.3 局部组件

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

一不同就是：局部组件要写在Vue实例里面。

new Vue({

el: "#app",

components: {

组件名: {

// 组件结构

// data数据

data() { return { msg:"xxxx" };},

});

注意:

创建局部组件，注意 components，注意末尾有 ‘s’，而全局组件是不用+ ‘s’ 的。这意味着，

components 里可以创建多个组件。

<body>

<web-msg></web-msg>

</div>

</body>

var VM = new Vue({

el: "#app",

components: {

//组件名称

"web-msg": {

//组件内容

data() {

return {

msg1: "开发ing...",

msg2: "开发完成!",

};

});

</script>

1.7.4 组件与模板分离

由于把html语言写在组件里面很不方便，也不太好看所以将它们分开写。

<body>

<div id="app">

<web-msg></web-msg>

</div>

<!-- 将模板写在HTML中, 给模板指定一个ID -->

<template id="tmp1">

<div>

<button @click="show">{{msg}}</button>

</div>

</template>

</body>

<script src="./vue.min.js"></script>

<script>

var VM = new Vue({

el: "#app",

components: {

"web-msg": {

template: "#tmp1",

data() {

return {

msg: "点击查询",

};

},

methods: {

show() {

alert("正在查询,请稍等...");

},

},

},

"web-msg2": {},

},

});

</script>

总结:

1. 上面这种写法，浏览器会把 html 里的 template 标签过滤掉。所以 template 标签的内容是不会

在页面中展示的。直到它被 JS 中的 Vue 调用。

2. 在 html 中，template 标签一定要有一个 id，因为通过 id 是最直接被选中的。 data 和 methods

等参数，全部都要放到 Vue 实例里面写

1.8 Vue生命周期

1.8.1 生命周期图示

每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期

了解生命周期的好处:

1. 找错误

2. 解决需求

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参

考价值会越来越高。

1.8.2 钩子函数介绍

生命周期中的钩子函数

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

函数

说明

beforeCreate()

created()

在创建Vue实例之前,可以执行这个方法. 例如加载动画操作

实例创建完成,属性绑定好了,但是DOM还没有生成.

模板已经在内存中编辑完成了，尚未被渲染到页面中.

内存中的模板已经渲染到页面，用户已经可以看见内容.

数据更新的前一刻 , 组件在发生更新之前,调用的函数

updated执行时，内存中的数据已更新，并且页面已经被渲染

钩子函数在实例销毁之前调用

beforeMount()

mounted()

beforeUpdate()

updated()

beforeDestroy ()

destroyed ()

钩子函数在Vue 实例销毁后调用

1.8.3 案例演示

<body>

<div id="app">

<button @click="next">获取下一句</button>

<h2 id="msg">{{message}}</h2>

</div>

</body>

<script src="./vue.min.js"></script>

<script>

var VM = new Vue({

el: "#app",

data: {

message: "想当年,金戈铁马",

},

methods: {

next() {

this.message = "气吞万里如虎!";

},

show() {

alert("show方法执行!");

},

},

  

 

 

beforeCreate() {

alert("1.beforeCreate函数在组件实例化之前执行");

alert(this.message); //undefined

this.show(); // this.show is not a function

},

created() {

alert("2.created函数执行时,组件实例化完成,但是DOM(页面)还未生成");

alert(this.message);

this.show();

},

beforeMount() {

alert(

"3.beforeMount函数执行时，模板已经在内存中编辑完成了，尚未被渲染到页面中"

);

alert(document.getElementById("msg").innerText); //Cannot read property

'innerText' of null

},

mounted() {

alert("4.mounted函数执行时,模板已经渲染到页面,执行完页面显示");

alert(document.getElementById("msg").innerText);

},

beforeUpdate() {

alert("5.beforeUpdate执行时，内存中的数据已更新，但是页面尚未被渲染");

alert("页面显示的内容:" + document.getElementById("msg").innerText);

alert("data中的message数据是: " + this.message);

},

updated() {

alert("6.updated执行时，内存中的数据已更新,此方法执行完显示页面!");

},

});

</script>

1.9 Vue Router 路由

1.9.1 什么是路由?

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

内容。

通过 Vue.js 可以实现多视图单页面web应用（single page web application，SPA）

1.9.2 什么是SPA ?

百度百科

单页面Web应用（single page web application，SPA），就是只有一张Web页面的应用，

是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

单页应用不存在页面跳转，它本身只有一个HTML页面。我们传统意义上的页面跳转在单页应用的概

念下转变为了 body内某些元素的替换和更新，举个例子:

整个body的内容从登录组件变成了欢迎页组件, 从视觉上感受页面已经进行了跳转。但实际上，页面

只是随着用户操作，实现了局部内容更新,依然还是在index.html 页面中。

单页面应用的好处:

1. 用户操作体验好，用户不用刷新页面，整个交互过程都是通过Ajax来操作。

2. 适合前后端分离开发，服务端提供http接口，前端请求http接口获取数据，使用JS进行客户端渲

染。

1.9.3 路由相关的概念

router :

是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用（SPA）变得易

如反掌 ,router 就相当于一个管理者，它来管理路由。

route:

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

news按钮 => news内容，这是另一条路由。

routes :

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

about按钮 => about 内容}]

router-link组件:

router-link 是一个组件，是对标签的一个封装. 该组件用于设置一个导航链接，切换不同 HTML

内容。 to 属性为目标地址，即要显示的内容

router-view 组件:

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

1.9.4 使用路由

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

//方式1: 本地导入

//方式2: CDN

2) 使用步骤

1. 定义路由所需的组件

2. 定义路由每个路由都由两部分 path (路径) 和component (组件)

3. 创建router路由器实例 ,管理路由

4. 创建Vue实例, 注入路由对象, 使用$mount() 指定挂载点

Vue 的$mount()为手动挂载，在项目中可用于延时挂载（例如在挂载之前要进行一些其他操作、判断等），

之后要手动挂载上。new Vue时，el和$mount并没有本质上的不同。

3) HTM代码

<body>

<div id="app">

<h1>渣浪.com</h1>

<p>

<!-- 使用 router-link 组件来导航,to属性指定链接 -->

<router-link to="/home">go to home</router-link>

<router-link to="/news">go to news</router-link>

</p>

<!-- 路由的出口, 路由匹配到的组件(页面)将渲染在这里 -->

<router-view></router-view>

</div>

</body>

4) JS代码

<script src="./vue.min.js"></script>

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

<script>

//1.定义路由所需的组件

const home = { template: "<div>首页</div>" };

const news = { template: "<div>新闻</div>" };

//2.定义路由 每个路由都有两部分 path和component

const routes = [

{ path: "/home", component: home },

{ path: "/news", component: news },

];

//3.创建router路由器实例,对路由对象routes进行管理.

const router = new VueRouter({

routes: routes,

});

//4.创建Vue实例, 调用挂载mount函数,让整个应用都有路由功能

const VM = new Vue({

router,

}).$mount("#app"); //$mount是手动挂载代替el

</script>

1.9.5 路由总结

1. router是Vue中的路由管理器对象,用来管理路由.

2. route是路由对象,一个路由就对应了一条访问路径,一组路由用routes表示

3. 每个路由对象都有两部分 path(路径)和component (组件)

4. router-link 是对a标签的封装,通过to属性指定连接

5. router-view 路由访问到指定组件后,进行页面展示

标签：function,el,vue,入门,app,Vue,组件,data
来源： https://www.cnblogs.com/daguoodng/p/16442508.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue入门