一、环境
第一步,构建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. e m i t ( " 发 送 函 数 " , " 发 送 值 " ) ; 发 送 4 、 E m i t . emit("发送函数","发送值");发送 4、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';
复制模板
修改数据