再回首web

394 阅读5分钟

基础

1.前端是弱类型语言,不同类型之间可以相互转换(== 和===的区别)

2.前端盒子模型和Android的模型不同

3.前端方法可以赋值给对象,这就导致对象拥有哪些方法,对象创建的时候自己也不确定。进而导致方法内部的this只有在调用的时候才知道指向的是谁。(java方法再创建对象时候就已经确定拥有的方法和this的指向)

4.前端js代码可以写到方法外(加载并执行),也可以写到方法内(只加载,调用才执行)。java只能写到方法内(只加载,调用才执行)。这就体现了java入口函数的和构造方法的必要性。

5.前端js代码很少使用入口函数,而Android代码都在方法内,所以必须使用入口函数去调用方法

6.js代码可以写到布局文件内,进行数据双向绑定(这是一种思想)。Android不再布局文件中写代码(databinding除外)

7.前端事件传递方式和Android一致,但Android一个事件只能由一个消费者(),前端有捕获冒泡两种方法。

8js有自执行函数这个概念,写法(function bbb(a2,b2){ return sum2 = a2 + b2; })(1,2)。自执行函数是很自私的,它的内部可以访问全局变量。但是除了自执行函数自身内部,是无法访问它的。

ES6语法

1、 var  方法作用域内有效,变量可提升,可以重复声明

 let  const   : 代码块作用域有效,变量不可提升,不可重复声明,一个是变量,一个是常量

2、解构赋值语法是数组和对象语法特性

3、模版字符串 使用反引号,其他和kotlin语法一样

4、箭头函数: (参数)=>{......代码......} 这里的this指向是它定义时候的指向

5、for in 遍历对象, for of  遍历数组 forEach无法return

6、使用call或者apply去实现类的继承原型对象不会继承),原型对象通过Object.create实现继承:Father.call(this,构造参数...) ;Father.apply(this,[构造参数...])  Son.prototype = Object.create(Father.prototype)。原型链模型:找该类方法或者属性,找不到就去原型对象上找,最后找到object的原型对象上,如果还没找到就返回null

7、主线程代码执行顺序:主线程>微任务>宏任务 (微任务和宏任务的添加可以在主线程添加也可以在浏览器创建的子线程去添加)

8、js模块化方式 :自执行函数、CommonJS、AMD 、CMD、ES6。但是每次都要去编译或    者去引入其他js文件,很麻烦,于是搞出来自动化构建(webpack)。webpack需要下载很多依赖,还要去写配置文件也是很烦,于是封装成vue-cli等脚手架

import功能:加载并执行一个JavaScript文件,然后返回该模块暴漏的对象。

import “”: 该模块没有向外暴漏任何东西,但是会执行js文件

import {}“”: export方式向外暴漏,引用必须显示声明

import  xx   “ ”:export default方式向外暴漏

vue

vue是一种mvvm架构,从命令式编程思想变成声明式编程思想,这是一种开发思想的跃迁。

模版语法内部跟的都是js代码

 {{js表达式}}  

v-html=“js表达式”

v-text=“js表达式”

v-model="js表达式"(配合input)

 v-bind:属性=“js表达式”   简写 :属性=“js表达式” 

 v-on:事件.修饰符="js方法 "        简写:@事件.修饰符="js方法 "

绑定class      "js表达式或者对象" {aClass:boolean,bClass:boolean}

绑定style      "{用js代码去描述css样式的键值对 对象}"

关于vue中的data属性类似android中的MutableLiveData(监视对象整体改变才会触发视图更新),但是官方对数组的一些变更方法做了兼容,可以做到数组内容改变也可以触发视图更新(类似LiveData实现效果)

计算属性getter和setter方法调用时机:

get第一次加载/相关数据发生改变,其他时机用缓存

setter,计算属性本身发生变化时

监视调用时机,被监视的数据发生改变调用(监视分为监视和深度监视)

监视

watch:{ teste(newvalue,oldvalue){ } }

深度监视

watch:{ teste:{ deep:true, handler(newvalue,oldvalue){ console.log("reew") } } }

事件

传递数据: 

someing(自定义参数,$event)

修饰符:

停止事件冒泡(停止多处理)@click.stop  ;

停止事件默认行为:@click.prevent   ;

按键修饰符: @keyup.enter   确定那个键按下才调用

表单自动收集

停止表单默认行为:@submit.prevent=“handlersubmit”

v-model

生命周期

一些逻辑需要页面一加载就执行的,这个时候我们就要把代码写到vue的生命周期函数内,如果写到vue外部,无法使用vue中的数据。

过滤器语法

数据有时候需要转换,比如时间转换成容易读的格式,就可以自定义过滤器,也就是转换器

{xxxdata | fliterName}类似rxjava的map效果

获取DOM对象的内置指令

既然是声明式编程mvvm编程,一般不需要获取dom对象,但是有时候特殊情况也需要获取dom对象,所以vue为我们提供了获取dom对象的指令

ref:为某个元素注册一个唯一标识,vue对象通过$refs.标识获取dom对象

闪现表达式解决的内置指令

v-cloak    写样式:   [v-cloak]{  display:none  }

自定义指令

虽然Vue代码复用和抽象的主要形式是**组件,**但有时也需要对底层dom进行操作,封装成指令,比起ref复用性更高更健壮。 同过滤器一样可以全局注册或者局部注册。

Vue.directive('custom',function(el,binding){
				//操作底层dom,
	el.textContent = binding.value.toUpperCase()
})

vue-cli

vue-cli是对Vue的高度应用,全局只有创建唯一一个Vue对象,也是在入口函数创建,你所编写的vue组件是另外一个VueComponent对象,Vue和VueComponent的关系是:VueComponent的原型对象继承Vue的原型对象,但是Vue和VueComponent并未有继承关系。Vue对象通过自己children属性去管理子VueComponent,VueComponent又通过自己的children属性去管理孙VueComponent。我们编写代码都是编写的VueComponent对象。

编写组件

声明接收属性语法:

props:[“属性名”]

props:{“属性名":属性值类型}

props:{“属性名":{type:类型,required : true ,defult:默认值}}

组件内部事件和参数向外传递方式:

  • 把外部事件回调函数当作接收属性方式去传递
  • 定义:this.$emit(事件名,参数...);使用:@事件名
  • 还有一些第三方事件总线的库---pubsub.js  不常用

组件外部调用内部事件:通过ref获取dom对象,然后调用内部方法

组件外部向内部传递标签(插槽):

定义插槽: name做为标识

使用插槽:绑定表示的name

插槽插进去的div

全局样式写到哪里?

写全局样式xxx.css  然后在main文件内引入import './commom/xxx.css'

单页面应用如何保持页面数据状态?

vue是单页面应用,可以配置是否保持页面数据状态,当配置保持页面状态,vue的所有生命周期函数都不会触发,但是会触发另外两个函数

访问权限如何控制?

页面路由配置中配置meta,并在前置路由守卫中获取当前登录人角色id是否可以访问改页面,可访问就放行,不可访问就跳转到无权限页面。

混入mixin

就是抽取VueComponent选项的公共代码类似baseVueComponent效果,

全局混入:Vue.mixin({

            methods: { }, 

           data() { return { } },

 })

router路由

不传递参数跳转页面

 this.$router.push('/home'):会向 history 添加新记录,为回退做准备

 this.$router.replace("/home"):不会向 history 添加新记录,不能回退

传递参数跳转页面

params方式

传递写法:

this.$router.push({name:"home",params:{id:"123"}})

注意:name需要在路由中配置name选项

对方页面获取传递过来参数方式:

{{this.$route.params.id}}

query方式传递:

传递写法:

 this.$router.push({ path: '/home', query: { id: "123" }});

对方页面获取传递过来参数方式:

 {{this.$route.query.id}}

router 和****route区别:路由信息对象和当前路由信息对象。这两种传递方式的区别是:

query会追加到url后边,明文显示。

1.命名路由搭配params,刷新页面参数会丢失

2.查询参数搭配query,刷新页面数据不会丢失

路由守卫:学习地址1学习地址2

vuex

1.state :储存共享数据,必须显示声明属性(Vue 无法检测 property 的添加或移除。)

2.getter:  相当于store 的计算属性;语法: 属性名字(state){ return  state.数据}

3.修改数据:原则上必须在mutations里边修改。

4.Action 可以放置异步处理

基本使用:

state: {    //显示声明     address:""  },  mutations: {    //提供对外统一改变    setAddress(state, address) {      state.address = address    }  }

调用改变:this.$store.commit('setAddress',"郑州")

ui获取:{{$store.state.address}}

如果全部声明文件显得太臃肿:可以变相这样写:

 state: {    //声明成对象    obj:{}  },  mutations: {    setStateVal(state, obj) {      //https://cn.vuejs.org/v2/guide/reactivity.html#%E5%AF%B9%E4%BA%8E%E5%AF%B9%E8%B1%A1      state.obj = Object.assign({}, state.obj, obj)    }  }

调用改变:this.$store.commit('setStateVal',{address:"郑州"} )

ui获取:$store.state.obj.address

vuex有一个很大的问题:页面刷新,数据丢失。

解决方案:插件解决

他是单例模式,可以在你任何获取不到他的地方导入他并且是用

element-ui

 标签名字就是对应的class属性名字

js去修改css样式方式:

1.把css样式写成data变量,布局中动态引入变量方式。

2.定义scss变量,代码直接改变scss中定义变量的值。