Vue.js学习随笔

一、vue.js的一个组件 *.vue 是由三部分组成的:
1、<template></template>
2、<script></script>
3、<style></style>
在打包时，会打包成传统的html、js和css文件，类似于SASS

二、vue.js组件化，
在HTML页面的js中，

import Head from './head.vue';
import Foot from './foot.vue';   //导入两个模板
new Vue({
	el:'',
	components:[Head,Foot],           //使用中括号
});

然后在页面中，分别导入Head和Foot

三、js的new Vue()中props属性，配置Vue组件之间的通信，主要用于父组件向子组件传递信息。
1、在父组件中，引用子组件

js中
import ChildPortlet from './components/childPortlet.vue';
export default{
	...
	components:{ChildPortlet},    //声明子组件，这里可以写多个，用逗号隔开
};
HTML中
<child-portlet messFromFather='you are die'></child-portlet>   //标签处替换为子组件的内容

2、在子组件

js中
export default{
	...
	props:['messFromFather'],    //若不在props中添加信息名，则子组件允许相应信息传递
};
HTML的元素中，可以通过v-text、v-html、{{...}}等方法显示信息。

四、js中new Vue();中有多个参数，如el(element的缩写)、data(绑定的数据)、methods(v-on绑定的方法)、watch(监听，可以监听data中的数据)、components(声明组件)、props(子组件允许父组件传入值)、events
在vue中使用 this.xx 可以修改data中的数据。

import PortletA from './portletA';
new Vue({
	components:{PortletA}
});
在HTML中
<portlet-a></portlet-a>    //驼峰变换为 '-'

五、子组件传值给父组件
1、使用$emit

父组件HTML部分
在导入子组件的标签中，添加自定义的方法
<child-portlet @messFromChild='getChildMess'></child-portlet>
js部分
export default{
	...
	data(){
		return{
			childMess:'',
		};
	},
	methods:{
		getChildMess:function(val){
			this.childMess=val;
		},
	},
};

子组件js部分

//HTML元素触发事件，进行传值，例如事件为ma
export default{
	...
	methods:{
		ma:function(){
			this.$emit('messFromChild','子组件中的值');    //第一个参数为自定义的方法名，第二个参数为要传递的值
		},
	},
};

2、使用$dispatch
vue2中已取消，不建议使用。

六、电脑中最好安装npm和git，npm是node.js的一个下载工具，但是npm下载时，下载速度可能会很慢，建议使用淘宝的定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
若安装报错，权限不足时，可以在指令最前面加sudo