Bangun dan berlari dengan rangka kerja Vue.js 2.0

Ingin belajar vue.js dari awal? SitePoint Premium menawarkan koleksi lengkap buku Vue yang meliputi asas, projek, tip dan alat, dan banyak lagi. Sertai sekarang hanya $ 14,99 sebulan.

Artikel ini telah dikemas kini, terutamanya dikemas kini bahagian alat.

Sejak pelepasan kerangka JavaScript yang popular Vue.js versi V2, saya tidak sabar untuk mencubanya dan melihat bagaimana rasanya. Sebagai seseorang yang sangat akrab dengan sudut dan bertindak balas, saya berharap dapat melihat persamaan dan perbezaan di antara mereka dan antara Vue.

Vue 2 mempunyai metrik prestasi yang sangat baik, beban yang agak kecil (versi Vue Runtime yang dibundel beratnya kira-kira 30KB selepas pemotongan dan pemampatan GZIP), dan pengurusan perpustakaan yang menyokong perpustakaan seperti Vue-Router dan VUEX, Perpustakaan Vue). Ia terlalu banyak untuk merangkumi segala-galanya dalam satu artikel, tetapi sila perhatikan artikel susulan dan kami akan melihat pelbagai perpustakaan yang sempurna diintegrasikan dengan kerangka teras dengan lebih berhati-hati.

mata utama

VUE.JS 2.0 memperkenalkan DOM maya yang diilhamkan React untuk membuat rendering yang cekap dan mengintegrasikan perpustakaan yang lebih baik seperti VUE-ROUTER dan VUEX untuk Pengurusan Negeri.
Komponen adalah asas Vue.js 2.0, di mana aplikasi dibina dalam satu siri komponen bersarang dan satu komponen fail (.vue) disyorkan untuk mengatur kod anda dengan lebih baik.
Menyediakan projek VUE dari awal memerlukan webpack dan vue-loader untuk memproses fail. Vue, dan Babel menggunakan keupayaan JavaScript moden untuk meningkatkan aliran kerja pembangunan.
Vue Devtools adalah penting untuk debugging, yang memberikan gambaran tentang keadaan aplikasi dan bagaimana data mengalir melalui komponen.
VUE.JS 2.0 memudahkan pembinaan bentuk interaktif dengan memanfaatkan model V untuk mengikat data bidirectional dan menggunakan V-ON untuk pemprosesan acara tersuai, sehingga menjadikan pengurusan negara lancar antara komponen.
Artikel ini menunjukkan membina aplikasi pengambilalihan statistik pengguna GitHub yang menggunakan sistem reaktif dan kitaran hayat Vue untuk mengurus dan memaparkan data dengan berkesan, dan menggambarkan penggunaan sebenar VUE.js dalam senario sebenar.

inspirasi dari perpustakaan lain

Semasa anda mempelajari tutorial ini, anda akan melihat bahawa Vue mempunyai banyak ciri yang jelas diilhamkan oleh rangka kerja lain. Ini adalah perkara yang baik; Khususnya, anda akan melihat bahawa templat Vue sangat dekat dengan templat Angular, tetapi pendekatan komponen dan komponen kitaran kitaran mereka lebih dekat dengan React (dan Angular).

Contoh sedemikian ialah, seperti React dan hampir semua kerangka dalam bidang JavaScript hari ini, Vue menggunakan konsep DOM maya untuk mengekalkan kecekapan rendering. Vue menggunakan cabang Snabbdom, salah satu perpustakaan DOM maya yang lebih popular. Laman web Vue mengandungi dokumentasi mengenai rendering dom maya, tetapi sebagai pengguna, anda hanya perlu tahu bahawa Vue sangat baik untuk menjaga kelajuan rendering (sebenarnya, dalam banyak kes, ia melakukan lebih baik daripada bertindak balas), yang bermaksud anda dapat yakin Bahawa anda platform yang boleh dipercayai sedang dibina.

Komponen, komponen, komponen

Seperti rangka kerja lain hari ini, blok bangunan teras Vue adalah komponen. Permohonan anda harus menjadi satu siri komponen yang dibina antara satu sama lain untuk menghasilkan permohonan akhir. Vue.js melangkah lebih jauh, mencadangkan (walaupun tidak wajib) bahawa anda menentukan komponen dalam fail .vue, dan kemudian alat binaan (yang akan kami sampaikan dalam masa yang singkat) dapat menghuraikan fail tersebut. Memandangkan tujuan artikel ini adalah untuk meneroka sepenuhnya Vue dan penggunaannya, saya akan menggunakan Konvensyen ini untuk aplikasi ini.

fail vue adalah seperti berikut:

<template>
  <p>This is my HTML for my component</p>
</template>

<🎜>

<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style>

atau, jika anda tidak suka meletakkan semua bahagian komponen dalam satu fail, anda boleh menyediakan setiap elemen dengan atribut SRC dan menunjuk kepada fail HTML, JS, atau CSS yang berasingan.

Projek Tetapan

Walaupun Vue CLI yang sangat baik menjadikannya mudah untuk menubuhkan projek penuh, saya suka bermula dari awal apabila bermula dengan perpustakaan baru supaya saya dapat mengetahui lebih lanjut mengenai alat ini.

Sekarang, Webpack adalah alat binaan pilihan saya, yang boleh kita gunakan bersempena dengan plugin Vue-Loader untuk menyokong format komponen Vue.js yang saya sebutkan tadi. Kami juga memerlukan pratetap Babel dan Env supaya kami dapat menulis semua kod menggunakan sintaks JavaScript moden, serta WebPack-Dev-Server, yang mengemas kini penyemak imbas apabila perubahan fail dikesan.

mari memulakan projek dan pasangkan kebergantungan:

mkdir vue2-demo-project
cd vue2-demo-project
npm init -y
npm i vue
npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev

kemudian buat folder awal dan fail:

mkdir src
touch webpack.config.js src/index.html src/index.js

Struktur projek harus seperti berikut:

<code>.
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js</code>

mari kita sediakan konfigurasi webpack sekarang. Ini beralih ke titik berikut:

• beritahu webpack untuk menggunakan vue-loader
untuk sebarang fail .vue
• beritahu webpack untuk menggunakan pratetap babel dan env untuk sebarang fail .js
• Beritahu Webpack untuk menggunakan src/index.html sebagai templat untuk menghasilkan fail HTML untuk dev-server untuk menyediakan perkhidmatan:

//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebPackPlugin({
      template: "./src/index.html"
    })
  ]
}

Akhirnya, kami akan menambah beberapa kandungan ke fail HTML dan kami boleh mulakan!

<!DOCTYPE html>
<html>
  <head>
    <title>My Vue App</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Kami mencipta div kosong dengan id aplikasi kerana ini adalah elemen yang akan kami letakkan aplikasi Vue. Saya lebih suka menggunakan Divs dan bukannya elemen badan, kerana ini memberi saya kawalan ke atas halaman yang lain.

Menulis aplikasi Vue.js pertama kami

Kami akan tetap berpegang pada setiap tutorial pengaturcaraan sebelumnya, menulis aplikasi Vue, dan meletakkan "Hello, World!"

setiap aplikasi VUE dibuat dengan mengimport perpustakaan dan kemudian meniru contoh VUE baru:

<template>
  <p>This is my HTML for my component</p>
</template>

<🎜>

<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style>

kami menyediakan Vue dengan elemen untuk diberikan ke halaman, jadi kami membuat aplikasi Vue! Kami lulus pemilih untuk memilih elemen yang kami mahu Vue menggantikan dengan aplikasi kami. Ini bermakna apabila Vue berjalan, ia akan mengambil aplikasi Div#yang kami buat dan menggantikannya dengan aplikasi kami.

Sebab kita menggunakan nama variabel VM adalah kerana ia mewakili "model paparan". Walaupun tidak dikaitkan dengan corak model model pandangan model (MVVM), VUE sebahagiannya diilhamkan olehnya, dan Konvensyen untuk menggunakan nama pembolehubah VM untuk mewakili aplikasi VUE telah digunakan hingga ke hari ini. Sudah tentu, anda boleh menamakan pembolehubah seperti yang anda suka!

Setakat ini, aplikasi kami tidak melakukan apa -apa, jadi mari buat komponen pertama kami, app.vue, yang sebenarnya akan memberikan sesuatu ke halaman.

Vue tidak menentukan struktur aplikasi, jadi terpulang kepada anda. Saya akhirnya membuat folder untuk setiap komponen, dalam aplikasi kes ini (saya suka huruf besar, yang bermaksud komponen), yang mengandungi tiga fail:

• index.vue
• script.js
• style.css

mkdir vue2-demo-project
cd vue2-demo-project
npm init -y
npm i vue
npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev

struktur fail sekarang kelihatan seperti ini:

mkdir src
touch webpack.config.js src/index.html src/index.js

App/Index.Vue mentakrifkan templat dan mengimport fail lain. Ini sesuai dengan struktur yang disyorkan dalam bahagian "Mengenai Pemisahan Kebimbangan" dokumentasi VUE.

<code>.
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js</code>

Saya suka menamakannya index.vue, tetapi anda mungkin juga mahu menamakannya app.vue untuk carian yang lebih mudah. Saya lebih suka mengimport apl/index.vue dalam kod saya dan bukannya app/app.vue, tetapi sekali lagi, anda mungkin tidak bersetuju, jadi jangan ragu untuk memilih nama anda dan pasukan anda seperti yang paling banyak.

Pada masa ini, templat kami hanya

hello, dunia!

, saya meninggalkan fail CSS kosong. Kerja utama dilakukan dalam skrip.js, yang kelihatan seperti ini:

//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebPackPlugin({
      template: "./src/index.html"
    })
  ]
}

berbuat demikian mencipta komponen yang akan kita namakan sebagai aplikasi, yang terutama untuk tujuan debugging, yang akan saya tutup kemudian, dan kemudian mentakrifkan data yang dimiliki oleh komponen dan bertanggungjawab. Pada masa ini, kami tidak mempunyai data, jadi kami dapat memberitahu Vue ini dengan mengembalikan objek kosong. Kemudian, kita akan melihat contoh komponen yang menggunakan data.

Sekarang kita boleh kembali ke src/index.js dan beritahu contoh Vue untuk menjadikan komponen aplikasi kami:

<!DOCTYPE html>
<html>
  <head>
    <title>My Vue App</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Pertama, kami mengimport komponen, dan percaya bahawa Webpack dan Vue-Loader akan bertanggungjawab untuk menghuraikannya. Kemudian kami mengisytiharkan komponen. Ini adalah langkah penting: Secara lalai, komponen VUE tidak tersedia secara global. Setiap komponen mesti mempunyai senarai semua komponen yang akan mereka gunakan, dan tag yang akan dipetakan. Dalam kes ini, kerana kami mendaftarkan komponen kami seperti ini:

import Vue from 'vue'

const vm = new Vue({
  el: '#app',
})

Ini bermakna bahawa dalam templat kami kami akan dapat menggunakan elemen aplikasi untuk merujuk komponen kami.

Akhirnya, kita menentukan fungsi render. Fungsi ini menggunakan panggilan penolong (biasanya dipanggil h) yang dapat mencipta unsur -unsur. Ia tidak begitu mirip dengan fungsi react.createelement yang digunakan oleh React. Dalam kes ini, kami menyediakannya dengan 'aplikasi' rentetan kerana komponen yang kami rendering didaftarkan sebagai mempunyai aplikasi tag.

Kebanyakan kes (dan dalam tutorial ini), kami tidak akan menggunakan fungsi render pada komponen lain, kerana kami akan menentukan templat HTML. Walau bagaimanapun, jika anda ingin mengetahui lebih lanjut, ia patut dibaca oleh Vue.js 'Panduan untuk membuat fungsi.

Selepas

Langkah terakhir adalah untuk membuat skrip NPM dalam pakej.json:

<template>
  <p>This is my HTML for my component</p>
</template>

<🎜>

<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style>

Sekarang, jalankan NPM Run Start. Penyemak imbas lalai anda harus dibuka di https://www.php.cn/link/03b0db8c971432a5e8d163897176a7cc

Cuba mengedit src/index.vue untuk menukar mesej kepada sesuatu yang lain. Jika semuanya berjalan lancar, Webpack-Dev-Server harus menyegarkan semula halaman untuk mencerminkan perubahan anda.

hebat! Kami berjalan menggunakan vue.js.

vue devtools

Sebelum kita menggali aplikasi Vue yang lebih kompleks, sudah tiba masanya untuk menyebutkan bahawa anda pasti perlu memasang Vue Devtools. Ini terletak di alat pemaju Chrome, memberikan anda cara yang baik untuk melihat permohonan anda dan semua sifat yang diluluskan, negara setiap komponen mempunyai, dan banyak lagi.

Bina aplikasi

Sebagai aplikasi sampel, kami akan menggunakan API GitHub untuk membina aplikasi, mari masukkan nama pengguna dan lihat beberapa statistik GitHub untuk pengguna itu. Saya memilih API GitHub di sini kerana ia biasa kepada kebanyakan orang, boleh digunakan tanpa pengesahan, dan ia memberikan kita banyak maklumat.

Sebelum memulakan aplikasi, saya ingin dengan cepat memikirkan komponen yang kami perlukan, saya rasa komponen aplikasi kami akan menjadikan dua komponen lain: githubinput, yang digunakan untuk menerima input dari pengguna, dan githuboutput, yang akan memaparkan pengguna maklumat skrin mengenai. Kami akan bermula dengan input.

NOTA: Anda boleh mencari semua kod di GitHub dan juga melihat aplikasi yang berjalan dalam talian.

Tetapan Awal

Buat folder untuk komponen githuboutput dan githubinput dalam direktori SRC:

mkdir vue2-demo-project
cd vue2-demo-project
npm init -y
npm i vue
npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev

Tambahkan fail yang diperlukan untuk setiap folder:

Struktur folder

mkdir src
touch webpack.config.js src/index.html src/index.js

src kini kelihatan seperti ini:

<code>.
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js</code>

Borang dalam vue.js

Mari kita mulakan dengan komponen GitHubinput. Seperti komponen aplikasi, fail index.vue harus mengandungi templat, serta skrip beban dan fail CSS. Pada masa ini, templat hanya mengandungi

GitHub Input

. Kami akan mengisinya dengan betul tidak lama lagi. Saya suka memasukkan beberapa html maya supaya saya dapat menyemak sama ada templat saya disambungkan dengan betul semasa membuat komponen baru:

<template>
  <p>This is my HTML for my component</p>
</template>

<🎜>

<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style>

Apa yang kita lakukan secara berbeza apabila membuat komponen ini membuat coretan data yang berkaitan dengan komponen. Ini sangat serupa dengan konsep keadaan React:

mkdir vue2-demo-project
cd vue2-demo-project
npm init -y
npm i vue
npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev

Ini bermakna komponen ini mempunyai sekeping data yang dimilikinya dan bertanggungjawab untuk, iaitu nama pengguna. Kami akan segera mengemas kini berdasarkan input pengguna.

Akhirnya, untuk meletakkan komponen ini pada skrin, saya perlu mendaftarkannya dengan komponen aplikasi kerana komponen aplikasi akan menjadikannya.

3

maka saya boleh mengemas kini templat komponen aplikasi:

mkdir src
touch webpack.config.js src/index.html src/index.js

satu batasan komponen VUE (seperti yang benar dalam sudut dan bertindak balas) adalah bahawa setiap komponen mesti mempunyai nod akar, jadi apabila komponen harus menjadikan pelbagai elemen, adalah penting untuk diingat untuk membungkus mereka semua, kebanyakannya Yang biasa adalah div.

<code>.
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js</code>

Borang trek Input

Komponen Githubinput kami perlu melakukan dua perkara:

menjejaki nilai semasa input

• menyampaikan bahawa nilai telah diubah supaya komponen lain dapat mengetahui dan mengemas kini status mereka sebagai hasilnya.
kita boleh melengkapkan versi pertama dengan membuat borang yang mengandungi elemen input. Kita boleh menggunakan arahan terbina dalam Vue untuk menjejaki nilai borang. Templat untuk GitHubinput adalah seperti berikut:

Anda akan melihat bahawa terdapat dua sifat penting: V-On dan V-Model.

//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebPackPlugin({
      template: "./src/index.html"
    })
  ]
}

v-on adalah bagaimana kita mengikat peristiwa DOM dan memanggil fungsi dalam VUE. Sebagai contoh,

Klik saya!

Setiap kali perenggan diklik, kaedah Foo komponen dipanggil. Jika anda ingin mengetahui lebih lanjut mengenai pengendalian acara, saya sangat mengesyorkan dokumentasi Vue mengenai pengendalian acara. V-Model mencipta data dua hala yang mengikat antara input dan data bentuk. Di sebalik tabir, V-Model sebenarnya mendengar peristiwa perubahan pada input borang dan mengemas kini data dalam komponen VUE untuk dipadankan.

Memandangkan templat kami di atas, inilah cara kami menggunakan V-On dan V-Model untuk memproses data dalam bentuk:

v-on: submit.prevent = "onsubmit" berjalan di atas apabila mengikat kaedah onsubmit untuk membentuk penyerahan. Dengan menambah .Prevent, ini bermakna bahawa VUE secara automatik akan menghalang tindakan lalai daripada berlaku. (Jika Vue tidak melakukan ini, kita boleh menghubungi Event.PreventDefault () dalam kod, tetapi kita juga boleh memanfaatkan fungsi Vue.)

V-Model: Nama pengguna mengikat nilai yang dimasukkan ke nama pengguna nilai dalam kod. Bagi mereka yang biasa dengan Angular, anda mungkin menyedari bahawa ini sangat mirip dengan model NG. Apabila kami membuat Githubinput, kami mengisytiharkan bahawa ia mempunyai sekeping nama pengguna data, di mana kami mengikat data tersebut ke medan input. Kedua -duanya secara automatik akan tetap disegerakkan.
• Sekarang, kembali ke JavaScript komponen kami, kami dapat mengisytiharkan kaedah onSubmit. Perhatikan bahawa nama di sini benar -benar sewenang -wenangnya - anda boleh memilih apa -apa nama di Will - tetapi saya suka berpegang pada konvensyen menggunakan fungsi yang dinamakan mengikut peristiwa yang akan mencetuskan peristiwa:

<template>
  <p>This is my HTML for my component</p>
</template>

<🎜>

<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style>

kita boleh merujuk secara langsung data mengenai ini, jadi ini.UserName akan memberikan nilai terkini kotak teks. Jika ia tidak kosong, kami mahu komponen lain mengetahui bahawa data telah berubah. Untuk melakukan ini, kami akan menggunakan bas mesej. Ini adalah objek yang komponen boleh mengeluarkan peristiwa dan digunakan untuk mendengar acara lain. Apabila permohonan anda semakin besar, anda mungkin ingin mempertimbangkan pendekatan yang lebih berstruktur, seperti Vuex. Pada masa ini, bas mesej boleh melakukan ini.

Berita baik ialah kita boleh menggunakan contoh Vue kosong sebagai bas mesej. Untuk melakukan ini, kami akan membuat src/bus.js, yang hanya mencipta contoh Vue dan mengeksportnya:

mkdir vue2-demo-project
cd vue2-demo-project
npm init -y
npm i vue
npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev

Dalam komponen Githubinput, kita boleh mengimport modul dan menggunakannya dengan mengeluarkan peristiwa apabila nama pengguna berubah:

mkdir src
touch webpack.config.js src/index.html src/index.js

Dengan cara ini, borang kami selesai dan kami boleh mula melakukan sesuatu dengan data yang dihasilkan.

tunjukkan hasil dari github

Komponen Githuboutput mempunyai struktur yang sama dengan dua komponen kami yang lain. Dalam githuboutput/script.js kami juga mengimport modul bas kerana kami memerlukannya untuk mengetahui apabila nama pengguna berubah. Data komponen ini akan bertanggungjawab untuk menjadi objek yang memetakan nama pengguna GitHub kepada data yang kami dapat dari API GitHub. Ini bermakna kita tidak perlu membuat permintaan kepada API setiap kali; Kami juga akan menyimpan nama pengguna terakhir yang kami terima supaya kami tahu data yang dipaparkan pada skrin:

<code>.
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js</code>

Apabila membuat komponen, kami ingin mendengar sebarang acara nama baru yang dipancarkan di bas mesej. Syukurlah, Vue menyokong banyak cangkuk kitaran hayat, termasuk dicipta. Kerana kita adalah pemaju yang bertanggungjawab, kita juga akan berhenti mendengar peristiwa menggunakan acara yang dimusnahkan ketika pemusnahan komponen:

//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebPackPlugin({
      template: "./src/index.html"
    })
  ]
}

maka kita menentukan kaedah Onusernamechange, yang akan dipanggil dan menetapkan harta CurrentUserName:

<!DOCTYPE html>
<html>
  <head>
    <title>My Vue App</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Perhatikan bahawa kita tidak perlu mengikat kaedah OnusernameChange secara jelas ke skop semasa. Apabila anda menentukan kaedah pada komponen VUE, VUE secara automatik memanggil myMethod.bind (ini) kepadanya, jadi mereka sentiasa terikat kepada komponen. Ini adalah salah satu sebab mengapa anda perlu menentukan kaedah untuk komponen pada objek kaedah supaya Vue dapat memahami sepenuhnya dan menetapkannya dengan sewajarnya.

rendering bersyarat

Jika kita tidak mempunyai nama pengguna - kita tidak akan memilikinya apabila komponen pertama kali dibuat - kita mahu menunjukkan mesej kepada pengguna. VUE mempunyai banyak teknik rendering bersyarat, tetapi yang paling mudah adalah arahan V-IF, yang menerima syarat dan menjadikan unsur-unsur hanya jika keadaan wujud. Ia juga berfungsi dengan V-ELSE:

import Vue from 'vue'

const vm = new Vue({
  el: '#app',
})

Sekali lagi, ini sangat biasa dengan mana -mana pemaju sudut. Kami menggunakan tanda ganda dan bukannya tanda tiga di sini, kerana kami mahu keadaan ini benar bukan sahaja apabila currentuserName adalah batal, tetapi juga apabila currentuserName tidak ditentukan, dan null == undefined adalah benar.

Dapatkan data dari github

vue.js tidak datang dengan perpustakaan HTTP sendiri, dan itu untuk alasan yang baik. Hari ini, API Fetch disertakan secara asli dalam banyak pelayar (walaupun pada masa penulisan, kecuali IE11, Safari, atau IOS Safari). Demi tutorial ini, saya tidak akan menggunakan polyfill, tetapi jika anda memerlukannya, anda boleh dengan mudah menambah polyfill untuk API dalam penyemak imbas anda. Jika anda tidak menyukai API Fetch, terdapat banyak perpustakaan pihak ketiga untuk HTTP, dan yang disebutkan dalam dokumentasi VUE adalah AXIOS.

Saya sangat menyokong rangka kerja seperti Vue yang tidak termasuk perpustakaan HTTP. Ia mengurangkan saiz bundle rangka kerja dan membolehkan pemaju memilih perpustakaan yang paling sesuai dengan mereka, dan mudah menyesuaikan permintaan yang diperlukan untuk berkomunikasi dengan API mereka. Saya akan berpegang dengan API Fetch dalam artikel ini, tetapi anda boleh berasa bebas untuk menggantikannya dengan mana -mana perpustakaan yang anda suka.

Jika anda perlu tahu mengenai API Fetch, lihat siaran di Ludovico Fischer di SitePoint, yang akan membuat anda bermula dengan cepat.

Untuk membuat permintaan HTTP, kami akan menyediakan komponen dengan kaedah lain Fetchgithubdata, yang membuat permintaan kepada API GitHub dan menyimpan hasilnya. Ia juga akan memeriksa terlebih dahulu jika kita sudah mempunyai data untuk pengguna ini, dan jika tidak, tidak ada permintaan yang akan dibuat:

<template>
  <p>This is my HTML for my component</p>
</template>

<🎜>

<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style>

maka kita hanya perlu mencetuskan kaedah ini apabila nama pengguna berubah:

mkdir vue2-demo-project
cd vue2-demo-project
npm init -y
npm i vue
npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev

Satu lagi perkara yang perlu diperhatikan ialah sejak VUE menjejaki data yang anda gunakan, ia tahu bila untuk mengemas kini paparan. Terdapat panduan reaktif yang hebat yang menerangkannya secara terperinci, tetapi pada dasarnya Vue tidak dapat mengetahui secara ajaib apabila anda telah menambah atau menghapuskan sifat dari objek, jadi jika kita lakukan:

mkdir src
touch webpack.config.js src/index.html src/index.js

Vue tidak akan mengenali ini dan tidak akan mengemas kini pandangan kami. Sebaliknya, kita boleh menggunakan kaedah khas Vue.Set, yang secara eksplisit memberitahu Vue bahawa kita telah menambah kunci. Kod di atas akan kelihatan seperti ini:

<code>.
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js</code>

Kod ini akan mengubah suai ini.githubdata, menambah kunci dan nilai yang kami lalui. Ia juga memberitahu vue perubahan supaya ia dapat direkrut.

sekarang kod kami kelihatan seperti ini:

//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebPackPlugin({
      template: "./src/index.html"
    })
  ]
}

Akhir sekali, kita perlu mendaftarkan komponen Githuboutput menggunakan komponen aplikasi:

<!DOCTYPE html>
<html>
  <head>
    <title>My Vue App</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

dan masukkannya dalam templat:

import Vue from 'vue'

const vm = new Vue({
  el: '#app',
})

Walaupun kami belum menulis kod paparan untuk memaparkan data yang diambil pada skrin, anda harus dapat mengisi borang dengan nama pengguna anda dan kemudian periksa Vue DevTools untuk melihat data yang diminta dari GitHub. Ini menunjukkan betapa praktikal dan berkuasa devtools ini;

Tunjukkan beberapa statistik dalam pandangan

kita kini boleh mengemas kini templat untuk memaparkan beberapa data. Mari bungkus kod ini dalam arahan v-jika lain supaya kami akan memberikan data hanya selepas permintaan selesai:

mkdir src/App
touch src/App/{index.vue,script.js,style.css}

Dengan cara ini, kita kini boleh memberikan butiran GitHub ke skrin dan aplikasi kami selesai!

refactor

kita pasti dapat membuat beberapa penambahbaikan. Kod HTML yang menjadikan data GitHub di atas hanya memerlukan sebahagian kecil daripada data pengguna semasa. Ini adalah kes yang sempurna untuk komponen lain, kami dapat menyediakan data pengguna kepadanya, ia boleh menjadikannya.

mari kita buat komponen githubuserdata dengan struktur yang sama dengan komponen lain kami:

<template>
  <p>This is my HTML for my component</p>
</template>

<🎜>

<style scoped>
  /* CSS here
   * by including `scoped`, we ensure that all CSS
   * is scoped to this component!
   */
</style>

Terdapat hanya satu perbezaan kecil dalam komponen ini: ia akan mendapat data harta, yang akan menjadi data pengguna. Ciri -ciri (atau "prop") adalah bit data yang komponen akan dilalui oleh komponen induknya, dan mereka berkelakuan sangat sama di Vue untuk bertindak balas. Di Vue, anda perlu mengisytiharkan setiap harta yang diperlukan komponen, jadi di sini saya akan mengatakan bahawa komponen kami akan mendapat data harta:

mkdir vue2-demo-project
cd vue2-demo-project
npm init -y
npm i vue
npm i webpack webpack-cli @babel/core @babel/preset-env babel-loader vue-loader vue-template-compiler webpack-dev-server html-webpack-plugin --save-dev

Perkara yang saya suka tentang Vue adalah bahawa anda harus sangat jelas; Ini menjadikan kod lebih mudah digunakan, dan saya percaya bahawa sebagai projek menjadi lebih besar dan lebih kompleks, lebih mudah untuk dikekalkan.

Dalam templat baru, kita mempunyai HTML yang sama seperti dahulu, walaupun kita boleh merujuk kepada data dan bukannya GitHubdata [CurrentUserName]:

mkdir src
touch webpack.config.js src/index.html src/index.js

Untuk menggunakan komponen ini, kita perlu mengemas kini komponen githuboutput. Pertama, kami mengimport dan mendaftar GitHubuserData:

<code>.
├── package.json
├── package-lock.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js</code>

Anda boleh menggunakan sebarang nama apabila mengisytiharkan komponen, jadi di mana saya meletakkan data github-user anda boleh meletakkan nama apa sahaja yang anda inginkan. Adalah disyorkan bahawa anda berpegang pada komponen yang mengandungi sengkang. VUE tidak menguatkuasakan ini, tetapi spesifikasi W3C untuk unsur -unsur tersuai menyatakan bahawa mereka mesti mengandungi sengkang untuk mengelakkan konflik nama lif dengan unsur -unsur yang ditambah dalam versi HTML yang akan datang.

Selepas mengisytiharkan komponen, kita boleh menggunakannya dalam templat:

//webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebPackPlugin = require("html-webpack-plugin")

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebPackPlugin({
      template: "./src/index.html"
    })
  ]
}

Titik penting di sini adalah bagaimana saya lulus atribut data ke komponen:

<!DOCTYPE html>
<html>
  <head>
    <title>My Vue App</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Kolon pada permulaan harta ini adalah penting; Vue akan menilai nilai githubdata [CurrentUserName] dan memastikan bahawa komponen GitHubuserData kekal terkini apabila data berubah.

Jika anda dapati: Data sedikit pendek dan ajaib, anda juga boleh menggunakan sintaks V-bind yang lebih lama:

import Vue from 'vue'

const vm = new Vue({
  el: '#app',
})

Kedua -duanya bersamaan, jadi sila gunakan mana -mana pilihan anda.

Kesimpulan

Dengan cara ini, aplikasi GitHub kami berada dalam keadaan yang cukup baik! Anda boleh mencari semua kod di GitHub dan juga melihat aplikasi yang berjalan dalam talian.

Saya mempunyai harapan yang tinggi untuk Vue apabila saya mula menggunakannya kerana saya telah mendengar banyak perkara yang baik dan saya gembira untuk mengatakan ia memenuhi jangkaan saya. Menggunakan Vue terasa seperti mengambil bahagian yang terbaik dari React dan menggabungkannya dengan bahagian terbaik sudut. Beberapa arahan (seperti V-IF, V-else, V-Model, dan lain-lain) sangat mudah dimulakan (dan lebih mudah difahami dengan segera daripada penghakiman bersyarat dalam sintaks JSX React), tetapi sistem komponen Vue terasa sangat mirip dengan React .

Anda harus memecahkan sistem ke dalam komponen kecil, dan secara keseluruhan, saya dapati ia menjadi pengalaman yang sangat lancar. Saya tidak dapat memberi pujian yang cukup kepada dokumentasi pasukan Vue: ia benar -benar hebat. Panduan ini sangat baik, rujukan API adalah komprehensif, dan mudah untuk menavigasi untuk mencari perkara yang tepat yang anda inginkan.

Jika anda suka siaran ini dan ingin mengetahui lebih lanjut, titik permulaan yang terbaik pastinya laman web rasmi Vue.js.

soalan yang sering ditanya mengenai Vue.js 2.0

Apakah perbezaan utama antara vue.js 1.0 dan vue.js 2.0?

vue.js 2.0 mempunyai beberapa penambahbaikan berbanding pendahulunya. Perubahan yang paling penting ialah pengenalan DOM maya, yang meningkatkan prestasi dengan mengurangkan operasi langsung pada DOM sebenar. Vue.js 2.0 juga memperkenalkan sintaks pembangunan berasaskan komponen yang mudah untuk menjadikan antara muka pengguna kompleks bangunan lebih mudah. Di samping itu, VUE.JS 2.0 menyokong rendering sisi pelayan, yang meningkatkan prestasi aplikasi anda dan menjadikannya lebih mudah untuk mengoptimumkan SEO.

Bagaimana menggunakan pemerhati dalam vue.js 2.0?

Observer dalam Vue.js 2.0 membolehkan anda melaksanakan logik tersuai apabila sifat data berubah. Untuk menggunakan Observer, anda perlu menentukan fungsi dengan nama yang sama dengan atribut data yang anda ingin perhatikan dan menambahkannya ke objek "Watch" dalam contoh Vue. Kaedah ini dipanggil apabila perubahan atribut data dan nilai -nilai baru dan lama diambil sebagai parameter.

Apakah pemuatan segera dalam vue.js dan bagaimana saya boleh menggunakannya?

Pemuatan kecemasan adalah konsep dalam vue.js yang membolehkan anda memuatkan data dari pelayan sebelum anda memerlukannya, dengan itu meningkatkan prestasi aplikasi anda. Untuk menggunakan beban segera dalam vue.js, anda boleh menggunakan cangkuk kitaran hayat "dicipta" untuk mendapatkan data dari pelayan apabila komponen dibuat. Data ini kemudiannya akan disediakan sebaik sahaja komponen diberikan.

Bagaimana menggunakan sifat yang dikira dalam Vue.js 2.0?

Ciri -ciri yang dikira dalam Vue.js 2.0 membolehkan anda menentukan sifat yang boleh diguna semula yang dikira berdasarkan data anda. Untuk menggunakan sifat yang dikira, anda perlu menentukan kaedah yang mengembalikan nilai yang dikira dan menambahkannya ke objek yang dikira dalam contoh VUE. Kaedah ini dipanggil apabila sebarang atribut data ia bergantung kepada perubahan, dan nilai pulangannya di -cache sehingga pergantungan berubah lagi.

Bagaimana menangani peristiwa dalam vue.js 2.0?

vue.js 2.0 menyediakan sistem pengendalian acara yang kuat yang membolehkan anda mendengar peristiwa DOM dan menjalankan logik tersuai apabila peristiwa berlaku. Untuk mengendalikan peristiwa, anda perlu menggunakan arahan "V-On" dalam templat, diikuti dengan nama acara yang akan didengar dan kaedah untuk dijalankan apabila peristiwa berlaku. Kaedah ini akan dipanggil menggunakan objek acara sebagai parameternya.

bagaimana menggunakan vue.js 2.0 dengan laravel?

vue.js 2.0 boleh diintegrasikan dengan mudah dengan Laravel, kerangka PHP yang popular. Laravel datang dengan sokongan vue.js, jadi anda boleh mula membina komponen vue.js dengan segera. Untuk menggunakan vue.js dalam projek Laravel, anda perlu memasukkan skrip Vue.js dalam HTML dan kemudian menentukan komponen VUE dalam fail JavaScript yang berasingan.

Bagaimana menggunakan Vue.js 2.0 dengan webpack?

Webpack adalah modul modul yang boleh digunakan untuk membungkus komponen Vue.js ke dalam satu fail JavaScript. Untuk menggunakan vue.js dengan webpack, anda perlu memasang pakej "Vue-Loader", yang membolehkan Webpack memahami komponen Vue. Anda kemudian boleh mengimport komponen VUE dalam fail JavaScript anda dan menggunakannya seperti biasa.

bagaimana menggunakan vue.js 2.0 dengan typescript?

vue.js 2.0 Menyokong TypeScript, superset javascript yang ditaip secara statik. Untuk menggunakan vue.js dengan TypeScript, anda perlu memasang pakej "Vue-Class-Component", yang membolehkan anda menentukan komponen VUE menggunakan kelas Typescript. Anda kemudian boleh menentukan komponen VUE sebagai kelas TypeScript dan menggunakan fungsi yang ditaip statik TypeScript untuk menangkap kesilapan pada masa penyusunan.

Bagaimana menggunakan Vue.js 2.0 dengan VUEX?

VUEX adalah perpustakaan pengurusan negeri untuk vue.js yang membolehkan anda menguruskan keadaan permohonan anda dalam storan terpusat. Untuk menggunakan VUEX dengan VUE.JS, anda perlu memasang pakej "VUEX" dan kemudian menentukan status, mutasi, tindakan, dan getters anda dalam penyimpanan VUEX. Anda kemudian boleh menggunakan harta "ini.

Bagaimana menggunakan Vue.js 2.0 dengan Vue Router?

Vue Router adalah perpustakaan penghalaan untuk vue.js yang membolehkan anda menentukan laluan untuk permohonan anda. Untuk menggunakan Vue Router dengan Vue.js, anda perlu memasang pakej "Vue-Router" dan kemudian menentukan laluan anda dalam contoh Vue Router. Anda kemudian boleh menggunakan komponen "Router-Link" untuk menavigasi antara laluan dan menggunakan komponen "Router-View" untuk memaparkan komponen yang sedang diarahkan.

Atas ialah kandungan terperinci Bangun dan berlari dengan rangka kerja Vue.js 2.0. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!