Vue筆記

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
	https://cn.vuejs.org/v2/guide/
	一、Vue介紹
		1.什麼是Vue?
		  a.Vue是一套用於構建用戶界面的漸進式框架;
		  b.需要了解關於 HTML、CSS 和 JavaScript 的知識;
		2.如何使用Vue?
		  a.直接使用script引入;
		3.聲明式渲染
		  1.使用模板語法來聲明式地將數據渲染;
		  2.綁定元素 attribute
		    2.1通過指令綁定元素的attribute;
		        v-bind:attribute
		  注意事項:
		    1.對應js不能放到head標籤裏面,因爲代碼從下網上執行,
		            頁面沒有加載完成就進行渲染,導致找不到DOM元素;
		4.條件和循環
		  1.v-if
		  2.v-else
		  3.v-else-if
		  3.v-for
		5.處理用戶輸入
		  5.1用 v-on 指令添加一個事件監聽器,
		          通過它調用在 Vue 實例中定義的方法;
		  5.2v-model指令,它能輕鬆實現表單輸入
		           和應用狀態之間的雙向綁定。
		6.組件化應用構建
		  6.1在 Vue 裏,一個組件本質上是一個擁有預定義選項的
		           一個 Vue 實例;
	二、Vue實例
	1.創建Vue實例
		  a.選項:
		      1.data 
		         1.)類型:Object|Function
		         2.)限制:組件的定義只接受 function
		      2.el
		         1.)類型:string | Element
		         2.)限制:只在用 new 創建實例時生效
		      3.methods:
		         1.)類型:{ [key: string]: Function }
		      
				var vm = new Vue({選項});
	三、模板語法
	  1.插值
	   a.文本
	    1.)使用“Mustache”語法 (雙大括號) 的文本插值
	       <div id="app">{{returnResult.name}}</div>
	               注意事項:
		     a. Mustache 標籤將會被替代爲對應數據對象上 msg 屬性的值。
		               無論何時,綁定的數據對象上 msg 屬性發生了改變,
		               插值處的內容都會更新。
		     b.通過使用 v-once 指令,你也能執行一次性地插值,
		             當數據改變時,插值處的內容不會更新。
		             但請留心這會影響到該節點上的其它數據綁定;
		       <span v-once>這個將不會改變: {{ msg }}</span>
	    b.原始的html
	       v-html
	3.發送Ajax請求
	  https://www.cnblogs.com/EricZLin/p/9380406.html
	  
	</body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章