1-1. Vue.js核心知識之實例簡介

時間 2019-12-06

原文原文鏈接

Vue.js是什麼

Vue.js是一套用於構建用戶界面的漸進式框架。Vue.js的核心庫只關注視圖層，易於上手，便於與第三方庫或既有項目整合。Vue.js與現代化的工具鏈以及各類支持類庫結合使用時，可以爲複雜的單頁應用提供驅動。html

使用準備

建立一個demo.html文件，並引入vue.jsvue

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue</title>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
開始學習使用vue.js了
</body>
</html>

模板渲染

Vue.js 的核心是一個容許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統：npm

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue</title>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
 {{ message }}
</div>
<srcipt>
 var app = new Vue({
  el: '#app',
  data: {
   message: 'Hello Vue!'
  }
 })
</srcipt>
</body>
</html>

表單綁定

咱們能夠用 v-model 指令在表單 <input> 及 <textarea> 元素上建立雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。app

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue</title>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
 <!-- 你輸入到input框中的內容會實時顯示到p標籤中 -->
 <input v-model="message">
 <p>你輸入的內容是: {{ message }}</p>
</div>
<srcipt>
 var app = new Vue({
   el: '#app',
   data: {
     message: ''
   }
 })
</srcipt>
</body>
</html>

事件處理

Vue中能夠用 v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼。框架

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue</title>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
 <button v-on:click="say('嗨')">彈出'嗨'</button>
</div>
<script>
 new Vue({
  el: 'app',
  methods: {
   say: function (message) {
    alert(message)
   }
  }
 })
</script>
</body>
</html>

組件化

組件 (Component) 是 Vue.js 最強大的功能之一。組件能夠擴展 HTML 元素，封裝可重用的代碼。工具

<!--全局註冊-->
<template>
 <div id="app">
   <my-component></my-component>
 </div>
</template>

<script>
 // 全局註冊組件
 Vue.component('my-component', {
   template: '<div>個人組件</div>'
 })

 // 建立根實例
 new Vue({
   el: '#app'
 })
</script>

<!--渲染後的HTML-->
<div id="app">
 <div>個人組件</div>
</div>