Vue前端基础学习
vue-cli
vue-cli 官方提供的一个脚手架（预先定义好的目录结构及基础代码，咱们在创建Maven项目的时可以选择创建一个骨架项目，这个骨架项目就是脚手架），用于快速生成一个vue项目模板
主要功能
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
环境准备
- Node.js
- git
安装vue-cli
- 安装Node.js
官网安装地址：https://nodejs.org/zh-cn/
验证是否安装成功，在cmd输入： node-v
npm install --registry=https://registry.npm.taobao.org
安装vue-cli
npm install -g @vue/cli
验证是否安装成功
vue list
创建一个简单的demo
在桌面创建一个目录，然后cd进入到该目录输入：
**vue init webpack firstvue(项目名称) **
然后回车4次，n，n，n，n，No，I will handle that myself
cd firstvue
**npm install **
npm run dev
目录结构
| build | 项目构建(webpack)相关代码 |
|---|---|
| config | 配置目录，包括端口号等。我们初学可以使用默认的。 |
| node_modules | npm 加载的项目依赖模块 |
| src | 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： |
- assets: 放置一些图片，如logo等。
- components: 目录里面放了一个组件文件，可以不用。
- App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
- main.js: 项目的核心文件。
|
| static | 静态资源目录，如图片、字体等。 |
| test | 初始测试目录，可删除 |
| .xxxx文件 | 这些是一些配置文件，包括语法配置，git配置等。 |
| index.html | 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。 |
| package.json | 项目配置文件。 |
| README.md | 项目的说明文档，markdown 格式 |
Vue基础语法
条件渲染
- 条件判断语句
- v-if
- v-else
<!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>条件渲染</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="awesome">Vue is awesome</h1>
<h1 v-else>Oh no </h1>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
awesome: true
}
})
</script>
</body>
</html>
- v-else-if
<!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>连续判断语句</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
type: "A"
}
});
</script>
</body>
</html>
列表渲染
循环遍历语句
- v-for
<!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>列表渲染</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<ul id="example-1">
<li v-for="item in items">
{{item.message}}
</li>
</ul>
<script>
var app = new Vue({
el: "#example-1",
data: {
items: [
{ message: "Foo" },
{ message: "Bar" }
]
}
})
</script>
</body>
</html>
事件处理
- v-on
<!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>事件处理</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="example-1">
<button v-on:click="greet">Greet</button>
</div>
<script>
var app = new Vue({
el: "#example-1",
data: {
message: "Hello Vue123456"
},
methods: {
greet: function () {
// alert('Hello Vue');
alert(this.message);
}
}
});
</script>
</body>
</html>
使用Axios实现异步通信
什么是Axios
Axios 是一个开源的可以在浏览器端和Node.js的异步通信框架，它主要作用是实现AJAX异步通信，其功能特点如下：
- 从浏览器中创建XML HttpRequests
- 从node.js创建http请求
- 支持Promise Api（链式编程）
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换json格式
- 客户端支持防御XSRF
第一个Axios应用程序
{
"name":"百度",
"url":"http://www.baidu.com",
"page":66,
"isNonProfit":true,
"address":{
"street":"海定区",
"city":"北京市",
"country":"中国"
},
"links":[
{
"name":"Google",
"url":"http:www.google.com"
},
{
"name":"baidu",
"url":"http://www.baidu.com"
},
{
"name":"Sougou",
"url":"http://www.sougou.com"
}
]
}
<!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>Axios应用程序</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">
<div>
名称:{{info.name}}
</div>
<div>
url:{{info.url}}
</div>
<ul>
<li v-for="link in info.links">
{{link.name}}--->{{link.url}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: "#app",
data() {
return {
info: {
name: '',
url: '',
links: []
}
}
},
mounted() {
axios
.get('data.json')
.then(response => this.info = response.data)
}
})
</script>
</body>
</html>
成功图：
表单输入绑定
- v-model
<!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>表单输入绑定</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message" />
<p>Message is :{{message}}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "Hello Vue"
}
})
</script>
</body>
</html>
多行文本
<!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>多行文本</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{message}}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "Hello Vue"
}
})
</script>
</body>
</html>
复选框
<!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>复选框</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="checked" id="ch" />
<label for="ch">复选框的状态{{checked}}</label>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
checked: true
}
})
</script>
</body>
</html>
复选框
<!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>复选框</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="jack">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="jack">Mike</label>
<br>
<span>Checked names:{{checkedNames}}</span>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
checkedNames: []
}
})
</script>
</body>
</html>
单选框
<!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>单选框</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
picked: ''
}
})
</script>
</body>
</html>
选择框
<!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>选择框</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>
</body>
</html>
复选框
<!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>复选框</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="checked" id="ch" />
<label for="ch">复选框的状态{{checked}}</label>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
checked: true
}
})
</script>
</body>
</html>
Vue组件
<!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>Vue组件</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<my-component-li v-for="item in items" v-bind:item="item"></my-component-li>
</ul>
</div>
<script type="text/javascript">
// 定义一个组件
Vue.component("my-component-li", {
props: ["item"],
template: '<li>{{item}}</li>'
})
var app = new Vue({
el: '#app',
data: {
items: ["A", "B", "C"]
}
})
</script>
</body>
</html>
计算属性
<!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>计算属性</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>当前时间方法:{{getCurrentTime()}}</p>
<p>当前时间属性:{{getCurrentTime1}}</p>
</div>
<script>
var app = new Vue({
el: "#app",
methods: {
getCurrentTime: function () {
return Date.now();
}
},
computed:{
getCurrentTime1:function(){
return Date.now();
}
}
})
</script
</body>
</html>
插槽与自定义事件
插槽确定组件的一个位置
todo 后续补充
Webpack
什么是webpack？
本质上，webpack是一个现代JavaScript应用程序静态模块打包器。当webpack处理应用程序时，它会递归地构造一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bandle
安装webpack
npm install webpack -g
npm install webpack-cli -g
一个简单的demo
创建一个webpack的文件夹
在webpack中创建一个文件webpack.config.js 和 index.html
在webpack中创建一个子文件夹modules
在modules中创建hello.js和main.js
main.js
var hello = require("./hello");
hello.sayHi();
hello.js
exports.sayHi = function(){
document.write("<div>Hello webpack,ranyong222</div>");
}
webpack.config.js
module.exports = {
entry: "./modules/main.js", // 入口文件
output: {
filename: "./js/bundle.js"
}
}
进行webpack打包
cd到webpack目录下
命令行输入：webpack
webpack会出现一个dist的文件夹
index.html
<!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>webpack一个简单的demo</title>
</head>
<body>
<script src="dist/js/bundle.js"></script>
</body>
</html>
这样就可以在ES5 ES6的浏览器中使用了
Vue-router
什么是vue-router？
Vue-router是Vue.js 官方的路由管理器。它和Vue.js 的核心深度集成，让构建单页应用变得易如反掌。它的功能有：
- 嵌套的路由/试图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于Vue.js过渡系统的试图过渡效果
- 细粒的导航控制
- 带有自动激活的CSS class 的链接
- Html5 历史模式或hash 模式，在IE9中自动降级
- 自定义的滚动条行为
安装vue-router
npm install vue-router --save-dev
todo 需要详细写全这个路由
整合ElementUI
什么是ElementUI？
Element-UI是饿了么前端团队推出一款基于Vue.js 2.0的桌面端UI框架
安装ElementUI
npm i element-ui -S
安装 SASS 加载器
npm install sass-loader@7.3.1 node-sass --save-dev
快速上手
https://www.bilibili.com/video/BV1zo4y1C7LH?p=22&spm_id_from=pageDriver
嵌套路由
什么是嵌套路由？
嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件结合而成。同样的，URL中各段动态路径也按某种结构对应嵌套各层组件
快速上手
https://www.bilibili.com/video/BV1zo4y1C7LH?p=25&spm_id_from=pageDriver
参数传递
什么是参数传递？
我们经常需要把某些模式匹配到所有路由，全都映射到同一个组件。例如，我们又一个User组件，对于所有ID各不同的用户，都要使用这个组件来渲染。此时我们就需要传递参数了
快速上手
https://www.bilibili.com/video/BV1zo4y1C7LH?p=26&spm_id_from=pageDriver
组件重定向
https://www.bilibili.com/video/BV1zo4y1C7LH?p=27&spm_id_from=pageDriver
路由中的钩子函数
- before eRouteEnter: 在进入路由前执行
- before eRouteLevave:在离开路由前执行
Vuex
什么是vuex？
Vuex是一个专门为vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
安装
npm install vuex --save
Vue前端基础学习的更多相关文章
- 2.VUE前端框架学习记录二
VUE前端框架学习记录二:Vue核心基础2(完结)文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baid ...
- 4.VUE前端框架学习记录四：Vue组件化编码2
VUE前端框架学习记录四:Vue组件化编码2文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...
- 3.VUE前端框架学习记录三：Vue组件化编码1
VUE前端框架学习记录三:Vue组件化编码1文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...
- 1.VUE前端框架学习记录一
VUE前端框架学习记录一文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/file/f0 ...
- web前端基础学习路线
1.HTML和CSS的基础知识,完成网页的初步设计 2.JavaScript基础知识和DOM.BOM的学习 3.前端基础框架:CSS框架Bootstrap.JavaScript框架jquery的熟悉使 ...
- web前端——Vue.js基础学习
近期项目的前端页面准备引入Vue.js,看了网上一些简介,及它和JQuery的对比,发现对于新入门的前端开发来说,Vue 其实也是比较适用的一个框架,其实用性不比JQuery差,感觉还挺有意思,于是研 ...
- web前端——Vue.js基础学习之class与样式绑定
打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究,相比前一篇的 demo,本次内容多了各种样式在里面,变得稍微花哨了些,话不多说,直接上代码吧: <html> <head ...
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
- Anibei前端基础学习
html.html5.CSS2.CSS3.JQuery.Vue.js学习,后端程序媛开始学习前端开发啦.
随机推荐
- 放弃模拟器，安卓手机WiFi投屏到Ubuntu
曾经使用过一些安卓的模拟器,但是特别占用资源,而且很多平时使用的非游戏生活类App都有兼容性问题,自然最终无奈而放弃了. 现在将学习环境迁移到了Ubuntu平台,发现各个方面还是不错的,平时使用的各种 ...
- Flink使用二次聚合实现TopN计算-乱序数据
一.背景说明: 在上篇文章实现了TopN计算,但是碰到迟到数据则会无法在当前窗口计算,需要对其中的键控状态优化 Flink使用二次聚合实现TopN计算 本次需求是对数据进行统计,要求每隔5秒,输出最近 ...
- [刷题] 75 Sort Colors
要求 给只有0 1 2三个元素的数组排序 思路 方法1:遍历数组,利用辅助数组保存三个元素的个数,再写入(遍历两遍) 辅助数组有三个元素,对应0 1 2的个数 方法2:模拟三路快排,遍历一遍完成排序 ...
- linux自动化交互脚本expect详解set timeout 5是 意思是在expect语句中，5s后超时，不再作出选择。
linux自动化交互脚本expect详解 更新时间:2020年10月21日 10:13:20 作者:lendsomething 这篇文章主要介绍了linux自动化交互脚本expect的相 ...
- MySQL配置HeartBeat实现心跳监控和浮动IP
1. 初始化环境配置 /sbin/chkconfig --add mysqld /sbin/chkconfig mysqld on ln -s /usr/local/mysql/bin/mysql / ...
- Zabbix 自动发现并监控磁盘IO、报警 引言
引言 Zabbix并没有提供模板来监控磁盘的IO性能,所以我们需要自己来创建一个,由于一台服务器中磁盘众多,如果只有一两台可以手动添加,但服务集群达到几十那就非常麻烦,因此需要利用自动发现这个功能,自 ...
- 运维常用shell脚本二（压缩文件、过滤不需要的文件、检测进程）
一.压缩指定目录下的文件并删除原文件 #!/bin/bashZIP_DAY=7 function zip { local dir=$1 if [ -d $dir ];then local file_n ...
- KVM虚拟化存储管理（4）
一.KVM存储虚拟化介绍 KVM 的存储虚拟化是通过存储池(Storage Pool)和卷(Volume)来管理的. Storage Pool 是宿主机上可以看到的一片存储空间,可以是多种型: Vol ...
- nosql数据库之Redis集群
Redis 集群是一个可以在多个 Redis 节点之间进行数据共享的设施(installation). Redis 集群不支持那些需要同时处理多个键的 Redis 命令, 因为执行这些命令需要在多个 ...
- Linux进阶之链路聚合
CentOS7用命令配置链路聚合 链路聚合是一个计算机网络术语,将多个物理端口汇聚在一起,形成一个逻辑端口,以实现出入流量在各成员端口的负荷分担,交换机根据用户配置的端口负荷分担策略决定网络封包从哪个 ...