Vue
UI框架
- Ant-Design: 阿里巴巴出品,基于React的UI框架
- ElementUI、iview、ice: 饿了么出品,基于Vue的UI框架
- Bootstrap: Twitter 推出的一个用于前端开发的开源工具包
- AmazeUI: 又叫"妹子 UI",一款HTML5跨屏前端框架
第一个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>
</body>
</html>
导入Vue CDN
开发版:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
生产版:<script src="https://cdn.jsdelivr.net/npm/vue"></script>
编写程序HelloWorld
# el 元素绑定 选择器
# data 数据
# {{message}} 通过属性名拿到属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
message: 'HelloWorld'
}
})
</script>
</body>
</html>
Vue基本语法
v-bind
# v-bind 相当于{{}}
# v-bind 缩写 :
# v-bind 可以读取js里面的数据
# 如果不加v-bind那么title里面的message只是一个普通的字符串,加上了v-bind就是相当于{{message}}通过对应的属性名读取属性值.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p :title="message">哈哈</p>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
message: 'HelloWorld'
}
})
</script>
</body>
</html>
if elseif else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-if="age>20">A</p>
<p v-else-if="age<=20 && age>0">B</p>
<p v-else>C</p>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
age: 20,
}
})
</script>
</body>
</html>
for
# item 数组用[] 对象{}
# in 遍历
# items 遍历完的数组
# items.name 获取具体属性的内容
# index 下标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(items,index) in item">{{index}}----{{items.name}}----{{items.age}} </li>
</ul>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
item: [
{'name':'张三','age': 20},
{'name':'李四','age': 25},
{'name':'王五','age': 22}
]
}
})
</script>
</body>
</html>
v-on
# v-on 绑定事件 缩写@
# methods 里面定义的都是方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button type="button" @click="fun1">点击</button>
</div>
<script>
const vm =new Vue({
el: '#app',
data: {
},
methods: {
//第一种写法
fun1(){
alert("你好")
}
//第二种写法
fun1: function(){
alert("你好")
}
}
})
</script>
</body>
</html>
Vue双向绑定
# v-model 双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message"></input><br/>
{{message}}
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
message: 'HelloWorld'
},
})
</script>
</body>
</html>
Vue组件
# component 组件
# template 模板
# yuxiang标签 代替模板里面的标签
# props 接收属性参数
# v-bind 动态的向props传递参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<yuxiang v-for="item in items" v-bind:yu="item"></yuxiang>
</div>
<script>
// 定义一个组件
Vue.component('yuxiang', {
props: ['yu'] ,
template: '<li>{{yu}}</li>'
})
const vm = new Vue({
el: '#app',
data: {
items: ['Java','前端','后端']
},
})
</script>
</body>
</html>
Axios异步通信
axios官方文档:http://www.axios-js.com/zh-cn/docs/
导入axios CDN
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
手动创建一个json文件
{
"sucess": true,
"code": 2000,
"message": "成功",
"data": {
"items": [
{"name":"张三"},
{"name":"李四"},
{"name":"王五"}
]
}
}
编写程序
# created(){} 页面渲染之前执行
# axios.get("请求接口路径").then(response 箭头函数).catch(response 箭头函数)
# //response就是接收data.json里面的参数,名字随便定义
# then() 请求成功执行
# catch() 请求失败执行
# this 匿名Vue对象
# 增加的知识 mounted 钩子函数,页面直接运行axios,不用调用方法执行.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<li v-for="user in userList">{{user.name}}</li>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
userList:[] //定义变量,值空数组
},
created () { //页面渲染之前执行
//调用定义的方法
this.getUserList();
},
methods: { //编写具体的方法
//创建方法 查询所有的用户数据
getUserList(){
//使用axios发送ajax请求
//axios.get("请求接口路径").then(箭头函数).catch(箭头函数)
axios.get("data.json")
.then(response => { //response就是接收data.json里面的参数,名字随便定义
console.log(response);
this.userList= response.data.data.items;
})//请求成功执行
.catch(error =>{
alert("请求失败")
})//请求失败执行
}
}
})
</script>
</body>
</html>
Computed计算属性
# computed 调用里面的方法不需要加括号 因为里面是属性
# 当里面数据刷新就会从新计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<p>{{createTime}}</p>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
},
computed: {
createTime: function(){
return Date.now();
}
}
})
</script>
</body>
</html>
结论:
调用方法时,每次都需要进行计算,既然有计算过程则必定产生系统开销,那如果这个结果是不经常变化的呢? 此时就可以考虑将这个结果缓存起来,采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存,以节约我们的系统开销。
插槽slot
- 缩写:
#
- 预期:可放置在函数参数位置的 JavaScript 表达式 (在支持的环境下可使用解构)。可选,即只需要在为插槽传入 prop 的时候使用。
- 参数:插槽名 (可选,默认值是
default
) - 限用于
-
<template>
- 组件 (对于一个单独的带 prop 的默认插槽)
- 用法:
- 提供具名插槽或需要接收 prop 的插槽。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
</todo>
</div>
<script>
Vue.component("todo",{
template: '<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});
Vue.component("todo-title",{
props: ['title'],
template: '<div>{{title}}</div>'
});
Vue.component("todo-items",{
props: ['item'],
template: '<li>{{item}}</li>'
});
const vm = new Vue({
el: '#app',
data: {
title: "秦老师系列课程",
todoItems: ['狂神说Java','狂神说前端','狂神说Linux']
},
})
</script>
</body>
</html>
Webpack
什么是Webpack
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。
Webpack安装
1.全局安装
npm install -g webpack webpack-cli
2.安装后查看版本号
webpack -v
配置
创建 webpack.config.js 配置文件
- entry: 入口文件,指定WebPack7用哪个文件作为项目的入口
- output: 输出,指定WebPack把处理完成文件放置到指定路径
- module: 模块,用于处理各种类型的文件
- plugins: 插件,如: 热更新、代码重用等
- resolve: 设置路径指向
- watch: 监听,用于设置文件改动后直接打包
使用webpack
webpcak打包js
创建项目
创建一个名为modules的目录,用于放置JS 模块等资源文件
在modules下创建模块文件,如hello.js,用于编写JS模块相关代码
//暴露一个方法
exports.sayhi = function () {
document.write("你好");//浏览器打开
}
在modules下创建一个名为main.js的入口文件 用于打包时设置entry属性
//引入方法
var hello = require("./hello.js");
hello.sayhi()
在项目目录下创建webpack.config.js配置文件 使用webpack命令打包
const path = require("path"); //Node.js内置模块
module.exports = {
entry: './modules/main.js', //配置入口文件
output: {
path: path.resolve(__dirname, './dist'), //输出路径,__dirname:当前文件所在路径
filename: './js/bundle.js' //输出文件
}
}
使用打包好的bundle.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="./dist/js/bundle.js"></script>
</body>
</html>
webpack打包CSS
1、安装style-loader和 css-loader
Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。
Loader 可以理解为是模块和资源的转换器。
首先我们需要安装相关Loader插件,css-loader 是将 css 装载到 javascript;style-loader 是让 javascript 认识css
npm install --save-dev style-loader css-loader
2、修改webpack.config.js
const path = require("path"); //Node.js内置模块
module.exports = {
//...,
output:{},
module: {
rules: [
{
test: /\.css$/, //打包规则应用到以css结尾的文件上
use: ['style-loader', 'css-loader']
}
]
}
}
3、在src文件夹创建style.css
body{
background:pink;
}
4、修改main.js
在第一行引入style.css
require('./style.css');
5、浏览器中查看index.html