2022/08/27 吉软 Vue
目錄
Vue前言
概述：
特點：
一、 Vue導入
概述：
語法：
基本使用：
?二、Vue基本語法
1.插值表達式
概述：
2.顯示數(shù)據(jù)(v-text和v-html)
概述：
語法：
區(qū)別：
3.數(shù)據(jù)雙向綁定數(shù)據(jù)(v-model)
概述：
注意：
3.1.綁定文本框?
效果：?
3.2.綁定單個復選框
3.3.綁定多個復選框
?4.事件處理(v-on)
4.1.事件綁定(v-on)
5.循環(huán)遍歷(v-for)
5.1.遍歷數(shù)組
?5.2.key
6.判斷語法(v-if和v-show)
8.顯示數(shù)據(jù)(v-bind)
Vue前言
概述：
????????Vue是一款前端漸進式框架，可以提高前端開發(fā)效率。
特點：
? ????????Vue通過MVVM模式,能夠?qū)崿F(xiàn)視圖與模型的雙向綁定。簡單來說，就是數(shù)據(jù)變化的時候, 頁面會自動刷新, 頁面變化的時候，數(shù)據(jù)也會自動變化.
一、 Vue導入
概述：
????????Vue是一個類似于Jquery的一個JS框架，所以，如果想使用Vue，則在當前頁面導入Vue.js文件即可。
語法：
<!-- 在線導入 --> <!-- 開發(fā)環(huán)境版本，包含了用幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生產(chǎn)環(huán)境版本，優(yōu)化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script><!-- 本地導入 --> <script src="node_modules/vue/dist/vue.js"></script>基本使用：
<div id="app"><h1>用戶名:<input type="text" v-model="name"/></h1> <br/><h1>您輸入的用戶名是: {{name}}</h1> </div><script type="text/javascript">//創(chuàng)建一個Vue對象var app = new Vue({//指定,該對象代表<div id="app">,也就是說,這個div中的所有內(nèi)容,都被當前的app對象管理el: "#app",//定義vue中的數(shù)據(jù)data: {name: ""}}); </script>?二、Vue基本語法
1.插值表達式
概述：
????????插值表達式用戶把vue中所定義的數(shù)據(jù),顯示在頁面上. 插值表達式允許用戶輸入"JS代碼片段"
語法：
???{{ 變量名/對象.屬性名 }}
案例：
<html lang="en"> <head><meta charset="UTF-8"><title>vue插值表達式</title><script src="node_modules/vue/dist/vue.js"></script> </head> <body><div id="app"><h1>歡迎來到-->{{ name }}</h1></div><script type="text/javascript">//創(chuàng)建vue對象var app = new Vue({//讓vue接管div標簽el:"#app",//定義數(shù)據(jù),里邊包含一個屬性namedata:{name:""}});</script> </body> </html>2.顯示數(shù)據(jù)(v-text和v-html)
概述：
????????? v-text和v-html專門用來展示數(shù)據(jù), 其作用和插值表達式類似。v-text和v-html可以避免插值閃爍問題。當網(wǎng)速比較慢時, 使用{{}}來展示數(shù)據(jù), 有可能會產(chǎn)生插值閃爍問題。插值閃爍: 在數(shù)據(jù)未加載完成時，頁面會顯示出原始的{{}}, 過一會才會展示正常數(shù)據(jù).
語法：
v-text：<span v-text="msg"></span>?? ?<!-- 相當于<span>{{msg}}</span> --> v-html：<span v-html="msg"></span>?? ?<!-- 相當于<span>{{msg}}</span> -->區(qū)別：
v-text：把數(shù)據(jù)當作純文本顯示. v-html：遇到html標簽,會正常解析3.數(shù)據(jù)雙向綁定數(shù)據(jù)(v-model)
概述：
? Vue的雙向綁定可以實現(xiàn): 數(shù)據(jù)變化的時候, 頁面會自動刷新, 頁面變化的時候，數(shù)據(jù)也會自動變化.
注意：
- 雙向綁定, 只能綁定**“文本框,單選按鈕,復選框,文本域,下拉列表”**等
- 文本框/單選按鈕/textarea, 綁定的數(shù)據(jù)是字符串類型
- 單個復選框, 綁定的是boolean類型
- 多個復選框, 綁定的是數(shù)組
- select單選對應(yīng)字符串，多選對應(yīng)也是數(shù)組
3.1.綁定文本框?
代碼:
<div id="app">用戶名: <input type="text" v-model="username"/> </div> <script type="text/javascript">var app = new Vue({el:"#app",data:{//該屬性值和文本框的value屬性值,保持一致username:""}}); </script>效果：?
?
3.2.綁定單個復選框
代碼:
<div id="app"><input type="checkbox" v-model="agree">同意<br> </div> <script type="text/javascript">var app = new Vue({el:"#app",data:{agree:true}}); </script>效果:
3.3.綁定多個復選框
代碼:
<div id="app"><input type="checkbox" value="Java" v-model="language">Java<br><input type="checkbox" value="Python" v-model="language">Python<br><input type="checkbox" value="Swift" v-model="language">Swift<br> </div> <script type="text/javascript">var app = new Vue({el:"#app",data:{//數(shù)組中的值,就是被選中的元素的value屬性值language:["Java","Python"]}}); </script>效果:
4.事件處理(v-on)
4.1.事件綁定(v-on)
概述：
? Vue中也可以給頁面元素綁定事件.
語法：
<!--完整寫法--> <button v-on:事件名="函數(shù)名/vue表達式">點我</button> <!--簡化寫法--> <button @事件名="函數(shù)名/vue表達式">點我</button>注意：
? Vue支持html中所有已知事件. 如: @click, @submit等, 只不過事件的名字不帶on
案例：
<html lang="en"> <head><meta charset="UTF-8"><title>vue事件處理</title><script src="node_modules/vue/dist/vue.js"></script> </head> <body><div id="app"><button @click="show">點我</button></div><script type="text/javascript">//創(chuàng)建vue對象var app = new Vue({//獲取id為app的元素,該元素被vue對象所管理.只有被vue對象管理的標簽,其內(nèi)部才允許書寫vue語法el:"#app",//定義vue的方法methods:{//定義show方法,彈出提示框show() {alert("Hello Vue!!!");}}});</script> </body> </html>5.循環(huán)遍歷(v-for)
5.1.遍歷數(shù)組
語法：
v-for="item in items" v-for="(item,index) in items"items：要迭代的數(shù)組
item：存儲數(shù)組元素的變量名
index：迭代到的當前元素索引，從0開始。
代碼：
<div id="app"><ul><li v-for="(user, index) in users">{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}</li></ul> </div> <script>var app = new Vue({el:"#app",//el即element，要渲染的頁面元素data: {users:[{"name":"白卓冉","age":8,"gender":"男"},{"name":"白大鍋","age":12,"gender":"女"},{"name":"白仙女","age":4,"gender":"男"}]}}); </script>?5.2.key
概述：
? :key 一般配合v-for一起使用. 用來在特定情況下, 保證被遍歷的數(shù)組中的元素的順序.
案例:
<div id="app"><button @click="add">添加</button><ul><!-- 添加:key即可. 注意,key中的值必須是唯一且不會改變的值--><li v-for="name in list" :key="name"><input type="checkbox"> {{name}}</li></ul> </div>6.判斷語法(v-if和v-show)
概述：
v-if與v-show可以根據(jù)條件的結(jié)果,來決定是否顯示指定內(nèi)容.
? v-if: 條件不滿足時, 元素不會存在.
? v-show: 條件不滿足時, 元素不會顯示(但仍然存在).
案例：
<div id="app"><button @click="show = !show">點我</button><h1 v-if="show">Hello v-if.</h1><h1 v-show="show">Hello v-show.</h1> </div> <script>var app = new Vue({el:"#app",data: {show:true}}); </script>8.顯示數(shù)據(jù)(v-bind)
概述：
v-bind的作用和插值表達式差不多, 只不過, v-bind主要用于動態(tài)設(shè)置標簽的屬性值
語法：
<!--完整寫法--> <標簽名 v-bind:標簽屬性名="vue實例中的數(shù)據(jù)屬性名"/> <!--簡化寫法--> <標簽名 :標簽屬性名="vue實例中的數(shù)據(jù)屬性名"/>?案例：
<div id="app"><input type="button" :value="msg"/> </div> <script type="text/javascript">var app = new Vue({el:"#app",data:{msg:"我是按鈕"}});</script>總結(jié)
以上是生活随笔為你收集整理的2022/08/27 吉软 Vue的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： LINUX内核模块上下文,飞凌嵌入式知识
- 下一篇： nRF51822