vue 前端1

es6常用语法:

变量的声明:

var 全局

let 局部

const 常量(不可复用)

函数:

function 命名(){

内容

}

箭头函数:let 命名 = 变量(需要传参) => 变量+1;

省略了function 以及函数名

省略return

继承上下文的this

this取决与函数的调用者

函数的最近的调用者当成this传递给函数

类:

class 名字{

constructor(){

this.变量 = '值'

}

方法名(参数){

方法}

}

let 实例化名 = new 命名()

class 命名2 extends 命名{

constructor(){

super()

}

}

模板字符串:`内容`,可以调用innertext innerhtml

数据解构:

let arry = [内容1,内容2]

let obj = {

name:'值'

sex:"值"

}

取值:

let [] = arry;

let{} = obj,

常见指令:

v-text="内容" x-html="内容"

data{

内容:'值'

内容:"值"

}

v-model(.lazy .trim .number) = '内容名'

data(内容名:"")

适用于:input select (optioin)  textarea

v-for ='内容 in 内容_list' {{内容}}

data:{内容_list:[]}

v-bind:(:)

:标签内的=内容

data:{内容:""}

v-on:(@)

@动作 = '起名'

methods{

起名:function(){

动作}

}

v-if="名==值"

v-else-if

v-else

data{名:值}

v-show:

v-show="show"

data{show:false|true}

methods{

动作:function(){

this.show = ! this.show

}}

自定义指令:

Vue.directive("名",function(el,binding){

let val = binding.value;取到值

let positons = binding.modifiers;

if (val){

for (let key in positons){

el.style.position='fixed'

el.style['key']=0;

}else{

el.style.position = 'static';

}}})

v-pin-left-bottom='名字'

计算属性:

data{

名:值

}

computed:{

sum_num:function(){

let total = this.名++++

return total

},

average:function(){

let ret=Math.round(this.值/3)

return ret

}

}

组件:

注册:

<名>

全局注册:

Vue.comonpent("名",{template:`标签加文本`})

实例化对象

 

局部对象:

let 名 = {template:`标签文本`}

实例化对象:

components:{<名>}

子组件的注册:

<parent>

let child={tempalte}

let  parent = {template":`文本加标签 <child>`,components:{child:child}}

实例化vue:components:{parent:parent}

父子通信:

<parent>

let chilld={template:``,props:['name']}

let parent = {template:`文本标签<child :name="username">`,components:child,data() {return{username:'值'}}}

实例化对象components:{parent:parent}

子父通信:

<parent>

let child = {template:`标签,button @click='名'`,methods:{名:function(){this.$emit('起名',this.起名的)}}使用$emit

data(){return{起名的:值}}

let parent= {teemplate:标签,child@父命名='父起名<{值}>'}

data(){return{user:,值:}}

methods:{

父起名:functon(data){this.值 = data}

}

对象vue:components:注册父组件

非父子通信:

<1><2>

let Event = new Vue():;

let 1 = {

template:`标签,事件`

methods:{事件名:function(){Event.$emit('起名',this.值)}}

data(){returen{值}}

}

let 2{

template`标签,值名`

mouted(){let that =this;Event.$on('起名',function(data){

that.值名 = data})}

data(){return 值:}

 

}

实例化vue:components1和2分别加入标签

Mixins:

<1><2>

let 1{公共的代码}

let 2{template:标签  mixins:[1]}

let 3{template:标签  mixins:[1]}

实例化vue:compents:{1,2}

插槽:vue中不能添加标签需要solt

div:solt = 名

<template id="1"> <solt name="名">

script:

let test ={template:'#1'}

实例化vue:components:{test:}