(原創)vue 學習筆記

時間 2019-11-10

標籤原創 vue 學習筆記简体版

原文原文鏈接

開篇語

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

一些建議

直接把菜鳥教程的例子複製到本身的代碼編輯器裏看更好css

菜鳥教程的好處我以爲之一是其有不少實例子,那麼就應該拿例子複製回來本地本身的編輯器看.html

由於菜鳥的例子左邊代碼,右邊視圖.就很小了,很差審視.前端

要打開瀏覽器控制檯(好比咱們推薦用谷歌瀏覽器chrome在瀏覽器按f12就能夠打開控制檯),直觀的看到js和dom層,比看到界面更重要的是看到dom層的實際操做變化vue

一個簡單的vue.js例子

<body>
 <h2>vue</h2>
  <div id="myapp">
   <p title="哈哈">學習vue很舒服</p> 
   <p>{{ message }}</p> <p>{{ mz }}</p> 
   </div> 
   <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script> 
   <script type="text/javascript"> 
   var myapp = new Vue( //新建一個Vue 實例並賦值給變量'myapp',這時變量myapp就是這個vue實例 
   { 
       el:'#myapp',
       data:{ message:'hello Vue',  //myapp.message = 'hello Vue' 
       mz:'小偉33'  //myapp.mz = '小偉33' } } 
   ); 
   </script> 
   </body>

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue一個簡單例子的基礎說明</title>
</head>
<body>
<div id="vue_det">
<!--  {{ }} 用於輸出對象屬性和函數返回值。  -->
<h3>site : {{site}}</h3>
<h3>url : {{url}}</h3>
<h3>alexa : {{alexa}}</h3>
<h3>{{details()}}</h3>
</div>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',//el 參數，它是 DOM 元素中的 id,這意味着咱們在該div裏面做業,外面不受影響,不會影響外面
data: {//data 用於定義屬性，實例中有三個屬性分別爲：site、url、alexa。
site: "菜鳥教程",//這是一個屬性site,其值是字符串"菜鳥教程"
url: "www.runoob.com",//同上
alexa: "10000"//這是一個屬性alexa,其值是字符串"10000"
},
methods: {//methods 用於定義的函數，能夠經過 return 來返回函數值。
details: function() {
return this.site + " - 學的不只是技術，更是夢想！";
}
}
})
</script>
</body>
</html>

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

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

請看我寫在代碼裏的註釋node

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue.js一個簡單例子的基礎說明系列-[第2個例子]</title>
</head>
<body>
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>Alexa : {{alexa}}</h1>
</div>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 咱們的數據對象
//除了數據屬性，Vue 實例還提供了一些有用的實例屬性與方法。它們都有前綴 $，以便與用戶定義的屬性區分開來。
var data = { site: "菜鳥教程", url: "www.runoob.com", alexa: 10000}//定義一個js變量.即js屬性
var xm = '小明';//定義一個js變量.即js屬性
var vm = new Vue({
el: '#vue_det',//定義一個vue屬性el,要使用vm.$el才能訪問
data: data//定義一個vue屬性data,要使用vm.$data才能訪問
})
//       咱們在瀏覽器控制檯訪問上面的那些變量和屬性,直接經過.的方式
//        document的子是vm,vm的子是el和data,document.vm能訪問vm,而vm.el這樣寫是
                                    //訪問不到vm的,要這樣寫vm.$el才能訪問,由於el是Vue實例的直接子變量
//       data  ->{__ob__: wr}   //是對象
// xm   ->'小明'
// el   ->VM113:1 Uncaught ReferenceError: el is not defined    //這樣是訪問不了的,由於el不是js的全局變量/屬性
// vm.el   ->undefined    //這樣也不行,要寫成vm.$el纔對
//       vm.$el   -><div id="vue-det">...</div>    //這樣纔是訪問vue的
</script>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue.js一個簡單例子的基礎說明系列-[第1個例子]----vue如何模板語法渲染數據</title>
</head>
<body>
<div id="app">
<p>{{message2}}</p>  <!--使用 {{...}}（雙大括號）的方式把屬性的值渲染到html裏-->
<div v-html="message1"></div>  <!--使用 v-html 指令來把 html 代碼 渲染到html裏-->
</div>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script>
new Vue({
el: '#app',
data: {
message1: '<h1>菜鳥教程</h1>',
message2: 'ok,i can do it'
}
})
</script>
</body>
</html>

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

它是怎麼vue去改變dom層webpack

在瀏覽器控制檯能夠看到操做是它的dom層的變化es6

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
</head>
<style>
.class1 {
background: #444;
color: #eee;
}
</style>
<body>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<div id="app">
<label for="r1">修改顏色</label>
<input type="checkbox" v-model="class1" id="r1">
<br><br>
<div v-bind:class="{'class1': class1}">
directiva v-bind:class
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
class1: false
}
});
</script>
</body>
</html>

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue雙向數據綁定</title>
</head>
<body>
<div id="app">
<div>
<input v-model="parentMsg"/><!--意思是用戶的所輸入即更新到數據層裏的parentMsg做爲數據的值-->
<br>
<p>{{parentMsg}}</p>
</div>
</div>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script>
// 建立根實例
new Vue({
el: '#app',
data: {
parentMsg: '這世界很大,天空很藍'
}
})
</script>
</body>
</html>

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模板語法<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>vue模板語法</title>
</head>
<body>
<div id="app">
<div v-text="msg"></div><!--在div中以test的方式輸出數據msg-->
<div v-html="msg2"></div><!--在div中輸出以html的方式數據msg-->
</div>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script>
// 建立根實例
new Vue({
el: '#app',
data: {
msg: '這世界很大,天空很藍',
msg2: '<h2>這世界很大,天空很藍</h2>'
}
})
</script>
</body>
</html>

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

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