2022/08/27 吉软 Vue
目錄
Vue前言
概述：
特點：
一、 Vue導入
概述：
語法：
基本使用：
?二、Vue基本語法
1.插值表達式
概述：
2.顯示數據(v-text和v-html)
概述：
語法：
區別：
3.數據雙向綁定數據(v-model)
概述：
注意：
3.1.綁定文本框?
效果：?
3.2.綁定單個復選框
3.3.綁定多個復選框
?4.事件處理(v-on)
4.1.事件綁定(v-on)
5.循環遍歷(v-for)
5.1.遍歷數組
?5.2.key
6.判斷語法(v-if和v-show)
8.顯示數據(v-bind)
Vue前言
概述：
????????Vue是一款前端漸進式框架，可以提高前端開發效率。
特點：
? ????????Vue通過MVVM模式,能夠實現視圖與模型的雙向綁定。簡單來說，就是數據變化的時候, 頁面會自動刷新, 頁面變化的時候，數據也會自動變化.
一、 Vue導入
概述：
????????Vue是一個類似于Jquery的一個JS框架，所以，如果想使用Vue，則在當前頁面導入Vue.js文件即可。
語法：
<!-- 在線導入 --> <!-- 開發環境版本，包含了用幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生產環境版本，優化了尺寸和速度 --> <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">//創建一個Vue對象var app = new Vue({//指定,該對象代表<div id="app">,也就是說,這個div中的所有內容,都被當前的app對象管理el: "#app",//定義vue中的數據data: {name: ""}}); </script>?二、Vue基本語法
1.插值表達式
概述：
????????插值表達式用戶把vue中所定義的數據,顯示在頁面上. 插值表達式允許用戶輸入"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">//創建vue對象var app = new Vue({//讓vue接管div標簽el:"#app",//定義數據,里邊包含一個屬性namedata:{name:""}});</script> </body> </html>2.顯示數據(v-text和v-html)
概述：
????????? v-text和v-html專門用來展示數據, 其作用和插值表達式類似。v-text和v-html可以避免插值閃爍問題。當網速比較慢時, 使用{{}}來展示數據, 有可能會產生插值閃爍問題。插值閃爍: 在數據未加載完成時，頁面會顯示出原始的{{}}, 過一會才會展示正常數據.
語法：
v-text：<span v-text="msg"></span>?? ?<!-- 相當于<span>{{msg}}</span> --> v-html：<span v-html="msg"></span>?? ?<!-- 相當于<span>{{msg}}</span> -->區別：
v-text：把數據當作純文本顯示. v-html：遇到html標簽,會正常解析3.數據雙向綁定數據(v-model)
概述：
? Vue的雙向綁定可以實現: 數據變化的時候, 頁面會自動刷新, 頁面變化的時候，數據也會自動變化.
注意：
- 雙向綁定, 只能綁定**“文本框,單選按鈕,復選框,文本域,下拉列表”**等
- 文本框/單選按鈕/textarea, 綁定的數據是字符串類型
- 單個復選框, 綁定的是boolean類型
- 多個復選框, 綁定的是數組
- select單選對應字符串，多選對應也是數組
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:{//數組中的值,就是被選中的元素的value屬性值language:["Java","Python"]}}); </script>效果:
4.事件處理(v-on)
4.1.事件綁定(v-on)
概述：
? Vue中也可以給頁面元素綁定事件.
語法：
<!--完整寫法--> <button v-on:事件名="函數名/vue表達式">點我</button> <!--簡化寫法--> <button @事件名="函數名/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">//創建vue對象var app = new Vue({//獲取id為app的元素,該元素被vue對象所管理.只有被vue對象管理的標簽,其內部才允許書寫vue語法el:"#app",//定義vue的方法methods:{//定義show方法,彈出提示框show() {alert("Hello Vue!!!");}}});</script> </body> </html>5.循環遍歷(v-for)
5.1.遍歷數組
語法：
v-for="item in items" v-for="(item,index) in items"items：要迭代的數組
item：存儲數組元素的變量名
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一起使用. 用來在特定情況下, 保證被遍歷的數組中的元素的順序.
案例:
<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可以根據條件的結果,來決定是否顯示指定內容.
? 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.顯示數據(v-bind)
概述：
v-bind的作用和插值表達式差不多, 只不過, v-bind主要用于動態設置標簽的屬性值
語法：
<!--完整寫法--> <標簽名 v-bind:標簽屬性名="vue實例中的數據屬性名"/> <!--簡化寫法--> <標簽名 :標簽屬性名="vue實例中的數據屬性名"/>?案例：
<div id="app"><input type="button" :value="msg"/> </div> <script type="text/javascript">var app = new Vue({el:"#app",data:{msg:"我是按鈕"}});</script>總結
以上是生活随笔為你收集整理的2022/08/27 吉软 Vue的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： LINUX内核模块上下文,飞凌嵌入式知识
- 下一篇： git前端工程实现ci_gitlab中v