vue 基础知识 随笔

window.localStorage.gettItem("someItem"||[])//如果localStorage中的someItem不存在就返回一个空数组

window.localStorage.setItem("someItem",someValue)//向localStrorage中存入一个便变量 someItem

const  ES6的规范   定义一个常量

export 相当于 model.export() 就是导出这个对象  

//导出的方法放在这里

export default{

　　save(){

　　　　//return sonmething;
　　}

//ES6d的语法，定义一个方法 相当于save:function(){//return sonmething;}   vue推荐使用save(){//return sonmething;}

}

//导入方法import

import store form './store'   ES6的语法  相当于  import store form './store.vue'

这样就可以使用store中的方法     store.someMethod 

 

watch

handler

deep

 

划分组件

功能模块：

select   pagenation

页面区域    header  footer    sidebar

Vuejs组件之间的调用------另外一个重要选项   components

import Header form './header'

只导入组件还是不能使用，需要组件注册

import Header form './header'

import Header form './myFirstComponent'

new Vue({

　　　　components:{

　　　　　　　　Header,myFirstComponent//组件注册  ，会后就可以在当前页面使用header组件了 tip:在html中vue会把驼峰写法改成小写加-的写法

　　　　　　}
});

使用：

<header></header>

<my-first-component></my-first-component>

Vuejs之间的通信   -----props   父组件向子组件传递c参数

自定义事件------子组件向父组件传递参数

子模板 componentA

<template>　　

　　<button v-on:click="doSthing">子组件</button>

</template>

exports default({

　　data:function(){

　　　　return{

　　　　　　ms："this is a componentA"

　　　　　　}

　　　　},

　　methods:{

　　　　props:['msg'],//接受从父组件传递过来的参数 msg

　　　　doSomething:function{

　　　　　　console.log(this.msg);

　　　　　　//触发自定义事件

　　　　　　this.$emit('childTellMeSomething',this.msg);

　　　　　　}

　　　　}

});

 父组件 调用子组件

import componentA from 'component' //假定父组件与子组件在同一级目录下

<h2>child tell me:{{childWords}}</h2>

<component-a v-model:msg="tell child something" v-on:childTellMeSomething='listenToMyboy'></component-a>//自定义事件接受子组件传递给父组件的信息    v-model:父组件传递数据给子组件

exports default({

　　data:function(){

　　　　　return{

　　　　　　　　childWords:''

　　　　　　}　

　　　　},

　　method:{

　　　　　　listenToMyboy:function(msg){

　　　　　　　//通过绑定的参数msg　

　　　　　　　　this.childWords =msg;

　　　　　　}

　　　　},

　　component:{componentA}//注册子组件，否则不能使用

});