Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架,发布于2014年2月。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库(如: vue-router: 跳转,vue-resource: 通信,vuex:管理)或既有项目整合。
SOC原则:关注点分离原则
想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走,其中“我大前端”是绕不开的一门必修课。本阶段课程的主要目的就是带领我Java后台程序员认识前端、了解前端、掌握前端,为实现成为“互联网Java全栈工程师”再向前迈进一步。
CSS层叠样式表是一门标记语言,并不是编程语言,因此不可以自定义变量,不可以引用等,换句话说就是不具备任何语法支持,它主要缺陷如下:
这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题,前端开发人员会使用一种称之为 [CSS预处理器] 的工具,提供CSS缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性。大大提高了前端在样式上的开发效率。(例如页面在不同的时候有不同的需求,淘宝在双11和618的样式就会不一样)
CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行CSS的编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言,进行Web页面样式设计,再通过编译器转化为正常的CSS文件,以供项目使用”
常用的CSS预处理器有哪些
JavaScript一门弱类型脚本语言,其源代码在发往客户端运行之前不需经过编译,而是将文本格式的字符代码发送给浏览器由浏览器解释运行。
Native原生JS开发
原生JS开发,也就是让我们按照[ECMAScript] 标准的开发方式,简称是ES,特点是所有浏览器都支持。截止到当前博客发布时间,ES 标准已发布如下版本:
区别就是逐步增加新特性。
TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。由安德斯海尔斯伯格(C#、Delphi、TypeScript 之父; .NET 创立者)主导。
该语言的特点就是除了具备ES的特性之外还纳入了许多不在标准范围内的新特性,所以会导致很多浏览器不能直接支持TypeScript语法,需要编译后(编译成JS)才能被浏览器正确执行。
前端三大框架:Angular、React、Vue
JavaScript 构建工具
混合开发(Hybid App)
主要目的是实现一套代码三端统一(PC、Android:.apk、iOS:.ipa )并能备够调用到底层件(如:传感器、GPS、 摄像头等),打包方式主要有以下两种:
前端人员为了方便开发也需要掌握一定的后端技术, 但我们Java后台人员知道后台知识体系极其庞大复杂,所以为了方便前端人员开发后台应用,就出现了NodeJS这样的技术。
NodeJS的作者已经声称放弃NodeJS (说是架构做的不好再加上笨重的node_ modules,可能让作者不爽了吧),开始开发全新架构的Deno
既然是后台技术,那肯定也需要框架和项目管理工具,NodeJS 框架及项目管理工具如下:
MVVM (Model-View-ViewModel) 是一种软件架构设计模式,由微软WPF (用于替代WinForm,以前就是用这个技术开发桌面应用程序的)和Silverlight (类似于Java Applet,简单点说就是在浏览器上运行的WPF)的架构师Ken Cooper和Ted Peters 开发,是一种简化用户界面的事件驱动编程方式。由John Gossman (同样也是WPF和Silverlight的架构师)于2005年在他的博客上发表。
MVVM 源自于经典的 MVC (ModI-View-Controller) 模式。MVVM的核心是ViewModel层,负责转换Model中的数据对象来让数据变得更容易管理和使用,其作用如下:
MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model),有几大好处:
Model : 模型层,在这里表示JavaScript对象
View : 视图层,在这里表示DOM (HTML操作的元素)
ViewModel : 连接视图和数据的中间件,Vue.js就是MVVM中的ViewModel层的实现者在MVVM架构中,是不允许数据和视图直接通信的,只能通过ViewModel来通信,而ViewModel就是定义了一个Observer观察者
ViewModel 能够观察到数据的变化,并对视图对应的内容进行更新
ViewModel 能够监听到视图的变化,并能够通知数据发生改变
Vue.js 就是一个MVVM的实现者,他的核心就是实现了DOM监听与数据绑定
新建一个 HTML5 项目,并编写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--View 层-->
<div id="app">
<!--4、元素获取 vue 中的数据-->
{
{message}}
</div>
<!--1、导入 vue.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm = new Vue({
// 2、绑定 app 元素
el: "#app",
// Model 层
// 3、插入数据,键值对
data: {
message: "hello,vue"
}
});
</script>
</body>
</html>
打开页面
打开开发者工具,选择 Console
输入 ,并回车
vm.message="hehe"
发现页面的数据也变了
这就是 ViewModel 双向绑定
view层的数据 和 message 这个变量绑定,message 改变页面上的数据也改变了
编写 HTML 页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--View 层-->
<div id="app">
<!--4、元素获取 vue 中的数据-->
<!-- {
{message}}-->
<span v-bind:title="message">
鼠标悬停几秒可查看绑定的信息
</span>
</div>
<!--1、导入 vue.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm = new Vue({
// 2、绑定 app 元素
el: "#app",
// Model 层
// 3、插入数据,键值对
data: {
message: "hello,vue"
}
});
</script>
</body>
</html>
打开页面查看
发现 使用 v-bind: 也可以把变量绑定到元素上
指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
编写 HTML
<div id="app">
<span v-if="ok===true">YES</span>
<span v-else>No</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
ok: true
}
});
</script>
打开页面
修改 ok 的值
<div id="app">
<span v-if="str==='A'">AAA</span>
<span v-else-if="str==='B'">BBB</span>
<span v-else>Other</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
str: 'A'
}
});
</script>
打开页面
修改 str 的值
<div id="app">
<ul>
<!--类似于java 的 foreach ,
从 items 中遍历出的每一项命名为 item-->
<li v-for="item in items">{
{item.message}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
items: [
{
message: "test-1"},
{
message: "test-2"},
{
message: "test-3"}
]
}
});
</script>
打开页面
可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。
<div id="app">
<button v-on:click="sayHi()">click me</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "Hi!!!"
},
// 定义方法
// 注意一定要加 S
methods: {
// 冒号前是方法名
sayHi: function (){
alert(this.message);
}
}
});
</script>
打开页面
vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是vue的精髓之处了。
值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的,非UI控件不会涉及到数据双向绑定。 单向数据绑定是使用状态管理工具(如redux)的前提。如果我们使用vuex,那么数据流也是单项的,这时就会和双向数据绑定有冲突,我们可以这么解决
在vue中,如果使用vuex,实际上数据还是单向的,之所以说是数据双向绑定,这是用的UI控件来说,对于我们处理表单,vue的双向数据绑定用起来就特别舒服了。
即两者并不互斥, 在全局性数据流使用单项,方便跟踪; 局部性数据流使用双向,简单易操作。
可以用 v-model 指令在表单 < input >、< textarea > 及 < select > 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
<div id="app">
<!--双向绑定:
data 中的 message 既和输入框的 message 绑定
又和 p 标签中的 message 绑定-->
<span>输入文本:</span><input type="text" v-model="message">
<p><span>输入的文本:</span><span>{
{message}}</span></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: ""
}
});
</script>
在页面中修改 message 的值
直接在输入框中输入
<div id="app">
性别:
<input type="radio" name="sex" value="male" v-model="sex"> 男
<input type="radio" name="sex" value="female" v-model="sex"> 女
<p>选中了:{
{sex}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
sex: ""
}
});
</script>
打开页面
可以发现,这里绑定的是单选框的 Value
<div id="app">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">杰克</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">约翰</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">麦克</label>
<br>
<span>Checked names: {
{ checkedNames }}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
checkedNames: []
}
});
</script>
<div id="app">
下拉框:
<select v-model="selected">
<option value="" disabled>-请选择-</option>
<option value="aaa">AA</option>
<option value="bbb">BB</option>
<option value="ccc">CC</option>
</select>
<p>选中 : {
{selected}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
selected : ""
}
});
</script>
组件是可复用的 Vue 实例,也就是在开发过程中可以把重复的部分封装为组件
组件的组织
例如,你可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件。
<div id="app">
<my-component></my-component>
<my-component></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
// 定义组件
Vue.component("my-component",{
template: '<li>AA</li>'
});
var vm = new Vue({
el: "#app"
});
</script>
<div id="app">
<!-- 利用 v-for 把 items 的元素取出,
再通过 v-bind 绑定数据: 把 item1 绑定在了 item2 上-->
<my-component v-for="item1 in items" v-bind:item2="item1"></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
// 定义组件
Vue.component("my-component",{
// 通过 item2 接收 item1 数据
props: ['item2'],
template: '<li>{
{item2}}</li>'
});
var vm = new Vue({
el: "#app",
data: {
items: ["AAA","BBB","CCC"]
}
});
</script>
Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架,它的主要作用就是实现 AJAX 异步通信,其功能特点如下:
由于 Vue.js 是一个 视图层框架 并且作者(尤雨溪)严格准守 SoC (关注度分离原则),所以 Vue.js 并不包含 AJAX 的通信功能,Vue推荐使用 Axios 框架,尽量不适用 JQuery,因为它会频繁的操作 DOM
确认 IDEA 的 JavaScript 支持 ES6
因为在实际开发中,大多使用的是 JSON 格式数据,所以这里新建一个 JSON 格式的文件
{
"name": "呵呵",
"url": "https://blog.csdn.net/weixin_44449838",
"page": 123,
"isNonProfit": true,
"address": {
"street": "塔克拉玛干沙漠",
"city": "新疆",
"country": "中国"
},
"links": [
{
"name": "Google",
"url": "http://www.google.com"
},
{
"name": "Baidu",
"url": "http://www.baidu.com"
}
]
}
编写 HTML - 获取 本地的 Json 数据
<div id="vue">
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<!-- axios 的包-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el: "#vue",
data: {
},
// 钩子函数,在主流程执行过程中间执行的方法
mounted(){
axios.get('../data.json').then(response=>(console.log(response.data)));
}
});
</script>
打开页面,打开开发者工具
可以发现 Axios 和 AJax 一样是异步的通信
也可以看到已经获取到了数据
编写 HTML - 把获得的 Json 渲染到页面
<div id="vue">
<!-- 需要渲染的字段名 -->
<div>{
{info.name}}</div>
<div>{
{info.address}}</div>
<div>{
{info.address.city}}</div>
<div v-for="link in info.links">
<span>{
{link.name}}</span> :
<a v-bind:href="link.url">{
{link.url}}</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<!-- axios 的包-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el: "#vue",
// 有冒号、大括号的 data 是属性
data: {
},
// 没有冒号的是方法
// 这里使用的 data 方法,不要搞混
data(){
return{
// 请求的返回参数,这里需要写上需要返回的字段名,不需要写值,所以都写 null
// 这里的键可以比传入的 Json 中的少
// 但是如果写了,就必须和获得的 Json 键的名字一样
info: {
name: null,
address: {
city: null,
country: null
},
links: [
{
name: null,
url: null
}
]
}
}
},
// 钩子函数,在主流程执行过程中间执行的方法
mounted(){
// 这边把 上面 return 中的 info 值和返回的 data 数据绑定,以便返回给视图渲染
axios.get('../data.json').then(response=>(this.info=response.data));
}
});
</script>
页面
上面那个 Demo 写好,在刷新页面的时候会发现,最开始出现的是模板,过一会儿后数据才出来
这样对用户不太友好,对数据也不安全,所以用如下方法解决
在 HTML 上方写一个 < style >< /style >
<style>
[v-cloak]{
display: none;
}
</style>
这样虽然数据还是会过一会儿才出来,但是已经看不到模板了。
Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染 ->更新 ->渲染、卸载等一系列过程,这称为 Vue 的生命周期。
在 Vue 的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册 JS 方法,可以放我们自己用自己注册的 JS 方法控制整个大局,在这些事件响应方法中的 this 直接指向的是 Vue 的实例。
计算属性 : 把计算出来的结果,保存在属性中。
好处 :在内存中运行,虚拟 DOM
编写代码
<div id="vue">
<!-- 调用方法 -->
<p>currentTime1 : {
{currentTime1()}}</p>
<!-- 调用属性 -->
<p>currentTime2 : {
{currentTime2}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#vue",
data: {
message: "hello."
},
methods: {
currentTime1: function (){
// 返回当前时间戳
return Date.now();
}
},
// 计算属性
computed: {
// 方法名不能一样
currentTime2: function (){
// 返回当前时间戳
return Date.now();
}
}
});
</script>
体验区别
打开页面、打开开发者模式、使用控制台
什么时候计算属性会改变
修改计算属性中的方法
// 计算属性
computed: {
// 方法名不能一样
currentTime2: function (){
// 返回当前时间戳
return Date.now() +" | "+this.message;
}
}
打开页面、打开开发者模式、使用控制台
所以只要计算属性方法体中有数据发生改变,计算属性就会改变。
<div>
<p>数据列表(原本的)</p>
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
</div>
————————————————————————————————
<div id="vue">
<list>
<!--绑定插槽 : 使用 slot 属性绑定,引号里的值,必须和下面的 name 属性一样-->
<!--绑定数据 : 冒号后面是组件中定义的值
引号里面是 data 数据的字段值
不能混淆-->
<list-title slot="list-title" :title="l_title"></list-title>
<list-items slot="list-items" v-for="item in l_items" :item="item"></list-items>
</list>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
Vue.component("list",{
template:
'<div>\
<slot name="list-title"></slot>\
<ul>\
<slot name="list-items"></slot>\
</ul>\
</div>'
});
// 定义数据,插入插槽
Vue.component("list-title",{
props: ['title'],
template: '<div>{
{title}}</div>'
});
Vue.component("list-items",{
props: ['item'],
template: '<li>{
{item}}</li>'
});
var vm = new Vue({
el: "#vue",
data: {
l_title: "标题————",
l_items:["AA","BBB","CCCC"]
}
});
</script>
页面效果
先稍作修改,添加删除按钮,绑定点击事件,点击后打印下标
<list-items slot="list-items" v-for="(item,index) in l_items" :item="item" :index="index"></list-items>
Vue.component("list-items",{
props: ['item','index'],
template: '<li>{
{item}}<button @click="remove(index)">删除</button></li>',
methods: {
remove: function (index){
alert(index);
}
}
});
在 vue 对象中添加删除方法
var vm = new Vue({
el: "#vue",
data: {
l_title: "标题————",
l_items:["AA","BBB","CCCC"]
},
methods: {
removeItem: function (index){
// 打印信息
console.log("删除了"+this.l_items[index]);
// 表示从 index 开始,删除 n 个元素
this.l_items.splice(index,1);
}
}
});
测试上面写的两个方法
点击删除按钮
在控制台调用 removeItem 方法
这两个方法分别成功,下面该如何让这两个方法产生联系
通过 this.$emit("自定义事件名",参数)
让组件调用事件
<!--数据绑定 :把 items 中的每一项元素遍历出来命名为 item 再和下面的 item 绑定-->
<!--事件绑定 :自定义一个名为 diyremove 的事件,先和vue对象中的 removeItem 方法绑定
再去到组件中的 remove 和 diyremove 事件绑定-->
<!--注意 : 属性值都要小写,大写不生效,也不会报错 ; 在自定义事件绑定方法的时候 v-on 不能缩写-->
<list-items slot="list-items" v-for="(item,index) in l_items" :item="item" :index="index" v-on:diyremove="removeItem(index)"></list-items>
Vue.component("list-items",{
props: ['item','index'],
template: '<li>{
{item}}<button @click="remove(index)">删除</button></li>',
methods: {
remove: function (index){
// 把这里的 remove 方法和 上面的 diyremove 事件绑定
this.$emit('diyremove',index);
}
}
});
测试
流程简单图解
vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板;
预先定义好的目录结构及基础代码,就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速;
主要功能:
Node.js : http://nodejs.cn/download/
安装 Node.js
下载 Node.js ,选择 windows 64位
安装 NodeJs ,一直下一步即可
查看是否安装成功
cmd 下输入 node -v,查看是否能够正确打印出版本号即可!
安装 Node.js 淘宝镜像加速器(cnpm)
(CMD 命令)
-g 就是全局安装
npm install cnpm -g --registry=https://registry.npm.taobao.org
# 或使用如下语句解决 npm 速度慢的问题
npm install --registry=https://registry.npm.taobao.org
安装过程有点慢
安装位置为 :C:\Users\Administered\AppData\Roaming\npm
安装vue-cli
(CMD 命令)
cnpm install vue-cli -g
(CMD 命令)
# 测试是否安装成功
# 查看可以基于哪些模板创建 vue 应用程序,通常我们选择 webpack
vue list
在文件夹中使用cmd创建一个名为 myvue
的vue项目并用webpack打包工具打包
(CMD 命令)
# 先找到要创建该文件的目录
# 这里的 myvue 是项目名称,可以根据自己的需求起名
vue init webpack myvue
说明:
1、Project name:项目名称,默认 回车 即可
2、Project description:项目描述,默认 回车 即可
3、Author:项目作者,默认 回车 即可
4、Vue build :编译,选择第一个
5、Install vue-router:是否安装 vue-router,选择 n 不安装(后期需要再手动添加)
6、Use ESLint to lint your code:是否使用 ESLint 做代码检查,选择 n 不安装(后期需要再手动添加)
7、Set up unit tests:单元测试相关,选择 n 不安装(后期需要再手动添加)
8、Setup e2e tests with Nightwatch:单元测试相关,选择 n 不安装(后期需要再手动添加)
9、Should we run npm install for you after the project has been created:创建完成后直接初始化,选择 n,我们手动执行;运行结果!
生成的文件
初始化并运行myvue项目
(CMD 命令)
# 进入文件夹
cd myvue
# 安装环境
npm install --registry=https://registry.npm.taobao.org
# 启动项目
npm run dev
# 停止 ctrl + c
运行成功后
webpack可以看做是静态模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。
如今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法
模块化,让我们可以把复杂的程序细化为小的文件;
类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能能装换为JavaScript文件使浏览器可以识别;
scss,less等CSS预处理器
……
这些改进确实大大的提高了我们的开发效率,但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的,这就为WebPack类的工具的出现提供了需求。
WebPack是一款模块加载器兼打包工具, 它能把各种资源, 如JS、JSX、ES 6、SASS、LESS、图片等都作为模块来处理和使用。
安装命令
(CMD 命令)
npm install webpack -g --registry=https://registry.npm.taobao.org
npm install webpack-cli -g --registry=https://registry.npm.taobao.org
测试是否安装成功
webpack -v
webpack-cli -v
创建 webpack.config.js 配置文件
entry:入口文件, 指定Web Pack用哪个文件作为项目的入口
output:输出, 指定WebPack把处理完成的文件放置到指定路径
module:模块, 用于处理各种类型的文件
plugins:插件, 如:热更新、代码重用等
resolve:设置路径指向
watch:监听, 用于设置文件改动后直接打包
module.exports = {
entry:"",
output:{
path:"",
filename:""
},
module:{
loaders:[
{
test:/\.js$/,;\loade:""}
]
},
plugins:{
},
resolve:{
},
watch:true
}
直接运行 webpack 命令打包
创建项目 : webpack-study
创建一个名为modules的目录,用于放置JS模块等资源文件
在modules下创建模块文件 :hello.js
用于编写JS模块相关代码
// 暴露一个方法
exports.sayHi = function(){
document.write("<h1>Hello World</h1>");
}
在 modules 下创建一个名为 main.js 的入口文件,用于打包时设置entry属性
// 引入 hello.js
var hello = require("./hello");
// 调用 hello.js 中的方法
hello.sayHi();
在 webpack-study 目录下创建 webpack.config.js 配置文件,使用webpack命令打包
// 把 module 导出
module.exports = {
// 目标文件
entry: './modules/main.js',
// 输出地址
output: {
filename: "./js/bundle.js"
}
}
把刚刚编写的文件打包
进入 webpack-study 目录
在 HTML 页面中引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="dist/js/bundle.js"></script>
</body>
</html>
打开页面
Vue Router是Vue.js官方的路由管理器(路径跳转)。它和Vue.js的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:
基于第一个vue-cli进行测试学习
cmd 进入 myvue 目录,并执行
npm install vue-router --save-dev --registry=https://registry.npm.taobao.org
清理代码
删除 src 目录下的图片、components 目录下的组件
修改 App.vue
<template>
<div id="app">
</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>
启动项目
修改 App.vue
<template>
<div id="app">
<h1>呵呵</h1>
</div>
</template>
发现项目自动 Bulid ,页面自动刷新
这就是 Vue 的热部署
在 components 中新建一个 Vue 组件 :Content.vue
<template>
<h1>Content</h1>
</template>
<script>
export default {
name: "Content"
}
</script>
<!-- 加上 scoped 表示只会在当前组件生效 -->
<style scoped>
</style>
在 components 中新建一个 Vue 组件 :Main.vue
<template>
<h1>首页</h1>
</template>
<script>
export default {
name: "main"
}
</script>
<style scoped>
</style>
在 src 下新建一个包(router),在该包中新建一个文件:index.js
// 导入文件
import Vue from "vue";
import VueRouter from "vue-router";
// 导入组件
import Content from "../components/Content";
import Main from "../components/Main";
// 安装路由
Vue.use(VueRouter);
// 配置导出路由
export default new VueRouter({
routes: [
{
// 类似于 @RequestMapping 接收一个请求,返回一个页面
// 路由的路径
path: '/content',
// 配置名称
name: 'content',
// 跳转的组件
component: Content
},
{
// 路由的路径
path: '/main',
// 配置名称
name: 'Main',
// 跳转的组件
component: Main
}
]
});
修改 main.js
import Vue from 'vue'
import App from './App'
// 导入 vue-router 的路由配置
// 这里是写在 index.js 文件中的所以导入该文件
// 因为文件名是 index 会自动扫描该文件,所以index可省
// 注意!! 这里必须写 router ,写错前端页面就报错
import router from "./router/index";
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
// 配置路由,上面的组件名
router,
components: {
App },
template: '<App/>'
})
修改 App.vue 中的 template 部分
<template>
<div id="app">
<h1>呵呵</h1>
<!--跳转链接,点击链接显示对应内容-->
<!--类似于原来的 <a></a> ;
to 类似于原来的 href,后面的值就是配置的路由-->
<router-link to="/main">首页</router-link>
<router-link to="/content">内容页</router-link>
<!--展示视图,理解为用于展示上面两个链接对应内容的区域-->
<router-view></router-view>
</div>
</template>
打开页面
创建一个名为 vue-elementui 的项目
先在 CMD 下进入需要创建的目录
vue init webpack vue-elementui
安装步骤与前文一样
安装 vue-router、element-ui、sass-loader、node-sass 四个插件
# 进入工程
cd vue-elementui
# 安装 vue-router
npm install vue-router --save-dev --registry=https://registry.npm.taobao.org
# 安装 element-ui
npm i element-ui -S --registry=https://registry.npm.taobao.org
# 安装依赖
npm install --registry=https://registry.npm.taobao.org
# 安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
# 启动测试
npm run dev
把项目恢复为一个空项目
删除 src 下的 logo.png、HelloWorld.vue
修改 App.vue
<template>
</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>
新建文件夹
router :存放路由信息
views :存放 视图组件
components :存放功能性的组件
在 views 包下新建一个视图组件:Main.vue
<template>
<h1>首页</h1>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>
在 views 包下新建一个视图组件:Login.vue
<template>
<div>
<el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
<h3 class="login-title">欢迎登录</h3>
<el-form-item label="账号" prop="username">
<el-input type="text" placeholder="请输入账号" v-model="form.username"/>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" placeholder="请输入密码" v-model="form.password"/>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
</el-form-item>
</el-form>
<el-dialog
title="温馨提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>请输入账号和密码</span>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
form: {
username: '',
password: ''
},
// 表单验证,需要在 el-form-item 元素中增加 prop 属性
rules: {
username: [
{
required: true, message: '账号不可为空', trigger: 'blur'}
],
password: [
{
required: true, message: '密码不可为空', trigger: 'blur'}
]
},
// 对话框显示和隐藏
dialogVisible: false
}
},
methods: {
onSubmit(formName) {
// 为表单绑定验证功能
this.$refs[formName].validate((valid) => {
if (valid) {
// 使用 vue-router 路由到指定页面,该方式称之为编程式导航
this.$router.push("/main");
} else {
this.dialogVisible = true;
return false;
}
});
}
}
}
</script>
<style lang="scss" scoped>
.login-box {
border: 1px solid #DCDFE6;
width: 350px;
margin: 180px auto;
padding: 35px 35px 15px 35px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 0 0 25px #909399;
}
.login-title {
text-align: center;
margin: 0 auto 40px auto;
color: #303133;
}
</style>
在 router 文件下编写路由配置信息:index.js
import Vue from 'vue';
import VueRouter from "vue-router";
import Main from "../views/Main";
import Login from "../views/Login";
// 显式的使用导入的组件
Vue.use(VueRouter);
export default new VueRouter({
routes: [
{
path: "/login",
name: "login",
component: Login
},{
path: "/main",
name: "main",
component: Main
}
]
});
修改 main.js
import Vue from 'vue'
import App from './App'
import router from './router'
// 导入 elementUI
import ElementUI from 'element-ui'
// 导入 elementUI 对应的 CSS
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(router)
Vue.use(ElementUI)
new Vue({
el: '#app',
// 配置 elementUI
render: h => h(App),
router
})
修改 App.vue
<template>
<div id="app">
<!-- 因为 main.js 中配置了,element-ui 自动渲染,所以这里只需要有一个这个标签就好了 -->
<router-view></router-view>
</div>
</template>
启动项目
如果报错,尝试降 sass-loader 的版本
找到 package.json 文件
找到 sass-loader 属性
把后面的版本号 改为 ^7.3.1
重新安装环境依赖
npm install --registry=https://registry.npm.taobao.org
重启项目,访问 http://localhost:8080/#/login
随便输入用户名、密码,登录
发现进入首页
查看 Login.vue 代码, 在 < script>< /script>中
在 views 中新建一个 user包
在 user 包下,新建 List.vue
<template>
<h1>用户列表</h1>
</template>
<script>
export default {
name: "List"
}
</script>
<style scoped>
</style>
在 user 包下,新建 Profile.vue
<template>
<h1>个人信息</h1>
</template>
<script>
export default {
name: "Profile"
}
</script>
<style scoped>
</style>
修改 Main.vue ,添加一个侧边栏
<template>
<div>
<el-container>
<el-aside width="200px">
<el-menu :default-openeds="['1']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
<el-menu-item-group>
<el-menu-item index="1-1">
<!--插入的地方-->
<router-link to="/user/profile">个人信息</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<!--插入的地方-->
<router-link to="/user/list">用户列表</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
<el-menu-item-group>
<el-menu-item index="2-1">分类管理</el-menu-item>
<el-menu-item index="2-2">内容列表</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item>退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-header>
<el-main>
<!--在这里展示视图-->
<router-view />
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped lang="scss">
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
修改 index.js ,路由信息
import Vue from 'vue';
import VueRouter from "vue-router";
import Main from "../views/Main";
import Login from "../views/Login";
import List from "../views/user/List";
import Profile from "../views/user/Profile";
// 显式的使用导入的组件
Vue.use(VueRouter);
export default new VueRouter({
routes: [
{
path: "/login",
name: "login",
component: Login
},{
path: "/main",
name: "main",
component: Main,
// 嵌套路由
children: [
{
path: "/user/profile",
component: Profile
},{
path: "/user/list",
component: List
}
]
}
]
});
在 Main.vue 中插入路由链接,展示视图
修改路由的模式
有两种模式 :1、hash :路径中有 # ; 2、history :路径中不带 #
修改文件 index.js
修改前端 < router-link> 标签
修改 index.js 中的路由信息
把参数在前端页面取出,修改 :Profile.vue
注意是 route 不是 router
打开页面
修改 Login.vue
修改 index.js
首页获取 :Main.vue
修改 index.js ,添加重定向信息
修改 Main.vue
打开页面
新建视图组件 :404.vue
<template>
<div>
<h1>404,页面走丢了!</h1>
</div>
</template>
<script>
export default {
name: "404"
}
</script>
<style scoped>
</style>
把 404 组件配置到路由信息中 :index.js
启动页面,随便访问一个不存在的路径
beforeRouteEnter
:在进入路由执行的钩子beforeRouteLeave
:在离开路由执行的钩子安装 Axios
cnpm install --save vue-axios
main.js引用 Axios
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
准备数据
只有我们的 static 目录下的文件是可以被访问到的,所以我们就把静态文件放入该目录下。
在 static 下新建文件夹 mock (测试数据),新建一个 data.json
{
"name": "呵呵",
"url": "https://blog.csdn.net/weixin_44449838",
"page": 123,
"isNonProfit": true,
"address": {
"street": "塔克拉玛干沙漠",
"city": "新疆",
"country": "中国"
},
"links": [
{
"name": "Google",
"url": "http://www.google.com"
},
{
"name": "Baidu",
"url": "http://www.baidu.com"
}
]
}
在 beforeRouteEnter 中进行异步请求 ,修改 Profile.vue
export default {
//第二种取值方式
// props:['id'],
name: "UserProfile",
//钩子函数 过滤器
beforeRouteEnter: (to, from, next) => {
//加载数据
console.log("进入路由之前")
next(vm => {
//进入路由之前执行getData方法
vm.getData()
});
},
beforeRouteLeave: (to, from, next) => {
console.log("离开路由之前")
next();
},
//axios
methods: {
getData: function () {
this.axios({
method: 'get',
url: 'http://localhost:8080/static/mock/data.json'
}).then(function (response) {
console.log(response)
})
}
}
}
访问 /user/profile 页面
控制台输出了获取到的数据
文章浏览阅读897次。声明bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变。造成原因:这一点就是由于在bindcolumnchange事件做的值改变处理造成。处理方法:如果需要确定后再改变值,请将bindcolumnchange事件中的处理操作放到bindchange事件中。效果图WXML..._小程序时间选择器颗粒度为分钟
文章浏览阅读582次,点赞11次,收藏11次。语音识别是将用户的语音转换为文本的过程,自然语言理解是理解用户输入的文本的意思,对话管理是决定系统如何回应用户的输入,自然语言生成是将计算机的回应转换为自然语言的过程。此外,对话系统还将更加注重自主学习和持续优化,通过机器学习和深度学习等技术,对话系统能够不断地从交互中学习,提高自身的智能水平,从而更好地适应用户的需求。其次,对话系统将更加注重个性化服务,通过用户画像和历史对话数据的分析,对话系统能够更好地理解用户的喜好和需求,从而提供更加个性化的服务和建议。定义对话系统的匹配模式和回应模式。_对话系统
文章浏览阅读1.6k次,点赞2次,收藏8次。安装驱动下载VISA设备的EPICS asyn驱动下载:EPICS-VISA-master.zip下载地址:https://github.com/ISISComputingGroup/EPICS-VISA_epics 编译支持keithley6482
文章浏览阅读2.8w次,点赞9次,收藏29次。最近碰到一个先执行this.$message提示内容,然后接着弹出dialog带遮罩层弹框。那么问题来了,message提示框会默认被dialog遮罩层挡住,现在就是要解决这个问题。由于都是弹框,问题肯定是出在z-index比重问题。由于用$message方式是写在js中而不是写在html中所以不是很好直接去改样式。不过好在message组件中提供了customClass 属性,我们可以利用这..._elmentui messagebox被dialog 压在下面
文章浏览阅读70次。 不少人在遇到运程阻滞、生意失败、事业不利,或婚姻受到挫折,或病魔缠身,甚至多灾多难时,都会来找我这个命相学者占卜,问问今后的前程如何?何时会行好运?如果占出的卦象是吉利,当然满心欢喜而去。若是占出的卦象仍然是不利的,则会愁容满面,灰心丧志。 为人占卜十余年,阅历了不少人事,也见过不少寒士上青云,但是却见过更多的英雄遭落魄。我深深觉得世人受到命运的紧紧束缚;一切名利得失、悲欢离合、种种境遇,...
文章浏览阅读315次。1 什么是延迟加载resultMap可以实现高级映射(使用association、collection实现一对一及一对多映射),association、collection具备延迟加载功能。需求:如果查询订单并且关联查询用户信息。如果先查询订单信息即可满足要求,当我们需要查询用户信息时再查询用户信息。把对用户信息的按需去查询就是延迟加载。 延迟加载:先从单表查询、需要时_mybatis延迟加载有什么好处
文章浏览阅读4.6k次,点赞8次,收藏54次。前面的博客中链接1、前言已经给出Hadoop3.1.2和yarn的完整部署(但还不是高可用),此篇博客将给出Hadoop的高可用部署,以及HBase高可用,为之后应用数据层开发提供底层的BigTable支持。前面的文章,我们已经深入讨论的ZooKeeper这个中间件的原理以及分布式锁的实现,事实上zookeeper使用最广泛的场景是“选举”主从角色,Hadoop以及Hbase的高可用(主从架构..._hadoop集群做了ha,如何在两个nn上部署hbase
文章浏览阅读827次,点赞15次,收藏22次。1.背景介绍自动编码器(Autoencoders)和生成对抗网络(Generative Adversarial Networks,GANs)都是深度学习领域的重要算法,它们在图像生成、数据压缩、特征学习等方面都有着广泛的应用。然而,这两种算法虽然在应用场景和表现效果上有很大的不同,但它们的核心思想和算法原理却是相通的。本文将从以下几个方面进行阐述:背景介绍核心概念与联系核心算法原理和...
文章浏览阅读1.5w次,点赞10次,收藏98次。介绍CHI协议中的Cache Stashing操作和DVM操作_cache stashing
文章浏览阅读2.1k次。vscode 作为一款网红 IDE,其丰富的插件让人叹为观止,通过 vscode 提供的插件机制,我们几乎可以自定义 vscode 的所有细节。事实上很多 vscode 的核心功能也是通过插件实现的。本文我们将从以下三个方面详述 vscode 的插件机制:插件的基本结构插件执行环境插件的运行流程阅读本文后续内容,需要对 vscode 的插件开发有基本的了解。关于 vscode 的插件开发..._vscode插件体系的基本概念
文章浏览阅读278次。原文地址:https://medium.com/@devfire/how-to-become-a-devops-engineer-in-six-months-or-less-part-4-package-47677ca2f058原文作者:Igor Kantor翻译君:CODING 戴维奥普斯前情提要在这个系列的第一篇文章中,我们详细地介绍了 DevOps 相关的文化和基础技能;在第二..._devops项目集成go语言编译打包部署环境
文章浏览阅读600次。UbuntuCore 18.04 修改国内镜像源(Ubuntu Ports)工作中在全志 H3 ARM 架构上移植使用了 UbuntuCore 18.04 系统,其默认镜像源为国外源,更新缓慢。故修改使用国内中国科学技术大学的镜像源,具体修改方法如下:一、修改镜像源文件http://ports.ubuntu.com/ 为 http://mirrors.ustc.edu.cn/ubuntu-port..._ubuntu18 ports 国内源