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