(原創)vue 學習筆記

layman 發布于2019-08-22 18:09 / 2149人閱讀

摘要：菜鳥教程這是一個屬性其值是字符串菜鳥教程同上這是一個屬性其值是字符串用于定義的函數，可以通過來返回函數值。它們都有前綴，以便與用戶定義的屬性區分開來。

開篇語

我最近學習了js,取得進步,現在學習vue.js.
建議新手學習,請不要用npm的方式(vue-cli,vue腳手架),太復雜了. 請直接下載vue.js文件本地引入,就上手學習吧
參照菜鳥教程網站的vue.js教程http://www.runoob.com/vue2/vu...
從基礎開始理解和上手,請看我寫的中文注釋,幫助理解

一些建議

直接把菜鳥教程的例子復制到自己的代碼編輯器里看更好

菜鳥教程的好處我覺得之一是其有很多實例子,那么就應該拿例子復制回來本地自己的編輯器看.

因為菜鳥的例子左邊代碼,右邊視圖.就很小了,不好審視.

要打開瀏覽器控制臺(比如我們推薦用谷歌瀏覽器chrome在瀏覽器按f12就可以打開控制臺),直觀的看到js和dom層,比看到界面更重要的是看到dom層的實際操作變化

一個簡單的vue.js例子


 vue
  
   學習vue很舒服 
   {{ message }}
 {{ mz }}

vue.js一個簡單例子的基礎說明系列-[第1個例子]





vue一個簡單例子的基礎說明




site : {{site}}
url : {{url}}
alexa : {{alexa}}
{{details()}}

vue.js一個簡單例子的基礎說明系列-[第2個例子]---實例屬性與方法,它們都有前綴 $

參照菜鳥教程網站的vue.js教程http://www.runoob.com/vue2/vu...

請看我寫在代碼里的注釋





vue.js一個簡單例子的基礎說明系列-[第2個例子]



site : {{site}}
url : {{url}}
Alexa : {{alexa}}

vue.js一個簡單例子的基礎說明系列-[第3個例子]-----vue如何模板語法渲染數據





vue.js一個簡單例子的基礎說明系列-[第1個例子]----vue如何模板語法渲染數據



{{message2}}

vue.js一個簡單例子的基礎說明系列-[第4個例子]-----這個例子.我還是不明白這個例子.我還是不明白

它是怎么vue去改變dom層

在瀏覽器控制臺可以看到操作是它的dom層的變化





Vue 測試實例 - 菜鳥教程(runoob.com)





修改顏色





directiva v-bind:class

vue 的v-bind,bind意思:綁定

vue 的v-bind,bind意思:綁定,v-bind就是在dom和js層進行數據綁定.就是可以講js的數據變量什么的綁定到dom層的屬性,讓屬性的值是js數據.這樣,就能使得改變數據于是就改變了dom的屬性

vue學習筆記-vue雙向數據綁定- vue雙向數據綁定





vue雙向數據綁定







{{parentMsg}}

vue npm 搭建項目流程及備忘及不踩坑

首先我新建個"abc"文件夾,cmd到abc目錄下.

然后,初始化一個vue項目 vue init webpack mydemo1 (vue init simple 是簡單版,webpack是普通版,一般選擇使用webpack版),然后它就開始新建一個名叫作mydemo1的項目,問一些問題如下,除了幾個要注意,其他的就按回車默認就行,要注意的幾個如下:

Use ESLint to lint your code? (Y/n)

要使用嚴格的es6語法嗎?不用,因為嚴格的話,寫錯一點代碼都不允許,太麻煩.按n選no,再回車

Set up unit tests No ?(Y/n)

是測試工具,這個也選no就行.

Setup e2e tests with Nightwatch?

也是測試工具,這個也選no就行.

npm install 表示我要根據package.json文件清單來從node云端下載文件放到生成的node modules文件夾.這要下載很多東西,所以建議cnpm install

------------------------------------------分割-----------------------------------------

vue學習筆記-vue模板語法




vue模板語法

vue + Django 一個項目涉及的 vue 技能清單

"Python前后端分離開發Vue+Django REST framework實戰難度中級" 的知識技能清單已經羅列完了,它是偏后端的,所以前端的知識技能講的不太多.
我打算現在繼續再分析一個vue前端的項目,名字"慕課網 Vue2.5開發去哪兒網App 從零基礎入門到實戰項目",羅列它的知識技能清單.

vue項目技能清單之_vue2.0開發去哪兒網

來自慕課網教程"Vue2.5開發去哪兒網App 從零基礎入門到實戰項目"

GPU云服務器云服務器 vue3 學習筆記 (五)——vue3 原創的深度學習深度學習原創技術學習筆記

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

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

回望2017：一個前端從業者砥礪前行的一年

摘要：走過了這一年，公眾號的名稱前前后后改了三次，最后定格為閏土大叔。均價，這價格絕對屬于太原市最便宜的樓盤之一了。據售樓部的朋友說，未來兩年太原的房價還會迎來新一波的漲價潮，到了年，太原會承辦全國青少年運動會，簡稱青運會。前言從年前就嚷嚷著要走出去走出去，轉眼間已經到了年底依然在我的大太原呆著。年底了，不能免俗的我，也來寫一篇2017年度工作總結的文章，湊湊熱鬧。如果對你有一點點啟發，...

dmlllll 2019-06-26 17:31 評論0 收藏0
回望2017：一個前端從業者砥礪前行的一年

摘要：走過了這一年，公眾號的名稱前前后后改了三次，最后定格為閏土大叔。均價，這價格絕對屬于太原市最便宜的樓盤之一了。據售樓部的朋友說，未來兩年太原的房價還會迎來新一波的漲價潮，到了年，太原會承辦全國青少年運動會，簡稱青運會。前言從年前就嚷嚷著要走出去走出去，轉眼間已經到了年底依然在我的大太原呆著。年底了，不能免俗的我，也來寫一篇2017年度工作總結的文章，湊湊熱鬧。如果對你有一點點啟發，...

xietao3 2019-08-21 18:34 評論0 收藏0
資源集 - 收藏集 - 掘金

摘要：行爬取頂點全網任意小說掘金之前連續多篇文章介紹客戶端爬取平臺，今天我們從零開始，實現爬取頂點小說網任意一本小說的功能。文件標記所有文件我的后端書架后端掘金我的后端書架月前本書架主要針對后端開發與架構。 30行js爬取頂點全網任意小說 - 掘金之前連續多篇文章介紹客戶端爬取平臺(dspider)，今天我們從零開始，實現爬取頂點小說網任意一本小說的功能。如果你還不知道客戶端爬取，可以先看...

stdying 2019-07-25 12:06 評論0 收藏0
資源集 - 收藏集 - 掘金

摘要：行爬取頂點全網任意小說掘金之前連續多篇文章介紹客戶端爬取平臺，今天我們從零開始，實現爬取頂點小說網任意一本小說的功能。文件標記所有文件我的后端書架后端掘金我的后端書架月前本書架主要針對后端開發與架構。 30行js爬取頂點全網任意小說 - 掘金之前連續多篇文章介紹客戶端爬取平臺(dspider)，今天我們從零開始，實現爬取頂點小說網任意一本小說的功能。如果你還不知道客戶端爬取，可以先看...

馬忠志 2019-08-15 10:42 評論0 收藏0