vue学习笔记、

#vue学习笔记

从7月2日到7月4日三天的学习成果

• 一、Vue的起步、及配置环境
• 二、Vue六个基础指令
• 三、Vue组件与页面跳转
• 四、父组件向子组件传数据、子组件往父组件传数据
• 五、API调用
• 六、过程遇到的问题

---

##一、Vue的起步、及配置环境

1.先下载Node 、Git、TortoiseGit、Sublime Text3
2.在项目文件夹目录下右键 “Git Bash Here” 创建新项目
2、全局安装vue-cli npm install vue-cli -g
3、使用vue-cli快速搭建vue项目 vue init webpack xxx (xxx为项目名)(创建成功需要等待一段时间)
4、输入npm run dev编译项目，成功后根据提示或根据修改的端口号登陆 “lacalhost”
5.看到下图说明已经成功搭建项目了，详细可参考我师父的文章https://segmentfault.com/a/1190000012769961，内容更详细

##二、Vue六个基础指令
v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。

除此之外还有这些指令，具体参考https://cn.vuejs.org/v2/guide/index.html#起步
v-if指令
v-show指令
v-else指令
v-for指令：v-for=“item, index in list” :key=“index” //官方推荐写法(有些编辑器有要求，比如vs code )
v-bind指令
v-on指令

##三、Vue组件与页面跳转
组件介绍
组件是可复用的 Vue 实例，且带有一个名字：可以理解为自定义标签。我们可以把这个组件作为标签来使用
比如“弹窗界面”经常作为一个组件来使用

操作方法：
1.写一个vue组件
2.在src/router/index.js中注册vue组件

  {
      path: '/payConfirm',
      name: 'payConfirm',
      component: ()=>import('@/views/payConfirm.vue'),
  },

'@/views/payConfirm.vue'中@为绝对路径，直接定位到src路径下
3.在父组件中import并注册component

<script>
import payConfirm from '@/views/payConfirm.vue'
export default {
  components: {
    payConfirm,
  },
  data () {
    return {
    }
  },
}
</script>

4.在父组件直接使用自定义的标签<payConfirm></payConfirm>

页面跳转的话就在index.js里注册后再在需要的位置写上@click="$router.push({path: '/对应的虚拟路径path'})"

##四、父组件向子组件传数据、子组件往父组件传数据
先为两个组件注册为父子关系
先说子向父传
主要是使用$emit的方式1.在子组件方法内‘‘‘$emit(‘触发的动作’,{参数名:要传的参数值})```

2.在父组件的自定义标签(子组件)内
@触发的动作="需要对参数做的方法")
父组件methods里面
需要对参数做的方法(传进来的参数){}

具体实例
<div @click="$emit('pay',{emitName:this.name})"></div>

<payConfirm @pay="payOk"></payConfirm>

methods: {
    payOk(emitName){
      this.zone=emitName.name;
    }
  },

父向子传
主要是使用了父组件的v-bind和子组件的props
具体实例
父组件的自定义标签(子组件)
<payConfirm :propsname="向子组件传递的参数"></payConfirm>
子组件script代码，这里prosname可设置参数类型

export default{
props:{
    propsname
},
data(){
},
}
</script>```

##五、API调用
作者AJAX知识内容匮乏，需要补充学习
现先写已经封装成的API的使用方法
api.API方法名称().then(data=>{
console.log(data)
  }

##六、过程遇到的问题
需要在为一个div写上background-image样式时，传统方式url无法成功定位的问题
可行的方法:
```<div :style="{backgroundImage:'url(' + require('../assets/background.jpg') + ')',}"></div> ```