Vue簡單入門~1

一直在官網上看VUE的文檔，覺的有點亂，所以在這裏整理下VUE的一個入門知識點，如果有問題請發送[email protected]郵件或者在文章下面留言

1、VUE是什麼？

“一個用於構建用戶界面的漸進式框架”，所謂漸進式框架指的是沒有強制主張，只做自己職責的事。以上是網絡上流傳的版本，個人的理解所謂的漸進式框架，是在使用vue開發頁面時，所用的核心是VUE組件，在項目最開始只是一個組件，隨着功能的完善逐漸增加更多的組件，所以被稱爲漸進式。（個人觀點，並沒有得到官方認證，覺得不對歡迎留言交流）

2、爲什麼使用VUE？

VUE支持把整個web頁面劃分成更加細小的組件組成，類似於把原來的一張圖片分成數個拼圖，以此來增加代碼的靈活度，每個組件都有各自的HTML代碼，js和CSS，讓頁面開發只集中於組件的開發。

3、怎麼使用VUE

步驟如下：1、引入；2、HTML；3、創建對象

3-1、引用，引用VUE的js文件

開發版：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
生產版：<script src="https://cdn.jsdelivr.net/npm/vue"></script>

3-2、編寫HTML

簡單DIV即可，用於顯示VUE實例

<div id="d1">{{demo}}</div>	<!-- {{Mustache數據綁定}}，綁定實例中data中數據 -->

3-3、創建對象

var vm = new Vue({
	el:"d1",
	data:{
		demo:"hello VUE"
	}
})

4、vue小提高

簡單vue介紹完成後，接下來是對vue命令的總結，在HTML代碼中可以使用vue指令綁定一些處理操作，這裏做下記錄

v-on 綁定事件 縮寫@，代碼如下

HTML：

<div id="d1">
	<span @click="up">點擊</span>	
</div>

JS:

var vm = new Vue({
	el:"#d1",
	methods:{
		up:function(){
			alert("彈框事件")
		}
	}
})

v-mode 表單輸入綁定，代碼如下

HTML：

<div id="d1">
	<input v-model="msg">	
</div>

JS:

var vm = new Vue({
	el:"#d1",
	data:{
		msg:"灑家~李"
	}
})

v-bind 標籤中綁定屬性 縮寫“：”，代碼如下

HTML:

<div id="d1">
	<a :href="url">點擊</span>	
</div>

JS:

var vm = new Vue({
	el:"#d1",
	data:{
		url:"http://www.baidu.com"
	}
})

v-if 判斷，代碼如下

HTML:

<div v-if="isShow">
	isShow爲true則顯示
</div>

JS:

/* if表達式中也可以使用簡單的計算 */
var vm = new Vue({
	el:"#d1",
	data:{
		isShow:true
	}
})

v-for 循環遍歷，代碼如下

HTML：

<div v-for="item in items">
	<!-- 迭代數據的輸出 -->
	{{item}}
</div>

JS:

var vm = new Vue({
	el:"#d1",
	data:{
		items:[
			"items數據名稱",
			"item每次迭代數組元素的別名"
		]
	}
})

關於vue的入門寫到這裏，關於VUE中還有關於Vue的屬性編寫會在下篇文章中總結