當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端VUE框架

發布時間：2024/4/17 HTML 36 豆豆

生活随笔收集整理的這篇文章主要介紹了前端VUE框架小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、什么是VUE？
?　　它是一個構建用戶界面的JAVASCRIPt框架
?　　vue不關心你頁面上的是什么標簽，它操作的是變量或屬性

為什么要使用VUE？

　　在前后端分離的時候，后端只返回json數據，再沒有render方法，前端發送ajax請求（api=url）得到數據后，要在頁面渲染數據，如果你js+css實現就太麻煩了，這時候VUE就出現了。
二、怎么樣使用VUE

1）引入vue.js<script src=vue.js></script> 2) 展示html<div id="app"><input type="text" v-model="msg"><p>{{msg}}</p></div> 3)建立vue對象new Vue({el: "#app", //表示在當前這個元素內開始使用VUEdata:{msg: ""}})

三、VUE指令

1.?? v-model：實現了數據和視圖的雙向綁定
?分成了3步：
?1）把元素的值和數據相綁定
?2）當輸入內容時，數據同步發生變化，視圖? --->數據的驅動
?3）當改變數據時，輸入內容也會發生變化，數據--->視圖的驅動

<body>
<div id="app">
<input v-model="msg">
<p>{{msg}}</p>
<input type="button" value="變化" @click="change">
</div>
<script>
new Vue({
el: "#app", //表示在當前這個元素內開始使用VUE
data:{
msg: "aaaaa"
},
methods: {
change: function () {
this.msg = 8888888;
}
}

})
</script>

</body>

2.? v-on:監聽元素事件，并執行相應的操作； @是對v-on的簡寫

補充：display=none 時如果你的盒子沒有寬高，那它就不占位

3.?? v-bind:綁定元素的屬性來執行相應的操作； ?? : 是對v-bind的簡寫

4.??? v-for:根據變量的值來循環渲染元素

<body><div id="app"><ul><li v-for="(item,index2) in arr">{{item}}: {{index2}}</li></ul><ul><li v-for="(item,key,index) in obj">{{item}}: {{key}}:{{index}}</li></ul><ul><li v-for="item in obj2">{{item.username}}{{item.age}}{{item.sex}}</li></ul><div v-for="i in 8">{{i}}</div><input type="button" value="點我吧!" @click="show()"><a :href="url">我想去百度</a></div><script>new Vue({el: "#app", //表示在當前這個元素內開始使用VUEdata:{arr: [11,22,3344,55],obj: {a:"張三",b:"李四",c:"王大拿",d:"謝大腳"},obj2:[{username: "jason"},{age: 20},{sex: "male"}],str: "我來了",url: "http://www.qq.com"},methods: {show: function () {this.arr.pop();}}})</script></body>

5.?? v-if / show

v-if: 根據表達式的真假值來動態插入和移除元素
v-show:根據表達式的真假值來隱藏和顯示元素

<body><div id="app"><p v-if="pick">我是劉德華</p><p v-else>我是張學友</p><p v-show="temp">我是趙本山</p><p v-show="ok">你喜歡我嗎？</p></div><script>var vm = new Vue({el: "#app", //表示在當前這個元素內開始使用VUEdata:{pick: false,temp: true,ok: true}})window.setInterval(function(){vm.ok = !vm.ok;},1000)</script></body>

6.?? v-html:在元素中不僅可以插入文本，還可以插入標簽

<body><div id="app"><ul><li><input type="checkbox">蘋果</li><li><input type="checkbox">香蕉</li><li><input type="checkbox">香梨</li><li><input type="checkbox" v-on:click="create()">其它</li><li v-html="htmlstr" v-show="test"></li></ul></div><script>var vm = new Vue({el: "app", //表示在當前這個元素內開始使用VUEdata:{htmlstr: "<textarea></textarea>",test: false},methods: {create: function () {this.test = !this.test;}}})</script> </body>

7.??? 模板對象

<body><div id="app"><p>{{msg}}</p><p>{{80+2}}</p><p>{{20>30}}</p>{{msg}}我是：<h1 v-text="msg">{{str}}</h1>你是：<h1 v-text="msg">2222222222222</h1><h2 v-html="hd"></h2><h2 v-html="str"></h2></div><script>new Vue({el: "#app", //表示在當前這個元素內開始使用VUEdata:{msg: "我是老大",hd: "<input type='button' value='你是小三'>",str: "我要發財!"}})</script> </body>

8.??? 計算屬性

<body><div id="app"><p>{{msg}}</p></div><script>var vm = new Vue({el: "#app",data: {temp: 1001},computed: {msg: function () {if(this.temp > 1000){return parseInt(this.temp/10)-1} else {return this.temp-1}}}})</script> </body>

9.??? 小綜合練習

對數組的操作：push 數組中最后添加一個值pop　　　數組中刪除最后一個值shift　　刪除數組頭一個元素unshift　向開頭添加一個或多個元素splice　　刪除其中一個對象reverse　反轉 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="vue.js"></script><style>ul li{list-style: none;}</style> </head> <body><div id="app"><div><input type="text" placeholder="姓名" v-model="username"><input type="text" placeholder="年齡" v-model="age"><input type="button" value="增加" @click="add"></div><div><table cellpadding="0" border="1"><tr v-for="(item,index) in arr"><td><input type="text" class="txt" v-model="item.username"> </td><td>{{item.age}}</td><td>{{index}}</td><td><input type="text" class="txt"></td><td><input type="button" value="刪除" @click="del(index)"></td></tr></table></div></div><script>new Vue({el: "#app", //表示在當前這個元素內開始使用VUEdata:{username: "",age: "",arr: []},methods: {add: function () {this.arr.push({username:this.username,age: this.age});console.log(this.arr);},del: function (index) {this.arr.splice(index,1);}}})</script></body> </html> View Code

10.?? 自定義指令：相關網址?? https://cn.vuejs.org/v2/guide/custom-directive.html

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="vue.js"></script><style>ul li{list-style: none;}</style> </head> <body><div id="app"><input type="text" v-focus></div><script>new Vue({el: "#app", //表示在當前這個元素內開始使用VUEdata:{},directives: {focus: { //指令的名字//當被綁定的元素插入到 DOM 中時inserted: function (tt) {tt.focus();tt.style.backgroundColor = "blue";tt.style.color = "#fff"}}}})</script></body> </html> View Code

轉載于:https://www.cnblogs.com/liuwei0824/p/8351757.html

總結

以上是生活随笔為你收集整理的前端VUE框架的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

Vue
框架

上一篇： [Leetcode] Reverse I
下一篇：对字符串切片