vue学习笔记

一、环境
第一步，构建webpack打包工具

vue init webpack-simple vuedemo

第二步：安装依赖

cnpm install

第三步：运行程序

cnpm run dev

二、组件传值

子父组件传值

导入组件、挂载组件、注册组件

1、父组件给子组件传递属性和方法：

props:{
        'title':String
 }
props:['title']

传方法，mothed:this.function();
2、父组件如何使用子组件里面的方法和属性
ref(获取虚拟dom节点)通过虚拟dom节点获取整个子组件对象

let homelist=this.$refs.homedata;

3、子组件怎么获取父组件整个对象

:parent="this"
	console.log(this.parent.isshow);
    console.log(this.$parent);

非父组件传值
使用全局广播，不建议使用子父传值
1、建立外部js

import Vue from 'vue';
let emit=new Vue();
export default emit;

2、在俩个组件导入广播

3、Emit.$emit("发送函数","发送值");发送4、Emit.$on(“同上函数”，“箭头函数”);监听

sendtoList(){
              //触发广播
         Emit.$emit("tolsitdata",this.msg);    
}
	
Emit.$on("tolsitdata",(res)=>{
            this.giveme=res
}); 

三、路由的配置和路由的传参
路由的跳转即路劲的跳转，路由根据地址后面的路径，
第一步：安装路由

cnpm install vue-router --save

第二步：新建路由文件配置路由，模板化封装
1、先导入路由：

import VueRouter from 'vue-router';

2、使用路由：

Vue.vue(VueRouter);

3、配置路由：

const routes=[
	{
		path:"/",
		components:""
	},{
		path:"/",
		components:""
	}
]

4、实例化路由

const router=new vueRouter({
    routes:routes
})

5、导出路由

export default router;

第三步：在main.js中导入路由的模板化

import router from './Router/Router.js'

第四步：在App.vue中加入路由的入口点出口点

<router-link to="/">home</router-link>//解析完是a链接
<router-view></router-view>

路由传值
固定传值：路由入口里面可以固定传值get，取值用this.$route.params

<router-link to="/Lists/1">Lists</router-link>

动态传值：es6模板语法，切记将to改为动态绑定,取值用this.$route.query

<router-link :to="{path:'/News',query:{uid:10}}">News</router-link>
<router-link :to="{name:'haha',params:{uid:10}}">News</router-link>

路由编程式导航：通过js跳转路由
直接跳转this.$router.push()

this.$router.push({
	path:""，
	params:{id:1}或者query:{id:1}
})

路由的嵌套
1、在路径中配置children来配置子路由
不加/，直接写路径

$nextTick()
等待dom更新之后

三、vue中的mint UI移动端 ELementUI中PC端的库

1、安装mint-ui

cnpm install mint-ui --save

2、导入mint-ui；

import Mint from 'mint-ui'

Vue.use(Mint);

3、导入css文件

import 'mint-ui/lib/style.css';

复制模板
修改数据