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='')
字符串前面自动补全
键盘修饰符:
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
完整动画只需要设置样式和类即可,半场动画需要设置动画钩子函数
Vue组件化
通过.vue文件,来创建对应的组件:
- template 结构
- script 行为
- style 行为
- 一个简单的中间注册,注册组件的时候命名使用的驼峰法,在使用的时候使用-连接;
- 无论哪种方式创建出来的组件,必须有且只能有唯一的根元素
var com1 = Vue.extend({
template: 'abc
'
});
Vue.component(''myCom1, com1)
可以指定模板标签,使用template标签包裹
abc
- 组件中的data 用法与Vue实例一致
私有组件定义
new Vue({
components: {
//自定义实例内部私有组件
com1: {
//template: 'abc
'
template: '#temp1'
//必须是一个函数,防止引用类型 数据互串
data: function(){ return {}; }
}
}
})
组件切换,修改:is属性值就可以实现组件切换
通过 props数组,完成父子组件传值
components: {
com1: {
data(){
return {msg: '你好'}
},
props: ['接收父组件值的属性名称']
}
}
子组件执行父组件中的函数show(data)
[data可接收子组件中的参数],可以通过在父组件标签中添加事件
,子组件中执行methods 中自定义函数调用this.$emit('func', data)
操作DOM元素,也可以直接操作子组件,获取数据和执行子组件中的函数
//可在函数中操作DOM元素
this.$refs.myDiv.innerText
路由
登录
注册
这里是路由组件占位
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文件内容:
这里可以是任意html标签
在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 '表示路径'