Vue神一般的打开姿势

过渡&动画

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 添加全局功能。插件的范围没有限制——一般有下面几种：

• 1. 添加全局方法或者属性，如: vue-custom-element
• 2. 添加全局资源：指令/过滤器/过渡等，如 vue-touch
• 3. 通过全局 mixin 方法添加一些组件选项，如: vue-router
• 4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
• 5. 一个库，提供自己的 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