【Vue】Vue入门 -（本地篇+网络篇）代码示例及运行效果
生活随笔
收集整理的這篇文章主要介紹了
【Vue】Vue入门 -（本地篇+网络篇）代码示例及运行效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、Vue
可參考：Vue官方文檔
Vue 將 DOM 元素看作是對象，可以將元素與Vue實例綁定，實現通過操作數據改變元素內容。不需要用 jQuery 手寫各種各樣的選擇器了。
二、本地篇：Vue基礎語法
1. 基本語法總結
v-text：用于設置 標簽的文本
v-html：用于設置 標簽的innerHtml
v-on：用于事件綁定，例如：點擊事件/回車按下事件
v-show：根據bool值，切換元素的顯示或隱藏，本質是切換元素的display樣式，支持使用表達式age>=18
v-if：功能同上，本質是操作dom樹，直接將整個元素從dom中移除，但對性能的消耗較大
v-bind：用于綁定元素的屬性，如class，title，src等屬性。
v-for：根據數據生成列表結構，經常和數組結合使用，可用于生成評論區
v-model：雙向綁定，設置和獲取表單元素的值：表單/數據任意一個修改，另外一個會隨之修改
2. 代碼示例
<!DOCTYPE html> <html><head><meta charset="utf-8"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><title>Vue基礎</title></head><body><div id="app">{{ people.name +' is a programmer'}}<h4 v-text="people.hobby+' is his hobby'"></h4><p v-html="content"></p><!-- v-html用于設置標簽的innerHtml --><p v-text="content"></p><!-- v-text用于設置標簽的文本 --><input type="button" value="v-on綁定" v-on:click="myaction" /><!-- v-on用于事件綁定 --><input type="button" value="v-on簡寫" @click="myaction" /><input type="button" value="雙擊" @dblclick="myaction" /><input type="text" @keyup.enter="alertHi" /><!-- 按鍵彈起后回車觸發 --><h4 @click="changeHobby(666)">點擊hobby示例：{{people.hobby}}</h4><hr /><h3>點擊按鈕實現加減操作</h3><!-- 點擊按鈕實現加減操作，同理在data中寫一個保存圖片地址的imgArr，可以實現圖片輪播圖 --><div class="input-num"><button @click="sub">-</button><span>{{num}}</span><button @click="add">+</button></div><hr /><h3>v-show v-if切換元素的顯示或隱藏</h3><!-- v-show根據bool值，切換元素的顯示或隱藏，本質是切換元素的display樣式，也可以寫表達式age>=18 --><!-- v-if本質是操作的dom樹，當false時，直接將整個元素從dom中移除，相比v-show，v-if對性能的消耗較大 --><input type="button" value="toggle" @click="toggleShow" /><h3 v-show="isShow">v-show切換顯示狀態</h3><h3 v-if="isShow">v-if切換顯示狀態</h3><hr /><h3>v-bind用于綁定元素的屬性</h3><!-- v-bind用于綁定元素的屬性，如class，title，src等屬性。 --><img v-bind:src="imageSrc" v-bind:title="imgTitle+'，哈哈'" /><!-- v-for根據數據生成列表結構，經常和數組結合使用，數組內容的更新會響應式的同步到頁面上 --><hr /><h3>v-for循環生成列表元素</h3><ul><li v-for="(obj,i) in vegetables" v-bind:title="obj.price+'元'">i={{i}} {{obj.name}} 價格：{{obj.price}}</li></ul><hr /><h3>v-model雙向綁定</h3><!-- v-model雙向綁定，設置和獲取表單元素的值：表單/數據任意一個修改，另外一個會隨之修改 --><input type="text" v-model="userInput" @keyup.enter="alertInput()" /><input type="button" value="點擊修改數據" @click="modifyInput()" /><h5>{{userInput}}</h5></div><hr /><h3>動態追加/刪除元素</h3><div id="todoapp"><input type="text" v-model="todoInput" @keyup.enter="enterAction()" /><input type="button" value="點擊或回車" @click="enterAction()" /><input type="button" value="清空" @click="clearAll" /><ul>總數:{{todoArr.length}}<div v-if="todoArr.length>0">有值才顯示這句話</div><li v-for="(text,i) in todoArr" style="background-color: #ffe8b0; border: 1px solid #55aaff;">{{i+'. '+text}}<input type="button" value="刪除" @click="delNode(i)" /></li></ul></div><script>var todoapp = new Vue({el: '#todoapp',data: {todoArr: ['敲代碼', '睡覺', '玩兒...'],todoInput: "",},methods: {enterAction: function() {this.todoArr.push(this.todoInput);},delNode: function(i) {console.log(i)this.todoArr.splice(i, 1); //刪除一個元素},clearAll:function(){this.todoArr=[];}}});var app = new Vue({el: '#app', //el:掛載點data: { //數據message: 'Hello Vue!',people: {name: 'gly',hobby: 'coding...'},content: "<a href='#'>一個鏈接</a>",num: 1,isShow: true,imageSrc: "http://www.itheima.com/images/logo.png",imgTitle: "懸停顯示名稱",vegetables: [{name: "西紅柿炒雞蛋",price: "30"}, {name: "大白菜",price: "23"}],userInput: "這是用戶輸入"},methods: { //方法myaction: function() {alert('hello');},changeHobby: function(num) {this.people.hobby += num;this.people.hobby += '真有趣';},add: function() {this.num++;},sub: function() {this.num--;},toggleShow: function() {this.isShow = !this.isShow;},alertHi() {alert("Hi");},alertInput() {alert(this.userInput);},modifyInput() {this.userInput += "修改數據";}}})</script></body> </html>3. 運行效果
三、網絡篇：axios 的使用
1. axios
axios是一個功能強大的網絡請求庫，可以看作是對ajax的封裝。語法：
來看兩個用來測試的接口：
2. 示例代碼
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>Vue網絡</title><!-- axios:功能強大的網絡請求庫 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script></head><body><input type="button" value="get請求" class="get" /><input type="button" value="post請求" class="post" /><script>//get請求:測試獲取笑話document.querySelector(".get").onclick=function(){axios.get("https://autumnfish.cn/api/joke/list?num=6").then(function(response){//請求成功console.log(response);},function(err){//請求失敗console.log(err);})}//post請求:測試用戶注冊document.querySelector('.post').onclick=function(){axios.post("https://autumnfish.cn/api/user/reg123123",{username:"寒泉Hq"}).then(function(response){console.log(response);},function(err){console.log(err);})}</script></body> </html>3. 運行效果
4. vue 整合 axios 示例
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>Vue網絡</title><!-- axios:功能強大的網絡請求庫 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><div id="app"><input type="button" value="獲取笑話" class="get" @click="getJoke" />{{joke}}</div><script>var app = new Vue({el: "#app",data: {joke: "這里顯示笑話"},methods: {getJoke: function() {var tempThis = this;axios.get("https://autumnfish.cn/api/joke/list?num=1").then(function(response) {console.log(response);tempThis.joke = response.data.jokes;})}}})</script></body> </html>總結
以上是生活随笔為你收集整理的【Vue】Vue入门 -（本地篇+网络篇）代码示例及运行效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据库设计原则：应该使用软删除吗？
- 下一篇： Node.js、Npm、MVVM模式、i