• vue的源代碼下載——開發版本和生產版本
• https://cn.vuejs.org/js/vue.js
• https://cn.vuejs.org/js/vue.min.js
• vue中文學習官網
• https://cn.vuejs.org/v2/guide/

vue學習入門

• • 1. 什么是vue.js
  • 2. vue的要學的核心
  • 3. 我的第一個vue程序(￣▽￣)"

1. 什么是vue.js

簡介

Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。

Vue.js是一款流行的JavaScript前端框架，旨在更好地組織與簡化Web開發。Vue所關注的核心是MVC模式中的視圖層，同時，它也能方便地獲取數據更新，并通過組件內部特定的方法實現視圖與模型的交互。

優點
易用，基于HTML CSS JavaScript
靈活，簡單小巧的核心，漸進式技術棧，足以應付任何規模的應用
性能，20kb min+gzip 運行大小、超快虛擬 DOM 、最省心的優化

2. vue的要學的核心

組件 component

組件是Vue最為強大的特性之一。為了更好地管理一個大型的應用程序，往往需要將應用切割為小而獨立、具有復用性的組件。在Vue中，組件是基礎HTML元素的拓展，可方便地自定義其數據與行為。下方的代碼是Vue組件的一個示例，渲染為一個能計算鼠標點擊次數的按鈕。

Vue.component('button-counter', {data: function () {return {count: 0}},template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' })

模板

Vue使用基于HTML的模板語法，允許開發者將DOM元素與底層Vue實例中的數據相綁定。所有Vue的模板都是合法的HTML，所以能被遵循規范的瀏覽器和HTML解析器解析。在底層的實現上，Vue將模板編譯成虛擬DOM渲染函數。結合響應式系統，在應用狀態改變時，Vue能夠智能地計算出重新渲染組件的最小代價并應用到DOM操作上。

響應式設計

響應式是指MVC模型中的視圖隨著模型變化而變化。在Vue中，開發者只需將視圖與對應的模型進行綁定，Vue便能自動觀測模型的變動，并重繪視圖。這一特性使得Vue的狀態管理變得相當簡單直觀。

過渡效果

Vue在插入、更新或者移除DOM時，提供多種不同方式的應用過渡效果。包括以下工具：

在CSS過渡和動畫中自動應用class
可以配合使用第三方CSS動畫庫，如Animate.css
在過渡鉤子函數中使用JavaScript直接操作DOM
可以配合使用第三方JavaScript動畫庫，如Velocity.js.

單文件組件

為了更好地適應復雜的項目，Vue支持以.vue為擴展名的文件來定義一個完整組件，用以替代使用Vue.component注冊組件的方式。開發者可以使用 Webpack或Browserify等構建工具來打包單文件組件。

vue設計結構

3. 我的第一個vue程序(￣▽￣)"

1、基本的數據綁定，使得html也能像jsp一樣能寫表達式了。同時也進行了頁面與數據的解耦。頁面只要取對應的數據。不管后端是哪種語言！

2、以{{property}}取值

<!-- 數據綁定 --> <div id="app">{{message}},{{hello}} </div>

3、為頁面元素賦值

<!-- cdn vue version --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script>// 通過el屬性獲得元素id，data屬性獲得頁面元素，并綁定值let app = new Vue({el: '#app',data: {message: 'Hello Vue!',hello: 'hello world!'}}) </script>

4、更改數據，使用view-model對象

控制臺手動改變模型

視圖也對應改變

參考
baidubaike
wikipedia

總結

以上是生活随笔為你收集整理的vue.js 入门，简介的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。