-
? ? 完善刪除功能
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>Document</title>
? ? <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
? ??
? ? <div id="root">??
? ? ? ? <input? v-model="inputValue" />
? ? ? ? <button @click="submit">提交</button>
? ? ? ? <ul>
? ? ? ? ? ? <to-do v-for="(item,index) in list" :key="index" :a="item" :b="index" :c="list"></to-do>
? ? ? ? </ul>
? ? </div>
? ? <script>
? ? ? ? new Vue({
? ? ? ? ? ? el: '#root',
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? inputValue: '',
? ? ? ? ? ? ? ? list: []
? ? ? ? ? ? },
? ? ? ? ? ? components: {
? ? ? ? ? ? ? ? 'to-do': {
? ? ? ? ? ? ? ? ? ? props: ['a', 'b','c'],
? ? ? ? ? ? ? ? ? ? template: '<li>{{a}} <button @click="del(b,c)"><i>X</i></button></li>',? ? ? ? ? ? //mmp 點擊事件方法名千萬別命名delete......js關鍵字,我想靜靜
? ? ? ? ? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? ? ? ? ? del: function(index,array){
? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(index)
? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(array)
? ? ? ? ? ? ? ? ? ? ? ? ? ? array.splice(index, 1);
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? submit: function(){
? ? ? ? ? ? ? ? ? ? this.list.push(this.inputValue)
? ? ? ? ? ? ? ? ? ? this.inputValue = ''
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>
</html>
查看全部 -
雙向數(shù)據(jù)綁定
v-model已綁定value
v-model="數(shù)據(jù)名"??
查看全部 -
vue事件的綁定查看全部
-
vue事件的綁定查看全部
-
v-text v-html查看全部
-
父組件通過屬性向子組件傳遞數(shù)據(jù),子組件發(fā)布事件xxx,父組件訂閱事件@xxx。
子組件可以使用 $emit 觸發(fā)父組件的自定義事件
查看全部 -
在html里寫的vue中? data 是對象? ?在vue組件中? <script>中data()
是函數(shù)查看全部 -
v-on 代表綁定一個事件,v-on:可簡寫成@ 所以v-on:click="handleclick"等價于@click="handleclick"查看全部
-
v-bind:title="test"? 綁定屬性
事件綁定@? 與 v-on:click="method"一樣
屬性綁定: 與 v-bind:title="tile" 一樣
查看全部 -
如果new Vue({ })的實例中未定義模板template,那么系統(tǒng)默認到掛載點找,將掛載點下的所有東西變?yōu)槟0濉?/p>
每個組件也是一個小的實例。
查看全部 -
父子組件傳值的問題
查看全部 -
掛載點:vue實例里面的el屬性對應的id。
模板:掛載點內(nèi)部的內(nèi)容都叫模板內(nèi)容。
查看全部 -
看了好幾遍沒有找到我錯在哪里了,后來重新從vue init webpack todolist 重做,重打了一遍,就好了,好像是因為空格的個數(shù)?
查看全部 -
build目錄下放置的是項目的webpack配置文件,可以不動
config是針對線上環(huán)境和開發(fā)環(huán)境的配置文件,也可以不動
node_modules 指的是項目的依賴
src 指的是源代碼放置的目錄
static放置的是靜態(tài)的資源
src中的main.js文件是整個項目的入口文件
vue-cli提供了一種新的vue的編碼語法:單文件組件(一個.vue文件中包含了一個組件里必須的所有內(nèi)容)
vue-cli的優(yōu)勢:
1可以使用es6。
2一個組件是一個.vue的文件所定義的,實現(xiàn)了組件的封裝。
(在安裝該工具之前需要安裝npm和node)
查看全部 -
Vue-cli自帶了webpack的各種配置,借助該工具,可以迅速上手工程級別vue項目的開發(fā)。
npm install --global vue-cli
vue init webpack todolist
查看全部
舉報