过滤器
1. 理解过滤器
1）功能: 对要显示的数据进行特定格式化后再显示
2）注意: 并没有改变原本的数据, 可是产生新的对应的数据
2. 定义和使用过滤器
1）定义过滤器
Vue.filter(filterName,function(value[,arg1,arg2,...]){// 进行一定的数据处理returnnewValue})
2）使用过滤器
内置指令与自定义指令
1 常用内置指令
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 }
2. 自定义指令
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-cli 创建模板项目
1. 说明
1）vue-cli 是 vue 官方提供的脚手架工具
2）github:https://github.com/vuejs/vue-cli
3）作用: 从https://github.com/vuejs-templates下载模板项目
2. 创建 vue 项目
npm install -g vue-clivue init webpack vue_democdvue_demonpm install npm run dev访问: http://localhost:8080/
3. 模板项目的结构
|-- 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 文件
4. 项目的打包与发布
1. 打包:
npm run build
2. 发布 1: 使用静态服务器工具包
npm install -g serve serve dist访问: http://localhost:5000
3. 发布 2: 使用动态 web 服务器(tomcat)
修改配置: webpack.prod.conf.js
output: {publicPath:'/xxx/'//打包文件夹的名称}
重新打包:
npm run build
修改 dist 文件夹为项目名称: xxx
将 xxx 拷贝到运行的 tomcat 的 webapps 目录下访问:http://localhost:8080/xxx