資訊專欄INFORMATION COLUMN
摘要：本篇文章適合基礎(chǔ)特別弱的同學(xué)，如果有基礎(chǔ)同學(xué)可以忽視。下面代碼不能稱作，只是為了便于理解用這樣就實(shí)現(xiàn)了一個(gè)和官網(wǎng)差不多的例子，我們將處理函數(shù)放在中。
本篇文章適合javascript基礎(chǔ)特別弱的同學(xué)，如果有基礎(chǔ)同學(xué)可以忽視。
更多詳情：https://github.com/jilaokang/...
背景vue是最開始是尤雨溪自寫自用的一個(gè)框架，后因?yàn)橐粋€(gè)大佬在推特推薦，讓這個(gè)框架瞬間大量漲粉。時(shí)至今日，這個(gè)框架在前端開發(fā)領(lǐng)域MVVM層已經(jīng)十分著名和成熟。
MVVM*VM：ViewModel指的是視圖層/數(shù)據(jù)層的一個(gè)映射，通過這種方式，開發(fā)人員將數(shù)據(jù)和視圖進(jìn)行分離，將前端開發(fā)進(jìn)行優(yōu)化。
官網(wǎng)示例{{ message }}
var app = new Vue({
el: "#app",
data: {
message: "Hello Vue!"
}
})
解讀：
el:element listen 監(jiān)聽這個(gè)元素
data:數(shù)據(jù)存放
使用：請(qǐng)見源文件tutorial1/gm
理解 var Person = function(name, age){
this.name = name
this.age = age
}
var Kaso = new Person("kaso", 18)
相信上面的代碼大家不會(huì)陌生，通過定義一個(gè)person對(duì)象，new一個(gè)kaso實(shí)例出來。然而在我們實(shí)際使用的時(shí)候，如果傳入值過多，通過function(name, age)這種顯然不容易進(jìn)行維護(hù)，我們可以改寫成這樣
var Person = function(obj){
this.name = obj.name
this.age = obj.age
}
var Kaso = new Person({
name:"kaso",
age:18
})
通過object傳值可以更加準(zhǔn)確直觀將數(shù)據(jù)傳進(jìn)去。
是不是和官網(wǎng)有幾分相似呢？
// 官網(wǎng)
var = new Vue({
el: "#root"
data: {
msg: "halo vue"
}
})
這樣相信大家對(duì)new一個(gè)vue的對(duì)象有了了解。
有人會(huì)產(chǎn)生疑問，你上面寫的那些只能簡單的實(shí)例化一個(gè)新的對(duì)象，并沒有什么實(shí)例功能啊，來，讓我們繼續(xù)。
假想這一部分是我們寫的一個(gè)vue框架
var Person = function (obj) {
this.name = obj.name
this.age = obj.age
this.sayHalo()
}
Person.prototype.sayHalo = function (){
alert(`halo ${this.name} , Welcome !!`)
}
我們要寫的代碼還是沒有變
var Kaso = new Person({
name:"kaso",
age:18
})
通過這種方式，在你實(shí)例化一個(gè)Kaso的時(shí)候執(zhí)行了內(nèi)部封裝的sayHalo()函數(shù)。同理，我們可以寫若干函數(shù)在Person對(duì)象里面。
拓展假如我們要訪問掛在節(jié)點(diǎn)el并將data.msg中的內(nèi)容在el所在的div模塊中顯示。（下面代碼不能稱作MVVM，只是為了便于理解用）
var MVVM = function (obj) {
this.el = obj.el
this.data.msg = obj.data.msg
this.sayHalo();
}
MVVM.prototype.sayHalo = function () {
var DOM = document.getElementById(this.el)
DOM.innerHTML = this.data.msg
}
var app = new MVVM({
el: "app",
data: {
msg:"halo MVVM"
}
})
這樣就實(shí)現(xiàn)了一個(gè)和官網(wǎng)差不多的例子，我們將處理函數(shù)放在sayHalo中。
具體源代碼請(qǐng)看tutoria1/understand
更多詳情：https://github.com/jilaokang/...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108018.html
摘要：官方文檔官方文檔，官方文檔永遠(yuǎn)是學(xué)習(xí)資料的第一步起步扎實(shí)的基本功。學(xué)習(xí)的新特性，理解，建議可以看看阮一峰的教程。的學(xué)習(xí)曲線會(huì)比較長，需要了解到的常用命令，以及和的模塊規(guī)范，的也很多，其實(shí)更多的是屬于一項(xiàng)后端語言。 學(xué)習(xí)Vue2.0的建議順序 注：本文是看過其他關(guān)于vue文章之后的想法，歡迎轉(zhuǎn)載，請(qǐng)注明出處。 Vue官方文檔：Vue2.0官方文檔，官方文檔永遠(yuǎn)是學(xué)習(xí)資料的第一步 起步...
摘要：菜鳥教程這是一個(gè)屬性其值是字符串菜鳥教程同上這是一個(gè)屬性其值是字符串用于定義的函數(shù)，可以通過來返回函數(shù)值。它們都有前綴，以便與用戶定義的屬性區(qū)分開來。 開篇語 我最近學(xué)習(xí)了js,取得進(jìn)步,現(xiàn)在學(xué)習(xí)vue.js.建議新手學(xué)習(xí),請(qǐng)不要用npm的方式(vue-cli,vue腳手架),太復(fù)雜了. 請(qǐng)直接下載vue.js文件本地引入,就上手學(xué)習(xí)吧參照菜鳥教程網(wǎng)站的vue.js教程http://...
摘要：前言月份開始出沒社區(qū)，現(xiàn)在差不多月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū)，現(xiàn)在差不多9月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議！那么今天我就...
閱讀 2609·2023-04-25 15:07
閱讀 714·2021-11-24 10:21
閱讀 2318·2021-09-22 10:02
閱讀 3526·2019-08-30 15:43
閱讀 3239·2019-08-30 13:03
閱讀 2300·2019-08-29 17:18
閱讀 3596·2019-08-29 17:07
閱讀 1884·2019-08-29 12:27
