vue基礎教程01

2021-10-12 08:41:32 字數 1955 閱讀 5588

1.vue.js 是什麼

vue.js 是前端的主流框架之一,和angular.js、react.js 一起,並成為前端三大主流框架!

vue.js 是一套構建使用者介面的框架,只關注檢視層,它不僅易於上手,還便於與第三方庫或既有專案整合。(vue有配套的第三方類庫,可以整合起來做大型專案的開發)

前端的主要工作?主要負責mvc中的v這一層;主要工作就是和介面打交道,來製作前端頁面效果的mvvm框架;

2.起步

vue中可以使用插值表示式,可以定義元件,元件是html元素的擴充套件,可自定義其資料與行為。例如通過乙個bind操作將js中的內容繫結在div標籤內部

data:

})settimeout(function () ,2000)at

a.co

nten

t=′i

mbac

k′;是

你當前a

pp下的

data

裡的co

nten

t,就是

data

:con

tent

:′he

llow

worl

d′也可

以用th

is.a

pp.da

ta.c

onte

nt=′

imba

ck′;

是你當前

app下

的dat

a裡的c

onte

nt,就

是dat

a:co

nten

t:′h

ello

wwor

ld′也

可以用t

his.

app.

data.content = 『im back』,這裡的this指向的是winod

用原生的寫法來試試

dom.innerhtml = 'hello world';

settimeout(function (),2000)

效果是一樣的

3,vue計算屬性,方法,***

這裡放了vue的computed計算屬性,大家可以吧方法和watch***都試一下。

4.模板語法

5.vue生命週期

vue有八個生命週期,分別是beforecreate實列建立前,created例項建立完成,beforemount掛載前,mounted掛載完成,beforeupdate更新前,updated更新完成,beforedestroy實列銷毀前,destroyed實列銷毀。

可以看到列印到了掛載完成的鉤子函式,然後

可以看到再改變test裡的值後,執行了更新前和更新完成的這個兩個鉤子函式

當執行 beforedestroy 的時候, 例項身上所有的 data 和 所有的 methdos , 以 過濾器、指令…

都處於可用狀態, 此時, 還沒有真正執行 銷毀的過程

當執行 destroyed 函式的時候, 元件已經被完全銷毀了, 此時, 元件中所有的 資料, 方法, 指令,

過濾器… 都已經不可用了

下章帶大家做個todolist的功能

感謝

postman基礎教程 01簡介

postman是乙個比較簡單方便的介面測試工具,會寫幾篇文章總結一下postman的基本使用 postman上手容易,提供錄製外掛程式,提高case編寫速度,官方文件齊全,使用者眾多,但是也存在劣勢比如可擴充套件性較差,無法與資料庫結合,非開源,case校驗方式較少 日常使用足夠了,後面會總結一下用...

nodejs基礎教程回顧01

module.exports multiple function num1,num2 var calc require module.js console.log calc.add 3,5 console.log calc.multiple 4,7 這個例子是先了解一下nodejs的格式。接下來就是...

XSL基礎教程

xsl基礎教程 一 http www 128.ibm.com developerworks cn xml ccidnet xslfund index1.html xsl基礎教程 二 http www.ibm.com developerworks cn xml ccidnet xslfund inde...