Vue コンポーネントの使用方法-jsチュートリアル-php.cn

今回は、Vue コンポーネントの使い方と、Vue コンポーネントを使用する際の注意事項について説明します。以下は実際のケースです。見てみましょう。

Vue インスタンス

プロジェクトの起動プロセス

現在のプロジェクトを見て、プロジェクト全体の起動プロセスについて考えてみましょう (説明する例として、index.html を直接開く方法を取り上げます)。

まず、index.html を開いて、id='root' が書かれた p が 1 つだけあり、パッケージ化されたコードを導入した後、Vue がそれを単独で実行したはずです (これは Vue の初期化と考えることができます)。

次に、entry.js を実行する必要があります (パッケージ化は webpack によってパッケージ化されているため、これが設定した

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ノード

今回のプロジェクトでは、次のように設定します:

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 は 2 つのパラメータ x と y を持ち、x+y を返す関数を意味します。したがって、ES5 で書かれた上記の関数は次のようになります:

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

ログイン後にコピー

注: VNode は Vue のコンパイルによって生成される仮想ノードです。Jquery ノードと Node ノードは非常に似ています。

それで、プロジェクト内のレンダリングを少し変更しました:

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

ログイン後にコピー

非常に明確ではありませんか? 単刀直入に言うと、これは最終的な戻り値が VNode である関数です。

したがって、「ノード」という 2 つの単語を見れば、ページがアプリでテンプレートを表示する理由を理解できるはずです。また、ルーティングを調整する方法と .vue ファイルが構成されている理由も理解できるはずです。

【3】ルーター: VueRouter

これは理解しやすいです。つまり、どのようなルーティング設定が使用されているかがわかります。プロジェクトは次のとおりです:

router:router

ログイン後にコピー

奇妙に見えるので、少し変更しましょう:

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

ログイン後にコピー

基本は次のとおりです。ここでは 3 つしかありませんが、他の属性は多くのことに関係しますので、少しずつ説明します。

Vue Object

Life 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中文网其它相关文章！