Vue再提高

Vue再提高

• Vue不常用：计算属性、侦听属性，过滤器，自定义指令
• Vue组件开发：js新语法！！组件开发！

1.Vue里事件冒泡

事件冒泡是Js共有的，当然Vue里也有，下面是如何解决的办法：在事件后写@事件.stop
<div @click.stop="num+=1"></div>

补充阻止表单提交是在事件后 @事件.prevent stop和prevent可以连着写 @事件.stop.prevent

2.Vue弹窗 Demo

3.Vue各种不常用属性

3.1 计算属性

如果数据命令太复杂，放到对象中封装，而不是{{}}中，引用写计算属性里的函数名，把计算的封装到computed属性里，和methods:{}里一样

var vm = new Vue({
	el:'',
	data:{
		str:''
	},
	computed:{
		//计算属性:命令必须是返回值的形式
		//属性名自定义：匿名函数
		fnRs:function(){
			return this.str.split('').reverse.join('')
		}
	}
})

3.2侦听属性

检测某个变量是否发生变化,侦听匿名函数会自带两个参数，参数1是变化之后的值，参数2是变化之前的值

var vm = new Vue({
	el:'',
	data:{
		str:''
	},
	watch:{
		//侦听属性名（侦听的变量是谁就是什么名字）:匿名函数
		str:function(newVal,oldVal){
		console.log(oldVal+'|'+newVal)
	}
})

3.3过滤器 不常用 被弃用

格式化文本用， Vue实例的filters属性，里面写过滤器名字：匿名函数(格式化命令)
使用：{{文本| 过滤器名}}

var vm = new Vue({
	el:'',
	data:{
		str:''
	},
	filters:{
	yuan:function(aa){
		return aa+'元'
	}
	}
})

上面定义在Vue实例里是局部过滤器，也可以定义全局过滤器：Vue.filter,书写位置是在所有对象的上面，这样所有对象都能调用。
Vue.filter(过滤器名字，匿名函数)没有s了

Vue.filter('RMB',function(aa){
	return '¥'+aa
})

3.4自定义指令 directive

基本用不到
自定义指令demo 自动获得指令
inserted 钩子函数 固定的

<input type="text" v-指令名称>

Vue.directive(指令名自定义,{
	inserted:function(el)
	//el是将来使用这个指令的标签
	el.focus()
})

定义局部的就是在Vue实例对象里定义directives:{
指令名称:{
inserted:function(el){
el.xxx
}
}
}

4.ES6

js新增语法

4.1对象简写方式

如果key和value的名称相同，只留一个单词；

var name = 'TOM'
var age = f
var obj={
	name,
	age
}

4.2变量声明 let const

let声明变量，const常量

4.3箭头函数 能解决this指向出问题

匿名函数可以改写成箭头函数
var fn = (参数)=>{命令}
一个参数就是 var fn= 参数=>{}
没有参数就是 var fn =()=>{}

var fn = function(a, b){
	var result = a+b
	alert(result)
}
//改写
var fn1 = (a, b)=>{
	var result = a+b
	alert(result)
}
fn1(1, 2)

箭头函数在对象中的使用方法

对象里使用setInterval指向对象是窗口对象，不能用this,改写成箭头函数就OK ()=>{},箭头函数不会自己维护this指针，但是箭头函数的this指向的上一级function的this

var pp={
	name:'TOM',
	showName:function(){
		setInterval(function(){
			()=>{
			alert( this.name)
			}
		},1000)
	}
}

4.4js模块

ES6中一个js文件就是一个模块，不同的是js文件中需要先到处export后才能被其他js文件导入import

export default {person} //导出

import person from ‘js/model.js’ //导入

5.Vue组件

组件就类似函数，哪里需要哪里调用
组件的使用就是把组件名便标签
组件只能存在一个父标签包住所有的子标签，换句话说，template必须有一个根元素
组件里的data必须写成有返回值函数,返回所有属性data:function(){}

template ->html

<aa></aa>

Vue.compoment('mycom',{
	template:'<div><input type="text" v-model="num"><button>计数</button></div>'
	data:function(){
		return{
			num:1,
			str:'abc'
		}
	}
})

6.单文件组件

一个组件是一个文件，后缀是.vue
第一部分html template
第二部分 js script
第三部分 css style

单文件组件写js必须是模块导出的形式
export default{
xxx
}

css里

element组件库

7.webpack

单页面开发都依赖于vue-project 有几百m
单页面网站开发需要webpack 基于node服务器环境
npm基于node包管理工具
安装Vue自动化工具 vue-cli
生成基于webpack模版的项目，切到项目，启动服务

认识webpack目录各个文件作用：
build 打包上线要用文件、配置
config webpack服务环境配置文件
dist 上线到服务器的文件，打包生成的文件
node_modules 所有的模块
src 基于src开发，前端开发的目录！！
static 静态文件，jquery，js

src里：
compoments所有组件 我们需要找对应组件放对应数据
route路由：跳转页面
App.vue webpack最大的组件

8.webpack打包流程

index.html->main.js->App.vue路由分配到各个组件 组件再查找组件

index.html 和main.js 通过webpack build里的配置文件webpack.dev.conf.js关联

9.index

组件先导入import 再注册 compoent:xxx 再使用！

写Vue就像贴贴纸，一层层的贴上去

获取数据

跨域请求

this.axios({})

打包上线

去掉代理名，
npm run bulid