Vue神一般的打开姿势
2018-10-08 本文已影响11人
凌屿
过渡&动画
vue 动画的理解
- 1）操作 css 的 trasition 或 animation
- 2）vue 会给目标元素添加/移除特定的 class
- 3）过渡的相关类名:
xxx-enter-active: 指定显示的 transition
xxx-leave-active: 指定隐藏的 transition
xxx-enter/xxx-leave-to: 指定隐藏时的样式
基本过渡动画的编码
1）在目标元素外包裹
2）定义 class 样式
- 指定过渡样式: transition
- 指定隐藏时的样式: opacity/其它
过滤器
理解过滤器
- 1）功能: 对要显示的数据进行特定格式化后再显示
- 2）注意: 并没有改变原本的数据, 可是产生新的对应的数据
定义和使用过滤器
- 1）定义过滤器
Vue.filter(filterName, function(value[,arg1,arg2,...]){
// 进行一定的数据处理
return newValue
})
- 2）使用过滤器
<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>
内置指令与自定义指令
常用内置指令
1）v:text : 更新元素的 textContent
2）v-html : 更新元素的 innerHTML
3）v-if : 如果为 true, 当前标签才会输出到页面
4）v-else: 如果为 false, 当前标签才会输出到页面
5）v-show : 通过控制 display 样式来控制显示/隐藏
6）v-for : 遍历数组/对象
7）v-on : 绑定事件监听, 一般简写为@
8）v-bind : 强制绑定解析表达式, 可以省略 v-bind
9）v-model : 双向数据绑定
10）ref : 指定唯一标识, vue 对象通过$refs 属性访问这个元素对象
11）v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }
自定义指令
- 1）注册全局指令
Vue.directive('my-directive', function(el, binding){ el.innerHTML = binding.value.toupperCase()
})
- 2）注册局部指令
directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}
- 3）使用指令
v-my-directive='xxx'
自定义插件
- 1）Vue 插件是一个包含 install 方法的对象
- 2）通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令等
- 插件通常会为 Vue 添加全局功能。插件的范围没有限制——一般有下面几种：
- 添加全局方法或者属性，如: vue-custom-element
- 添加全局资源：指令/过滤器/过渡等，如 vue-touch
- 通过全局 mixin 方法添加一些组件选项，如: vue-router
- 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
- 一个库，提供自己的 API，同时提供上面提到的一个或多个功能，如 vue-router
- 通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成：
// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
new Vue({
//... options
})
- 也可以传入一个选项对象：
Vue.use(MyPlugin, { someOption: true })
使用 vue-cli 创建模板项目
说明
- 1）vue-cli 是 vue 官方提供的脚手架工具
- 2）github: https://github.com/vuejs/vue-cli
- 3）作用: 从 https://github.com/vuejs-templates 下载模板项目
创建 vue 项目:
npm install -g vue-cli
vue init webpack vue_demo
cd vue_demo
npm install
npm run dev
访问: http://localhost:8080/
模板项目的结构
|-- build : webpack 相关的配置文件夹(基本不需要修改)
|-- dev-server.js : 通过 express 启动后台服务器
|-- config: webpack 相关的配置文件夹(基本不需要修改)
|-- index.js: 指定的后台服务的端口号和静态资源文件夹
|-- node_modules
|-- src : 源码文件夹
|-- components: vue 组件及其相关资源文件夹
|-- App.vue: 应用根主组件
|-- main.js: 应用入口 js
|-- static: 静态资源文件夹
|-- .babelrc: babel 的配置文件
|-- .eslintignore: eslint 检查忽略的配置
|-- .eslintrc.js: eslint 检查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主页面文件
|-- package.json: 应用包配置文件
|-- README.md: 应用描述说明的 readme 文件
打包:
npm run build
发布 1: 使用静态服务器工具包
npm install -g serve
serve dist
访问: http://localhost:5000
发布 2: 使用动态 web 服务器(tomcat)
修改配置: webpack.prod.conf.js
output: {
publicPath: '/xxx/' //打包文件夹的名称
}
重新打包:
- npm run build
修改 dist 文件夹为项目名称: xxx
将 xxx 拷贝到运行的 tomcat 的 webapps 目录下访问: http://localhost:8080/xxx
