一、Vue基础语法部分
1. 事件处理
- 绑定监听
v-on:xxx="fun"
@xxx="fun"
@xxx="fun(参数)"
默认事件形参: event
隐含属性对象: $event
html部分代码:
<h2>1.绑定监听</h2>
<button @click="test1">test1</button>
<button @click="test2('atguigu')">test2</button>
<button @click="test3">test3</button> <!-- 不传参数相当于test3($event) -->
<button @click="test4(123, $event)">test4</button>
data部分代码:
test1(){
alert('test1')
},
test2(msg){
alert(msg)
},
test3(event){
alert(event.target.innerHTML)
},
test4(number, event){
alert(number + '---' + event.target.innerHTML)
}
- 事件修饰符:
.prevent : 阻止事件的默认行为 event.preventDefault()
@click.prevent=’xxx’
.stop : 停止事件冒泡 event.stopPropagation()
@click.stop=’xxx’
- 按键修饰符
.keycode : 操作的是某个keycode值的健
@keyup.13=’xxx’ (enter键的keycode为13)
.enter : 操作的是enter键
@keyup.enter=’xxx’
2. 表单输入绑定
- 使用v-model(双向数据绑定)自动收集数据
可直接在text/textarea, checkbox, radio, select中加v-model双向数据绑定 - 提交
<form action="/xxx" @submit.prevent="handleSubmit">
methods : {
handleSumbit() {
console.log(‘xxx’)
}
}
3. Vue实例的生命周期
1. vue对象的生命周期
- 初始化显示
beforeCreate()
created()
beforeMount()
mounted()
- 更新显示:this.xxx = value
beforeUpdate()
updated()
- 销毁vue实例: vm.$destroy()
beforeDestroy()
destroyed()
2. 常用的生命周期方法
mounted(): 发送ajax请求, 启动定时器等异步任务
beforeDestroy(): 做收尾工作, 如: 清除定时器
4. 过渡与动画效果
1. vue动画的理解
操作css的transition或animation
vue会给目标元素添加/移除特定的class
2. 基本过渡动画的编码
- 在目标元素外包裹
- 定义class样式
- 指定过渡样式: transition
- 指定隐藏时的样式: opacity/其它
3. 过渡的类名
xxx-enter-active: 指定显示的transition
xxx-leave-active: 指定隐藏的transition
xxx-enter: 指定隐藏时的样式
<transition name=’xxx’>…</transition>
<style>
.xxx-enter-active, .xxx-leave-active {…} // 显示与隐藏时的过渡效果
.xxx-enter, .xxx-leave-to {…} // 隐藏时的样式
<style>
5. 过滤器
1. 理解过滤器
功能: 对要显示的数据进行特定格式化后再显示
注意: 并没有改变原本的数据, 可是产生新的对应的数据
通过CDN引入moment.js时间过滤器:
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.js"></script>
2. 编码
- 定义过滤器
Vue.filter(filterName, function(value[,arg1,arg2,...]){
// 进行一定的数据处理
return newValue
})
- 使用过滤器
<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>
自定义过滤器:
Vue.filter('dateString', function(value, format){
return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss')
})
6. 指令
1. 常用的内置指令
v:text : 更新元素的 textContent
v-html : 更新元素的 innerHTML
v-if : 如果为true, 当前标签才会输出到页面
v-else: 如果为false, 当前标签才会输出到页面
v-show : 通过控制display样式来控制显示/隐藏
v-for : 遍历数组/对象
v-on : 绑定事件监听, 一般简写为@
v-bind : 强制绑定解析表达式, 可以省略v-bind
v-model : 双向数据绑定
ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象
v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }
2. 自定义指令
- 注册全局指令
定义全局指令时,el为指令属性所在的标签对象,binding为包含指令相关信息数据的对象。
Vue.directive('my-directive', function(el, binding){
el.innerHTML = binding.value.toupperCase()
})
- 注册局部指令
局部指令只在当前vm管理范围内有效。
directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}
(3) 使用指令
v-my-directive='xxx'
7. 插件
自定义插件vue-myPlugin.js
// vue的插件库
(function() {
// 需要向外暴露的插件对象
const MyPlugin = {}
// 插件对象必须有一个install()方法
MyPlugin.install = function(Vue, options) {
// 1.添加全局方法或属性
Vue.myGlobalMethod = function() {
console.log('Vue函数对象的方法myGlobalMethod()')
}
// 2.添加全局资源
Vue.directive('my-directive', function(el, binding) {
el.textContent = binding.value.toUpperCase()
})
// 3.添加实例方法
Vue.prototype.$myMethod = function() {
console.log('Vue实例对象的方法$myMethod()')
}
}
// 向外暴露
window.MyPlugin = MyPlugin
})()
引入:
<script type="text/javascript" src="js/vue-myPlugin.js"></script>
<script type="text/javascript">
// 声明使用插件
Vue.use(MyPlugin) // 内部会执行MyPlugin.install(Vue)
Vue.myGlobalMethod()
const vm = new Vue({
el: '#test',
data: {
msg: 'I Like You!'
}
})
vm.$myMethod()
</script>
使用:
<p v-my-directive=’msg’></p>
二、Vue组件化编码
组件:可复用的局部功能模块
1. vue-cli的安装
- 首先安装Node.js
- 执行命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用npm的国内镜像cnpm 命令代替默认的npm命令,增加依赖包加载速度且避免资源限制。
3. 运行命令
cnpm install -g vue-cli
安装脚手架。
2. 创建一个vue项目
创建指令:
vue init webpack 项目名
然后在cmd中使用命令先定位到项目所在路径目录下,使用命令
cnpm install
安装项目所需的依赖包资源。
使用
npm run dev
运行项目。
模板项目的结构:
|-- 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 文件
3. Vue文件的模板结构
<template>
<div>
</div>
</template>
<script>
export default { // 配置对象,与vue一致
data() { // 在组件中data必须写成函数形式
return {…}
}
}
</script>
<style>
</style>
4. 组件的使用
在App.vue中
第一步:引入组件
import HelloWorld from './components/HelloWorld'
第二步:映射组件标签
export default {
components: {
HelloWorld
}
}
第三步:使用组件标签
<HelloWorld/>
在入口JS: main.js中创建Vue实例
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app', // index.html中的div id
components: {
App
},
template: '<App/>'
})
运行时自动打开浏览器设置
- 打开项目下的config/index.js
- 找到module.exports的 dev下的 autoOpenBrowser ,将 false 改成 true