初識Vue

什麼是Vue

Vue是一套使用者構建使用者介面的漸進式框架，vue採用自下向上增量開發的設計，其核心庫只關注檢視層，易於上手，同時vue完全有能力驅動採用單檔案元件和Vue生態系統支援的庫，開發複雜的單頁應用。

Vue的特點和優勢

vue兩大特點：響應式程式設計、元件化。
vue的優勢1：vue是一個輕量級框架、簡單易學、雙向資料繫結、元件化、資料和結構的分離、虛擬DOM、執行速度快
vue的優勢2：vue是單頁面應用，使頁面區域性重新整理，不用每次跳轉頁面都需要請求所有頁面資料和dom，這樣大大加快了訪問速度和提升使用者體驗。而且他的第三方ui庫很多節省開發時間。

第一個Vue程式

開發步驟:

1.需要提供一個div標籤用於提供資料
2.引入vue.js庫檔案(vue官網中下載，下載開發版)
3.使用vue的語法做功能
4.把vue提供的資料填充到標籤裡面
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		 <div id="app">
		 	<!--
		 		1.{{}}:插值表示式語法
		 		2.v-cloak:vue指令,下篇文章會詳細講解vue的各種指令，現在記住他的作用是解決閃動問題就行
		 	 --> 

			 <div v-cloak>{{msg}}</div>
		 </div>
		 <script src="js/vue.js"></script>
		 <script>
			 var vm = new Vue({//建立一個Vue例項物件
				 el:'#app',//相當於一個id選擇器，選中我們上方的div
				 data:{ //data中存放要渲染到頁面上的資料
					 msg:'hello vue'
				} 
			 });
		 </script>
	</body> 

</html>

執行結果:
在這裡插入圖片描述

什麼是Vue

Vue的特點和優勢

第一個Vue程式

Vue基礎語法(一)之初識Vue

第四單元(初識vue-在頁面中直接引入vue框架-學習使用vue語法-vue的指令-介紹data用法-methods用法)

初識Vue

初識Vue—你好，Vue

遇見 vue.js --------阿文的vue.js學習筆記（1）-----初識vue.js

初識Vue 3.0 —— v-if/v-else/v-else-if/v-show條件渲染

初識Vue 3.0 —— v-for: 列表迴圈陣列/物件

初識Vue 3.0 —— component：元件建立

初識Vue.js

1.2 初識Vue

AtguiguVue【P1-P10】初識vue、模板語法、資料繫結、el和data的兩種寫法、vue中的MVVM模型

1.重學Vue 初識Vue

1-vue初識

初識ABP vNext（3）：vue對接ABP基本思路

Vue 初識

【轉】前端筆記之Vue（一）初識SPA和Vue&webpack配置和vue安裝&指令

【轉】前端筆記之Vue（四）UI元件庫&Vuex&虛擬伺服器初識

Vue初識 11.23

vue slot插槽初識

vue初識

初識Vue

什麼是Vue

Vue的特點和優勢

第一個Vue程式

相關推薦