vue搭配webpack在Node.js环境中运行
vue基本结构
var vm = new Vue({
el: '#app',
data: {
//页面使用要使用到的数据
msg: '你好'
},
methods: {
//封装函数
},
watch: {
‘msg’: function(newValue,oldValue){
// 监听msg值的变化
}
},
computed: {
//计算属性,当作普通data数据使用
count(){
return 0
}
},
filters: {
//过滤器
},
directives: {
//指令
},
components: {
//自定义实例内部私有组件
},
beforeCreate: function() {
//【创建】起始生命周期，还没有data和methods
},
created: function() {
//【创建】实例已经在内存中创建
},
beforeMount: function() {
//【创建】完成了模板的编译
},
mounted: function() {
//【创建】已经将编译好的模板，挂载到了页面制定的容器中显示
},
beforeUpdate: function() {
//【运行】状态更新之前执行此函数,还没有开始渲染DOM节点
},
update: function() {
//【运行】更新完DOM节点后调用此函数
},
beforeDestroy: function() {
//【销毁】实例销毁前调用，实例仍然可用
},
destroy: function() {
//【销毁】Vue实例销毁后调用
}
});
- 不要给body添加
#app直接成为Vue控制区域 - 缩进统一使用两个空格
- 在使用v-for循环的模板要添加
:key="key"表示key可以是Number|String - 如果页面列表数据是通过接口获取的，可以将调用接口的函数放在created()钩子函数中
- vscode需要安装
Vetur和Vue 2 Snippets插件 - 组件内部添加的样式默认是全局的，需要在style中添加属性
scoped，这样就只能作用到组件内 -
v-for列表对象可以是一个函数，便于页面内搜索
MVVM分层概述
- 为了让我们开发更加方便，MVVM提供了数据的双向绑定【由VM提供双向绑定】。
- MVVM是前端视图层的分层开发思想
M：数据操作层，每个页面中单独的数据
V：就是每个页面中的HTML结构
VM：是一个调度者，每当V层存取数据时，都要通过VM做中间处理【new Vue()就是VM层】
- app.js项目入口模块，一切的请求都要先进入这里进行处理
- router.js路由分发处理模块，不能处理业务逻辑
- Controller业务逻辑处理层，不设计CRUD处理
- Model只负责操作数据库，执行对应的sql语句
C：Create
R：Read
U：Update
D：Delete
常用函数用法
@click.prevent=“fun()”事件自身。
v-if每次都会重新删除或创建元素，有切换性能消耗。
v-show不会重新操作DOM元素，只是切换了元素的显示隐藏，有较高的初始渲染的消耗。
.padStart(maxLength, fillString=‘’)字符串前面自动补全
键盘修饰符：
<input type=“text” @keyup.f2=“add” />
Vue.config.keyCodes.f2 = 113;
自定义指令：
Vue.directive(‘focus’, {
bind: function(el) {
//当指令绑定到DOM元素时就会执行，el是原生的js对象
}
})
vue-resource接口请求
//设置默认请求域名
Vue.http.options.root = ‘http://.....com/’
//发起一个get 接口请求
this.$http.get(‘url/a/b’).then(fuction(res){ });
this.$http.get(‘url’).then(res=>{ });
动画transition
完整动画只需要设置样式和类即可，半场动画需要设置动画钩子函数
<style>
/* 入场动画*/
.v-enter,.v-leave-to {opacity:0; transform: translateY(80px);}
.v-enter-active,.v-leave-active {transition: all 0.6s ease;}
/*离开动画*/
.v-move {transition: all 0.6s ease;}
.v-leave-active {position: absolute;}
</style>
<! — 列表入场效果 —>
<transition-group appear tag=“ul”>
<li v-for=“item in list” :key=“item.id”>
</li>
</transition-group>
Vue组件化
通过.vue文件，来创建对应的组件：
- template 结构
- script 行为
- style 行为
- 一个简单的中间注册，注册组件的时候命名使用的驼峰法，在使用的时候使用-连接;
- 无论哪种方式创建出来的组件，必须有且只能有唯一的根元素
<my-com1></my-com1>
var com1 = Vue.extend({
template: ‘<h1>abc</h1>’
});
Vue.component(‘’myCom1, com1)
可以指定模板标签，使用template标签包裹
<template id=“temp1”>
<h1>abc</h1>
</template>
<script>
Vue.component(‘mycom2’, {
template: ‘#temp1’,
});
</script>
- 组件中的data 用法与Vue实例一致
私有组件定义
new Vue({
components: {
//自定义实例内部私有组件
com1: {
//template: ‘<h1>abc</h1>’
template: ‘#temp1’
//必须是一个函数，防止引用类型 数据互串
data: function(){ return {}; }
}
}
})
组件切换，修改:is属性值就可以实现组件切换
<component :is=“‘com1’”></component>
通过 props数组，完成父子组件传值
components: {
com1: {
data(){
return {msg: ‘你好’}
},
props: [’接收父组件值的属性名称‘]
}
}
子组件执行父组件中的函数show(data)[data可接收子组件中的参数]，可以通过在父组件标签中添加事件<com1 @func=“show”></com1>，子组件中执行methods 中自定义函数调用this.$emit(‘func’, data)
操作DOM元素，也可以直接操作子组件，获取数据和执行子组件中的函数
<div ref=“myDiv”></div>
//可在函数中操作DOM元素
this.$refs.myDiv.innerText
路由
<router-link to-“/login”>登录</router-link>
<router-link to-“/register”>注册</router-link>
<router-view>这里是路由组件占位</router-view>
<script>
var router = new VueRouter({
routes: [
//设置默认入口页面，加载的组件
{ path: ‘/’, redirect: ‘/login’},
{ path: ‘login’, component: { template: ‘<div>abc</div>’},
{
path: ‘register/:id’,
component: {
template: ‘<div>abc</div>’,
created(){
this.$router // 获取当前路由地址
this.$router.query //获取地址参数
this.$router.params //获取地址id的参数值
},
children: [
{ path: ‘r1’, component: { template: ’<div>这是一个子菜单，path中不用添加/</div>’}}
]
}
}
],
linkActiveClass: ‘abc’//修改选中路由样式名称，默认
})
new Vue({
el: ‘#app’
router: router
})
</script>
webpack前端项目构建工具
基于Node.js开发的一个前端工具，解决各个包之间的复杂依赖关系。实现资源的合并，打包，压缩，混淆等诸多功能。webpack官网
打包es6脚本js文件方式
1.直接执行打包语句
webpack ‘要打包的路径’ ‘打包后的路径’
2.配置自动打包，项目根目录中添加webpack.config.js，执行webpack就可以自动打包脚本到目标路径js中
const path = require(‘path’)
module.exports = {
entry: path.join(__dirname, ‘ 入口文件地址路径’),
output: {
path: path.join(__dirname, ‘打包输出地址’),
filename: ‘bundle.js’
}
}
3.实时监听自动编译打包webpack-dev-server工具
npm i webpack-dev-server -D
在package.json 的scripts中添加“dev”: “webpack-dev-server”。(- -open打开浏览器，- -port 3000设置端口3000，- -contentBase src自动进入src目录，- -hot热更新)
执行npm run dev自动打包脚本
安装html-webpack-plugin插件
可以将物理页面打包到内存中，打包的 js会自动追加到内存页面中。需要修改webpack.config.js文件：
const htmlWebpackPlugin = require(‘html-webpack-plugin’)
module.exports = {
plugins: [
new htmlWebpackPlugin({
template: path.join(__dirname, ‘ 指定模板页面地址’)
filename: ‘index.html’
})
]
}
打包非js文件访问 Node.js与webpack搭配创建项目
在webpack中使用vue
// 这样导入的包是不完整的，无法像html中一样使用
import Vue from ‘vue’
需要修改webpack.config.js文件：
module.exports = {
resolve: {
alias: {//设置vue结尾被导入包的路径
“vue$”: “vue/dist/vue.js”
}
}
}
使用vue文件渲染组件需要配置：
npm i vue-loader vue-template_compiler -D
{ test /\.vue$/, use: ‘vue-loader’}
在webpack中，需要使用render()渲染vue文件中的组件
import login from ‘./login.vue’
new Vue({
el: ‘#app’,
render: c => c(login)
})
./login.vue文件内容：
<template><div>这里可以是任意html标签</div></template>
<script>
export default {
data(){
return {};
},
methods: {
show() {
//组件自定义函数
}
}
}
</script>
<style></style>
在webpack中使用vue总结
1.安装vue包：npm i vue -s
2.安装解析.vue文件loadernpm i vue-loader vue-template-complier -D
3.在main.js中，导入vue模块 import Vue from ‘vue’
4.定义一个 .vue结尾的组件，其中组件有三部分组成 template script style
5.使用import login from ‘./login.vue’导入这个组件
6.创建vm实例 new Vue({ el: ‘#app’})
7.在页面中功能创建一个id为app的div元素，作为vm实例控制区域。
- 暴露成员：
Node.js中：module.exports = { }
es6中：export deault 和 export
export var title = ‘abc’
export default { }
// 引用文件中：
import abc,{title} from ‘上面的路径’
//可以使用as起别名导入
import abc,{title as bb} from ‘引入文件路径’
- 导入模块
Node.js中：var 名称 = require(‘模块标识符’)
es6中：import 模块名称 from ‘模块标识符’ 和 import ‘表示路径’
