vue入門

NotFound 發布于2019-08-20 19:02 / 2428人閱讀

摘要：基本信息是框架讀音，類似于是一套構建用戶界面的漸進式框架。我們現在可以進一步為我們的組件實現更復雜的模板和邏輯的改進，而不會影響到父單元。

基本信息

vue是mvvm框架  (model view viewmodel)    Vue.js（讀音 /vju?/，類似于 view） 是一套構建用戶界面的漸進式框架。

model 視圖/模板
view 模型/數據
viewmodel 視圖模型
model與view通過viewModel之間相互檢測

起步

你可以在瀏覽器新標簽頁中打開它，跟著例子學習一些基礎用法。或者你也可以創建一個 .html 文件，然后通過如下方式引入 Vue：

//開發版本
//生產版本

聲明式渲染

Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式的將數據渲染進 DOM：

{{msg}} 
//輸出Hello Vue!

學習vue更多的是學習指令和組件

指令(directives)是帶有 v- 前綴的特殊屬性。

v-model 在input中

能輕松實現表單輸入和應用狀態之間的雙向綁定

![
  {{ msg }}

v-if 條件

控制切換一個元素的顯示也相當簡單：


  現在你看到我了

var app= new Vue({
  el: "#app",
  data: {
    seen: true
  }
})  //輸出：現在你看到我了

v-for 循環

可以綁定數組的數據來渲染一個項目列表：


  
    
      {{ todo.text }}
    
  

var app = new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "學習 JavaScript" },
      { text: "學習 Vue" },
      { text: "整個牛項目" }
    ]
  }
})

v-on 處理用戶輸入

為了讓用戶和你的應用進行互動，我們可以用 v-on 指令綁定一個事件監聽器，通過它調用我們 Vue 實例中定義的方法：


  {{ message }}
  

var app = new Vue({
  el: "#app",
  data: {
    message: "Hello Vue.js!"
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split("").reverse().join("")
    }
  }
})

組件化應用構建

組件系統是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通常可復用的組件構建大型應用。  
在 Vue 里，一個組件本質上是一個擁有預定義選項的一個 Vue 實例，在 Vue 中注冊組件很簡單：

// 定義名為 todo-item 的新組件
Vue.component("todo-item", {
  template: "這是個待辦項"
})

現在你可以用它構建另一個組件模板：

但是這樣會為每個待辦項渲染同樣的文本，這看起來并不炫酷，我們應該能將數據從父作用域傳到子組件。讓我們來修改一下組件的定義，使之能夠接受一個屬性：

Vue.component("todo-item", {
  // todo-item 組件現在接受一個
  // "prop"，類似于一個自定義屬性
  // 這個屬性名為 todo。
  props: ["todo"],
  template: "{{ todo.text }}"
})

現在，我們可以使用 v-bind 指令將 todo 傳到每一個重復的組件中：

這只是一個假設的例子，但是我們已經設法將應用分割成了兩個更小的單元，子單元通過 props 接口實現了與父單元很好的解耦。我們現在可以進一步為我們的 todo-item 組件實現更復雜的模板和邏輯的改進，而不會影響到父單元。

云服務器 GPU云服務器 vue入門教程 Vue_Vue Vue vue3 學習筆記 (五)——vue3

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85063.html

vue.js快速入門

摘要：但是，今天我要寫一個快速入門，本人覺得還是有一點用處，因為，我不可能在一天之內精通某種東西，卻可以在一兩小時入門。不知道還要不要再來一個快速入門，發展得挺快，東西也像類似的全家。以前看到多少天學習系列，我都深感煩躁，短短幾天怎么可以精通，那是對于他們而言。但是，今天我要寫一個快速入門，本人覺得還是有一點用處，因為，我不可能在一天之內精通某種東西，卻可以在一兩小時入門。回到vue本身...

MkkHou 2019-08-20 10:45 評論0 收藏0
Vue.js資源分享

摘要：中文官網英文官網組織發出一個問題之后，不要暫時的離開電腦，如果沒有把握先不要提問。珍惜每一次提問，感恩每一次反饋，每個人工作還是業余之外抽出的時間有限，充分準備好應有的資源之后再發問，有利于問題能夠高效質量地得到解決。 Vue.js資源分享更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/maid...

vpants 2019-08-20 14:21 評論0 收藏0
基于 Vue2+Node+mongoDB 的前后端分離全棧練手小項目

摘要：本文源碼簡介之前剛入門并做好了一個簡而全的純全家桶的項目，數據都是本地模擬請求的詳情請移步這里為了真正做到數據庫的真實存取，于是又開始入門了并以此來為之前的頁面寫后臺數據接口。本文源碼：Github 簡介：之前剛入門vue并做好了一個簡而全的純vue2全家桶的項目，數據都是本地 json 模擬請求的；詳情請移步這里：vue-proj-demo 為了真正做到數據庫的真實存取，于是又...

jay_tian 2019-06-26 17:20 評論0 收藏0
vue框架入門和ES6介紹

摘要：框架入門和介紹模式，是一種輕量級的前端框架，主要為模板渲染，數據同步，組件化，模塊化，路由等。作者簡介達叔，理工男，簡書作者全棧工程師，感性理性兼備的寫作者，個人獨立開發者，我相信你也可以閱讀他的文章，會上癮，幫你成為更好的自己。 vue框架入門和ES6介紹 vue-mvvm模式，vue是一種輕量級的前端框架，主要為模板渲染，數據同步，組件化，模塊化，路由等。 https://cn.vu...

ChanceWong 2019-04-23 11:47 評論0 收藏0
Java學習路線總結，搬磚工逆襲Java架構師（全網最強）

摘要：哪吒社區技能樹打卡打卡貼函數式接口簡介領域優質創作者哪吒公眾號作者架構師奮斗者掃描主頁左側二維碼，加入群聊，一起學習一起進步歡迎點贊收藏留言前情提要無意間聽到領導們的談話，現在公司的現狀是碼農太多，但能獨立帶隊的人太少，簡而言之，不缺干 ? 哪吒社區Java技能樹打卡?【打卡貼 day2...

Scorpion 2021-11-18 10:02 評論0 收藏0
vue簡單入門（一）vue是什么，為什么我們要學vue？

摘要：是什么為什么我們要使用說到了，我們就不得不先聊一下是什么以及為什么我們要使用，他能給我們的開發帶來什么樣的便利呢首先，我們來看一下的自我介紹讀音，類似于是一套用于構建用戶界面的漸進式框架。作為一個剛入行不久的菜鳥不知從什么時候開始就有了寫一個自己的專欄的想法，剛好今天沒事就給自己挖一個坑，分享一下我對vue的見解和一些領悟，整個專欄應該會包括vue，vue-cli，vue-route...

Lucky_Boy 2019-08-22 18:34 評論0 收藏0