Web應用開發學習筆記———

Web應用開發學習筆記————Vue框架

Vue框架快速入門

Vue入門

在這里插入圖片描述
實現代碼：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue入門</title><!--引入vue.js文件--><script src="../js/vue.js"></script>
</head>
<body><div id="app"><input type="text" v-model="message"><!--這里使用差值表達式-->{{message}}</div>
</body>
<!--在script標簽下編寫vue命令-->
<script>
<!--vue通過#app這個id來識別覆蓋范圍-->new Vue({el:"#app",data:{message:"Hello vue"}})
</script>
</html>

== 這里的vue.js文件需要在官網上下載到本地，后者直接在官網導包 ==

Vue常用指令

在這里插入圖片描述

v-bind & v-model:
v-on:

v-bind & v-model & v-on的實踐代碼：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue入門</title><!-- 引入Vue.js庫 --><script src="../js/vue.js"></script>
</head>
<body><!-- Vue實例的作用域，所有指令和綁定都在這個元素及其子元素內生效 --><div id="app"><!-- 使用v-bind指令綁定href屬性的值到Vue實例的data屬性中的url --><a v-bind:href="url"><!-- 創建一個按鈕，點擊后會跳轉到綁定的url --><input type="button" value="url" ></a><br><!-- 使用v-model指令創建雙向數據綁定，將輸入框的值與Vue實例的data屬性中的url綁定 --><input type="text" v-model="url"><br><!-- 使用v-on指令綁定click事件到Vue實例的methods屬性中的handle方法 --><input type="button" value="click me" v-on:click="handle()"></div>
</body>
<!-- Vue實例的JavaScript代碼 -->
<script>// 創建一個新的Vue實例new Vue({el:"#app", // 指定Vue實例掛載的元素，這里是id為'app'的div元素data:{     // 定義Vue實例的數據對象url:"https://cn.vuejs.org/guide/introduction.html" // 初始化url數據},methods:{  // 定義Vue實例的方法對象handle:function(){ // 定義一個名為handle的方法alert("我被點了") // 當方法被調用時，彈出一個警告框}},})
</script>
</html>

v-if & v-show

實踐代碼

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vuedome</title><script src="../js/vue.js"></script>
</head>
<body><div id ="app"><p>輸入年齡:</p><br>           <!-- 輸入年齡 --><input type="text" v-model="age"><br>    <!-- 綁定輸入框與 age 變量 -->判斷為：<span v-if="age <= 35">年輕人（35以下）</span>  <!-- 使用 v-if 條件判斷年齡范圍 --><span v-else-if="age > 35 && age <= 60">中年人（35到60）</span><span v-else>老年人（60以上）</span><span v-show="age <= 35">年輕人（35以下）</span>  <!-- 使用 v-show 按條件顯示不同年齡段提示 --><span v-show="age > 35 && age <= 60">中年人（35到60）</span><span v-show="age > 60">老年人（60以上）</span></div>
</body>
<script>new Vue({el:"#app",data:{age:40   // 初始化 age 變量值為 40},methods:{  // 方法部分為空},})
</script>
</html>

Vue常用指令綜合應用案列

代碼：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>VueExeclDemo</title><script src="../js/vue.js"></script>
</head>
<body><div id="app"><table border="1" cellspacing="0" width="60%"><tr><th>ID</th><th>Name</th><th>Age</th><th>Gender</th><th>score</th><th>level</th></tr><!-- 使用 Vue 的指令 v-for 對用戶數組進行循環渲染 --><tr align="center" v-for="(users, index) in users"><td>{{index+1}}</td><td>{{users.name}}</td><td>{{users.age}}</td><td><!-- 根據用戶的性別，顯示不同的文本 --><span v-if="users.gender === 1">Male</span><span v-else>Female</span></td><td>{{users.score}}</td><td><!-- 根據用戶的分數，顯示不同的等級 --><span v-if="users.score >= 85">A</span><span v-else-if="users.score >= 60">B</span><span style="color:red" v-else>C</span></td></tr></table></div>
</body>
<script>var app = new Vue({el: '#app',data: {// 定義用戶數組，包含每個用戶的信息users: [{id: 1,name: 'TOM',age: 18,gender: 1,score: 90,}, {id: 2,name: 'Jerry',age: 19,gender: 2,score: 85,}, {id: 3,name: 'Lily',age: 20,gender: 1,score: 95,}, {id: 4,name: 'Lucy',age: 21,gender: 2,score: 80,}, {id: 5,name: 'Mike',age: 22,gender: 1,score: 59,}]},methods: {// 這里可以添加 Vue 的方法}})
</script>
</html>

實現結果：
在這里插入圖片描述

Vue生命周期

在這里插入圖片描述

從new Vue開始，到最后銷毀，Vue架構會經歷八個生命階段，八個生命階段組成一個完整的生命周期。每到一個生命周期階段則會觸發對應的生命周期方法（鉤子）。

mounted方法

對于java程序員來說重點關注mounted方法，該方法在Vue框架完成掛載后就會自動執行，~~有點類似Java的構造方法~~。
在這里插入圖片描述
一般在mounted方法發送服務器請求指令。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/18065.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/18065.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/18065.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！