项目环境配置
- 安装 node.js
- 淘宝镜像
- 【扩展】cnpm安装:npm install -g cnpm --registry= https://registry.npm.taobao.org
1. 项目环境配置
- 安装 vue-cli:npm install vue-cli -g(可以自动的构建项目结构和项目目录)
- 安装webpack:npm install webpack -g
- cd 到指定的项目路径中 并且初始化文件夹 npm init
- 创建项目:vue init webpack 项目名
- 切换到所创建的项目目录下:cd 你创建的项目文件夹
- 安装启动模块:npm install
- 启动项目:npm run dev
2. 项目目录结构分析
- 文件解释
- build 中配置了webpack的基本配置,开发环境配置、生产环境配置(不建议修改)
- config中配置了路径端口值等
3. 文件解释
- node_modules为依赖的模块
- src放置组件和入口文件
- static放置静态资源文件
- index.html文件入口
vue-cli操作
- 删除helloword.vue文件里面的template里面的内容,并且修改成自己的
- 必须要做的:把app.vue中的默认的图片删除,但是注意千万不要把router-view删除,并且把里面的style样式全部删除
单文件组件在使用父子组件的时候
- 先引用:在父组件中使用
import zi from './zi'
来进行引用,但是注意import后面的内容是给当前引用的组件起个名字,from要加./文件名,不加后缀
- 再调用:
components:{
zi
}
- 最后使用
组件传值
正向传值
- 在子组件中创建一个props
- 在父组件中调用子组件的位置传入参数
逆向传值
必须通过事件来触发
- 创建事件,并且调用事件自定义抛出
项目演示:
App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
*{
margin:0;
padding: 0;
}
html{
font-size:26.67vw;
}
</style>
HelloWorld.vue
<template>
<div>
<p>你好,么么哒</p>
<!-- 3.使用 -->
<!-- 正传2 在子组件被调用的时候传递父组件的数据 -->
<!-- 逆向传值3:在子组件被调用的位置进行自定义事件的接受 -->
<zi :ziprops="msg" @zipao="fufun"></zi>
</div>
</template>
<script>
//1.先引用
// import 给你引用的组件起个名字 from '你要引用的组件路径'
import zi from './zi'
export default {
name: 'HelloWorld',
data () {
return {
msg: '我是父组件的数据'
}
},
//2.调用
components:{
zi
},
// 逆向传值4:在父组件中接受子组件抛出的数据
methods:{
fufun(val){
this.msg=val
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
zi.vue
<template>
<div>
<!-- 逆向传值1:创建一个事件调用自定义事件抛出 -->
<p @click="fun()">我是子组件{{zitext}}-------{{ziprops}}</p>
</div>
</template>
<script>
export default {
data(){
return{
zitext:"你好么么哒"
}
},
// 正向传值1 在子组件中创建props等待接受外部传值
props:{
ziprops:{
type:String,
required:true
}
},
methods:{
fun(){
// 逆向传值2 :在事件中进行自定义事件抛出
this.$emit("zipao",this.zitext);
}
}
}
</script>
<style scoped>
p{
color:red;
}
</style>
vue可以用来干啥,前面学习了模板,组件,传参,路由等很多的知识,但是没有系统的将这些知识串起来,下面写个练手的demo,把之前学的东西串以下,加深知识
移动端页面练手demo:
HellowWorld.vue
<template>
<div class="con">
<div v-for="(v,i) in obj" :key="i">
<left :biaoti="v.title" :neirong="v.content"></left>
<right :urls="v.imgsrc"></right>
</div>
</div>
</template>
<script>
import left from './left';
import right from './right';
export default {
components:{
left,
right
},
data(){
return{
obj:[
{title:"新闻标题1",content:"我是内容111111--------我是内容111111我是内容111111",imgsrc:"../../static/5.jpg"},
{title:"新闻标题2",content:"我是内容222222--------我是内容222222我是内容222222",imgsrc:"../../static/6.jpg"},
{title:"新闻标题3",content:"我是内容333333--------我是内容333333我是内容333333",imgsrc:"../../static/7.jpg"},
{title:"新闻标题4",content:"我是内容444444--------我是内容444444我是内容444444",imgsrc:"../../static/8.jpg"},
{title:"新闻标题4",content:"我是内容555555--------我是内容555555我是内容555555",imgsrc:"../../static/9.jpg"}
]
}
}
}
</script>
<style scoped>
.con>div{
display: flex;
}
</style>
left.vue
<template>
<div>
<h1>{{biaoti}}</h1>
<p>{{neirong}}</p>
</div>
</template>
<script>
export default {
props:["biaoti","neirong"]
}
</script>
<style scoped>
h1{
font-size: 0.2rem;
}
p{
font-size:0.16rem;
}
</style>
right.vue
<template>
<div>
<img :src="urls">
</div>
</template>
<script>
export default {
props:["urls"]
}
</script>
<style scoped>
img{
width:1rem;
height:1rem;
}
</style>
App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
*{
margin:0;
padding: 0;
}
html{
font-size:26.67vw;
}
</style>
效果图:
那些自己给自己挖的坑
1. img标签的src
使用动态绑定img的时候发现并不能把图片正常绑定到视图中
{title:"新闻标题1",content:"我是内容111111-------------------------",imgsrc:"../assets/5.jpg"},
图片的引入路径是正确的,但是在运行后,却不能显示图片,也不提示报错
解决img标签的src动态绑定问题:
把图片方式到static中可以使用正常方式引用
{title:"新闻标题1",content:"我是内容111111--------我是内容111111我是内容111111",imgsrc:"../../static/5.jpg"},
2. v-for key的使用
<div v-for="(v,i) in obj">
<left :biaoti="v.title" :neirong="v.content"></left>
<right :urls="v.imgsrc"></right>
</div>
代码可以执行,但是一直报错
解决办法:
- 使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。
- key的作用主要是为了高效的更新虚拟DOM
<div v-for="(v,i) in obj" :key="i">
<left :biaoti="v.title" :neirong="v.content"></left>
<right :urls="v.imgsrc"></right>
</div>