解決：Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured.
阿新 • • 發佈：2022-04-09
屬性指令
v-bind:屬性='js的變數'
簡寫成 :屬性='js的變數'
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> <style> .red { background: red; } .green{ background: green; } </style> </head> <body> <div id="app"> <button @click="changeBac">點我變色</button> <!-- <p v-bind:class="p_class" class="">{{name}}</p>--> <p :class="p_class" class="">{{name}}</p><button @click="changePhoto">點我切換美女</button> <div> <img :src="url" alt="" width="400px" height="400px"> </div> </div> </body> <script> var vm = new Vue({ el: "#app", data: { name: '彭于晏', p_class:'red', url: 'https://tva1.sinaimg.cn/large/00831rSTly1gd1u0jw182j30u00u043b.jpg' }, methods: { changeBac() { this.p_class = 'green' }, changePhoto() { this.url = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F09%2F3a%2Fbc%2F093abce7b31f4c8ffdbf345375ff4abb.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652321528&t=3709d1c880107a53d265f936022f0d53' } } }) </script> </html>
style和class
# 屬性指令中比較特殊的有style和class
# class 可以對應字串，陣列(推薦)，物件
# style 可以對應字串，陣列，物件(推薦)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> <style> .red { background: red; } .font{ font-size: 60px; text-align: center; } .green { background: green; } </style> </head> <body> <div id="app"> <h1 :class="h1_class">我是class的h1</h1> <h1 :style="h1_style">我是style的h1</h1> </div> </body> <script> var vm = new Vue({ el: "#app", data: { // class 可以對應字串，陣列(推薦)，物件 // h1_class:'green font', // h1_class:['green'] //在控制檯給h1_class新增一個元素 h1_class:{'green':true,'font':false}, // style 可以對應字串，陣列，物件(推薦) // h1_style:'background: pink;font-size:80px' // h1_style:[{background:'pink'},{'font-size':'100px'}], // h1_style:[{background:'pink'},{fontSize:'200px'}], // 不用引號，就要使用駝峰 // h1_style:{background:'red','font-size':'40px'}, h1_style:{background:'red',fontSize:'40px'}, }, }) </script> </html>
條件渲染
v-if----v-else-if ---v-else的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> <style> </style> </head> <body> <div id="app"> <h2>您的成績是：</h2> <p v-if="score>90">優秀</p> <p v-else-if="score>80">良好</p> <p v-else-if="score>60">及格</p> <p v-else>不及格</p> </div> </body> <script> var vm = new Vue({ el: "#app", data: { score:99, }, }) </script> </html>
列表渲染
# for迴圈--》v-for
# v-for：可以遍歷陣列，物件，數字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> <style> </style> </head> <body> <div id="app"> <h1>購物車如下</h1> <div v-if="good_list.length>0"> <table border="1"> <tr> <td>商品名字</td> <td>商品價格</td> </tr> <tr v-for="good in good_list"> <td>{{good.name}}</td> <td>{{good.price}}</td> </tr> </table> </div> <div v-else> 購物車空空如也 </div> </div> </body> <script> var vm = new Vue({ el: "#app", data: { good_list:[{name:"特斯拉",price:100203},{name:"雞蛋",price:2},{name:"豬肉",price:35}] }, }) </script> </html>
遍歷取值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> <style> </style> </head> <body> <div id="app"> <h1>購物車如下</h1> <div v-if="good_list.length>0"> <table border="1"> <tr> <td>商品名字</td> <td>商品價格</td> </tr> <tr v-for="good in good_list"> <td>{{good.name}}</td> <td>{{good.price}}</td> </tr> </table> </div> <div v-else> 購物車空空如也 </div> <hr> <h1>遍歷物件（第一個是value，第二個是key）</h1> <p v-for="item in info">{{item}}</p> <hr> <p v-for="(v,k) in info">key值是：{{k}}--value值是：{{v}}</p> <h1>遍歷陣列</h1> <ul> <li v-for="girl in girls">{{girl}}</li> </ul> <hr> <ul> <li v-for="(v,i) in girls">第{{i}}個女孩是：{{v}}</li> </ul> <h1>遍歷數字,從1開始</h1> <p v-for="i in 5">第{{i}}個數字</p> </div> </body> <script> var vm = new Vue({ el: "#app", data: { good_list:[{name:"特斯拉",price:100203},{name:"雞蛋",price:2},{name:"豬肉",price:35}], info:{name:'lqz',age:19,gender:'男'}, girls:['迪麗熱巴','劉亦菲','楊穎','糖寶'] }, }) </script> </html>
# 注意！在Vue中：
陣列的index和value是反的
物件的key和value也是反的
都是先取出value，再取出key或者index
# key值的解釋
看到被人程式碼在迴圈時，寫在標籤中 :key='值'
key:一般咱麼在迴圈的時候，都要加 :key='值'，值不要是固定的
vue中使用的是虛擬DOM，會和原生的DOM進行比較，然後進行資料的更新，提高資料的重新整理速度（虛擬DOM用了diff演算法）
在v-for迴圈陣列、物件時，建議在控制元件/元件/標籤寫1個key屬性，屬性值唯一
頁面更新之後，會加速DOM的替換（渲染）
:key="變數"
# key可以加速頁面的替換--》key加上，效率高
# 陣列更新與檢測
# 陣列追加一個值，頁面裡面跟著變----》
#可以檢測到變動的陣列操作：
push：最後位置新增
pop：最後位置刪除
shift：第一個位置刪除
unshift：第一個位置新增
splice：切片
sort：排序
reverse：反轉
# 檢測不到變動的陣列操作： 頁面不會變
filter()：過濾
concat()：追加另一個數組
slice()：
map()：
原因：
作者重寫了相關方法（只重寫了一部分方法，但是還有另一部分沒有重寫）】
陣列變了，但頁面沒變---》解決方案
// 方法1：通過 索引值 更新陣列（資料會更新，但是頁面不會發生改變）
vm.arrayList[0]
"Alan"
vm.arrayList[0]='Darker'
"Darker"
// 方法2：通過 Vue.set(物件, index/key, value) 更新陣列（資料會更新，頁面也會發生改變）
Vue.set(vm.arrayList, 0, 'Darker')
事件處理
# 指input的事件
input 當輸入框進行輸入的時候 觸發的事件
change 當元素的值發生改變時 觸發的事件
blur 當輸入框失去焦點的時候 觸發的事件
過濾案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> <style> </style> </head> <body> <div id="app"> <input type="text" v-model="text" @input="handleInput">---》{{text}} <ul> <li v-for="data in newdataList">{{data}}</li> </ul> </div> </body> <script> // 補充 filter // var newdataList= ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'] // var l=newdataList.filter(function (item) { // if(item.length>2){ // return true // }else { // return false // } // // }) // console.log(l) // 補充：判斷一個字串是否在另一個字串中 // var text = 'at' // var newdataList = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'] // var l=newdataList.filter(function (item) { // var i=item.indexOf(text) // if (i>=0){ // return true // }else { // return false // } // }) // var l = newdataList.filter(function (item) { // return item.indexOf(text) >= 0 // }) // console.log(l) // 箭頭函式 -es6 // var a= function (name) { // console.log(name) // } // a('lqz') // 箭頭函式沒有自己的this // var a =(name)=>{ // console.log(name) // } // a("lqz") var vm = new Vue({ el: "#app", data: { text: '', dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'], newdataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'], }, methods: { handleInput() { console.log(this) // var _this=this // // 只要text發生變化，newdataList就變化，就過濾 // this.newdataList = this.dataList.filter(function (item) { // // js 中this指向的問題 // console.log(this) // return item.indexOf(_this.text) >= 0 // }) // es6 處理this指向，箭頭函式 this.newdataList = this.dataList.filter((item)=> { // js 中this指向的問題 console.log(this) return item.indexOf(this.text) >= 0 }) }, } }) </script> </html>
事件修飾符
# .stop 只處理自己的事件，父控制元件冒泡的事件不處理（阻止事件冒泡）
# .self 只處理自己的事件，子控制元件冒泡的事件不處理
# .prevent 阻止a連結的跳轉
# .once 事件只會觸發一次（適用於抽獎頁面）
# 事件冒泡：子標籤的點選事件，傳到了父標籤上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> <style> </style> </head> <body> <div id="app"> <ul @click.self="handleUl"> <li @click.stop="handleC('劉亦非')">劉亦菲</li> <li @click="handleC('楊穎')">楊穎</li> <li>迪麗熱巴</li> </ul> <hr> <a href="http://www.baidu.com" @click.prevent="handleA">點我看美女</a> <hr> <button @click.once="handleSubmit">點我秒殺</button> </div> </body> <script> var vm = new Vue({ el: "#app", data: {}, methods: { handleUl() { console.log('ul被點解了') }, handleC(name) { console.log(name, '被點選了') }, handleA() { // 允許跳，不允許跳 console.log('a被點選了') // location.href='http://www.baidu.com' }, handleSubmit() { console.log('秒殺按鈕被點選了') } } }) </script> </html>
按鍵修飾符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> <style> </style> </head> <body> <div id="app"> <!-- <input type="text" v-model="mytext" v-on:keyup="handleKeyUp">-–>{{mytext}}--> <input type="text" v-model="mytext" @keyup="handleKeyUp($event)">--->{{mytext}} <hr> <input type="text" v-model="mytext" @keyup.enter="handleKeyUp2($event)">--->{{mytext}} </div> </body> <script> var vm = new Vue({ el: "#app", data: { mytext:'', }, methods: { handleKeyUp(event){ console.log(event) console.log(event.key,'被按下談起了') if(event.key=='Enter'){ alert('美女你好') } }, handleKeyUp2(event){ console.log(event.key,'被按下談起了') }, } }) </script> </html>
資料的雙向繫結
# input標籤---》跟js變數繫結
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> <style> </style> </head> <body> <div id="app"> <input type="text" v-model="text">--->{{text}} </div> </body> <script> var vm = new Vue({ el: "#app", data: { text:'' }, }) </script> </html>
表單控制
# input,checkbox,radio控制
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> <style> </style> </head> <body> <div id="app"> <h1>checkbox單選</h1> <p>使用者名稱：<input type="text" v-model="username"></p> <p>密碼：<input type="password" v-model="password"></p> <p>記住密碼：<input type="checkbox" v-model="remember"></p> <hr> {{username}}---{{password}}--{{remember}} <br> <h1>radio單選</h1> <input type="radio" v-model="radio" value="1">男 <input type="radio" v-model="radio" value="2">女 <input type="radio" v-model="radio" value="0">保密 <br><br>您選擇的性別：{{radio}} <hr> <h1>checkbox多選</h1> <input type="checkbox" v-model="many" value="籃球">籃球 <input type="checkbox" v-model="many" value="足球">足球 <input type="checkbox" v-model="many" value="棒球">棒球 <input type="checkbox" v-model="many" value="桌球">桌球 <br><br>您喜歡的球類：{{many}} </div> </body> <script> var vm = new Vue({ el: "#app", data: { username: '', password: '', remember: true, // checkbox單選，布林 radio: '', // redio的單選字串，對應選中的value值 many:[], //checkbox多選---》陣列 }, methods: {} }) </script> </html>
v-model進階
lazy：等待input框的資料繫結時區焦點之後再變化
number：數字開頭，只保留數字，後面的字母不保留；字母開頭，都保留
trim：去除首位的空格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> <style> </style> </head> <body> <div id="app"> lazy: <input type="text" v-model.lazy="username">--->{{username}} <br> number:<input type="text" v-model.number="age">--->{{age}} <br> trim:<input type="text" v-model.trim="info">--->{{info}} <br> </div> </body> <script> var vm = new Vue({ el: "#app", data: { username: '', age: '', info: '', }, methods: {} }) </script> </html>