vue是什么
官網（https://cn.vuejs.org/）
-
Vue.js是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計；
-
Vue 的核心庫只關注視圖層，並且非常容易學習，非常容易與其它庫或已有項目整合。
-
Vue 完全有能力驅動采用單文件組件和Vue生態系統支持的庫開發的復雜單頁應用。
vue的作者
尤雨溪 中國無錫
開發這一行中少有的中國人，作者詳細介紹（https://baike.baidu.com/item/%E5%B0%A4%E9%9B%A8%E6%BA%AA/2281470?fr=aladdin）
庫和框架的區別
-
庫(Library)，本質上是一些函數的集合。每次調用函數，實現一個特定的功能，接着把控制權交給使用者
代表：jQuery
jQuery這個庫的核心：DOM操作，即：封裝DOM操作，簡化DOM操作
-
框架(Framework)，是一套完整的解決方案，使用框架的時候，需要把你的代碼放到框架合適的地方，框架會在合適的時機調用你的代碼
代表：vue
框架規定了自己的編程方式，是一套完整的解決方案
使用框架的時候，由框架控制一切，我們只需要按照規則寫代碼
框架的侵入性很高(從頭到尾)
安裝Vue
cdn下載(需連接網絡)
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
什么是CND
CDN是構建在網絡之上的內容分發網絡，依靠部署在各地的邊緣服務器，通過中心平台的負載均衡、內容分發、調度等功能模塊，
使用戶就近獲取所需內容，降低網絡擁塞，提高用戶訪問響應速度和命中率。CDN的關鍵技術主要有內容存儲和分發技術
CND概況
CDN的全稱是Content Delivery Network，即內容分發網絡。
CND加速主要是加速靜態資源，如網站上面上傳的圖片、媒體，以及引入的一些Js、css等文件。
CND加速需要依靠各個網絡節點，例如100台CDN服務器分布在全國范圍，從上海訪問，會從最近的節點返回資源，這是核心。
CND服務器通過緩存或者主動抓取主服務器的內容來實現資源儲備
CDN基本原理
將源站內容分發至最接近用戶的節點，使用戶可就近取得所需內容，提高用戶訪問的響應速度和成功率。
VUE實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<title>vue的測試</title>
</head>
<body>
<div id="ht">
{{qd}} <!--{{}}指的是vue實例所定義的變量取值方式-->
</div>
</body>
<script type="text/javascript">
//創建實例,一個vue工程,只有一個跟實例
new Vue({
el:"#ht",// DOM 元素，掛載視圖模型
// data:(function () {
//
// })()
// 上下兩種函數相等,只是這個用到了Es6語法
// ES6指的是javascript新規范
data(){// 定義屬性，並設置初始值
return{
qd:'本是青燈不歸客' ,//給變量設置值
};
}
});
</script>
</html>
效果：
但是這里一定要注意一點就是既然寫了變量就一定要賦值，哪怕是null也行
這是沒賦值的錯，打開開發者工具查看控制台才能看到
給他賦了個值，null
效果圖：就是不顯示值但是控制台不報錯了
vue-model雙向綁定變量指令案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <title>vue-model雙向綁定變量指令</title> </head> <body> <div id="ht"> {{qd}} <input type="text" v-model="qd"/> </div> </body> <script type="text/javascript"> new Vue({ el:'#ht', data(){ return{ qd:null }; } }) </script> </html>
效果圖：文本框中輸入什么，文本框外面就顯示什么
v-on事件案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <title>v-on事件</title> </head> <body> <div id="ht"> <input type="text" v-model="qd"/> <button v-on:click="hhh">提交</button> </div> </body> <script type="text/javascript"> new Vue({ el:'#ht', data(){ return{ qd:null, }; }, methods:{ hhh(){ console.log(this.qd); } } }) </script> </html>
效果圖：文本框中輸入什么。控制台就顯示什么
vue插值
- 文本插值
在標簽中使用{{qd}}
<li> <h2>文本</h2> {{qd}} </li>
- html插值
使用v-html指令用於輸出html代碼
<li> <h2>ntml</h2> <div v-html="vueHtml"></div> </li>
- 屬性插值
HTML屬性中的值應使用v-bind指令
注意：v-bind與v-model的差別
v-bind：將對應的值給填寫到指定屬性中
v-model：數據雙向綁定的指令
<li> <h2>屬性</h2> <!--v-bind:與v-model的區別--> <!--v-model是做數據雙向綁定的指令 --> <!-- v-bind：將對應的值給填寫到指定屬性中--> <input type="text" v-bind:value="qd" /> </li>
- 表達式
Vue提供了完全的JavaScript表達式支持
<li> <h2>表達式</h2> <!-- //從下標0開始截取到下標6 --> {{str.substr(0,6).toUpperCase()}} <!-- //截取的下標數+1 --> {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} </li> <li :id="'list-' + id">我的id是動態生成的</li>
javascprt代碼
<script type="text/javascript"> new Vue({ el:"#ht", data() { return { qd: '本是青燈不歸客', vueHtml:'<span style="color: aqua;">山有木兮木有之</span>', str:"http://www.baidu.com", number:6, ok:true, id:5, }; } }); </script>
效果圖：
動態id效果
指令（多種指令）
- v-if|v-else|v-else-if：根據其后表達式的bool值進行判斷是否渲染該元素
他們只能是兄弟元素
v-else-if上一個兄弟元素必須是v-if
v-else上一個兄弟元素必須是v-if或者是v-else-if
- v-show：與v-if類似，只是會渲染其身后表達式為false的元素，而且會給這樣的元素添加css代碼：style="display:none"
-
v-for：類似JS的遍歷，
遍歷數組: v-for="item in items", items是數組，item為數組中的數組元素
遍歷對象: v-for="(value,key,index) in stu", value屬性值,key屬性名，index下標
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <title>指令</title> </head> <body> <div id="ht"> <ul> <li> <h2>條件指令（if elseif else）</h2> {{qd}} </li> <li><input type="text" v-model="score" /> <div v-if="score>90">A</div> <div v-else-if="score>80">B</div> <div v-else-if="score>60">C</div> <div v-else="">D</div> </li> <li> <h3>v-show</h3> <input type="text" v-model="show" /> <div v-show="show">出現吧</div> </li> <li> <h3>v-for</h3> <div v-for="item,index in objArr"> {{item}},{{index}} </div> <div v-for="item,index in objArr"> {{item.name}},{{index}} </div> </li> <li> <h3>動態參數</h3> <input type="text" v-model="evname" /> <!-- dblclick --> <button v-on:[evname]="hhh">點我</button> </li> </ul> </div> </body> <script type="text/javascript"> new Vue({ el: "#ht", data() { return { qd: '本是青燈不歸客', score: 88, show: null, arr: [1, 3, 5, 7, 9], objArr: [{ id: '01', name: '哈哈' }, { id: '02', name: '拉拉' }, { id: '03', name: '略略' }], evname: 'click' }; }, methods: { hhh() { console.log('hhh方法的執行'); } }, }); </script> </html>
效果圖：
參數(包含動態參數）
-
參數：一些指令能夠接收一個“參數”，在指令名稱之后以冒號表示
例如：
<a v-bind:href="url">...</a>
在這里href是參數，告知v-bind指令將該元素的href屬性與表達式url的值綁定
<a v-on:click="doSomething">...</a>
在這里click參數是監聽的事件名。
- 動態參數：從2.6.0開始，可以用方括號括起來的JavaScript表達式作為一個指令的參數
<a v-bind:[attrname]="url"> ... </a>
同樣地，你可以使用動態參數為一個動態的事件名綁定處理函數
<a v-on:[evname]="doSomething"> ... </a>
注意：動態參數表達式有一些語法約束，evName無效,evname有效，回避大寫
動態參數的方法執行就是點幾次他就顯示幾次
過濾器（局部，局部串聯，全局）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <title>過濾器</title> </head> <body> <div id="ht"> <ul> <li> <h3>局部過濾器</h3> {{qd}} {{qd | a}} </li> <li> <h3>局部過濾器可串聯</h3> {{qd}} {{qd | a | b}} </li> <li> <h3>全局過濾器</h3> {{qd | c}} </li> </ul> </div> </body> <script type="text/javascript"> Vue.filter('c',function(v){ return v.substring(7); }); new Vue({ el: "#ht", data() { return { qd:'http://www.baidu.com', }; }, filters:{ a(v){ console.log('---------------------'); console.log(v); return v.substring(4); }, b(v){ return v.substring(3,13); } } }); </script> </html>
效果圖：
計算屬性&&監聽屬性
-
計算屬性可用於快速計算視圖（View）中顯示的屬性。這些計算將被緩存，並且只在需要時更新
computed:{} -
監聽屬性 watch，我們可以通過 watch 來響應數據的變化
watch:{}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <title>計算屬性及監聽屬性</title> </head> <body> <div id="ht"> <ul> <li> <h3>計算屬性</h3> 數量:<input type="text" v-model="num"/><br /> 單價:<input type="text" v-model="price"/><br /> 計算總價:{{total}} <h3>監聽屬性</h3> km:<input type="text" v-model="km"/> m:<input type="text" v-model="m"/> </li> </ul> </div> </body> <script type="text/javascript"> new Vue({ el: "#ht", data() { return { num:1, price:18, km:1, m:1000, }; }, computed:{ // 在計算屬性定義的時候,是可以獲取到Vue實例中定義的變量 total(){ return parseInt(this.num) * parseInt(this.price); } }, watch:{ km(h){ this.m=h*1000; }, m(h){ this.km=h/1000; } } }); </script> </html>
效果（可以手動修改值）：
謝謝觀看！！！！