• vue的源代碼下載——開發(fā)版本和生產(chǎn)版本
• https://cn.vuejs.org/js/vue.js
• https://cn.vuejs.org/js/vue.min.js
• vue中文學(xué)習(xí)官網(wǎng)
• https://cn.vuejs.org/v2/guide/

vue學(xué)習(xí)入門

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

1. 什么是vue.js

簡介

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

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

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

2. vue的要學(xué)的核心

組件 component

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

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

模板

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

響應(yīng)式設(shè)計

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

過渡效果

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

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

單文件組件

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

vue設(shè)計結(jié)構(gòu)

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

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

2、以{{property}}取值

<!-- 數(shù)據(jù)綁定 --> <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、更改數(shù)據(jù)，使用view-model對象

控制臺手動改變模型

視圖也對應(yīng)改變

參考
baidubaike
wikipedia

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。