Vue学习笔记
目录
基本概念
-
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
-
Vue 只关注视图层, 采用自底向上增量开发的设计。
-
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
MVVM的实现
Model:模型层,在这里表示JavaScript对象
View:视图层,在这里表示DOM
ViewModel:连接视图和数据的中间件,Vuei实现者
注意:在MVVM结构中,是不允许视图直接和数据进行通信的,只能通过ViewModel进行通信;
ViewModel能够观察到数据的变化,并对视图的内容进行更新
ViewModel能够监听到视图的变化,并能够通知数据发生变化
Vue的核心就是能够实现DOM的监听和绑定
第一个Vue测试实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<-- Vue实例,el:绑定Id,data:显示数据 -->
<script>
var vue = new Vue({
el: '#app',
data: {
message: '我的第一个Vue程序!'
}
})
</script>
</body>
</html>
在控制台上通过调用对象vue.message=" ";就可以观察到动态的变化值
Vue常用的属性及方法
学习vue我们必须之到它的7个属性,8个 方法,以及7个指令。787原则
-
el属性
用来指示vue编译器从什么地方开始解析 vue的语法,可以说是一个占位符。
-
data属性
用来组织从view中抽象出来的属性,可以说将视图的数据抽象出来存放在data中。
-
template属性
用来设置模板,会替换页面元素,包括占位符。
-
methods属性
放置页面中的业务逻辑,js方法一般都放置在methods中
-
render属性
创建真正的Virtual Dom
-
computed属性
用来计算
-
watch属性
watch:function(new,old){}
- 监听data中数据的变化
- 两个参数,一个返回新值,一个返回旧值,
Vue标签的使用
1.可以使用v-bind进行标签元素的绑定;
实例:
v-bind
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue实例</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--这里通过v-bind动态绑定标签元素-->
<span v-bind:title="message">
使用v-bind动态获取元素!
</span>
</div>
<script>
new Vue({
el:'#app',
data: {
message: "我的第一个Vue程序"
}
});
</script>
</body>
</html>
v-for,v-if
<!DOCTYPE html>
<html lang="en" xmlns:v-for="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>测试标签命令</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--for标签的测试-->
<li v-for="term in terms">
{{term.message}}
</li>
<p v-if="data1">OK</p>
<p v-else>NO</p>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
terms: [
{message: "term1"},
{message: "term2"}
],
data1: false
}
})
</script>
</body>
</html>
事件处理:v-on:=""进行事件的绑定
vue的事件函数必须放在对象中,和data平级,通过methods定义;
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button v-on:click="sayHI">点击函数</button>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var vue = new Vue({
el: "#app",
data: {
terms: [
{message: "term1"},
{message: "term2"}
],
data1: false
},
methods: {
sayHI: function () {
alert(this.data1);
}
}
})
</script>
</body>
</html>
数据的双向绑定
什么是数据的双向绑定?
Vue.js是一个MVVM框架,即数据双向绑定,就是在数据发生变化的时候,视图也跟着发生变化,当视图发生变化时,数据跟着同步发生变化。
在表单中实现数据的双向绑定
可以使用v-model指令在表单,,元素上创建数据的双向绑定。它会根据控件的类型自动选取合适的方式进行数据的更新。v-model就是负责监听用户的输入事件以更新数据。
实例代码:
<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--实现数据的双向绑定-->
<input type="text" v-model="message">{{message}}<br/>
<input type="radio" name="sex" value="男" v-model="sex">男
<input type="radio" name="sex" value="女" v-model="sex">女
<p>选中了: {{sex}}</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var vue = new Vue({
el: "#app",
data: {
message: "message数据",
sex: ""
}
})
</script>
</body>
</html>
Vue组件
通常一个应用会以一棵嵌套的组件树的形式来组织:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-txUuHlYO-1610688671095)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210111153056235.png)]
通过定义一个个自定义的组件。我们可以实现任何我们想要的功能。
基本实例:
<!--定义一个名为 button-counter 的新组件-->
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
定义了一个名称为button-counter的组件。组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是 <button-counter>
。我们可以在一个通过 new Vue
创建的 Vue 根实例中,把这个组件作为自定义元素来使用:
<div id="components-demo">
<button-counter></button-counter>
</div>
new Vue({ el: '#components-demo' }) <!--元素绑定-->
因为组件是可复用的 Vue 实例,所以它们与 new Vue
接收相同的选项,例如 data
、computed
、watch
、methods
以及生命周期钩子等。仅有的例外是像 el
这样根实例特有的选项。
一个组件的 data
选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:在我们多次调用同样的组件的时候,各个组件互相是独立的。
组件模板如何接收外部数据?
通过props属性向组件中传递数据
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
在vue对象中的数据在组件中展示:
new Vue({
el: '#blog-post-demo',
data: {
posts: [
{ id: 1, title: 'My journey with Vue' },
{ id: 2, title: 'Blogging with Vue' },
{ id: 3, title: 'Why Vue is so fun' }
]
}
})
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:title="post.title"
></blog-post>
axios异步通信
官方:http://www.axios-js.com/zh-cn/docs/
1.对于IDEA需要先设置JavaScript为6及以上版本:
2.什么是axios?
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
特性
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
为什么使用axios?
由于vue严格遵守Soc(关注度分离原则),所以vue并不包含AJAX的通信功能,为了解决通信问题,抵用axios框架,少用jQuery,因为它操作DOM太频繁。
使用:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
安装:
$ npm install axios
执行 GET
请求
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 上面的请求也可以这样做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
执行 POST
请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
第二种方式:
// 发送 POST 请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
Vue生命周期
上图为vue对象的完整的生命周期过程。在过程中可以看到钩子函数的作用。和在页面显示渲染数据的过程。
通过钩子函数和axios通信
var vm = new Vue({
el: "#app",
data(){
return{
// 返回的数据格式必须保持一致。
info:{
name:null,
....
}
}
},
// 定义钩子函数,发送一个../data.json,上面的data为获取的响应数据
mounted(){
axios.get("../data.json").then(response=>(this.response.data))
}
})
插槽的使用
什么是插槽?
插槽即slot,示意图如图所示:
在一个整体的模板中,放置几个slot,以后如果想在模板中添加一些功能,直接就能在插槽的位置添加。
实例代码:
<!DOCTYPE html>
<html lang="en" xmlns:v-for="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>slot的使用</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 使用自定义组件 -->
<myComponent>
<myComponent-title slot="myComponent-title" v-bind:title="title"></myComponent-title>
<myComponent-items slot="myComponent-items" v-for="item in items" v-bind:item="item"></myComponent-items>
</myComponent>
</div>
<script>
/*自定义组件*/
Vue.component("myComponent",{
// props接收参数
template: "<div>" +
"<slot name='myComponent-title'></slot>" +
"<ul>" +
"<slot name='myComponent-items'></slot>" +
"</ul>" +
"</div>"
});
Vue.component("myComponent-title",{
props: ["title"],
template: "<div>{{title}}</div>"
});
Vue.component("myComponent-items",{
props: ["item"],
template:"<li>{{item}}</li>"
});
/*创建vue对象*/
var vm = new Vue({
el: "#app",
data: {
title: "这是标题!",
items: [
"java","python","php"
]
}
})
</script>
</body>
</html>
自定义事件
什么是自定义事件?
就是自定义函数,在自定义组件中的函数能够调用vue对象中定义的函数。然后template中调用自定义组件中的函数间接调用vue对象中定义的函数;
使用方法:this.$emit(“自定义事件名”,参数);
Vue-cli
Vue的开发都是基于Nodejs,实际开发采用vue-cli脚手架开发,vue-router路由,vuex做状态管理,VueUI界面我们一般使用elementUI,或是ICE来快速搭建前端项目。
安装过程:
安装nodejs
在官网下载nodejs的安装包。可以根据自己电脑安装对应的不同的版本。
Node.js 安装包及源码下载地址为:https://nodejs.org/en/download/
Node.js 历史版本下载地址:https://nodejs.org/dist/
注意:Linux 上安装 Node.js 需要安装 Python 2.6 或 2.7 ,不建议安装 Python 3.0 以上版本。
我电脑是win10的系统,所以选择安装64可视化方式。binary是通过命令的方式进行安装的。下载到本地。
一路无脑下一步。。。。中间勾选一个协议然后换一个安装目录。然后一路next…
安装完成!
检查是否安装成功:
win + R 输入cmd打开黑窗口
node -v 查看安装的版本
npm -v 查看安装的npm版本,npm是安装node时就自带的
安装成功如上图;
NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:
- 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
- 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
- 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
使用npm安装淘宝镜像cnpm
为啥使用cnpm?
因为npm是国外的,可能下载东西的时候卡顿。cnpm会快一些。但是cnpm可能也会有些问题。
一般可以先试试npm安装下载,如果拉胯了。再使用cnpm
安装命令:
npm install cnpm -g
-g:全局安装,全局都能够使用
安装在c盘下的隐藏文件夹中:C:\Users\Administrator\AppData\Roaming\npm\cnpm
安装vue-cli
使用cnpm安装命令:
cnpm install vue-cli -g
测试是否安装成功:查看可以基于哪些模板创建vue程序,通常使用webpack
vue list
安装完成!
创建一个vue-cli程序
1.在指定的盘符目录中创建一个vue-cli工程:最好是以管理员身份打开!
vue init webpack myvue(工程名称,自定义)
执行命令后,一路enter和no,一个工程就创建完成了!目录如下:
2.初始化并运行
// 首先进入刚创建的工程目录
cd myvue
// 安装依赖,根据package.json文件中的依赖进行安装的
npm install
注意:安装过程中可能会出现错误。不过一般npm都会提示如何进行修复,执行提示的命令即可;
修复完成后,如下:
到此为止,创建vue工程完成。使用IDEA直接open打开即可。
在当前项目路径下启动项目,使用管理员启动,不然就会显示不是外部或是可执行的命令.....
npm run dev
启动完成如下:
直接运行路径,启动页面如下:
停止就ctrl+C
使用IDEA打开工程:
工程目录结构如上;
webpack
什么是webpack?
答:webpack是js应用程序的静态模块打包器;当webpack处理应用程序时,它会递归的构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将这些模块打包成一个或是多个bundle;
中文文档地址:https://webpack.docschina.org/
在模块化的研究过程中,ES6模块化:
ES6标准增加了JavaScript语言层面的模块体系定义,ES6模块的设计思想,是尽量模块化,使得编译时就能确定模块的依赖关系,以及输入输出的变量;
安装webpack
npm安装:
npm install webpack -g // 打包工具
npm install webpack-cli -g // 客户端
测试安装:
webpack -v
webpack-cli -v
在使用webpack进行打包的时候,可能会出现依赖的版本冲突。在创建的前端项目json文件中有所有的依赖及版本。
使用webpack
1.创建项目:直接找一个位置创建一个空的文件夹:mywebpack(自定义)
2.使用IDEA打开创建的空文件夹,并在这个文件夹下创建一个modules文件,用于放置js文件目录。
3.在上一步创建的modules文件下创建一个个模块文件,就好像后端的dao,controller目录一样。在这里创建一个hello.js文件,编写js代码;
目录结构如下:
hello.js中的代码:
// 这里暴露一个方法:HelloDemo,和后端方法类似,其中exports表示暴露这个方法,其他文件可以调用
exports.HelloDemo = function () {
document.write("<p>ES6的一个Dmeo</p>");
};
4.在modules目录下创建一个入口文件main.js用于打包时设置entry属性
目录结构:
main.js中的代码:
// require表示导入一个模块,这里导入之前创建的hello文件
var hello = require("./hello");
// 上面导入hello后就可以直接调用该文件中的所有暴露的方法。
hello.HelloDemo();
5.在创建一个webpack.config.js配置文件。用于使用webpack命令打包
目录结构:注意:webpack.config.js配置文件不能再moduls下。必须在根目录,不然打包就会报错。
文件代码:
module.exports = {
entry: "./modules/main.js", // 打包入口
output: {
filename: "./js/bundle.js" // 打包到什么文件
}
};
6.在对应的文件目录下,使用管理员身份在黑窗口执行打包:
出现错误:
纠错:
1.检查目录结构是否正确!webpack.config.js必须在根目录!
2.检查配置文件名是否正确!必须是webpack.config.js
3.在目录文件下执行:npm init 初始化,一路enter,这样就会生成一个package.json.
在package.json中"scripts"添加:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
然后在webpack.config.js中添加mode一行:
module.exports = {
entry: "./modules/main.js", // 打包入口
output: {
filename: "./js/bundle.js" // 打包到什么文件
},
mode: "development"
};
以上检查都没问题,直接在对应目录管理员身份打包:webpack
打包成功!会自动生成一个dist目录
这样的文件就是我们经常使用的js压缩文件。
测试:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<script src="dist/js/bundle.js"></script>
</head>
<body>
</body>
</html>
Vue-router路由
Vue Router 是 Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式,在 IE9 中自动降级
- 自定义的滚动条行为
安装
在之前创建的前端工程中,安装vue-router
npm install vue-router --save-dev
如果出现报错,直接按照提示执行相应的代码即可!
直接双击shift,搜索就可以查询到安装好的vue-router
如果在一个模块化工程中使用它,必须要通过 Vue.use()
明确地安装路由功能:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
以上就是vue-router完整的安装过程!
使用 vue-router
1.创建一个组件目录components:这个目录专门用于存放我们自己自定义的组件。可以想象成后端中自定义的类
创建两个vue文件,分别用于存放内容和标题。两个页面互不相关;
我们要实现的功能就是,在执行vue工程后,显示的首页面上有创建的两个页面的链接。点击链接就在页面下方显示template中的内容;要实现该功能就需要使用vue-router实现页面跳转是视图显示的功能;
2.创建vue-router路由文件,根据命名规范,使用index.js作为主配置文件;
index.js中的代码:
import Vue from 'vue'
import VueRouter from "vue-router"
import Content from '../components/content'
import first from "../components/first";
// 安装路由,这样导入的路由才会起作用
Vue.use(VueRouter);
// 创建路由
export default new VueRouter({
routers: [
{
// 路由路径
path: '/content',
// 路由名称
name: 'content',
// 跳转的组件
component: Content
},
{
// 路由路径
path: '/first',
// 路由名称
name: 'first',
// 跳转的组件
component: first
}
]
});
上面的代码就实现了两个路由跳转功能;
3.将配置的路由文件加载到主文件入口main.js中;
import Vue from 'vue'
import App from './App'
import router from './router' // 我们自己写的路由配置文件
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router, // 导入
components: { App },
template: '<App/>'
})
4.在App.vue文件中配置页面显示内容
<template>
<div id="app">
<!--跳转链接-->
<router-link to="/content">内容页</router-link>
<router-link to="/first">首页</router-link>
<!--页面内容显示-->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
5.测试,在控制台以管理员的身份运行项目:
npm run dev
运行成功显示:
打开浏览器执行上述地址:http://localhost:8080