Vue.js系列之一初識Vue
在看vue.js之前,可以先看這兩篇文章,對於為什麽要使用vue會有一定幫助
1、 Vue.js !important
2、界面之下：還原真實的MV*模式 !important
3、web前端優化之reflow(減少頁面的回流)
4、深度剖析：如何實現一個 Virtual DOM 算法
本系列文章是基於官方文檔,整理的,旨在讓新手快速上手.學習vue.js需要一定基礎.
一、聲明式渲染
1、實現Hello World的功能
還是熟悉的Hello World,下面用Vue.js的聲明式渲染來實現
<body> <div id="tDiv"> {{message}}</div> </body> <script type="text/javascript"> var currentPage=new Vue({ el:"#tDiv", //指定綁定的目標dom元素的Id //綁定數據源 data:{ message:"hello World By Vue!" } }); </script>
此時Vue已經將Dom和數據進行了綁定,所有的元素會隨著數據的改變而改變,打開當前頁面的控制臺,在控制臺中改變數據,如下圖:
2、通過給dom元素的添加vue指令屬性將dom元素的屬性和數據進行綁定
下面通過vue指令將數據和dom元素的屬性綁定到一起,代碼如下:
<body> <div id="tDiv" v-bind:title="message"> 鼠標懸停幾秒鐘查看此處動態綁定的提示信息！ </div> </body> <script> var currentPage=new Vue({ el:"#tDiv", //指定綁定的目標dom元素的Id //綁定數據源 data:{ message:‘頁面加載於 ‘ + new Date().toLocaleString() } }); //鼠標懸浮效果 $(document).ready(function () { var curr=$("#tDiv"); curr.hover(function () { alert(curr.attr("title")); }) }) </script>
同樣的,通過控制臺修改數據的時候,dom元素也會發生相應的改變.自行實現
總結:一中的例子展示了Vue.Js將Dom文本綁定到數據的功能.
二、條件與循環(if語句和for語句在Vue中的使用方式)
1、使用vue的類if語句功能
通過v-if條件指令控制元素的顯示隱藏,代碼如下:
<body> <div id="tDiv" v-if="seen"> 顯示 </div> </body> <script type="text/javascript"> var currentPage=new Vue({ el:"#tDiv", //指定綁定的目標dom元素的Id //綁定數據源 data:{ message:‘頁面加載於 ‘ + new Date().toLocaleString(), seen:true } }); </script>
同樣在控制臺中修改對應的數據,如下圖:
結論:上面的例子展示了Vue.Js不僅能將Dom文本綁定到數據,還能將Dom結構綁定到數據
2、使用vue的類for功能
通過v-for指令來遍歷數據集合進行展示,代碼如下:
<body> <div id="tDiv"> <ul v-for="model in list"> <li>{{model.name}}</li> </ul> </div> </body> <script> var currentPage=new Vue({ el:"#tDiv", //指定綁定的目標dom元素的Id //綁定數據源 data:{ list:[ {id:1,name:"張三"}, {id:2,name:"李四"}, {id:3,name:"王五"} ] } }); </script>
在控制臺中給list追加數據,如下圖:
會發現ul列表中會多出一條數據,如下圖:
三、事件監聽
Vue提供了監聽Js原生事件的機制,代碼如下:
<body> <div id="tDiv"> <p>{{message}}</p> <input type="button" v-on:click="resetPContent" value="點我有驚喜"> </div> </body> <script> var currentPage=new Vue({ el:"#tDiv", //指定綁定的目標dom元素的Id //綁定數據源 data:{ message:"Hello World By Vue" }, methods:{ resetPContent:function(){ this.message=this.message.split(‘‘).reverse().join(‘‘); //reverse顛倒數據元素的順序 } } }); </script>
點擊之後,如下圖:
註意在resetPContent方法中,更改了數據,相當於改變了應用程序的狀態,但是註意這裏沒有任何操作dom元素的代碼,因為所有的dom操作都由vue來進行,這裏我們主需要關心數據源.更新dom的操作都由vue來進行.
四、表單輸入和應用狀態之間的雙向綁定
通過v-model指令來實現表單輸入和應用狀態之間的雙向綁定,代碼如下：
<body> <div id="tDiv"> <p>{{message}}</p> <input type="text" v-model="message"> </div> </body> <script> var currentPage=new Vue({ el:"#tDiv", //指定綁定的目標dom元素的Id //綁定數據源 data:{ message:"Hello World By Vue" } }); </script>
Vue.js系列之一初識Vue