超簡單的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指令綁定一些處理操作，這裏做下記錄

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

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

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

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

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

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

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

HTML:

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

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

4、[] 動態參數

HTML：
<div id="d1">
	<a :[attr]="url">超鏈接</a>
</div>

JS：
new Vue({
	el:"#d1",
	data:{
		attr:"href",
		url:""
	}
})

5、class綁定&style綁定，其實也就是v-bind的使用

<div id="d1" :class=" c1 : thisC "><!--c1是一個css樣式，兄弟你自己隨便寫一個就好-->
	class綁定
	<span :class="comC">通過計算屬性修改</span>
	<span :style="{color:getColor}">綁定元素內部的style屬性</span>
	<span :style="{getColorObject}">綁定對象到style</span>
	<span :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">多重值綁定</span>
	<button @click="changeThis()">點擊</button>
</div>

var vm = new Vue({
	el:"#d1",
	data:{
		thisC:true，
		getColor:'red',
		getColorObject:{
			color:"red"	
		}
	},
	computed:{
		comC(){
			return true
		}
	},
	methods:{
		changeThis(){
			this.thisC = !(this.thisC)
		}
	}
})

6、v-if 判斷，代碼如下

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

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

7、v-show 顯示，主要控制css中的display

<h1 v-show="ok">Hello!</h1> <!--data中ok爲true則顯示-->

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

HTML：
<div id="d1">
	<div v-for="item in items">
		<!-- 迭代數據的輸出 -->
		{{item}}
	</div>
	<br>
	<div v-for="(item,index) in items">
		<!-- index爲當前值下標 -->
		{{item}}-{{index}}
	</div>
	
	<h1>獲取對象</h1>
	<div v-for="obg in object">
		{{obg}}
	</div>

	<h1>獲取key值</h1>
	<div v-for="(obg,name) in object">
		{{obg}}---{{name}}
	</div>

	<h1>獲取索引</h1>
	<div v-for="(value, name, index) in object">
	  {{ index }}. {{ name }}: {{ value }}
	</div>
</div>

JS:
var vm = new Vue({
	el:"#d1",
	data:{
		items:[
			"items數據名稱",
			"item每次迭代數組元素的別名"
		],
		object:{
			title:"標題",
			content:"這是一個值"
		}
	}
})

9、v-html綁定HTML代碼

HTML：
<span v-html="hdemo"></span> <!--替換爲數值中的HTML-->

JS：
new Vue({ 
	el:"span",
	data:{
		hdemo:"<h1>這裏是個HTML</h1>"
	}
})

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