Vue是目前最好的國產前端漸進式框架，它與原生js和jQuery的最大區別就是Vue是直接操作數據來達到對頁面的渲染，而原生js和jQuery都是操作Dom元素來渲染頁面。Vue可以讓開發人員“換一種思路”去開發前端頁面。
注意：在學習Vue之前，必須學好html。css。js的基礎知識
基本使用：
- 插值表達式
使用步驟：
1）、需要提供標籤用於填充數據
注意： 在標籤中我們使用插值語法的形式 即 {{}} 進行填充數據
2）、引入vue.js庫文件
注意：一定要先引入Vue文件 在使用Vue語法 因爲存在作用域的問題
3）、使用vue的語法做功能
new Vue() 創建一個Vue的實例
在構造函數中以對象的形式做一些配置
4）、利用Vue將數據渲染到頁面上
數據寫在data 裏面
實例代碼：
<div class="header">
<div>{{msg}}</div>
</div>
<script>
var vue=new Vue({
el:'.header',
data:{
msg:'hello vue'
}
});
</script>
效果：
2. 指令
指令就是一個自定義屬性。Vue中指令都是以 v- 開頭
3. v-cloak
v-cloak是解決插值表達式的“閃動”問題。它可以讓數據在內存中計算完畢再渲染到頁面。
用法：直接添加在插值表達式所在的標籤上即可
<div class="header">
<div v-cloak>{{msg}}</div>
</div>
<script>
var vue=new Vue({
el:'.header',
data:{
msg:'hello vue'
}
});
</script>
- v-text 和 v-html
<div class="header">
<div v-text='msg'></div>
<div v-text='msg1'></div>
<div v-html='msg1'></div>
</div>
<script>
var vue=new Vue({
el:'.header',
data:{
msg:'hello vue',
msg1:'<h2>hello vue</h2>'
}
});
</script>
效果：
v-text 和 v-html 的區別
v-text輸出的是純文本，瀏覽器不會對其再進行html解析
html會將其當html標籤解析後輸出
- v-pre
顯示原始信息跳過編譯過程
一些靜態的內容不需要編譯加這個指令可以加快渲染
<div class="header">
<div v-pre>{{msg}}</div>
</div>
<script>
var vue=new Vue({
el:'.header',
data:{
msg:'hello vue',
msg1:'<h2>hello vue</h2>'
}
});
</script>
- 數據響應式
數據響應式是指當數據改變的時候頁面內容跟隨者改變，不會再通過事件監聽再去刷新頁面數據，可以達到頁面數據的實時更新。 - v-once
執行一次性的插值【當數據改變時，插值處的內容不會繼續更新】
當開發過程中確定不會改變的數據使用此指令，可以提升頁面的響應速度
<div class="header">
<div v-once>{{msg}}</div>
</div>
<script>
var vue=new Vue({
el:'.header',
data:{
msg:'hello vue',
msg1:'<h2>hello vue</h2>'
}
});
</script>
- 雙向數據綁定與v-model
什麼是雙向數據綁定
當數據發生變化的時候，視圖也就發生變化
當視圖發生變化的時候，數據也會跟着同步變化
雙向綁定的使用場景
v-model是一個指令，限制在 input、select、textarea、components（組件） 中使用
<div class="header">
<div>{{msg}}</div>
<input type="text" v-model='msg'>
</div>
<script>
var vue=new Vue({
el:'.header',
data:{
msg:'hello vue',
msg1:'<h2>hello vue</h2>'
}
});
</script>
9. MVVM
M、V、VM 分別代表什麼？
m model
數據層 Vue 中 數據層 都放在 data 裏面
v view 視圖
Vue 中 view 即 我們的HTML頁面
vm （view-model） 控制器 將數據和視圖層建立聯繫
vm 即 Vue 的實例 就是 vm
事件綁定：
- v-on
通過v-on 綁定事件。。v-on 可以簡寫 @
<div class="header">
<div v-on:click='num++'>{{num}}</div>
<input type="text" v-model='msg'>
</div>
<script>
var vue=new Vue({
el:'.header',
data:{
msg:'hello vue',
msg1:'<h2>hello vue</h2>',
num:0
}
});
</script>
事件綁定還可以添加函數：
直接綁定函數名稱調用
< button v-on:click=‘handle1’>點擊1< /button>
調用函數的形式
< button v-on:click=‘handle1()’>點擊1< /button>
<div class="header">
<div v-on:click='handle'>{{num}}</div>
<div v-on:click='handle()'>{{num}}</div>
<input type="text" v-model='msg'>
</div>
<script>
var vue = new Vue({
el: '.header',
data: {
msg: 'hello vue',
msg1: '<h2>hello vue</h2>',
num: 0
},
methods: {
handle: function () {
this.num++;
},
}
});
</script>
- 阻止冒泡和 阻止默認行爲
.stop 阻止冒泡
.prevent 取消默認事件
<div class="header">
<!-- <div v-on:click='handle'>{{num}}</div>
<div v-on:click='handle()'>{{num}}</div>
<input type="text" v-model='msg'> -->
<a href="http://www.baidu.com" v-on:click.prevent>baidu</a>
</div>
<script>
var vue = new Vue({
el: '.header',
data: {
msg: 'hello vue',
msg1: '<h2>hello vue</h2>',
num: 0
},
methods: {
handle: function () {
this.num++;
},
}
});
</script>
- 鍵盤事件
常見按鍵修飾符有哪些
.enter => enter鍵
.tab => tab鍵
.delete (捕獲“刪除”和“退格”按鍵) => 刪除鍵
.esc => 取消鍵
.space => 空格鍵
.up => 上
.down => 下
.left => 左
.right => 右
這些指令規定了按了哪些鍵盤上的鍵纔會觸發的事件