Vue介紹
-
漸進式JavaScript框架
-
官網:https://cn.vuejs.org/
-
開發版(在程式設計師開發階段使用的版本,有錯誤提示)
-
生產版(上線版.沒有錯誤提示)
Vue使用
-
書寫位置:HTML頁面中
-
Vue基本骨架
1 vue的基本框架結構
2 <script>
3 new Vue({
4 鍵:值
5 el:"元素" //控制vue物件的操作範圍,
6 data:{
7 鍵:值,
8 鍵2:值2.
9 ...
10 例如:
11 name:'小潘'
12 }
13 })
14 </script>
如何將Vue中的資料渲染到HTML頁面中?
使用文字插值: {{變數}} {{鍵}} 文字插值
Vue語法
第一個Vue程式
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 </head>
7 <body>
8 <div id="app">
9 <div>{{msg}}</div>
10
11 <script type="text/javascript" src="js/vue.js"></script>
12 <script type="text/javascript">
13 /*
14 vue的基本使用步驟
15 1.需要提供標籤用於填充資料
16 2.引入vue.js庫檔案
17 3.可以使用vue的語法做功能了
18 4.把vue提供的資料填充到標籤裡面
19 */
20
21 var vm= new Vue({
22 el:'#app',
23 data:{
24 msg:'hello Vue'
25 }
26 });
27 </script>
28 </div>
29 </body>
30</html>
三元運算子
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5 <meta charset="UTF-8" />
6 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
7 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8 <title>三元運算子</title>
9</head>
10
11<body>
12 <script src="js/vue.js"></script>
13 <div id="app">
14 運算結果:{{num+10}} <br />
15 三元運算子示例1:{{num==2?3:10}}<br />
16
17 </div>
18 <!-- 表示式?真:假 -->
19
20</body>
21<script>
22 new Vue({
23 el: "#app",
24 data: {
25 num: 10,
26 num2: 20,
27 bool: "true",
28 },
29 });
30</script>
31
32</html>
執行結果:
v-pre指令
作用:原樣輸出(可以讓插值語法變成文字模式,不解析)
1<script src="js/vue.js"></script>
2 <div id="app">
3 <!-- v-pre:不解析直接輸出原格式 -->
4 <p v-pre>{{msg}}</p>
5 <p>{{msg}}</p>
6</div>
7<script>
8 new Vue({
9 el:"#app",
10 data:{
11 n1:'n1變數',
12 a1:"<a href='http://www.taobao.com'>攻擊的程式碼</a>",
13 name:"張老三"
14 }
15 })
16</script>
效果:
v-html指令
1<script src="js/vue.js"></script>
2 <div id="app">
3 <!--v-html:解析html -->
4 <p v-html='style'>{{style}}</p>
5 <p>{{msg}}</p>
6</div>
7<script>
8 new Vue({
9 el:"#app",
10 data:{
11 n1:'n1變數',
12 a1:"<h1>hello world</h1>",
13 name:"張老三"
14 }
15 })
16</script>
效果:
v-text指令
1<script src="js/vue.js"></script>
2 <div id="app">
3 <!-- v-text:輸入文字，與插值作用相同 -->
4 <p v-text='msg'>{{msg}}</p>
5 <p>{{msg}}</p>
6</div>
7<script>
8 new Vue({
9 el:"#app",
10 data:{
11 n1:'n1變數',
12 a1:"<h1>hello world</h1>",
13 name:"張老三"
14 }
15 })
16</script>
效果:
v-model指令
Vue中實現雙向繫結步驟:
-
1.按照正常骨架進行書寫
-
2.使用v-model指令,格式:v-model='data中的值'
程式碼實現:
1<body>
2 <div id="app">
3 <input type="text" v-model="inval">
4 <p>{{inval}}</p>
5 </div>
6</body>
7<script>
8 new Vue({
9 el:"#app",
10 data:{
11 inval:''
12 }
13 })
14</script>
- 效果演示:
v-if與v-show指令
1v-if
2可以控制元素的顯示或隱藏,指令的值是布林型別,如果值為true,表示顯示元素,如果值為false.表示不顯示元素
3 語法格式:
4<元素 v-if="布林|表示式|變數"></元素>
5 v-if的值得是一個變數
6v-show
7控制元素顯示或隱藏,值也是布林型別
8v-if和v-show的區別:
9v-if的指令的如果為false,就刪除節點
10v-show的指令值為false 就是給當前的元素新增一個style屬性並設定值為 display:none
11前端:頻繁的刪除新增節點,是對資源的消耗比較大,給元素設定屬性對資源的消耗比較小,所以,頻繁的對元素顯示或隱藏就使用v-show,反之使用v-if
1 <div id="app">
2 <p v-if="bool">{{n}}</p>
3 <p v-show="bool">{{n1}}</p>
4 </div>
5<script>
6 new Vue({
7 el:"#app",
8 data:{
9 bool:false,
10 n:1,
11 n1:2
12 }
13 })
14</script>
執行效果:
v-cloak
- 原因:由於網路原因,vue.js沒有被載入完成,導致頁面渲染的時候,出現閃動問題(出現了語法{{}})
- 解決方案:使用斗篷解決,給斗篷加樣式表,給元素加斗篷,斗篷中的display會在vue.js載入完成後,例項物件完成後自動清除
1<style>
2 [v-cloak]{
3 display: none;
4 }
5 </style>
6 <div id="app">
7 <p v-cloak>{{str}}</p>
8 </div>
9 <h5>aaaaaa</h5>
10</body>
11<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
12<script>
13 new Vue({
14 el:"#app",
15 data:{
16 str:"這是一個自負傳"
17 }
18 })
19</script>
事件繫結
- 採用v-on指令進行事件繫結
- vue中方法如何宣告
1 data{},
2 methods:{
3 函式名:function(){
4 函式體
5 }
6 }
1定義方式
2<button v-on:click="num++">點選</button>
3<button @click="num++">點選1</button>
事件函式呼叫方式
- 直接繫結函式名稱
1<button v-on:click='say'>hello</button>
- 呼叫函式
1<button v-on:click='say()'>hello</button>
事件函式引數傳遞
- 普通函式和事件物件
1<button @click="handle2(123,456,$event)">點選2</button>
1.如果事件函式直接繫結函式名稱，那麼預設會傳遞事件物件作為事件函式的第一個引數
2.如果事件繫結函式呼叫，那麼事件物件必須作為最後一個引數顯示傳遞，並且事件物件的名稱必須是$event
1 event ：函式中的預設形參，代表原生 DOM 事件
2當呼叫的函式，有多個引數傳入時，需要使用原生DOM事件，則通過 $event 作為實參傳入
3作用：用於監聽 DOM 事件
