Vue进阶和vue-cli配置

一、Vue基础语法部分

1. 事件处理

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)
}

2. 事件修饰符:
   .prevent : 阻止事件的默认行为 event.preventDefault()

@click.prevent=’xxx’

.stop : 停止事件冒泡 event.stopPropagation()

@click.stop=’xxx’

3. 按键修饰符
   .keycode : 操作的是某个keycode值的健

@keyup.13=’xxx’ (enter键的keycode为13)

.enter : 操作的是enter键

@keyup.enter=’xxx’

2. 表单输入绑定

1. 使用v-model(双向数据绑定)自动收集数据
   可直接在text/textarea, checkbox, radio, select中加v-model双向数据绑定
2. 提交

<form action="/xxx" @submit.prevent="handleSubmit">

methods : {
	handleSumbit() {
		console.log(‘xxx’)
	}
}

3. Vue实例的生命周期

1. vue对象的生命周期

1. 初始化显示

beforeCreate()
created()
beforeMount()
mounted()

2. 更新显示：this.xxx = value

beforeUpdate()
updated()

3. 销毁vue实例: vm.$destroy()

beforeDestroy()
destroyed()

2. 常用的生命周期方法

mounted(): 发送ajax请求, 启动定时器等异步任务
beforeDestroy(): 做收尾工作, 如: 清除定时器

4. 过渡与动画效果

1. vue动画的理解

操作css的transition或animation
vue会给目标元素添加/移除特定的class

2. 基本过渡动画的编码

1. 在目标元素外包裹
2. 定义class样式

1. 指定过渡样式: transition
2. 指定隐藏时的样式: 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. 编码

1. 定义过滤器

Vue.filter(filterName, function(value[,arg1,arg2,...]){
	// 进行一定的数据处理
	return newValue
})

2. 使用过滤器

<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. 自定义指令

1. 注册全局指令
   定义全局指令时，el为指令属性所在的标签对象，binding为包含指令相关信息数据的对象。

Vue.directive('my-directive', function(el, binding){
	el.innerHTML = binding.value.toupperCase()
})

2. 注册局部指令
   局部指令只在当前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的安装

1. 首先安装Node.js
2. 执行命令

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/>'
})

运行时自动打开浏览器设置

1. 打开项目下的config/index.js
2. 找到module.exports的 dev下的 autoOpenBrowser ,将 false 改成 true