Vue_Share_Mol
目錄javascript
Vue_Share_Mol
@(個人分享)[Vue]html
按照慣例，扯閒篇
本次分享創建在一個假設爲前提，假設大家都已經熟練地使用jquery。前端
偉大的jQuery
不得不認可，jquery是一個很是偉大的發明，jquery有很是強大的選擇器，比起getelementById來，不知道要好用多少，並且它還爲開發人員作了不少瀏覽器兼容方面的工做，最明顯的例子就是jQuery.Ajax()。有了這個ajax方法，你不用再雲根據瀏覽器內核的不一樣而建立不一樣的對象發送請求。
jQuery是基於DOM來操做的。也就是說，咱們在操做頁面的時候，必定是先獲取到了某個dom元素，再對這個dom進行操做。好比我想找到頁面上一個id爲"mollable"的label元素，並修改的顯示文字爲「修改後的文字」，我須要這樣作：vue
$('label#mollable').html('修改後的文字');
這樣看起來很好，目的明確、操做清晰。java
坑
有不少時候，咱們須要把數據從服務端獲取過來，再加載到前端。這個時候，咱們就須要大量的拼接HTML。好比，我須要在ul上面新增一條名爲「《大話代碼架構》」的記錄。
原始HTML以下：jquery
<ul>
<li>《春風八百里，不如碰見你》</li>
<li>《ASP.net入門很簡單》</li>
</ul>
我要的js代碼看起來像是這樣：程序員
$('<li>《大話代碼架構》</li>').apendTo($('ul'));
這是比較簡單的代碼。在不少時候，咱們要增長的dom元素遠遠沒有這麼簡單。那麼，html拼接的過程就極有可能出錯。 這時，出現了「模板引擎」，我之前經常使用的模板引擎是arttemplate。固然，也有其它很是優秀的引擎框架。ajax
以arttemplate說明
所謂模板引擎，你們必定據說過，像C#裏面有偉大的NVelocity，或者大家使用過的一些CMS模板也能夠算是模板引擎。模板引擎的思想，就是先搞一個模板，而後再這個模板上挖坑，最後用數據來填坑。下面，我將以arttemplate來講明.
假設我有這樣一個頁面，這個頁面上要展現人員的信息，人員信息包含姓名、性別、年齡。後端
<div id="container">
<ul id="ulPersonList">
<li>
<div>
<img src="頭像" />
<label>姓名</label>
<label>性別</label>
<label>年齡</label>
</div>
</li>
</ul>
</div>
接下來，我要根據這個頁面來挖坑了，挖坑的原則很簡單，就是把變化地的方都找出來，用「佔位符」來代替。好比上面代碼中的頭像、姓名、性別、年齡這幾個地方都是會變的，因此我就把他們用用佔位符來表示，以下：瀏覽器
<script id="test" type="text/html">
<li>
<div>
<img src="{{headImg}}" />
<label>{{name}}</label>
<label>{{gender}}</label>
<label>{{age}}</label>
</div>
</li>
</script>
第三步，我要把數據填充到模板中的「佔位符」上。
// 定義一個數據
var data = {
headImg:"/img/1.jpg",
name:"testName",
gender:"男",
age:32
};
// 調用arttemplate的template方法，傳入數據、模板，獲得結果字符串
var html = template('test', data);
// 將獲得的字符串拼接到ul中
$(html).appentTo($('ul'));
到這裏爲止，模板引擎的示例就演示完了。能夠看到，核心代碼是
// 調用arttemplate的template方法，傳入數據、模板，獲得結果字符串
var html = template('test', data);
這句話的目的是獲得一個字符串，這個字符串就好像咱們本身寫字符串拼接代碼同樣。只不過有了arttemplate的幫助，咱們能夠藉助模板來獲得目的字符串。但，本質仍是要獲得一個字符串，讓後面的代碼把獲得的字符串拼接到dom元素上。
進入Vue
引言
上面咱們提到了jquery的dom操做和模板引擎。若是程序員使用jquery或模板引擎來繪製頁面，那你必須同時關心前端頁面元素和後臺數據。有沒有一種技術，讓咱們像asp.net mvc同樣，只須要進行數據綁定，就能夠進行頁面顯示了。
PS:這裏個人描述不太清晰，個人目的是這樣的，我在cs文件中定義一個對象ViewBag.Num=1，我以頁面中能夠經過@ViewBag的形式將數字1顯示在頁面上。這就是我想表述的內容。
這就是一種mvc思想，也有人叫mvvm，可是我不想解釋得那麼複雜（主要是我不會）。讓數據的變化反應到頁面上，也讓頁面的變化反應到數據上。
eg.
<div id="el">
<input type="number" v-model="fir" />+
<input type="number" v-model="sec" />=
<label>{{parseInt( this.fir)+ parseInt( this.sec)}}</label>
</div>
<script>
// 建立一個Vue對象 它的構造函數是之樣的：new Vue(參數)
// 只不過參數是一個對象而以。
new Vue({
el:"#el",// 指示Vue容器是一個id爲el的標籤
data:{fir:0,sec:0,result:0}// vue中用到的數據。
});
</script>
運行效果：
們把js代碼中data看作是mvc中的Model。把<div id='el'></div>當作是視圖，這樣就完成了「雙向綁定」。
這就是一個簡單的vue示例,有沒有發現，咱們已經不用再使用「先獲取dom元素，再進行數據綁定」的方式來顯示數據了。
若是咱們把頁面切分紅兩部分。第一部分是<div id="el"></div>。第二部分是data:{...}。那麼，完成能夠由兩個不一樣的人來未完成這兩個部分。它們之間沒有太多的耦合。烈軍屬data的人，只負責提供數據，不須要關心頁面展現。而寫頁面的人，只須要把「字段」展現到界面上，不須要關心這些字段是怎麼來的。
mvc中，還有一個很重要的部分，叫controller，在vue中，對應於methods和cumputed。
先來看metchods。
new Vue(
{
el:'#el',
data:{fir:0,sec:0,result:0},
// 我定義了methods中包含元素,注意，methods不是我創造的，而是vue規定的
methods:{
// 定義一個名爲clickAdd的函數，這個函數用來把Model中的fir和sec相加，
// 並把結果賦給Model中的result
clickAdd:function(){this.result=this.fir+this.sec},
}
}
);
methods是一個元素，這個元素被定義在構造函數的輸入參數中。methods這個元素是一個對象，這個對象能夠包含0個或多個函數。像上面的代碼就包含了一個函數。接下來看看這個methods怎麼用。
按照上面所說的，咱們再寫一個頁面
<div id='el'>
<input type="number" v-model="fir" />+
<input type="number" v-model="sec" />
<button type='button' onclick='showResult()'>=</button>
<label>{{result}}</label>
</div>
這樣寫完之後，瀏覽器會告訴你，showResult沒有定義。這裏須要注意，你寫在vue塊（我把<div id='el'></div>所包含的代碼塊叫「vue塊「）中的屬性或值，必定要符合vue的風格。幸虧，咱們只須要記住兩種風格就能夠。
風格1-內容
一般來講，咱們指定一個label的內容會是這樣：
<label>{{字段}}</label>
能夠看到，語法結構就是兩個大括號包含的一個字段名，這個字段必定要在data屬性中定義好。
new Vue({
el:'#el',
data:{字段：'mol'}
});
風格2-屬性
若是我要指定一個屬性，如點擊事件的屬性，我應該這樣作：
<label v-on:click="myClick()"></label>
固然，你非要使用onclick屬性來定義單擊事件的話，也無可厚非，只不過這樣的話，你就不能操做vue內部的對象了。
注意,v-on:click="myClick()"中的myClick這個函數必定要在methods中定義。
new Vue({
el:"#el",
data:{},
methods:{
myClick:function(){
這裏是你要作的動做
}
}
});
入門須要注意的重點
v-show和dislay屬性
咱們都知道，控制一個元素是否顯示，能夠設計這個元素的style="display:值"，值爲block時，顯示；值爲none時，元素不顯示。而在vue中，有一個屬性叫v-show，它也是控制元素是否顯示的。也就是說，下面兩句代碼的效果看起來是同樣的。
<div style="display:none;">我要想被隱藏</div> <div v-show="false">我也想要被隱藏</div>
之因此是「看起來是同樣的」，是由於：display:none的做用是，將dom元素的可見屬性設置爲none;而v-show="false"是根本不繪製這個dom元素。能夠經過查看網頁源碼來驗證我說的是否正確。
if & for
if和for就不用我解釋他們是幹什麼的了，直接上代碼：
<div v-if="myage<12">小學</div>
<div v-else-if="myage<16">初中</div>
<div v-else-if="myage<19">高中</div>
<div v-else-if="myage<23">大學</div>
<div v-else="">工做</div>
<hr>
<ul>
<li v-for="p in team">
姓名：{{p.name}}<br>
年齡：{{p.age}}
</li>
</ul>
<script>
var vueNode=new Vue({
el:"#app",
data:{
myage:32,
team:[{name:'mol',age:32},{name:'李老闆',age:33},{name:'囂張哥',age:34}]}
});
</scrit>
深刻mvc
能夠看到，vue的屬性都是以v-開頭。接下來，咱們體驗一下，vue的mvc思想及雙向綁定。
前面咱們已經經過for循環來展現了一個列表，它看起來像是這樣：
加li，應該怎麼作。
熟悉jquery的你，必定會說，先獲取到ul，再進行元素的添加，它看起來像是這樣：
$('ul').append('<li>姓名：小曾，年齡：奔三</li>');
這樣作徹底沒有問題。但這樣作有一個問題，就是前端和數據之間是「強耦合」的。咱們更但願有這樣兩個程序員，一我的寫後端（數據），另外一我的寫前端（頁面）.而vue就能夠達到這樣的效果。
步驟1：前端人員寫頁面
<div id='el'>
<ul>
<li v-for="p in team">
姓名：{{p.name}}<br>
年齡：{{p.age}}
</li>
</ul>
<!--下面是讓用戶動態輸入信息的地方-->
姓名：<input type="text" v-model="newName" />
<br>
年齡：<input type="number" v-model="newAge" />
<br>
<button v-on:click="addUser">添加</button>
</div>
步驟2：後端人員寫數據
new Vue({
el:"#app",
data:{
team:[{name:'mol',age:32},{name:'李老闆',age:33},{name:'囂張哥',age:34}],
newName:'',newAge:''
},
methods:{
addUser:function(){ this.team.push({name:this.newName,age:this.newAge});
}
}
});
完事了！
看見木有？後端工程師只須要操做data中定義的數據就能夠了。當team數據發生變化時，頁面上的展現也相應地發生了變化，看起來像是這樣：
總結
作爲一個.net出身的程序員來講，可能沒法理解，作爲一個「後端程序員」，怎麼可能簡單地寫幾行js就了事？再說了，js不該該是前端工程師的責任嗎？ 首先，前端工程師的js廣泛沒有程序員的好；其次，js是一種很牛X的開發語言。如今有不少網站或應用均可以直接使用js來開發。我打算下次分享一個叫electro的技術。它就是用js來編寫應用的一種技術。
-
每一个你不满意的现在，都有一个你没有努力的曾经。