父组件向子组件传值
1 传值
2 传变量
举例
<body>
<h1>父组件向子组件传值</h1>
<p>send代表发送</p>
<div id="app">
<h2>传值</h2>
<child1 send="red"></child1>
<h2>传变量</h2>
<child1 :send="color"></child1>
</div>
<script type="text/javascript" src="js/vue.min.js"></script>
<script>
//生子
let child1 = {
data() {
return {
str1: "小样酸扣糖"
}
},
props: {
//接收父组件传的值,变量名为send
send: {
type: String,
default: 'yellow' //默认值
}
},
//:class变量
template: '<div :class="send">[第一个子组件]{{str1}}</div>'
}
new Vue({
el: "#app",
data: {
color: 'blue'
},
components: {
child1
}
})
</script>
</body>
子组件向父组件传值
1、子组件触发@click事件
2、向父组件传值,调用的方法中:this.$emit('自定义事件名称',传值);
3、父组件接收传值 <child @end="play">
play(x){x就是传过来的值}
<body>
<h1>子组件向父组件传值</h1>
<p>send代表发送</p>
<div id="app">
<div>
父组件的数据{{msg}}
</div>
<child1 @end="play"></child1>
</div>
<script type="text/javascript" src="js/vue.min.js"></script>
<script>
//生子
let child1 = {
data() {
return {
str1: "小样酸扣糖"
}
},
methods: {
send() {
//定义发送的数据名称和他的值,父组件用@数据名称接收,然后调用方法,实现所接收数据的操作
this.$emit('end', this.str1);
}
},
//:class变量
template: '<div @click="send">[第一个子组件]{{str1}}</div>'
}
new Vue({
el: "#app",
data: {
msg: 'hello,,'
},
methods: {
play(x) {
//x为接收的值
this.msg += x;
}
},
components: {
child1
}
})
</script>
</body>
子组件之间传值(了解)
子向公共父,公共父再向子
<body>
<h1>子组件向子组件传值</h1>
<p>send代表发送</p>
<div id="app">
<child1></child1>
<child2></child2>
</div>
<script type="text/javascript" src="js/vue.min.js"></script>
<script>
let bus = new Vue(); //公共父级
//生子
let child1 = {
data() {
return {
str1: "张三"
}
},
methods: {
send() {
alert("第一个子组件发送数据");
bus.$emit("msg", "hello,我是" + this.str1);
}
},
template: '<div @click="send">[第一个子组件]{{str1}}</div>'
}
let child2 = {
data() {
return {
str2: "李四"
}
},
template: '<div>[第二个子组件]{{str2}}</div>',
created() {
/*let that = this;
bus.$on("msg",function(x){
alert(that.str2+"接收到的数据:"+x);)
}*/
//使用es6的箭头函数
bus.$on("msg", (x) => {
alert(this.str2 + "接收到的数据:" + x);
})
}
}
new Vue({
el: "#app",
methods: {
play(x) {
//x为接收的值
this.msg += x;
}
},
components: {
//挂子
child1,
child2
}
})
</script>
</body>
vue路由
1、引入vue-router.js库
2、创建子组件
3、将路由加载到vue中
4、实例化路由 let router = new VueRouter({
5、配置路由规范
routes:[{
path:'/login',
component:login//component没有s
}]
})
6、挂路由
new Vue{ router }
7、使用路由
<router-link to="">相当于<a href="">
<router-view>用于显示
<body>
<div id="app">
<router-link to="/menu1">菜单1</router-link>
<router-link to="/menu2">菜单2</router-link>
<router-view></router-view>
</div>
<script type="text/javascript" src="js/vue.min.js"></script>
<!--1、引入vue-router.js库-->
<script type="text/javascript" src="js/vue-router.js"></script>
<script>
//2、子组件
let menu1 = {
template: "<div>我是菜单1</div>"
}
let menu2 = {
template: "<div>我是菜单2</div>"
}
//实例化路由
let router = new VueRouter({
routes: [{
path: "/menu1",
component: menu1
},
{
path: "/menu2",
component: menu2
}
]
})
//实例化Vue
//挂路由
new Vue({
el: "#app",
router
})
</script>
</body>
路由范式(简单传值)
1、query对象
http://localhost:8080/login?username=zhangsan&password=123456
let menu1 = {
template: "<div>我是菜单1{{this.$route.query.username}}</div>"
}
2、params对象
http://localhost:8080/login/username/zhangsan
routes: [{
path: "/menu1/:username",
component: menu1
},
{
path: "/menu2/:username",
component: menu2
}
]
let menu2 = {
template: "<div>我是菜单2{{this.$route.params.username}}</div>"
}
Vue 项目搭建
之前配过两个路径,其中一个指定了全局安装路径,另一个是缓存吧!
npm config set prefix "E:\cry\huanjing\nodejs\node_global"
npm config set cache "E:\cry\huanjing\nodejs\node_cache"
全局安装会在E:\cry\huanjing\nodejs\node_global路径下
一定要配好环境变量,修改了路径,也需要重新检查一下path如果没有就加上
1、安装node
2、npm install vue
npm install vue-router
npm install vue-cli
3、有一个记录的文本(package.json),npm install
4、npm init 会创建package.json文件,回车再回车
5、npm install jquery 最新版本
npm install jquery@1.12.4 指定版本
6、npm install vue --save 就会记录
7、npm install 会读取package.json文件,就会安装所有记录的组件
8、架设vue项目
8.1安装vue脚手架vue-cli npm install -g vue-cli
8.2vue init webpack mydemo 回车
名称、描述、作者、vue创建用什么编译(第一个)、
vue-router、语法检查(no非常严格)、单元测试、
另一个测试、npm选项 回车。下载时间会有点儿长。
8.3 进入mydemo文件夹 npm run dev 启动, 访问localhost:8080