Vue 컴포넌트를 사용하는 방법

이번에는 Vue 컴포넌트 사용법과 Vue 컴포넌트 사용 시 주의사항에 대해 알려드리겠습니다. 다음은 실제 사례입니다.

Vue 인스턴스

프로젝트 시작 프로세스

현재 프로젝트를 보고 전체 프로젝트의 시작 프로세스를 생각해 보세요. (설명을 위해 index.html을 직접 여는 방법을 예로 들어보겠습니다.)

처음 index.html을 열었는데, 거기에 id='root'라고 적힌 p가 하나만 있었고, 패키징된 코드를 도입했는데, Vue가 자체적으로 실행했을 겁니다(Vue 초기화라고 볼 수 있습니다).

다음으로, Entry.js를 실행해야 합니다. (패키징은 webpack으로 패키징하기 때문에 설정한 entry 파일입니다.)

entry.js의 기능은 무엇입니까? 예, Vue 인스턴스 객체를 생성합니다. 그런 다음 이 객체가 관리하는 영역은 index.html에서 id='root'인 p여야 합니다. 나머지는 이 Vue 인스턴스 객체가 이 영역을 어떻게 관리하는지 이해하면 됩니다.

Vue 인스턴스 객체란 무엇입니까?

공식 문서에 따르면 모든 Vue 애플리케이션은 Vue 기능을 사용하여 새로운 Vue 인스턴스를 생성하는 것으로 시작됩니다.

평범한 물건이라고 간단하게 이해하실 수 있지만, 이 물건에는 몇 가지 특별한 기능이 부여되어 있습니다.

【entry.js에서 생성된 Vue 객체에 대해 모두 실험을 진행하겠습니다】

Vue 인스턴스 객체를 생성하는 방법은 다음과 같습니다.

var vm=new Vue({
  //一堆配置
});

그래서 다음으로 이야기할 것은 일반적으로 사용되는 몇 가지 구성( 모두, 앞으로는 더 특별한 것들이 언급되어야 하는데, 결국 그것은 모두 처음부터의 일이기 때문에 서로의 마음이 너무 지칠까 두렵습니다.)

Vue 인스턴스 객체의 기본 구성

【1】el: selector | DOM node

우리 프로젝트에서는 다음을 구성합니다.

el:'#root'

이것은 CSS와 약간 유사한 문자열입니다. selector, 발견된 노드를 관리 영역으로 사용합니다(물론 다른 CSS 선택기도 있습니다).

또한 노드를 직접 전달할 수도 있습니다. 예를 들어 이제 코드를 수정해 보겠습니다.

el: document.getElementById('root')

이것도 가능합니다. 시도해 볼 수 있습니다.

【2】render:(createElement:()=>VNode)=>VNode

위는 ES6 화살표 함수 작성 방법입니다. 예:

((x,y)=>x+y)(1,2)

위 ES6 작성 방법은 다음 ES5와 동일합니다. 작성 방법:

(function(x,y){
  return x+y;
})(1,2);

간단히 말하면: (x,y)=>x+y는 두 개의 매개변수 x와 y를 사용하여 x+y를 반환하는 함수를 의미합니다. 따라서 ES5에서 작성된 위 함수는 다음과 같습니다.

function(createElement){
  //createElement是一个函数，返回类型为VNode
  //这个函数的返回类型也应该是VNode
  return VNode;
}

참고: VNode는 Vue 컴파일에 의해 생성된 가상 노드입니다. Jquery 노드와 Node 노드는 매우 유사합니다.

그래서 프로젝트에서 렌더를 살짝 바꿔봤습니다.

render: function (createElement) {
  return createElement(App);
}

아주 명확하지 않나요? 직설적으로 말하면 최종 반환 값이 VNode인 함수입니다.

그래서 node라는 단어를 보면 왜 페이지에 앱에 템플릿이 표시되는지 이해할 수 있고 라우팅을 조정하는 방법과 .vue 파일이 구성되는 이유도 이해할 수 있습니다.

【3】라우터: VueRouter

이것은 이해하기 쉽습니다. 즉, 어떤 라우팅 구성이 사용되는지 알 수 있습니다. 프로젝트는 다음과 같습니다.

router:router

이상해 보이지만 약간 수정해 보겠습니다.

//上面的import routerObj from './router';这一句要跟着修改一下
router: routerObj

기본은 다음과 같습니다. 여기서는 3개만 있고 그 외의 속성은 여러 가지와 연관되어 있으므로 차근차근 설명하겠습니다.

Vue ObjectLife Cycle

공식 사진은 포함하지 않겠습니다. 별 의미가 없을 것 같아서 일단 시작하신 후에 확인해 보시길 권합니다. 나중에 글에서 다루겠습니다.

먼저 Entry.js의 코드를 수정하고 실행 결과를 확인해 보겠습니다. 코드는 다음과 같습니다.

//根对象
var vm = new Vue({
  //挂载点
  el: document.getElementById('root'),
  //2.使用刚刚的路由配置
  router: routerObj,
  //启动组件
  render: function (createElement) {
    return createElement(App);
  },
  //下面是Vue对象的几种状态
  beforeCreate: function () {
    console.debug('Vue对象目前状态：beforeCreate');
  },
  created: function () {
    console.debug('Vue对象目前状态：created');
  },
  beforeMount: function () {
    console.debug('Vue对象目前状态：beforeMount');
  },
  mounted: function () {
    console.debug('Vue对象目前状态：mounted');
  },
  beforeUpdate: function () {
    console.debug('Vue对象目前状态：beforeUpdate');
  },
  updated: function () {
    console.debug('Vue对象目前状态：updated');
  },
  beforeDestroy: function () {
    console.debug('Vue对象目前状态：beforeDestroy');
  },
  destroyed: function () {
    console.debug('Vue对象目前状态：destroyed');
  }
});

실행하고 콘솔을 확인하세요.

즉, Vue 객체는 생성되기 전부터 최종적으로 종료될 때까지 각 단계에서 상태가 변경될 때 후크 메서드를 제공합니다. 특정 상태가 변경될 때 작업을 수행하려는 경우 등록할 수 있습니다.

到这里，基本上Vue对象实例应该比较清楚了吧？看看我们的代码，应该只有那几个.vue的文件里面的东西没有说清楚了（本文就是把前面写过的代码都说清楚，后面就可以一个新知识点接着一个的来丰富项目，因为都没有疑惑了，学习起来应该不会痛苦了吧！）。

Vue组件实例

说明

Vue组件的定义方法不是只有我们之前写的建立.vue文件那一种，比如你还可以通过Vue.component()的方法来创建，不过这些都以后吧，我们这里就只说明.vue文件这一种（不喜欢一下子说太多，而且仔细想想，不就是API吗）。

【下面都是在PageTwo.vue里面进行修改，菜单名称修改为:Vue组件实例】

.vue文件的基本模板如下（下面都会是ES5的写法，本人还是不太喜欢ES6或者TS，原谅我，反正本质一样）：

<template>
  
</template>
<script>
export default {
 //一些配置，和前面说的Vue实例类似
}
</script>
<style>
</style>

三个地方，分工明确：模板 + 控制 + 样式

接下来我们说明配置中常用的选项（很多具体的就留到后面一点点品位，好吧，留的有点多）：

常用配置
【1】data

先看看PageTwo.vue现在的代码：

<template>
  <section>
    <input type="text" v-model="justDoIt">
    <p>
      输入的数据：{{justDoIt}}
    </p>
  </section>
</template>
<script>
export default {
 //一些配置
 data() {
  return {
   justDoIt: "初始化数据"
  };
 }
};
</script>
<style>
</style>

模板中的代码应该不用说了吧，前面一篇文章说的很清楚了，直接看看data。

其返回了一个键值对（还有别的写法，推荐你这样写，因为这里如果"初始化数据"这几个字是变量，这种写法形成了闭包，是安全的），在这里就是给当前组件对象是data里面添加了一个justDoIt的数据，然后上面或者别的地方才可以用，他就是干了这事情。

【2】methods

接着，我们添加一下methods属性：

methods: {
  doIt() {
   alert(this.justDoIt);
  }
}

其实methods和data类似，只不过是用来添加的不是数据，而是方法，因此，你现在可以在模板里面添加下面代码来调用这个方法（记住，添加的全部代码必须由一个标签包裹）：

<input type="button" value="DoIt" v-on:click="doIt()">

v-on:click就是类似原生的onClick，不过因为是vue的方法，你应该用他的。

现在，你可以点击一下页面的按钮试一下，是不是很舒服。

【3】watch

这个属性是专门用来注册监听前面data里面注册的值改变的时候触发的方法集合，比如你添加下面的代码：

watch: {
  justDoIt: function(newval, oldval) {
   console.log("justDoIt改变了，新值为：" + newval + ",旧值为：" + oldval);
  }
 }

如何你运行一下，打开控制台，修改输入框的值的时候，是不是控制台时刻打印了这句话。

【4】computed

这个叫做计算属性，前面一篇文章说过了，不清楚的看看PageOne.vue，应该可以明白。

简单的说就是，它用到的data里面的值改变的时候，自己会重新计算。

生命周期
和Vue对象一样，也有类似的生命周期钩子，你可以试试，这里就随便提一下。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

如何使用Vue实现PopupWindow组件

如何操作jQuery实现电子时钟效果

위 내용은 Vue 컴포넌트를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!