Vue 的基本认识
官网
1）英文官网:https://vuejs.org/
2）中文官网:https://cn.vuejs.org/
介绍描述
1）渐进式 JavaScript 框架
2）作者: 尤雨溪(一位华裔前 Google 工程师)
3）作用: 动态构建用户界面
Vue 的特点
1）遵循 MVVM 模式
2）编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
3）它本身只关注 UI, 可以轻松引入 vue 插件或其它第三方库开发项目
与其它前端 JS 框架的关联
1）借鉴 angular 的模板和数据绑定技术
2）借鉴 react 的组件化和虚拟 DOM 技术
Vue 扩展插件
1）vue-cli: vue 脚手架
2）vue-resource(axios): ajax 请求
3）vue-router: 路由
4）vuex: 状态管理
5）vue-lazyload: 图片懒加载
6）vue-scroller: 页面滑动相关
7）mint-ui: 基于 vue 的 UI 组件库(移动端)
8）element-ui: 基于 vue 的 UI 组件库(PC 端)
9）它本身只关注 UI, 可以轻松引入 vue 插件或其它第三方库开发项目
Vue 的基本使用
编码
<div id="app">
<input type="text" v-model="username">
<p>Hello, {{username}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
username: 'vue'
}
})
</script>
模板语法
模板的理解
1）动态的 html 页面
2）包含了一些 JS 语法代码
a.双大括号表达式
b.指令(以 v-开头的自定义标签属性)
文本
<span>Message:{{msg}}</span>
原始HTML
<p>Using mustaches:{{rawHtml}}<p>
<p>Using v-html directive:<span v-html="rawHtml"></span></p>
双大括号表达式
1）语法: {{exp}}
2）功能: 向页面输出数据
3）可以调用对象的方法
表达式
{{number + 1}}
{{ok?'YES':'NO'}}
{{message.split('').reverse().join('')}}
指令一: 强制数据绑定
1）功能: 指定变化的属性值
2）完整写法:
v-bind:xxx='yyy' //yyy 会作为表达式解析执行
3）简洁写法:
:xxx='yyy'
指令二: 绑定事件监听
1）功能: 绑定指定事件名的回调函数
2）完整写法:
v-on:keyup='xxx'
v-on:keyup='xxx(参数)' v-on:keyup.enter='xxx'
3）简洁写法:
@keyup='xxx' @keyup.enter='xxx'
计算属性和监视
计算属性
1）在 computed 属性对象中定义计算属性的方法
2）在页面中使用{{方法名}}来显示计算的结果
监视属性
1）通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性
2）当属性变化时, 回调函数自动调用, 在函数内部进行计算
计算属性高级
1）通过 getter/setter 实现对属性数据的显示和监视
2）计算属性存在缓存, 多次读取只执行一次 getter 计算
1.5. class 与 style 绑定
理解
1）在应用界面中, 某个(些)元素的样式是变化的
2）class/style 绑定就是专门用来实现动态样式效果的技术
class 绑定
1）:class='xxx'
2）表达式是字符串: 'classA'
3）表达式是对象: {classA:isA, classB: isB}
4）表达式是数组: ['classA', 'classB']
style 绑定
1）:style="{ color: activeColor, fontSize: fontSize + 'px' }"
2）其中 activeColor/fontSize 是 data 属性
条件渲染
条件渲染指令
1）v-if 与 v-else
2）v-show
比较 v-if 与 v-show
3）如果需要频繁切换 v-show 较好
4）当条件不成立时, v-if 的所有子节点不会解析
列表渲染
列表显示指令
数组: v-for / index
对象: v-for / key
列表的更新显示
删除 item
替换 item
列表的高级处理
列表过滤
列表排序
事件处理
绑定监听:
1）v-on:xxx="fun"
2）@xxx="fun"
3）@xxx="fun(参数)"
4）默认事件形参: event
5）隐含属性对象: $event
事件修饰符
1）.prevent : 阻止事件的默认行为 event.preventDefault()
2）.stop : 停止事件冒泡 event.stopPropagation()
按键修饰符
1）.keycode : 操作的是某个 keycode 值的键
2）.keyName : 操作的某个按键名的键(少部分)
表单输入绑定
使用 v-model 对表单数据自动收集
1）text/textarea
2）checkbox
3）radio
4）select
vue 生命周期分析
1）初始化显示
*beforeCreate()
*created()
*beforeMount()
*mounted()
2）更新状态: this.xxx = value
*beforeUpdate()
*updated()
3）销毁 vue 实例: vm.$destory()
*beforeDestory()
*destoryed()
常用的生命周期方法
1）created()/mounted(): 发送 ajax 请求, 启动定时器等异步任务
2）beforeDestory(): 做收尾工作, 如: 清除定时器
过渡&动画
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.13.2. 自定义指令
1）注册全局指令
Vue.directive('my-directive', function(el, binding){ el.innerHTML = binding.value.toupperCase()
})
或
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
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 创建模板项目
说明
vue-cli 是 vue 官方提供的脚手架工具
github:https://github.com/vuejs/vue-cli
作用: 从 https://github.com/vuejs-templates 下载模板项目
创建 vue 项目
vue -V 显示版本2时
npm install -g vue-cli
vue init webpack vue_demo
cd vue_demo
npm install
npm run dev
访问: http://localhost:8080/
vue -V 显示版本3时
npm install -g @vue/cli
vue create 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
ESLint
说明
ESLint 是一个代码规范检查工具
它定义了很多特定的规则, 一旦你的代码违背了某一规则, eslint 会作出非常有用的提示
官网: http://eslint.org/
基本已替代以前的 JSLint
ESLint 提供以下支持
ES
JSX
style 检查
自定义错误和提示
ESLint 提供以下几种校验
语法错误校验
不重要或丢失的标点符号，如分号
没法运行到的代码块
未被使用的参数提醒
确保样式的统一规则，如 sass 或者 less
检查变量的命名
规则的错误等级有三种
0：关闭规则。
1：打开规则，并且作为一个警告（信息打印黄色字体）
2：打开规则，并且作为一个错误（信息打印红色字体）
相关配置文件
.eslintrc.js : 全局规则配置文件
'rules': {
'no-new': 1
}
在 js/vue 文件中修改局部规则
/* eslint-disable no-new */
new Vue({
el: 'body',
components: { App }
})
.eslintignore: 指令检查忽略的文件
*.js
*.vue
组件定义与使用
vue 文件的组成(3 个部分)
模板页面
<template>
页面模板
</template>
JS 模块对象
<script>
export default {
data() {return {}},
methods: {},
computed: {},
components: {}
}
</script>
样式
<style>
样式定义
</style>
基本使用
引入组件
映射成标签
使用组件标签
<template>
<HelloWorld></HelloWorld>
<hello-world></hello-world>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
components: {
HelloWorld
}
}
</script>
关于标签名与标签属性名书写问题
写法一：一模一样
写法二：大写变小写, 并用-连接
组件间通信
组件间通信基本原则
不要在子组件中直接修改父组件的状态数据
数据在哪, 更新数据的行为(函数)就应该定义在哪
vue 组件间通信方式
props
vue 的自定义事件
消息订阅与发布(如: pubsub 库)
slot
vuex
组件间通信 1: props
使用组件标签时
<my-component name = 'tom' :age = '3' :set-name = 'setName'></my-component>
定义 MyComponent 时
在组件内声明所有的 props
方式一: 只指定名称
props: ['name', 'age', 'setName']
方式二: 指定名称和类型
props: {
name: String, age: Number,
setNmae: Function
}
方式三: 指定名称/类型/必要性/默认值
props: {
name: {type: String, required: true, default:xxx},
}
注意
此方式用于父组件向子组件传递数据
所有标签属性都会成为组件对象的属性, 模板页面可以直接引用
问题:
a.如果需要向非子后代传递数据必须多层逐层传递
b.兄弟组件间也不能直接 props 通信, 必须借助父组件才可以
组件间通信 2: vue 自定义事件
绑定事件监听
// 方式一：通过 v-on 绑定
@delete_todo="deleteTodo"
// 方式二：通过 $on()
this.$refs.xxx.$on('delete_todo', function (todo) {
this.deleteTodo(todo)
})
触发事件
// 触发事件(只能在父组件中接收)
this.$emit(eventName, data)
注意:
此方式只用于子组件向父组件发送消息(数据)
问题: 隔代组件或兄弟组件间通信此种方式不合适
组件间通信 3: 消息订阅与发布(PubSubJS 库)
订阅消息
PubSub.subscribe('msg', function(msg, data){})
发布消息
PubSub.publish('msg', data)
注意
优点: 此方式可实现任意关系组件间通信(数据)
事件的 2 个重要操作(总结)
绑定事件监听 (订阅消息)
目标: 标签元素 <button>
事件名(类型): click/focus
回调函数: function(event){}
