社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
构建项目的文件夹 里面的文件都是配置当前项目构建的一些信息 ;例如:热更新,项目实时更新
做项目配置的文件夹 比如 启动的地址 不要localhost 端口8080改成其他,都可以在这里面改
就是我们cnpm/npm install 下载的所有模块
这个就是我们今后写代码主要的文件夹
src文件夹里面的东西:
静态资源文件夹:音频 视频 图片等一些静态资源,和打包有关。
存放所有 组件 .vue 文件的文件夹
存放路由配置的文件夹
是默认自带的 入口欢迎页的组件
vue程序的入口文件 vue项目从这里开始加载
一个存放静态文件资源的文件夹 (打包时 并不会一起打包的文件夹)
比如: html css js文件(不算静态文件) 都可以存放到这
单页面应用 一个唯一的html, 欢迎页的文件;
main.js是程序入口,由main.js去加载index.html,index.html是辅助。
所有依赖的记录的配置文件
默认从main.js
开始加载,然后把当前的组件都承载到index.html
里,index.html
里只有一个div#app(一片html代码)
,从main.js
程序进入,el挂载到"#app"上面,router,
路由,components:{App}
组件,App是当前vue的局部组件,App局部组件不是在main.js文件的components{}中 new的, App是一个对象,是通过 import 对象 from component文件路径
引入的。
import
语句时es6
推出的 可以让一个js文件去直接引入另一个js文件;import 对象 from "js文件路径"
;export default {}对象
这样导出对外暴露;
import Vue form 'vue'
引入当前vue模块,引入进来的是一个构造函数,对应的Vue模块肯定有这么一句话 export default function (){},那么"vue’这个路径在哪?import Vue form 'vue'
没有./开头的就是默认去node_modulnoes文件夹
里面找对应模块。如果node_modulnoes文件夹
里面没找到就报错import route form './router'
./默认打开当前文件夹下面的文件夹,没有文件后缀名默认打开文件夹中的index.js文件
import Vue form './App'
Vue
的$options
里面的template
功能如果Vue
没有定义template
属性 那么按照el
挂载的目标样式去加载
如果Vue
定义了template
属性 那么会把挂载目标本身全部替换成template
模板页面
.vue
文件的方式创建组件如果不是欢迎页的组件那么就要创建到components
文件夹里面(潜规则).vue
组件文件的文件名最好是大驼峰(潜规则)
.vue
文件包含三个标签:template
标签 负责定义当前组件的 页面模板script
标签 负责定义当前组件的事件和数据 export default { data(){}, methods:{}}style
标签 负责定义当前组件的样式
new Vue({
el: '#app',
/*template:"<h1>我是vue自己的template属性</h1>"
data:{msg:"我是vue数据"}
components:{
App:{
template:"<h1>我是aaa局部组件</h1>"
}
},
template:"<App/>"*/
// 原来渲染组件的方式
components:{
/*Hello:{} 这个大括号就是组件对象
但是现在我们的组件是在vue文件里面定义的
而且这个组件对象通过 import语句引入进来了
所以只需要把Hello:{} 后面的这个大括号换成 import引入进来的那个组件对象即可
Hello:{}*/
/*键表示组件标签名 值是组件对象 原来是大括号新创建的
现在是 通过 import语句引入的
Hello:Hello*/
//es6新写法 如果括号对象的属性名和属性值一模一样 则写一份即可
Hello,Demo
}
})
组件的.vue
文件编写成功后需要在其他地方通过 import
语句引入进行加载
import 组件对象名 from "组件的路径/文件名.vue"
后缀名.vue可以省略不写 如果是./开头 当前文件所在的文件夹出发
组件的template标签里面 最外层必须是一个单独的标签 不能是直接的两个或者两个以上标签,也就是说 至少有一个标签是作为父元素的。
什么是子组件? 就是在当前组件下面再定义引入其他组件
那么当前引入的组件就是子组件 当前组件就是父组件
在当前父组件的script标签第一行 通过 import语句引入子组件对象
在当前 组件 的 export default{}里面定义 components属性
然后在 components属性里面注册子组件
子组件还可以继续引入子组件,一个父组件可以有多个子组件
当前组件如果是被另一个组件引入 并使用了 那么当前组件就是那个组件子组件
就是组件可以进行动态的切换更改,需要使用 component标签
<component is="组件的标签名"></component>
标签名是哪个组件 最后就渲染哪个组件
// main.js
import Vue from 'vue'
import Hello from "./Hello"
new Vue({
el: '#app',
components: {Hello},
template:"<Hello/>"
})
// Hello.vue
<template>
<div>
<ul class="nav">
<li @click="show('Home')">首页</li><li @click="show('Detail')">详情页</li><li @click="show('User')">个人中心</li>
</ul>
<div id="content">
<component :is="componentName"></component>
</div>
</div>
</template>
<script>
import Detail from "./components/Detail";
import Home from "./components/Home";
import User from "./components/User";
export default {
components:{Detail,Home,User},
data(){
return {componentName:"Home"}
},
methods:{
show(item){this.componentName=item;}
}
}
</script>
<style>
ul.nav{list-style: none;width: 600px;margin: 50px auto;height: 50px;}
ul.nav>li{float: left;width: 150px;text-align: center;height: 50px;line-height: 50px;background-color: hotpink;cursor: pointer;color: white;margin:0 20px;}
#content{width: 600px;margin: 0 auto;}
</style>
//Detail.vue
<template>
<div id="detail">
<h1>我是详情页的内容</h1>
<ul>
<li>详情页内容1</li><li>详情页内容2</li><li>详情页内容3</li>
</ul>
</div>
</template>
<script>
export default {name: "Detail"}
</script>
<style scoped></style>
// Home.vue
<template>
<div id="home">
<h1>我是首页的内容</h1>
<ul>
<li>首页内容1</li><li>首页内容2</li><li>首页内容3</li>
</ul>
</div>
</template>
<script>
export default {name: "Home"}
</script>
<style scoped></style>
// User.vue
<template>
<div id="user">
<h1>我是个人中心页的内容</h1>
<ul>
<li>个人中心页内容1</li><li>个人中心页内容2</li><li>个人中心页内容3</li>
</ul>
</div>
</template>
<script>
export default {name: "User"}
</script><style scoped>
</style>
我们使用组件标签时 如果组件标签里面写了其他内容
最后渲染出来以后 该内容并不存在
也就是组件在渲染时 默认会把 组件标签里面的内容覆盖掉 无法渲染
那么如果我们要是想保留这个内容呢?
需要用到slot插槽标签
在当前组件的template里面 定义 slot标签
那么以后有人使用当前组件标签时 如果标签内部写了内容
渲染完以后 自动把这个内容放到我们定义slot标签的那个位置
这就是slot插槽
slot还可以保留指定内容slot标签定义name属性
指定一个名字
外部传入内容时 在标签上面定义 slto=“这个名字”
那么定义 slot="这个名字"
的标签就会被保留下来
其他内容就不会被保留
//Hello.vue
<template>
<div id="hello">
<h1>我是Hello组件</h1>
<Child>
<!-- <span slot="myleft">哈哈</span>
<span slot="myright">嘿嘿</span> -->
<span slot="title">我是对话框标题</span>
<div slot="myleft">左边</div>
<div id="box" slot="myright"></div>
</Child>
</div>
</template>
<script>
import Child from "./components/Child";
export default {
name: "Hello",
components:{Child,}
}
</script>
<style scoped>
#box{width: 100px;height: 100px;background-color: hotpink;}
</style>
//Child.vue
<template>
<div id="child">
<p>
<slot name="title"></slot>
</p>
<h2>我是child组件</h2>
<!--<slot></slot>-->
<div class="left">
<slot name="myleft"></slot>
</div>
<div class="right">
<slot name="myright"></slot>
</div>
</div>
</template>
<script>
export default {
name: "Child"
}
</script>
<style >
#child{
height: 200px;width: 400px;border: 1px solid #e4393c;background-color: #fff;
}
.left{float: left;}
.right{float: right;}
</style>
v-bind
指令随便绑定一个属性名子组件有接收方式 第一种:
在子组件的 export default {}
里面通过pros属性
来接收
格式:
props:["子组件标签绑定的那个自定义属性名","如果父组件传入多个就写多个元素"]
这个props数组里面接收的字符串元素 就是父组件传过来的变量数据
直接当做当前子组件data的一个变量使用即可
子组件有接收方式 第二种:
在子组件的 export default {}
里面通过pros属性
来接收
格式:
props:{
那个绑定的属性名: 这个属性值的类型名(类型名必须是大写的 并且类型不能乱写)
那个绑定的属性名1: 这个属性值的类型名(类型名必须是大写的 并且类型不能乱写)
}
父组件给子组件传参是单向数据绑定还是双向数据绑定?
单向数据绑定, 父组件数据发生改变时 会再次传给子组件,
子组件也能接受到新数据响应,但是子组件把传过来的数据更改时 直接报错。父组件也不会响应!!!
//Parent.vue 相当于父组件
<template>
<div id="parent">
<h1>我是父组件的标题-----{{parent_msg}}----{{parent_num}}</h1>
<ul>
<li>父组件列表1</li><li>父组件列表2</li><li>父组件列表3</li>
</ul>
<input type="text" v-model="parent_msg">
<Child :parentData="parent_msg" :parentData1="parent_num"></Child>
</div>
</template>
<script>
import Child from "./Child";
export default {
components:{Child,},
data(){
return {
parent_msg:"我是父组件数据",
parent_num:15
}
}
}
</script>
<style scoped>
#parent{border: 1px solid #e4393c;}
</style>
//Child.vue 相当于子组件
<template>
<div id="child">
<h2>我是子组件标题----{{child_msg}}</h2>
<h2>我来渲染父组件数据-----{{parentData}}---{{parentData1}}</h2>
<ol>
<li>我是子组件列表1</li><li>我是子组件列表2</li><li>我是子组件列表3</li>
</ol>
<input type="text" v-model="parentData">
</div>
</template>
<script>
export default {
// props:["parentData","parentData1"],
props:{
parentData:String,
parentData1:Number
},
data(){
return{child_msg:"我是子组件数据"}
},
mounted(){}
}
</script>
<style scoped>
#child{border: 1px solid blue;}
</style>
//main.js
import Vue from 'vue'
import Hello from "./Hello";
new Vue({
el: '#app',
components:{
Hello,
},
template:"<Hello/>"
})
//Hellow.vue
<template>
<div id="hello">
<h1>我是默认首页</h1>
<parent></parent>
</div>
</template>
<script>
import Parent from "./components/Parent";
export default {
components:{Parent,}
}
</script>
<style scoped></style>
子组件给父组件传参必须借助一个js事件
this.$emit()方法
this.$emit("自己随便写一个(自定义)事件名",给父组件传的参数1,参数2...)
$emit方法
的第二个参数开始的值,$emit()
从第二个参数开始传了几个参数 那么这个父组件的驱动函数就定义几个形参接收。//Child.vue
<template>
<div id="child">
<h2 @click="show">我是子组件标题----{{child_msg}}</h2>
<ol>
<li>我是子组件列表1</li>
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!