(二)最简单的vue教程,开发自己的电影网站:生命周期、数据绑定、组件传值,组件引用介绍

avatar

这一节我们来了解一个vue的基本用法

生命周期

这是一张在官网上找的图,很清晰的显示了vue的组件生命周期

我们就记住一个生命周期就可以了 mounted() 这个生命周期会在组件加载完成后被调用,所以我们的网络请求就可以写在这里面

数据绑定

知道生命周期了,现在要了解一下vue里请求接口拿到的数据怎么显示在页面上

在一个vue组件里,都会有一个 data 对象,这个对象就是跟页面上的数据同步的,也就是官方文档上说的 双向绑定,拿刚创建好的项目里的 HelloWorld.vue 修改一下来说明

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data: {
    msg: String
  }
};
</script>

可以看到有个 data 对象,上面 tempalte 里用了 {{}} 来取这个值,当将data里的数据更改后,页面上展示的数据也会更新

组件间传值

组件间是通过props来接收前一个组件传过来的值的,如下

App.vue

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  components: {
    HelloWorld
  }
}
</script>

这里<HelloWorld msg="Welcome to Your Vue.js App"/>引用了 HelloWorld.vue组件,而且给子组件传了个变量为 msg 的值

再来看看 HelloWorld.vue 里怎么接收的

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    msg: String
  }
};
</script>

可以看到 HelloWorld.vue 里通过 props 关键字把 msg 的数据接收过来了

引用组件

vue里引用组件很简单,直接通过 import 关键字将要引用的组件引到当前组件里

然后在 components 对象里注册一下就可以在 template 里用了,可以看下 App.vue

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  components: {
    HelloWorld
  }
}
</script>
目前还没有回答,快来帮帮TA吧!
添加一条评论 请尽量发布对他人有帮助的评论

登录后可发布评论

登录 | Github登录