Vue基礎知識01 基本使用方法

vue的基本使用

建立vue例項

1.引包

// 引入vue.js的cdn位址

step 1：html中插入根元素

step 2：script中建立例項化物件 mv

var mv = new vue()

即，將vue例項中的資料渲染到dom中，此時的資料流向是單向的（vue -> dom // data -> view）

1.在建立的資料宣告中寫入資料宣告data

var mv = new vue(,

});

注：雙大括號 中的內容是作為變數形式出現的，因此也可以寫為

}}}

}

部分例項屬性

vue的指令系統

部分指令

}

}

語法：v-on:原生事件名="函式名/js**" 縮寫：:@原生事件名="函式名/js**"

// 需要在`methods` 物件中定義函式方法

var vm = new vue(,
methods: 
}})// 也可用js**直接呼叫方法
vm.fun()

select 欄位將 value 作為 prop 並將 change 作為事件。

(vue dom // data view)

利用v-model，本質上是個語法糖,是v-bind:value + v-on:input的體現。

（簡單的說，v-model後跟的變數，在vue和dom之間是保持同步的）

text 和 textarea 元素使用 value 屬性和 input 事件；

message is: }

checkbox 和 radio 使用 checked 屬性和 change 事件；

}

共三步，宣告 -> 掛載 -> 使用

step 1：元件宣告

data:{},

methods:{},

template:''

}step 2：元件掛載

var vm = new vue(,

// 掛載子元件
components:,
template:''
})

var vm = new vue(,

// 掛載子元件
components:,
// 父元件直接可使用
})

全域性元件與區域性元件的建立類似，因為全域性元件是掛載在vue根元素上的，所以可寫成

vue.component('vbtn',);

父元件向子元件通訊

父元件=>子元件 共三步：

1. 先給父元件中繫結自定義的屬性(掛載)

2. 在子元件中使用props接受父元件傳遞的資料(props)

3. 在自元件中任意使用父元件傳遞的資料

step 0：定義兩個元件parent和child，父元件中有資料msg。

// child元件（全域性）

vue.component('child',)
// parent元件（全域性）
vue.component('parent',,
template:`
我是父元件`})
// parent元件（區域性）
template:``};
// vue例項
new vue(,
components:,
})

vue.component('parent',

},template:`
我是父元件`})

vue.component('child',)

vue.component('child',}

`,props:['childdata']
})

子元件=>父元件 共三步：

1. 在父元件繫結自定義事件

2. 在子元件中觸發原生的事件

3. 在函式中使用$emit觸發自定義的childhandler

step 1：在父元件繫結自定義事件

// 父元件

vue.component('parent',
},template:`
我是父元件
`,methods:}})
// template:``};
//new vue(
},components:,
})

// 子元件

vue.component('child',}})

// 子元件

vue.component('child',}})

01 基礎知識

程序概念 作業系統中所有執行中的任務通常是乙個程式，每個執行中的程式就是乙個程序 process 當乙個程式執行時，內部可能包含了多個順序執行流，每個順序執行流就是乙個執行緒。程序是處於執行過程中的程式，並且具有一定的獨立功能，程序是系統進行資源分配和排程的乙個獨立單位。程序三個特性 2.動態性 程...

01 基礎知識

1 計算機基礎 cpu 相當於人的大腦，用於計算。記憶體 儲存資料，4g，8g,16g,32g,成本高，斷電即消失。硬碟 1t，固態硬碟，機械硬碟，儲存資料，應該長久保持資料，重要檔案，小電影等等。2 編譯型語言和解釋型語言區別 編譯型 一次性將所有程式編譯成二進位制檔案。缺點 開發效率低，不能跨平...

Vue 路由 基礎使用方法

在前端實現路由跳轉的 也叫單頁面 要實現單頁面 其實是需要前後端配合的。在伺服器端，不管url請求哪個頁面，都統統返回指定頁 通常是index.html 在前端實現路由跳轉能很大程度上減輕伺服器壓力，也能提高專案的效能。最明顯的就是使用者在填寫表單，如果不小心點錯了別的按鈕，跳轉到別的頁面，當使用者...