VUE是一套前端框架，尤雨溪，前谷歌的軟件工程師。
框架：提供一整套解羞方法(顯示，效果，請求訪問)
庫：只提供針對某一種情況的解決方案
-
Vue.js 是目前最火的一個前端框架，React是最流行的一個前端框架（React除了開發網站，還可以開發手機App， Vue語法也是可以用於進行手機App開發的，需要借助於Weex）
-
Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，並成為前端三大主流框架！
-
Vue.js 是一套構建用戶界面的框架，只關注視圖層，它不僅易於上手，還便於與第三方庫或既有項目整合。（Vue有配套的第三方類庫，可以整合起來做大型項目的開發）
-
前端的主要工作？主要負責MVC中的V這一層；主要工作就是和界面打交道，來制作前端頁面效果；
1、類比JQUERY
| jquery | vue | 說明 |
|---|---|---|
| $().text() | {{ … }} | 插值表達式,為標簽設置文本內容 |
| $().attr() <br/> $().prop() | v-bind | 為標簽設置屬性 |
| $().val() | v-model | 獲取或為表單設置值 |
| $().html() | v-html | 獲取或為標簽設置內容包含html值 |
二、VUE入門案例
1、搭建vue環鏡
-
引入vue.js支持
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -
創建vue入口和實例對象
2、vue頁面構成
-
模板(html代碼)
-
數據(JS代碼vue實例中的內容)
-
指令：配合數據(vue實例)在模板中對數據顯示做效果(判斷，循環)，指令一般以v-開頭
3、data函數的寫法
-
寫法一:
<script type="text/javascript">
//實例化vue實例
let vue=new Vue({
el:"#app", //表示哪個節點是vue的根節點，vue的掛載點，所有vue代碼都要寫在該id屬性值所在的div標簽中
data:{
user:{username:'張三',age:18}
}
});
</script> -
寫法二：
<script type="text/javascript">
//實例化vue實例
let vue=new Vue({
el:"#app", //表示哪個節點是vue的根節點，vue的掛載點，所有vue代碼都要寫在該id屬性值所在的div標簽中
data(){//在這里面聲明的變量是全局的，在整登個new Vue范圍內都可以調用
return {
users: { //對象
username: "a",
age: 19
}
}
}
});
</script>
需要注意的是，雖然 data 屬性的寫法有 2 種，但是
-
第 1 種的
data: { ... }對象的寫法在未來會出現問題！某些場景中它不適用。 -
第 2 種的
data () { return {...} }函數的寫法則一直有效。<font color=red>以后我們使用第二種方式，不在使用第一種方式</font>.
三、VUE常用指令
1、循環指令v-for
-
基本用法
<ul>
//us表示保存循環出的每個值
//in循環關鍵字，相當於foreach的:
//userList要循環的數組
<li v-for="us in userList">姓名：{{us.username}} 年齡：{{us.age}}</li>
</ul> -
獲得循環下標
<ul>
//us表示保存循環出的每個值
//index表示循環的下標
//in循環關鍵字，相當於foreach的:
//userList要循環的數組
<li v-for="(us,index) in userList">序號:{{index+1}} 姓名：{{us.username}} 年齡：{{us.age}}</li>
</ul>
2、判斷指令v-if v-else
v-else-if 和 v-else是用來判斷
<body>
<div id="app">
<!--
14> 未成年
15 20 少年
21 30 青年
-->
<p v-if="age<14">未成年</p>
<p v-else-if="age>=15 && age<=20">少年</p>
<p v-else-if="age>=21 && age<=30">青年</p>
</div>
</body>
<!--重點-->
<script type="text/javascript">
//實例化vue實例
let vue=new Vue({
el:"#app", //表示哪個節點是vue的根節點，vue的掛載點，所有vue代碼都要寫在該id屬性值所在的div標簽中
data(){//在這里面聲明的變量是全局的，在整登個new Vue范圍內都可以調用
return {
age:18
}
}
});
</script>
3、標簽屬性綁定v-bind
為標簽設置屬性值
語法：
v-bind:屬性名="變量名"
案例：
<div id="app">
//disabled:屬性名稱
//disabStr:disabled屬性的值
<input type="button" v-bind:disabled="disabStr" value="我是按鈕">
</div>
</body>
<!--重點-->
<script type="text/javascript">
//實例化vue實例
let vue=new Vue({
el:"#app",
data(){
return {
//變量，用來保存disabled屬性的值
disabStr:false
}
}
});
</script>
4、v-bind為標簽綁定樣式
5、v-model雙向數據綁定
-
v-bind：用來為標簽設置屬性值，只能將data函數中的變量值賦給屬性
-
v-model：主要用在表單上，獲得表單的數據並保存到data的變量中
6、添加html到標簽指令v-html