前5天: 都在学习Vue基本的语法和概念;打包工具 Webpack , Gulp 后5天: 以项目驱动教学;
企业为了提高开发效率:在企业中,时间就是效率,效率就是金钱;
企业中,使用框架,能够提高开发的效率;
提高开发效率的发展历程:原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js(能够帮助我们减少不必要的DOM操作;提高渲染效率;双向数据绑定的概念【通过框架提供的指令,我们前端程序员只需要关心数据的业务逻辑,不再关心DOM是如何渲染的了】)
在Vue中,一个核心的概念,就是让用户不再操作DOM元素,解放了用户的双手,让程序员可以更多的时间去关注业务逻辑;
增强自己就业时候的竞争力
人无我有,人有我优
你平时不忙的时候,都在干嘛?
框架:是一套完整的解决方案;对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目。
node 中的 express;
库(插件):提供某一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易切换到其它库实现需求。
基本的代码结构
和插值表达式
、v-cloak
v-text
和v-html
v-bind
的三种用法v-bind
:
:title="btnTitle + ', 这是追加的内容'"
v-on
和跑马灯效果
{{info}}
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
info: '猥琐发育,别浪~!',
intervalId: null
},
methods: {
go() {
// 如果当前有定时器在运行,则直接return
if (this.intervalId != null) {
return;
}
// 开始定时器
this.intervalId = setInterval(() => {
this.info = this.info.substring(1) + this.info.substring(0, 1);
}, 500);
},
stop() {
clearInterval(this.intervalId);
}
}
});
v-on的缩写
和事件修饰符
v-model
和双向数据绑定
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
n1: 0,
n2: 0,
result: 0,
opt: '0'
},
methods: {
getResult() {
switch (this.opt) {
case '0':
this.result = parseInt(this.n1) + parseInt(this.n2);
break;
case '1':
this.result = parseInt(this.n1) - parseInt(this.n2);
break;
case '2':
this.result = parseInt(this.n1) * parseInt(this.n2);
break;
case '3':
this.result = parseInt(this.n1) / parseInt(this.n2);
break;
}
}
}
});
这是一个邪恶的H1
这是一个邪恶的H1
这是一个邪恶的H1
这是一个邪恶的H1
:style
的形式,书写样式对象 这是一个善良的H1
data
中,并直接引用到 :style
中 data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
这是一个善良的H1
:style
中通过数组,引用多个 data
上的样式对象 data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
h1StyleObj2: { fontStyle: 'italic' }
}
这是一个善良的H1
v-for
和key
属性
- 索引:{{i}} --- 姓名:{{item.name}} --- 年龄:{{item.age}}
{{val}} --- {{key}} --- {{i}}
这是第 {{i}} 个P标签
2.2.0+ 的版本里,当在组件中使用 v-for 时,key 现在是必须的。
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用 “就地复用” 策略。如果数据项的顺序被改变,Vue将不是移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。
v-if
和v-show
一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好。
filterBy - 指令
{{item.id}}
{{item.name}}
{{item.ctime}}
删除
searchName
属性:
输入筛选名称:
v-for
指令循环每一行数据的时候,不再直接 item in list
,而是 in
一个 过滤的methods 方法,同时,把过滤条件searchName
传递进去:
{{item.id}}
{{item.name}}
{{item.ctime}}
删除
search
过滤方法中,使用 数组的 filter
方法进行过滤:
search(name) {
return this.list.filter(x => {
return x.name.indexOf(name) != -1;
});
}
vue-devtools
的安装步骤和使用Vue.js devtools - 安装方式 - 推荐
概念:Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示;
{{item.ctime | dataFormat('yyyy-mm-dd')}}
filters
定义方式:
filters: { // 私有局部过滤器,只能在 当前 VM 对象所控制的 View 区域进行使用
dataFormat(input, pattern = "") { // 在参数列表中 通过 pattern="" 来指定形参默认值,防止报错
var dt = new Date(input);
// 获取年月日
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
// 如果 传递进来的字符串类型,转为小写之后,等于 yyyy-mm-dd,那么就返回 年-月-日
// 否则,就返回 年-月-日 时:分:秒
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`;
} else {
// 获取时分秒
var hh = dt.getHours().toString().padStart(2, '0');
var mm = dt.getMinutes().toString().padStart(2, '0');
var ss = dt.getSeconds().toString().padStart(2, '0');
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
}
}
使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString=’’) 或 String.prototype.padEnd(maxLength, fillString=’’)来填充字符串;
// 定义一个全局过滤器
Vue.filter('dataFormat', function (input, pattern = '') {
var dt = new Date(input);
// 获取年月日
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
// 如果 传递进来的字符串类型,转为小写之后,等于 yyyy-mm-dd,那么就返回 年-月-日
// 否则,就返回 年-月-日 时:分:秒
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`;
} else {
// 获取时分秒
var hh = dt.getHours().toString().padStart(2, '0');
var mm = dt.getMinutes().toString().padStart(2, '0');
var ss = dt.getSeconds().toString().padStart(2, '0');
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
});
注意:当有局部和全局两个名称相同的过滤器时候,会以就近原则进行调用,即:局部过滤器优先于全局过滤器被调用!
Vue.directive('on').keyCodes.f2 = 113;
Vue.config.keyCodes.名称 = 按键值
来自定义案件修饰符的别名:
Vue.config.keyCodes.f2 = 113;
// 自定义全局指令 v-focus,为绑定的元素自动获取焦点:
Vue.directive('focus', {
inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用
el.focus();
}
});
// 自定义局部指令 v-color 和 v-font-weight,为绑定的元素设置指定的字体颜色 和 字体粗细:
directives: {
color: { // 为元素设置指定的字体颜色
bind(el, binding) {
el.style.color = binding.value;
}
},
'font-weight': function (el, binding2) { // 自定义指令的简写形式,等同于定义了 bind 和 update 两个钩子函数
el.style.fontWeight = binding2.value;
}
}
Vue.elementDirective('red-color', {
bind: function () {
this.el.style.color = 'red';
}
});
使用方式:
1232
filterBy - 指令
{{item.id}}
{{item.name}}
{{item.ctime}}
删除
searchName
属性:
输入筛选名称:
v-for
指令循环每一行数据的时候,不再直接 item in list
,而是 in
一个 过滤的methods 方法,同时,把过滤条件searchName
传递进去:
{{item.id}}
{{item.name}}
{{item.ctime}}
删除
search
过滤方法中,使用 数组的 filter
方法进行过滤:search(name) {
return this.list.filter(x => {
return x.name.indexOf(name) != -1;
});
}
vue-devtools
的安装步骤和使用Vue.js devtools - 安装方式 - 推荐
概念:Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示;
{{item.ctime | dataFormat('yyyy-mm-dd')}}
filters
定义方式:filters: { // 私有局部过滤器,只能在 当前 VM 对象所控制的 View 区域进行使用
dataFormat(input, pattern = "") { // 在参数列表中 通过 pattern="" 来指定形参默认值,防止报错
var dt = new Date(input);
// 获取年月日
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
// 如果 传递进来的字符串类型,转为小写之后,等于 yyyy-mm-dd,那么就返回 年-月-日
// 否则,就返回 年-月-日 时:分:秒
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`;
} else {
// 获取时分秒
var hh = dt.getHours().toString().padStart(2, '0');
var mm = dt.getMinutes().toString().padStart(2, '0');
var ss = dt.getSeconds().toString().padStart(2, '0');
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
}
}
使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString=’’) 或 String.prototype.padEnd(maxLength, fillString=’’)来填充字符串;
// 定义一个全局过滤器
Vue.filter('dataFormat', function (input, pattern = '') {
var dt = new Date(input);
// 获取年月日
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
// 如果 传递进来的字符串类型,转为小写之后,等于 yyyy-mm-dd,那么就返回 年-月-日
// 否则,就返回 年-月-日 时:分:秒
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`;
} else {
// 获取时分秒
var hh = dt.getHours().toString().padStart(2, '0');
var mm = dt.getMinutes().toString().padStart(2, '0');
var ss = dt.getSeconds().toString().padStart(2, '0');
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
});
注意:当有局部和全局两个名称相同的过滤器时候,会以就近原则进行调用,即:局部过滤器优先于全局过滤器被调用!
Vue.directive('on').keyCodes.f2 = 113;
Vue.config.keyCodes.名称 = 按键值
来自定义案件修饰符的别名:Vue.config.keyCodes.f2 = 113;
// 自定义全局指令 v-focus,为绑定的元素自动获取焦点:
Vue.directive('focus', {
inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用
el.focus();
}
});
// 自定义局部指令 v-color 和 v-font-weight,为绑定的元素设置指定的字体颜色 和 字体粗细:
directives: {
color: { // 为元素设置指定的字体颜色
bind(el, binding) {
el.style.color = binding.value;
}
},
'font-weight': function (el, binding2) { // 自定义指令的简写形式,等同于定义了 bind 和 update 两个钩子函数
el.style.fontWeight = binding2.value;
}
}
Vue.elementDirective('red-color', {
bind: function () {
this.el.style.color = 'red';
}
});
使用方式:
1232
除了 vue-resource 之外,还可以使用 axios
的第三方包实现实现数据的请求
const http = require('http');
// 导入解析 URL 地址的核心模块
const urlModule = require('url');
const server = http.createServer();
// 监听 服务器的 request 请求事件,处理每个请求
server.on('request', (req, res) => {
const url = req.url;
// 解析客户端请求的URL地址
var info = urlModule.parse(url, true);
// 如果请求的 URL 地址是 /getjsonp ,则表示要获取JSONP类型的数据
if (info.pathname === '/getjsonp') {
// 获取客户端指定的回调函数的名称
var cbName = info.query.callback;
// 手动拼接要返回给客户端的数据对象
var data = {
name: 'zs',
age: 22,
gender: '男',
hobby: ['吃饭', '睡觉', '运动']
}
// 拼接出一个方法的调用,在调用这个方法的时候,把要发送给客户端的数据,序列化为字符串,作为参数传递给这个调用的方法:
var result = `${cbName}(${JSON.stringify(data)})`;
// 将拼接好的方法的调用,返回给客户端去解析执行
res.end(result);
} else {
res.end('404');
}
});
server.listen(3000, () => {
console.log('server running at http://127.0.0.1:3000');
});
script
标签,引入 vue-resource
的脚本文件;Vue
的脚本文件,再引用 vue-resource
的脚本文件;getInfo() { // get 方式获取数据
this.$http.get('http://127.0.0.1:8899/api/getlunbo').then(res => {
console.log(res.body);
})
}
postInfo() {
var url = 'http://127.0.0.1:8899/api/post';
// post 方法接收三个参数:
// 参数1: 要请求的URL地址
// 参数2: 要发送的数据对象
// 参数3: 指定post提交的编码类型为 application/x-www-form-urlencoded
this.$http.post(url, { name: 'zs' }, { emulateJSON: true }).then(res => {
console.log(res.body);
});
}
jsonpInfo() { // JSONP形式从服务器获取数据
var url = 'http://127.0.0.1:8899/api/jsonp';
this.$http.jsonp(url).then(res => {
console.log(res.body);
});
}
PHPStudy
;Navicat
这个数据库可视化工具,并激活;Navicat
工具,新建空白数据库,名为 dtcmsdb4
;右键
-> 运行SQL文件
,选择并执行 dtcmsdb4.sql
这个数据库脚本文件;如果执行不报错,则数据库导入完成;vuecms3_nodejsapi
内部,执行 npm i
安装所有的依赖项;nodemon
, 没有安装,则运行 npm i nodemon -g
进行全局安装,安装完毕后,进入到 vuecms3_nodejsapi
目录 -> src
目录 -> 双击运行 start.bat
app.js
中第 14行
中数据库连接配置字符串是否正确;PHPStudy 中默认的 用户名是root,默认的密码也是root为什么要有动画:动画能够提高用户的体验,帮助用户更好的理解页面中的功能;
动画哦
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
isshow: false
},
methods: {
myAnimate() {
this.isshow = !this.isshow;
}
}
});
/* 定义进入和离开时候的过渡状态 */
.fade-enter-active,
.fade-leave-active {
transition: all 0.2s ease;
position: absolute;
}
/* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
.fade-enter,
.fade-leave-to {
opacity: 0;
transform: translateX(100px);
}
动画哦
OK
methods: {
beforeEnter(el) { // 动画进入之前的回调
el.style.transform = 'translateX(500px)';
},
enter(el, done) { // 动画进入完成时候的回调
el.offsetWidth;
el.style.transform = 'translateX(0px)';
done();
},
afterEnter(el) { // 动画进入完成之后的回调
this.isshow = !this.isshow;
}
}
.show{
transition: all 0.4s ease;
}
{{item}}
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
txt: '',
list: [1, 2, 3, 4]
},
methods: {
add() {
this.list.push(this.txt);
this.txt = '';
}
}
});
组件还有一个特殊之处。不仅可以进入和离开动画,还可以改变定位。要使用这个新功能只需了解新增的 v-move
特性,它会在元素的改变定位的过程中应用。
v-move
和 v-leave-active
结合使用,能够让列表的过渡更加平缓柔和:.v-move{
transition: all 0.8s ease;
}
.v-leave-active{
position: absolute;
}
什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可;
组件化和模块化的不同:
var login = Vue.extend({
template: '登录
'
});
Vue.component('login', login);
Vue.component('register', {
template: '注册
'
});
同时,需要使用 Vue.component 来定义组件:
Vue.component('account', {
template: '#tmpl'
});
注意: 组件中的DOM结构,有且只能有唯一的根元素(Root Element)来进行包裹!
data
需要被定义为一个方法,例如:Vue.component('account', {
template: '#tmpl',
data() {
return {
msg: '大家好!'
}
},
methods:{
login(){
alert('点击了登录按钮');
}
}
});
data
属性中的值,需要使用this
来访问;components
属性定义局部子组件
flag
标识符结合v-if
和v-else
切换组件
:is
属性来切换不同的子组件,并添加切换动画 // 登录组件
const login = Vue.extend({
template: `
登录组件
`
});
Vue.component('login', login);
// 注册组件
const register = Vue.extend({
template: `
注册组件
`
});
Vue.component('register', register);
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: { comName: 'login' },
methods: {}
});
component
标签,来引用组件,并通过:is
属性来指定要加载的组件:
props
属性来定义父组件传递过来的数据
v-bind
或简化指令,将数据传递到子组件中:
getMsg
是父组件中methods
中定义的方法名称,func
是子组件调用传递过来方法时候的方法名称
this.$emit('方法名', 要传递的数据)
方式,来调用父组件中的方法,同时把数据传递给父组件使用
目标:主要练习父子组件之间传值
this.$refs
来获取元素和组件
这是一个大大的H1
登录
注册
Vue.extend
创建组件 // 4.1 使用 Vue.extend 来创建登录组件
var login = Vue.extend({
template: '登录组件
'
});
// 4.2 使用 Vue.extend 来创建注册组件
var register = Vue.extend({
template: '注册组件
'
});
// 5. 创建一个路由 router 实例,通过 routers 属性来定义路由匹配规则
var router = new VueRouter({
routes: [
{ path: '/login', component: login },
{ path: '/register', component: register }
]
});
// 6. 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
router: router // 使用 router 属性来使用路由规则
});
{ path: '/register/:id', component: register }
this.$route.params
来获取路由中的参数:var register = Vue.extend({
template: '注册组件 --- {{this.$route.params.id}}
'
});
children
属性实现路由嵌套
Account
watch
属性的使用考虑一个问题:想要实现 名
和 姓
两个文本框的内容改变,则全名的文本框中的值也跟着改变;(用以前的知识如何实现???)
data
中属性的改变:
+
=
{{fullName}}
登录
注册
computed
计算属性的使用getter
的计算属性:
+
=
{{fullName}}
getter
和setter
的计算属性:
{{fullName}}
watch
、computed
和methods
之间的对比computed
属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。主要当作属性来使用;methods
方法表示一个具体的操作,主要书写业务逻辑;watch
一个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可以看作是computed
和methods
的结合体;nrm
的安装使用作用:提供了一些最常用的NPM包镜像地址,能够让我们快速的切换安装包时候的服务器地址;
什么是镜像:原来包刚一开始是只存在于国外的NPM服务器,但是由于网络原因,经常访问不到,这时候,我们可以在国内,创建一个和官网完全一样的NPM服务器,只不过,数据都是从人家那里拿过来的,除此之外,使用方式完全一样;
npm i nrm -g
全局安装nrm
包;nrm ls
查看当前所有可用的镜像源地址以及当前所使用的镜像源地址;nrm use npm
或nrm use taobao
切换不同的镜像源地址;props
属性来定义父组件传递过来的数据
v-bind
或简化指令,将数据传递到子组件中:
getMsg
是父组件中methods
中定义的方法名称,func
是子组件调用传递过来方法时候的方法名称
this.$emit('方法名', 要传递的数据)
方式,来调用父组件中的方法,同时把数据传递给父组件使用
目标:主要练习父子组件之间传值
this.$refs
来获取元素和组件
这是一个大大的H1
登录
注册
Vue.extend
创建组件 // 4.1 使用 Vue.extend 来创建登录组件
var login = Vue.extend({
template: '登录组件
'
});
// 4.2 使用 Vue.extend 来创建注册组件
var register = Vue.extend({
template: '注册组件
'
});
// 5. 创建一个路由 router 实例,通过 routers 属性来定义路由匹配规则
var router = new VueRouter({
routes: [
{ path: '/login', component: login },
{ path: '/register', component: register }
]
});
// 6. 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
router: router // 使用 router 属性来使用路由规则
});
{ path: '/register/:id', component: register }
this.$route.params
来获取路由中的参数:var register = Vue.extend({
template: '注册组件 --- {{this.$route.params.id}}
'
});
children
属性实现路由嵌套
Account
watch
属性的使用考虑一个问题:想要实现 名
和 姓
两个文本框的内容改变,则全名的文本框中的值也跟着改变;(用以前的知识如何实现???)
data
中属性的改变:
+
=
{{fullName}}
登录
注册
computed
计算属性的使用getter
的计算属性:
+
=
{{fullName}}
getter
和setter
的计算属性:
{{fullName}}
watch
、computed
和methods
之间的对比computed
属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。主要当作属性来使用;methods
方法表示一个具体的操作,主要书写业务逻辑;watch
一个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可以看作是computed
和methods
的结合体;nrm
的安装使用作用:提供了一些最常用的NPM包镜像地址,能够让我们快速的切换安装包时候的服务器地址;
什么是镜像:原来包刚一开始是只存在于国外的NPM服务器,但是由于网络原因,经常访问不到,这时候,我们可以在国内,创建一个和官网完全一样的NPM服务器,只不过,数据都是从人家那里拿过来的,除此之外,使用方式完全一样;
npm i nrm -g
全局安装nrm
包;nrm ls
查看当前所有可用的镜像源地址以及当前所使用的镜像源地址;nrm use npm
或nrm use taobao
切换不同的镜像源地址;注意: nrm 只是单纯的提供了几个常用的 下载包的 URL地址,并能够让我们在 这几个 地址之间,很方便的进行切换,但是,我们每次装包的时候,使用的 装包工具,都是 npm
webpack 是前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具;
npm i webpack -g
全局安装webpack,这样就能在全局使用webpack的命令npm i webpack --save-dev
安装到项目依赖中npm init
初始化项目,使用npm管理项目中的依赖包cnpm i jquery --save
安装jquery类库main.js
并书写各行变色的代码逻辑: // 导入jquery类库
import $ from 'jquery'
// 设置偶数行背景色,索引从0开始,0是偶数
$('#list li:even').css('backgroundColor','lightblue');
// 设置奇数行背景色
$('#list li:odd').css('backgroundColor','pink');
main.js
会报错,因为浏览器不认识import
这种高级的JS语法,需要使用webpack进行处理,webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法;webpack 入口文件路径 输出文件路径
对main.js
进行处理:webpack src/js/main.js dist/bundle.js
webpack.config.js
webpack.config.js
中配置这两个路径: // 导入处理路径的模块
var path = require('path');
// 导出一个配置对象,将来webpack在启动的时候,会默认来查找webpack.config.js,并读取这个文件中导出的配置对象,来进行打包处理
module.exports = {
entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
output: { // 配置输出选项
path: path.resolve(__dirname, 'dist'), // 配置输出的路径
filename: 'bundle.js' // 配置输出的文件名
}
}
webpack-dev-server
来实现代码实时打包编译,当修改代码之后,会自动进行打包构建。cnpm i webpack-dev-server --save-dev
安装到开发依赖webpack-dev-server
来进行打包,发现报错,此时需要借助于package.json
文件中的指令,来进行运行webpack-dev-server
命令,在scripts
节点下新增"dev": "webpack-dev-server"
指令,发现可以进行实时打包,但是dist目录下并没有生成bundle.js
文件,这是因为webpack-dev-server
将打包好的文件放在了内存中bundle.js
放在内存中的好处是:由于需要实时打包编译,所以放在内存中速度会非常快http://localhost:8080/
网站,发现是一个文件夹的面板,需要点击到src目录下,才能打开我们的index首页,此时引用不到bundle.js文件,需要修改index.html中script的src属性为:
http://localhost:8080/
的时候直接访问到index首页,可以使用--contentBase src
指令来修改dev指令,指定启动的根目录: "dev": "webpack-dev-server --contentBase src"
同时修改index页面中script的src属性为
html-webpack-plugin
插件配置启动页面由于使用--contentBase
指令的过程比较繁琐,需要指定启动的目录,同时还需要修改index.html中script标签的src属性,所以推荐大家使用html-webpack-plugin
插件配置启动页面.
cnpm i html-webpack-plugin --save-dev
安装到开发依赖webpack.config.js
配置文件如下: // 导入处理路径的模块
var path = require('path');
// 导入自动生成HTMl文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
output: { // 配置输出选项
path: path.resolve(__dirname, 'dist'), // 配置输出的路径
filename: 'bundle.js' // 配置输出的文件名
},
plugins:[ // 添加plugins节点配置插件
new htmlWebpackPlugin({
template:path.resolve(__dirname, 'src/index.html'),//模板路径
filename:'index.html'//自动生成的HTML文件的名称
})
]
}
package.json
中script
节点中的dev指令如下:"dev": "webpack-dev-server"
html-webpack-plugin
插件会自动把bundle.js注入到index.html页面中!注意:热更新在JS中表现的不明显,可以从一会儿要讲到的CSS身上进行介绍说明!
package.json
的script节点如下,其中--open
表示自动打开浏览器,--port 4321
表示打开的端口号为4321,--hot
表示启用浏览器热更新:"dev": "webpack-dev-server --hot --port 4321 --open"
webpack.config.js
文件,新增devServer
节点如下:devServer:{
hot:true,
open:true,
port:4321
}
webpack
模块:var webpack = require('webpack');
plugins
节点下新增:new webpack.HotModuleReplacementPlugin()
cnpm i style-loader css-loader --save-dev
webpack.config.js
这个配置文件:module: { // 用来配置第三方loader模块的
rules: [ // 文件的匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则
]
}
use
表示使用哪些模块来处理test
所匹配到的文件;use
中相关loader模块的调用顺序是从后向前调用的;cnpm i less-loader less -D
webpack.config.js
这个配置文件:{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
cnpm i sass-loader node-sass --save-dev
webpack.config.js
中添加处理sass文件的loader模块:{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
cnpm i url-loader file-loader --save-dev
webpack.config.js
中添加处理url路径的loader模块:{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }
limit
指定进行base64编码的图片大小;只有小于指定字节(byte)的图片才会进行base64编码:{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },
想要原来的名字输出 添加 &name=[name].[ext]
就可以了 为了避免名称重复可以在前面加上[hash]-
{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960&name=[hash]-[name].[ext]' },
<span class="glyphicon glyphicon-heart">span>
import './../node_modules/bootstrap/dist/css/bootstrap.css'
{
test: /\.(ttf|svg|eot|woff|woff2)$/,
use: 'url-loader'
}
cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev
安装babel的相关loader包cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev
安装babel转换的语法webpack.config.js
中添加相关loader模块,其中需要注意的是,一定要把node_modules
文件夹添加到排除项:{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
.babelrc
文件,并修改这个配置文件如下:{
"presets":["es2015", "stage-0"],
"plugins":["transform-runtime"]
}
babel-preset-es2015
可以更新为babel-preset-env
,它包含了所有的ES相关的语法;babel-preset-env:你需要的唯一Babel插件
Runtime transform 运行时编译es6
有时候使用npm i node-sass -D
装不上,这时候,就必须使用 cnpm i node-sass -D
运行cnpm i vue -S
将vue安装为运行依赖;
可在\node_modules\vue\package.json
中修改main
的指向
,修改为
“main”: “dist/vue.js”,`在main.js
中导入方式使用指向导入import Vue from '../node_modules/vue/dist/vue.js'
在webpack.config.js
中修改配置
module.exports = {
resolve: {
alias: {
"vue$": "vue/dist/vue.js"
}
}
}
运行cnpm i vue -S
将vue安装为运行依赖;
运行cnpm i vue-loader vue-template-compiler -D
将解析转换vue的包安装为开发依赖;
运行cnpm i style-loader css-loader -D
将解析转换CSS的包安装为开发依赖,因为.vue文件中会写CSS样式;
在webpack.config.js
中,添加如下module
规则:
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.vue$/, use: 'vue-loader' }
]
}
App.js
组件页面:
这是APP组件 - {{msg}}
我是h3
main.js
入口文件: // 导入 Vue 组件
import Vue from 'vue'
// 导入 App组件
import App from './components/App.vue'
// 创建一个 Vue 实例,使用 render 函数,渲染指定的组件
var vm = new Vue({
el: '#app',
render: c => c(App)
});
webpack.config.js
中添加resolve
属性:resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
export default
和 export
导出模块中的成员; 对应ES5中的 module.exports
和 export
export default
向外暴露的成员, 可以使用任意的变量来接受,在一个模块中, export default
只允许向外暴露一次export
向外暴露的成员, 只能使用 {}
的形式来接受, 这种形式叫做 按需导出import ** from **
和 import '路径'
还有 import {a, b} from '模块标识'
导入其他模块(a, b)=> { return a-b; }
vue-router官网
import VueRouter from 'vue-router'
Vue.use(VueRouter);
import login from './components/account/login.vue'
import register from './components/account/register.vue'
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: login },
{ path: '/register', component: register }
]
});
var vm = new Vue({
el: '#app',
// render: c => { return c(App) }
render(c) {
return c(App);
},
router // 将路由对象,挂载到 Vue 实例上
});
router-link
和router-view
: 登录
注册
Github 仓储地址
Mint-UI官方文档
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
primary
注意: MUI 不同于 Mint-UI
, MUI
只是开发出来的一套好用的代码片段, 里面提供了配套的样式, 配套的 HTML
代码段, 类似于 Bootstrap
; 而Mint-UI
是真正的组件库, 是使用Vue 技术封装出来的成套组件, 可以无缝和 VUE 项目进行集成开发;
因此, 从体验上来说, Mint-UI 体验更好, 因为这是别人帮我们开发好的现成的 Vue 组件;
从体验来说, MUI 和 Bootstrap 类似;
理论上, 任何项目都可以使用 MUI 或 Bootstrap , 但是, Mint-UI 只适用于 Vue 项目;
注意: MUI 并不能使用 npm 去下载, 需要自己手动从 github 上下载现成的包, 自己解压出来, 然后手动拷贝到项目中使用;
官网首页
文档地址
import '../lib/mui/css/mui.min.css'
webpack.config.js
中添加新的loader规则:{ test: /\.(png|jpg|gif|ttf)$/, use: 'url-loader' }
git config --global user.name "用户名"
和 git config --global user.email ***@**.com
来全局配置提交时用户的名称和邮箱git init
在本地初始化项目touch README.md
和 touch .gitignore
来创建项目的说明文件和忽略文件;git add .
将所有文件托管到 git 中git commit -m "init project"
将项目进行本地提交git remote add origin 仓储地址
将本地项目和远程仓储连接,并使用origin最为远程仓储的别名git push -u origin master
将本地代码push到仓储中Mint-UI
的 Header
组件;mui
的 tabbar
;icons-extra
中的 mui-icon-extra mui-icon-extra-cart
,同时,应该把其依赖的字体图标文件 mui-icons-extra.ttf
,复制到 fonts
目录下!router-link
来实现单页面的切换; .router-link-active{
color:#007aff !important;
}
new VueRouter
的时候,通过 linkActiveClass
来指定高亮的类: // 创建路由对象
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/home' }
],
linkActiveClass: 'mui-active'
});
router-link
形式,并指定每个连接的 to
属性; // 导入需要展示的组件
import Home from './components/home/home.vue'
import Member from './components/member/member.vue'
import Shopcar from './components/shopcar/shopcar.vue'
import Search from './components/search/search.vue'
// 创建路由对象
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/home' },
{ path: '/home', component: Home },
{ path: '/member', component: Member },
{ path: '/shopcar', component: Shopcar },
{ path: '/search', component: Search }
],
linkActiveClass: 'mui-active'
});
lunbo: [
'http://www.itcast.cn/images/slidead/BEIJING/2017440109442800.jpg',
'http://www.itcast.cn/images/slidead/BEIJING/2017511009514700.jpg',
'http://www.itcast.cn/images/slidead/BEIJING/2017421414422600.jpg'
]
.vue
组件中使用vue-resource
获取数据cnpm i vue-resource -S
安装模块import VueResource from 'vue-resource'
Vue.use(VueResource);
Promise 是一个构造函数, 既然是构造函数, 那么, 我们就可以 new Promise() 得到一个Promise 的实例;
在 Promise 上, 有两个函数, 分别叫做 resolve( 成功之后的回调函数 ) 和 ( 失败之后的回调函数 )
在 Promise 构造函数的 Prototype 属性上, 有一个 .then() 方法, 也就是说, 只要是 Promise 构造函数创建的实例, 都可以访问到 .then() 方法
Promise 表示一个 异步操作 ; 每当我们 new 一个 Promise 的实例, 这个实例, 就表示一个具体的异步操作;
既然 Promise 创建的实例, 是一个异步操作, 那么, 这个 异步操作的结果,只能有两种状态:
我们可以再 new出来的 Promise 实例上, 调用 .then() 方法, [预先] 为这个 Promise 异步操作 , 指定 成功( resolve ) 和 失败 ( reject ) 回调函数;
每当 new 一个 Promise 实例的时候, 就会立即执行这个 异步操作中的代码, 也就是说 new 的时候, 除了能够得到一个 promise 实例之外, 还会立即调用 我们为 Promise 构造函数传递的那个 function , 执行这个 function 中的 异步操作代码; ( 函数只有在调用的时候才会执行, 为此 我们可以 把他写入一个函数方法中去)
const fs = require('fs')
function getFileByPath (fpath) {// 1
var promise = new Promise(function(resolve, reject){// 3
fs.readFile(fpath,'utf-8',(err, dataStr) => {// 6
if(err) return reject (err)
resolve(dataStr)
})
})
return promise// 4
}
var p = getFileByPath('./1.txt')// 2
p.then(function(data){//5
console.log(data)
},function(err){
console.log(err.massage)
})
catch 的作用: 如果前面有任何的 Promise 执行失败, 则立即终止所有 promise 的执行, 并马上进入 catch 去处理 Promise 中 抛出的异常
const fs = require('fs')
function getFileByPath(fpath) {
return new Promise(function (resolve, reject) {
fs.readFile(fpath, 'utf-8', (err, dataStr) => {
if (err) return reject(err)
resolve(dataStr)
})
})
}
getFileByPath('./1.txt')
.then(function (data) {
console.log(data)
return getFileByPath('./2.txt')
})
.then(function (data) {
console.log(data)
return getFileByPath('./3.txt')
})
.then(
function (data) {
console.log(data);
}
)
.catch(
function (err) {
console.log(err.message);
}
)
tab-top-webview-main
完成分类滑动栏router-link
身上的类名 mui-tab-item
存在兼容性问题,导致tab栏失效,可以把mui-tab-item
改名为mui-tab-item1
,并复制相关的类样式,来解决这个问题; .mui-bar-tab .mui-tab-item1.mui-active {
color: #007aff;
}
.mui-bar-tab .mui-tab-item1 {
display: table-cell;
overflow: hidden;
width: 1%;
height: 50px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
color: #929292;
}
.mui-bar-tab .mui-tab-item1 .mui-icon {
top: 3px;
width: 24px;
height: 24px;
padding-top: 0;
padding-bottom: 0;
}
.mui-bar-tab .mui-tab-item1 .mui-icon~.mui-tab-label {
font-size: 11px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
tab-top-webview-main
组件第一次显示到页面中的时候,无法被滑动的解决方案: import mui from '../../../lib/mui/js/mui.min.js'
mounted
事件钩子中,注册 mui 的滚动事件: mounted() {
// 需要在组件的 mounted 事件钩子中,注册 mui 的 scroll 滚动事件
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
});
}
Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
解决方法,可以加上 * { touch-action: none; } 这句样式去掉。
原因:(是chrome为了提高页面的滑动流畅度而新折腾出来的一个东西) http://www.cnblogs.com/pearl07/p/6589114.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action
babel-plugin-transform-remove-strict-mode
一个Vue集成PhotoSwipe图片预览插件
tab-top-webview-main
完成分类滑动栏router-link
身上的类名 mui-tab-item
存在兼容性问题,导致tab栏失效,可以把mui-tab-item
改名为mui-tab-item1
,并复制相关的类样式,来解决这个问题; .mui-bar-tab .mui-tab-item1.mui-active {
color: #007aff;
}
.mui-bar-tab .mui-tab-item1 {
display: table-cell;
overflow: hidden;
width: 1%;
height: 50px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
color: #929292;
}
.mui-bar-tab .mui-tab-item1 .mui-icon {
top: 3px;
width: 24px;
height: 24px;
padding-top: 0;
padding-bottom: 0;
}
.mui-bar-tab .mui-tab-item1 .mui-icon~.mui-tab-label {
font-size: 11px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
tab-top-webview-main
组件第一次显示到页面中的时候,无法被滑动的解决方案: import mui from '../../../lib/mui/js/mui.min.js'
mounted
事件钩子中,注册 mui 的滚动事件: mounted() {
// 需要在组件的 mounted 事件钩子中,注册 mui 的 scroll 滚动事件
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
});
}
Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
解决方法,可以加上* { touch-action: none; } 这句样式去掉。
原因:(是chrome为了提高页面的滑动流畅度而新折腾出来的一个东西) http://www.cnblogs.com/pearl07/p/6589114.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action
babel-plugin-transform-remove-strict-mode
一个Vue集成PhotoSwipe图片预览插件
除了使用
创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。
#router.push(location, onComplete?, onAbort?)
注意: 一定要区分 this.$route
和 this.$router
这两个对象
Vuex 是为了保存组件之间共享数据而诞生的, 如果组件之间 又要共享的数据, 可以直接挂载到 Vuex 中, 而不必通过 父子组件之间传值了, 如果 组件的数据不需要 共享, 此时, 这些不需要共享的私有数据, 没有必要放到 vuex 中;
NPM
npm install vuex --save
安装 Vuex 之后,让我们来创建一个 store
// 如果在模块化构建系统中,请确保在开头调用了 Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
现在,你可以通过 store.state
来获取状态对象,以及通过 store.commit
方法触发状态变更:
store.commit('increment')
console.log(store.state.count) // -> 1
getters 中的方法, 和组件中的过滤器比较类似, 因为, 过滤器和 getters 否没有修改原数据, 都是把原数据做了一层包装, 提供给了 调用者;
其次, getters 也和 computed 比较像, 只要 state 中的数据发生变化了, 那么, 如果getters 正好也引用了这个数据, 那么 就会立即触发 getters 的重新求值;
总结:
要让apache支持gzip功能,要用到deflate_Module和headers_Module。打开apache的配置文件httpd.conf,大约在105行左右,找到以下两行内容:(这两行不是连续在一起的)
#LoadModule deflate_module modules/mod_deflate.so
#LoadModule headers_module modules/mod_headers.so
然后将其前面的“#”注释删掉,表示开启gzip压缩功能。开启以后还需要进行相关配置。在httpd.conf文件的最后添加以下内容即可:
#必须的,就像一个开关一样,告诉apache对传输到浏览器的内容进行压缩
SetOutputFilter DEFLATE
DeflateCompressionLevel 9
最少需要加上以上内容,才可以生gzip功能生效。由于没有做其它的额外配置,所以其它相关的配置均使用Apache的默认设置。这里说一下参数“DeflateCompressionLevel”,它表示压缩级别,值从1到9,值越大表示压缩的越厉害。
注意:由于默认使用的美国的服务器进行中间转接,所以访问速度炒鸡慢,访问时可启用FQ软件,提高网页打开速度!