文章目录
Vue2
1、Vue.js介绍
1.1、Vue.js是什么
- Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计 为可以自底向上逐层应用.
- Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一 方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
- 自底向上逐层应用：作为渐进式框架要实现的目标就是方便项目增量开发(即插即用)。
官方网站: https://cn.vuejs.org/v2/guide/ 作者 尤雨溪是中国人.
1.2、为什么使用Vue
- 声明式渲染: 前后端分离是未来趋势
- 渐进式框架: 适用于各种业务需求
- 简单易学: 国人开发,中文文档,不存在语言障碍,易于理解和学习
2、Vue.js基础
2.1、Vue.js的使用
- 在html页面使用script引入vue.js的库即可使用。
远程CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
本地
<script src="vue.min.js"></script>
- Vue-CLI脚手架:使用vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形
2.2、入门程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1、引入vue.js -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> -->
<!-- 1、通过本地 -->
<script src="./js/vue.min.js"></script>
</head>
<body>
<!-- 2、创建一个id为app的div -->
<div id="app">
{{ name }}
</div>
</body>
<script>
// 3、创建Vue实例
var VM = new Vue({
el:"#app",
data:{
name:"Hello Vue!"
}
})
</script>
</html>
2.3、VSCode插件安装
2.4、入门程序分析
2.5、存储复杂数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1、引入vue.js -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> -->
<!-- 1、通过本地 -->
<script src="./js/vue.min.js"></script>
</head>
<body>
<!-- 2、创建一个id为app的div -->
<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>
// 3、创建Vue实例
var VM = new Vue({
el:"#app",
data:{
name:"Hello Vfsdffufdfe!",
// 对象类型
school:{
name:"拉勾教育",
mobile:"10001",
},
// 数组类型
names:["龙哥", "皮皮龙", "凯撒"],
}
})
</script>
</html>
知识点
- 通过以上的方式可以定义一些复杂的数据类型（具体碰见再说）
- 然后是那个挂载的问题，下面那个Vue实例只能挂载到第一个出现的id为app的那个（有多个也只能找到第一个，别的都不输出数据）
2.6、声明式渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h2>{{ name }}</h2>
</div>
</body>
<!-- <script src="./js/jquery-1.8.3.min.js"></script>
<script>
// jquery方式 通过获取dom对象 再来进行一些操作
$(document).ready(function(){
$("#app").append("<h2>Hello World!</h2>");
})
</script> -->
<script>
var VM = new Vue({
el:"#app", // 挂载点
data:{
name:"Hello World!"
}
});
</script>
</html>
- 看了一圈还不知道什么叫声明式渲染，官方文档也只给了这个
2.7、Vue常用指令
官方解释：你看到的 v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。
2.7.1、v-text
<body>
<div id="app">
<!-- 插值表达式 不会覆盖原来的内容体 -->
<h2>{{ message }}嘿嘿额</h2>
<!-- v-text 获取data数据，设置标签内容,会覆盖之前的内容体-->
<h2 v-text="message">嘿嘿额</h2>
<!-- 拼接字符串 -->
<h2 v-text="message+1"></h2>
</div>
</body>
<script>
var VM = new Vue({
el:"#app",
data:{
message: "Java程序员"
}
})
</script>
</html>
知识点
- 这里对数据的读取和显示、拼接啥的有用处
- 获取普通文本的几种方式
- {{}}
- v-text
- v-html
2.7.2、v-html
插入HTML语句：v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。如果你发现自己正打算用 v-html 来编写模板，不如重新想想怎么使用组件来代替。
<body>
<div id="app">
<!-- 设置元素的innerHTML -->
<h2 v-html="url"></h2>
<h2 v-text="url"></h2>
</div>
</body>
<script>
var VM = new Vue({
el:"#app",
data:{
message: "Java程序员",
url:"<a href='https://www.baidu.com'>百度一下<a/>"
}
})
</script>
2.7.3、v-on指令
有缩写：@
<body>
<div id="app">
<!-- 绑定点击事件（v-on的缩写就是@） -->
<input type="button" value="点击按钮" @click="show">
<!-- 绑定双击事件 -->
<input type="button" value="双击按钮" @dblclick="show">
<h2 @click="changeLong">{{ foot }}</h2>
</div>
</body>
<script>
var VM = new Vue({
el:"#app",
data:{
foot: "龙哥666"
},
// 通过methods 专门存放Vue的方法
methods:{
show:function(){
alert("龙哥123");
},
changeLong:function(){
console.log(this.foot);
// 使用this获取data中的数据
this.foot += "真略"
}
}
})
</script>
<body>
<div id="app">
<input type="button" value="礼物" @click="showTime(666, '龙哥')"/>
<input type="text" @Keyup.enter="hi"/>
</div>
</body>
<script>
var VM = new Vue({
el:"#app",
data:{
},
methods:{
showTime:function(p1, p2){
console.log(p1);
console.log(p2);
},
hi:function(){
alert("hi");
}
}
})
</script>
知识点
- 有缩写@ v-on:click 或者 @click都可以
- 双击事件是@dblclick
- 可以传参数（这个应该看看例子就可以）
- 这个事件修饰符我搜了搜，感觉还挺有意思的，就像我，输完密码以后喜欢直接回车这就是和上面那个例子，差不多，等到回车弹起的时候，再去执行事件，具体的话就是碰到了以后再说参考
2.7.4、计数器案例
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.min.js"></script>
<link rel="stylesheet" href="./css/inputNum.css"/>
</head>
<body>
<div id="app">
<!-- 计算功能区域 -->
<div>
<input type="button" class="btn btn_plus" @click="plus"/>
<span>{{ num }}</span>
<input type="button" class="btn btn_minus" @click="minus"/>
</div>
</div>
</body>
<script>
var VM = new Vue({
el:"#app",
data:{
num:1
},
methods:{
plus:function(){
if(this.num < 10){
this.num++;
}else{
alert("别点了！最大了！");
}
},
minus:function(){
if(this.num > 0){
this.num--;
}else{
alert("别点了！最小了！");
}
}
}
})
</script>
案例总结
1. 创建Vue实例时，el(挂载点)、data(数据)、methods(方法)
2. v-on指令 作用是绑定事件，可以简写为@事件名
3. 方法中，使用this关键字，获取data中的数据
4. v-text 和 {{}}都可以获取data中的数据，设置到元素中
2.7.5、v-show
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.min.js"></script>
<link rel="stylesheet" href="./css/inputNum.css"/>
</head>
<body>
<div id="app">
<input type="button" value="切换状态" @click="changeStatus"/><br>
<img v-show="isShow" src="./img/2cf9b79148a61abe1bda46815806df9.png"/>
</div>
</body>
<script>
var VM = new Vue({
el:"#app",
data:{
isShow: true,
},
methods:{
changeStatus:function(){
this.isShow = !this.isShow;
}
}
})
</script>
知识点
- 自我感觉就是一个通过布尔值判断让后让图片显不显示的一个操作
显不显示是通过给图片加样式：display: none- 判断布尔值中的数据改变后，显示的状态会同步更新
2.7.6、v-if
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.min.js"></script>
<link rel="stylesheet" href="./css/inputNum.css"/>
</head>
<body>
<div id="app">
<input type="button" value="切换状态" @click="changeShow"/><br>
<img v-if="isShow" src="./img/2cf9b79148a61abe1bda46815806df9.png"/>
</div>
</body>
<script>
var VM = new Vue({
el:"#app",
data:{
isShow: true,
},
methods:{
changeShow:function(){
this.isShow = !this.isShow;
}
}
})
</script>
知识点
- 通过操作dom来实现的是否显示图片，直接这个标签就没了
- 如果要是频繁的操作，推荐使用v-show，反之使用v-if
2.7.7、v-bind
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.min.js"></script>
<link rel="stylesheet" href="./css/inputNum.css"/>
</head>
<body>
<div id="app">
<img v-bind:src="url" alt=""/>
<img :src="url" :title="title"/>
<div :style=" { fontSize: size + 'px'} ">
v-bind指令
</div>
</div>
</body>
<script>
var VM = new Vue({
el:"#app",
data:{
url:"img/2cf9b79148a61abe1bda46815806df9.png",
title:"拉勾",
size:100
},
methods:{
}
})
</script>
知识点
- 可以简写 v-blin: 和 : 是一个意思
- 我理解的就是能将class、src、title、style… 里面的值给取出来
2.7.8、v-for
<body>
<div id="app">
<input type="button" value="添加数据" @click="add"/>
<input type="button" value="移除数据" @click="remove"/>
<ul>
<li v-for="(item, index) in arr">
{{ index + 1 }} {{ item }}
</li>
</ul>
<h2 v-for="person in persons">
{{ person.name }}
</h2>
</div>
</body>
<script>
var VM = new Vue({
el:"#app",
data:{
// 数组
arr:["上海", "北京", "广东", "深圳"],
// 对象数组
persons:[
{name:"赵四"},
{name:"帅哥"},
{name:"龙哥"}
]
},
methods:{
add:function(){
// 向数组添加元素 push
this.persons.push({name:"鸡巴龙"});
},
remove:function(){
this.persons.pop();
}
}
})
</script>
知识点
- 格式就是 v-for=" (item, index)（
item遍历出的数据，index是索引） in items（被遍历者）" 我记的后面还有一个啥确定id的一段代码，忘记了 - 常与数据结合使用
- 数组的长度变化，会同步更新到页面上，是响应式的
2.7.9、MVVM模式
-
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式
-
MVVM模式将页面,分层了 M 、V、和VM ,解释为：
- Model: 负责数据存储
- View: 负责页面展示
- View Model: 负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示
-
首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。
- 从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
- 从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。
-
MVVM的思想,主要是为了让我们的开发更加的方便,因为MVVM提供了数据的双向绑定
<body>
<div id="app">
<!-- View 视图部分 -->
<h2>{{ name }}</h2>
</div>
</body>
<script>
// 创建的vue的实例，就是VM ViewModel
var VM = new Vue({
el:"#app",
// data就是MVVM模式中的model
data:{
name:"hello"
},
methods:{
}
})
</script>
2.7.10、v-model
<body>
<div id="app">
<input type="text" :value="name" @click="change"/>
<input type="text" v-model:value="name"/>
{{ name }}
</div>
</body>
<script>
var VM = new Vue({
el:"#app",
data:{
name:"hello"
},
methods:{
change:function(){
this.name += "a";
}
}
})
</script>
知识点
- 单向数据绑定：将model绑定到view上，当model发生变化时，view会随之变化
- 双向数据绑定：view视图发生变化时候，model也会随之改变
2.7.10、笔记本案例
步骤
- 生成列表结构（v-for数组）
- 获取用户输入（v-model双向绑定）
- 回车，新增数据（v-on.enter时间修饰符）
- 页面布局不熟悉，可以通过审查元素的方式快速找到元素
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>小黑记事本</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="googlebot" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="../css/index.css" />
</head>
<body>
<!-- VUE示例接管区域 -->
<section id="app">
<!-- 输入框 -->
<header class="header">
<h1>VUE记事本</h1>
<input
autofocus="autofocus"
autocomplete="off"
placeholder="输入日程"
class="new-todo"
v-model="content"
@Keyup.enter="add"
/>
</header>
<!-- 列表区域 -->
<section class="main">
<ul class="listview" >
<li class="todo" v-for="(item, index) in arr">
<div class="view">
<span class="index">{{ index + 1 }}.</span> <label>{{ item }}</label>
<button class="destroy" @click="remove(index)"></button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer class="footer">
<span class="todo-count"> <strong>{{ arr.length }}</strong> items left </span>
<button class="clear-completed" @click="clear">
Clear
</button>
</footer>
</section>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var VM = new Vue({
el:"#app",
data:{
arr:["真爱粉", "小黑子"],
content:""
},
methods:{
add:function(){
if(this.content === ""){
return;
}
this.arr.push(this.content);
this.content = "";
},
remove:function(id){
this.arr.splice(id, 1);
},
clear:function(){
this.arr = [];
}
}
})
</script>
</body>
</html>
知识点
- v-model可以直接在 v-model=“” 这样使用我之前以为必须要加上那个：写在value前面
- 数组的操作方法
- push 添加一个数据
- splice（index, num） index数组下标 删除几个
- 清空操作直接 置为 [ ]
- v-for要写在你要让他重复出现的上面
3、axios
3.1、Ajax回顾
传统的网页如果需要更新内容，必须要重载整个网页业页面，每当用户想服务器发送请求，哪怕是需要更新一点点的局部内容，服务器都会将整个页面进行刷新，这种方法的缺点是：
- 性能会有所降低（一点内容，刷新整个页面）
- 用户的操作页面会中断（整个页面被刷新了）
ajax概念
- Ajax即“Asynchronous Javascript And XML”，是指一种创建交互式网页应用的网页开发技术。
- Ajax = 异步 JavaScript和XML
- ajax是客户端与服务器进行交互时，可以【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术
3.2、案例演示
ajax.jsp
function run4(){
$.ajax({
url:"login",
async:true,// 是否异步
data:{username:"geigei"},
type:"GET", // get、post
dataType:"text",
success:function (param){
alert("响应成功" + param)
},
error:function (){
alert("响应失败");
}
})
}
servlet.jsp
@WebServlet("/checkName")
public class ChecckName extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
// 1、获取用户名
String username = req.getParameter("username");
Map<String, Object> map = new HashMap<>();
// 2、判断用户是否存在
if("tom".equals(username)){
// 用户存在
map.put("flag", true);
map.put("msg", "用户名已经被占用了");
}else{
// 用户不存在
map.put("flag", false);
map.put("msg", "用户名可以使用");
}
String jsonStrings = JSON.toJSONString(map);
resp.getWriter().print(jsonStrings);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}
3.3、 axios介绍
VUE中结合网络数据进行应用的开发
- 目前十分流行网络请求库,专门用来发送请求,其内部还是ajax,进行封装之后使用更加方便
- axios作用: 在浏览器中可以帮助我们完成 ajax异步请求的发送.
Vue2.0之后，尤雨溪推荐大家用axios替换JQuery ajax
3.4、 axios入门
- 导包
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
请求方式,以GET和POST举例
- GET
axios.get(地址?key=value&key2=value2).then(function(response){},function(error)
{});
- POST
axios.post(地址,{key:value,key2:value2}).then(function(response)
{},function(error){})
3.5、axios简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<input type="button" value="get请求" id="get"/>
<input type="button" value="post请求" id="post"/>
</body>
<script>
document.getElementById("get").onclick=function(){
axios.get("https://autumnfish.cn/api/joke/list?num=20").then(
function(resp){
console.log(resp);
},
function(error){
console.log(error);
}
);
};
document.getElementById("post").onclick=function(){
axios.post("https://autumnfish.cn/api/user/reg", {username:"龙哥"}).then(
function(resp){
console.log(resp);
},
function(error){
console.log(error);
}
)
}
</script>
</html>
知识点
- axios必须要导包
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
- 使用get或者post方法发送请求
- then方法中回调函数，会在请求成功或者失败的时候被触发
- 通过回调函数的形参可以获取响应的内容
3.6、获取笑话案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="点击获取一个笑话" @click="getJoke"/>
<p>{{ joke }}</p>
</div>
</body>
<script src="../js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
data:{
joke: "笑口常开"
},
methods:{
getJoke:function(){
// 把this进行保存
var that = this;
axios.get("https://autumnfish.cn/api/joke/list?num=1").then(
function(resp){
// 在回调函数内部，this无法正常使用，需要提前保存起来
that.joke = resp.data.data[0];
},
function(error){
that.joke = resp.data.data[0];
}
);
}
}
})
</script>
</html>
知识点
- axios回调函数中，this的指向已经改变，无法访问data中的数据
解决方案：将this进行保存
3.7、天气查询案例
步骤
- 输入内容，点击回车(v-on.enter)
- 访问接口，查询数据(axios v-model)
- 返回数据，渲染数据
mian.js
var VM = new Vue({
el: "#app",
data:{
city:"",
content:[]
},
methods:{
query:function(){
var that = this;
axios.get("https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=" + this.city).then(
function(resp){
console.log(resp.data.data);
that.content = resp.data.data;
},
function(error){
console.log(error);
}
)
}
}
})
天气案例.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>天气查询</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="wrap" id="app">
<div class="search_form">
<div class="logo">天气查询</div>
<div class="form_group">
<input @Keyup.enter="query" v-model="city" type="text" class="input_txt" placeholder="请输入要查询的城市"/>
<button class="input_sub">回车查询</button>
</div>
</div>
<ul class="weather_list">
<li v-for="item in content">
<div class="info_type"><span class="iconfont">{{ item.wea }}</span></div>
<div class="info_temp">
<b>{{ item.tem2 }}</b>
~
<b>{{ item.tem1 }}</b>
</div>
<div class="info_date"><span>{{ item.day }}</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>
<!-- 自己的js -->
<script src="./js/main.js"></script>
</body>
</html>
额，他给你天气的接口G了，我从网上随便找了一个然后用了用，还行
知识点
- 应用的逻辑代码。建议与页面进行分离，使用单独的JS编写（把new Vue啥的东西放到一个单独的js文件里面，然后把他引入到页面中去），但是这里和我了解的vue3那个不太一样，我怎么记得那个里面只用了一个main.js并且那个，然后搞了好多个vue的文件，确实这里不太懂，看看后面讲不讲
- axios中 回调函数中的this 需要先保存 再使用 ，这里我就脑瘫了，我为了从回调函数中取数据，就把那个数据在函数中 var contentWeather = this.content，应该是var that = this
- 服务器返回的数据比较复杂，获取数据的时候，要注意层级结构
- 通过搞一个这个 v-cloak，这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
4、computed计算属性
在Vue应用中，在模板中双向绑定一些数据或者表达式，但是表达式如果过长，或者逻辑更为复杂时，就会变得臃肿甚至难以维护和阅读，比如下面的代码:
<div>
写在双括号中的表达式太长了,不利于阅读
{{text.split(',').reverse().join(',')}}
</div>.
将这段操作text.split(',').reverse().join(',') 放到计算属性中,最终返回一个结果值就可以
computed 的作用: 减少运算次数, 缓存运算结果. 运用于重复相同的计算.
<body>
<div id="app">
<h1>{{ res() }}</h1>
<h1>{{ res() }}</h1>
<h1>{{ res() }}</h1>
-------------
<h1>{{ res2 }}</h1>
<h1>{{ res2 }}</h1>
<h1>{{ res2 }}</h1>
</div>
</body>
<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>
知识点
- 方法既然可以直接写在{{}}里面，不过要加上{}
- 计算属性可以减少运算次数，用于重复和相同的操作，避免不必要的浪费
5、filter过滤器
5.1、什么是过滤器
过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。数据加工车间,对值进行筛选加工
5.2、过滤器使用位置
- 双括号插值内
{{ msg | filterA }} msg是需要处理的数据, filterA是过滤器, | 这个竖线是管道,通过这个管道
将数据传输给过滤器进行过滤 加工操作
- v-bind绑定的值的地方
<h1 v-bind:id=" msg | filterA"> {{ msg }} </h1>
5.3、过滤器
- 局部过滤器
需求: 通过过滤器给电脑价格前面 添加一个符号¥
<body>
<div id="app">
<h1>{{ price | add }}</h1>
<input :value="price | add"></input>
</div>
</body>
<script>
var VM = new Vue({
el:"#app",
data:{
price:100
},
methods:{
},
computed:{
},
filters:{
// 局部过滤器
add(value){
return "$" + value + "美元";
}
}
})
</script>
- 全局过滤器
需求: 将用户名开头字母大写
<body>
<div id="app">
<h1>{{ user.name | changeName }}</h1>
<input :value="user.name | changeName"></input>
</div>
</body>
<script>
// 全局过滤器
Vue.filter("changeName", function(value){
// slice是截取数组和字符串（左闭右开）
return value.charAt(0).toUpperCase() + value.slice(1);
})
var VM = new Vue({
el:"#app",
data:{
user:{name: "tom"}
},
methods:{
},
computed:{
},
filters:{
}
})
</script>
知识点
- slice可以截取字符串和数组（左闭右开）
- 全局过滤器使用的时候一定要放在创建Vue实例的前面
- 过滤器经常被用来处理文本格式化的操作
- 过滤器使用的两个位置：{{}}中和v-bind中
- 用管道的 |
6、watch侦听器
6.1、什么是侦听器
watch，它用于观察Vue实例上的数据变动，观察变量的变化，进行相应的处理
作用：当你有一些数据需要随着其它数据变动而变动时，可以使用侦听属性
6.2、示例
计数器
<body>
<div id="app">
<h2>计数器：{{ count }}</h2>
<input type="button" @click="count++" value="点我加一"/>
</div>
</body>
<script>
var VM = new Vue({
el:"#app",
data:{
count: 1
},
methods:{
},
watch:{
// 检测属性值的变化 nval是新的的值 oval是旧的值
count:function(nval, oval){
alert("计数器发生变化：" + oval + "变化为" + nval);
}
}
})
</script>
动态显示名字
<body>
<div id="app">
<label>
名：<input type="text" v-model="secondName"/>
</label><br>
<label>
姓：<input type="text" v-model="firstName"/>
</label><br>
{{ fullName }}
</div>
</body>
<script>
var VM = new Vue({
el:"#app",
data:{
secondName:"",
firstName:"",
fullName:""
},
methods:{
},
watch:{
secondName:function(newValue, oldValue){
this.fullName = this.firstName + " " + newValue;
},
firstName:function(newValue, oldValue){
this.fullName = newValue + " " + this.secondName;
},
},
})
</script>
###### 知识点
- 监听数据变化
- @click可以这样用@click=“count++”，count是data
7、Component组件
7.1、组件介绍
- 组件（Component）是自定义封装的功能。在前端开发过程中，经常出现多个网页的功能是重复的，而且很多不同的页面之间，也存在同样的功能。
- 我们将相同的功能进行抽取,封装为组件,这样，前端人员就可以在组件化开发时，只需要书写一次代码，随处引入即可使用。
- 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
vue的组件有两种: 全局组件 和 局部组件
7.2、全局组件
<body>
<div id="app">
<long-header>
</long-header>
</div>
</body>
<script>
// 定义全局组件
// 组件的命名规则：一般用短横线进行连接，左边是公司名 右边组件的作用名称
Vue.component("long-header",{
template:"<div><h1 @click='hello'> {{ msg }}</h1></div>", // 注意在template中只能有一个根元素
// 组件中那个的data是一个函数
data(){
return {
msg:"这是long-header组件中的数据"
}
},
methods:{
hello(){
alert("帅气龙");
}
}
})
var VM = new Vue({
el:"#app",
data:{
},
methods:{
}
})
</script>
知识点
- 注意component后面没有s
- 还有template中的html代码只能有一个根元素，如果有多个只会取第一个根元素
- 注意data()和vue实例中的data后面多加了一个（），是一个函数，而且定义属性在return 的花括号里面
7.3、局部组件
<body>
<div id="app">
<web-msg>
</web-msg>
</div>
</body>
<script>
var VM = new Vue({
el:"#app",
components:{
// 组件名
"web-msg":{
template:"<div><h1>{{ msg1 }}</h1><h1>{{ msg2 }}</h1></div>",
data(){
return{
msg1:"开发进行中。。。",
msg2:"开发完成。。。"
}
}
}
}
})
</script>
知识点
- 注意分辨两者写法不同
全局变量：
局部变量：
7.4、组件和模板的分离
<body>
<div id="app">
<web-msg>
</web-msg>
</div>
<template id="t1">
<button @click="show">{{ msg }}</button>
</template>
</body>
<script>
var VM = new Vue({
el:"#app",
components:{
"web-msg":{
template:"#t1",
data(){
return {
msg: "点击查询！"
}
},
methods:{
show(){
alert("正在查询！");
}
}
}
},
data:{
},
methods:{
}
})
</script>
知识点
- 浏览器会自动将<template>标签中的过滤掉，直到他被JS中的vue调用
- 记得要给template标签中中搞一个id，好让组件去选择到它
- 我才发现methods中的方法可以 把show:function(){}写成这样子的show(){}
8、生命周期
8.1、生命周期图示
每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期
了解生命周期的好处：
- 找错误
- 解决需求
下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。
8.2、钩子函数介绍
声明周期中的钩子函数
钩子函数：钩子函数是在一个事件触发的时候，在系统捕获到了他，然后做一些操作
| 函数 | 说明 |
|---|---|
| beforeCreate() | 在创建Vue实例之前,可以执行这个方法. 例如 加载动画操作 |
| created() | 实例创建完成,属性绑定好了,但是DOM还没有生成. |
| beforeMount() | 模板已经在内存中编辑完成了，尚未被渲染到页面中. |
| mounted() | 内存中的模板已经渲染到页面，用户已经可以看见内容. |
| beforeUpdate() | 数据更新的前一刻 , 组件在发生更新之前,调用的函数 |
| updated() | updated执行时，内存中的数据已更新，并且页面已经被渲染 |
| beforeDestroy () | 钩子函数在实例销毁之前调用 |
| destroyed () | 钩子函数在Vue 实例销毁后调用 |
<body>
<div id="app">
<h2 id="msg">{{ message }}</h2>
<button @click="next">获取下一句</button>
</div>
</body>
<script>
var VM = new Vue({
el:"#app",
data:{
message: "想当年，金戈铁马"
},
methods:{
show(){
alert("show方法执行了");
},
next(){
this.message = "气吞万里如虎";
}
},
// beforeCreate(){
// alert("1.beforeCreate函数，在vue对象实例化之前执行");
// console.log(this.message); //undefined
// this.show();// this.show is not a function
// },
// created(){
// alert("2.created函数执行时，组件的实例化完成，但是DOM页面还未生成");
// console.log(this.message);
// this.show();
// },
// beforeMount(){
// alert("3.beforeMount函数执行时，模板已经在内存中编辑完成了，但是还没有被渲染到页面中");
// console.log("页面显示的数据" + document.getElementById('msg').innerText);
// console.log("data中的数据：" + this.message);
// },
// mounted(){
// alert("4.mounted函数执行时，模板已经被渲染到页面，执行完就会显示页面");
// },
// beforeUpdate(){
// alert("5.beforeUpdate执行时，内容中的数据已经更新，但是还没有渲染到页面");
// console.log("页面显示的数据" + document.getElementById('msg').innerText);
// console.log("data中的数据：" + this.message);
// }
updated(){
alert("6.updated执行时，内存中的数据已经更新，此方法执行完显示页面");
console.log("页面显示的数据" + document.getElementById('msg').innerText);
console.log("data中的数据：" + this.message);
}
})
</script>
beforeCreate
beforeCreate(){
alert("1.beforeCreate函数，在vue对象实例化之前执行");
console.log(this.message); //undefined
this.show();// this.show is not a function
}
created
created(){
alert("2.created函数执行时，组件的实例化完成，但是DOM页面还未生成");
console.log(this.message);
this.show();
}
beforeMount
beforeMount(){
alert("3.beforeMount函数执行时，模板已经在内存中编辑完成了，但是还没有被渲染到页面中");
console.log("页面显示的数据" + document.getElementById('msg').innerText);
console.log("data中的数据：" + this.message);
}
mounted
mounted(){
alert("4.mounted函数执行时，模板已经被渲染到页面，执行完就会显示页面");
}
beforeUpdate
beforeUpdate(){
alert("5.beforeUpdate执行时，内容中的数据已经更新，但是还没有渲染到页面");
console.log("页面显示的数据" + document.getElementById('msg').innerText);
console.log("data中的数据：" + this.message);
}
updated
updated(){
alert("6.updated执行时，内存中的数据已经更新，此方法执行完显示页面");
console.log("页面显示的数据" + document.getElementById('msg').innerText);
console.log("data中的数据：" + this.message);
}
9、Router路由
9.1、什么是路由
在Web开发中，路由是指根据URL分配到对应的处理程序，路由允许我们通过不同的URL访问不同的内容
9.2、什么是SPA
单页面Web应用（single page web application，SPA），就是只有一张Web页面的应用， 是加载单个HTML
页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
单页应用不存在页面跳转，它本身只有一个HTML页面。我们传统意义上的页面跳转在单页应用的概念下转变为了 body 内某些元素的替换和更新，举个例子:
整个body的内容从登录组件变成了欢迎页组件, 从视觉上感受页面已经进行了跳转。但实际上，页面只是随着用户操作，实现了局部内容更新,依然还是在index.html 页面中。
- 单页面应用的好处:
- 用户操作体验好，用户不用刷新页面，整个交互过程都是通过Ajax来操作。
- 适合前后端分离开发，服务端提供http接口，前端请求http接口获取数据，使用JS进行客户端渲染。
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 是一个组件，是对<a>标签的一个封装. 该组件用于设置一个导航链接，切换不同 HTML内容。 to 属性为目标地址， 即要显示的内容 - router-view 组件:
路由导航到指定组件后,进行渲染显示页面.
9.4、使用路由
- Vue.js路由需要载入vue-router库
//方式1: 本地导入
<script src=“vue-router.min.js”>
//方式2: CDN
<script src=“https://unpkg.com/vue-router/dist/vue-router.js”>
- 使用步骤
- 定义路由所需的组件
- 定义路由 每个路由都由两部分 path (路径) 和component (组件)
- 创建router路由器实例 ,管理路由
- 创建Vue实例, 注入路由对象, 使用$mount() 指定挂载点
Vue 的$mount()为手动挂载，在项目中可用于延时挂载（例如在挂载之前要进行一些其他操作、判断等），之后要手动挂载上。new Vue时，el和$mount并没有本质上的不同。
<body>
<div id="app">
<h1>帅气龙.com</h1>
<p>
<!-- 6、添加超链接，router-link 组件来进行导航，to属性指定连接 -->
<router-link to="/home">go to home</router-link>
<router-link to="/news">go to news</router-link>
</p>
<!-- 7、路由的出口，路由匹配到组件之后，要渲染到这里 -->
<router-view></router-view>
</div>
</body>
<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、创建路由管理器实例
const router = new VueRouter({
routes: routes
})
// 4、创建vue实例，将router注入到vue实例中，让整个应用都拥有路由的功能
var VM = new Vue({
router
}).$mount("#app"); // 代替el进行挂载
</script>
知识点
- router 是vue中路由管理器对象，用来管理路由
- route 是路由对象，一个路由就对应了一条访问路径，一组路由用routes
- 每个路由对象，都有两部分：path路径、component组件
- router-link 是对a标签的封装，通过to属性 指定链接
- router-view 路由访问到指定的组件，进行页面展示
1196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
