在body標(biāo)簽底部加上script標(biāo)簽,然后在script標(biāo)簽中初始化Vue實(shí)例對(duì)象;
// 注冊(cè)組件(需要在實(shí)例化 Vue 對(duì)象之前)
Vue.component("todo-item", {
// 父組件傳值到子組件
// 定義子組件接收數(shù)據(jù)的參數(shù)
props: ['item'],
// 定義自定義組件
template: "<li>{{ item }}</li>",
});
// 實(shí)例化 Vue
var app = new Vue({
// 指定掛載節(jié)點(diǎn)
el: "#container",
// 聲明并初始化 Vue 實(shí)例的成員變量
data: {
str: "hello, Vue.",
},
// 定義 Vue 實(shí)例的成員方法
methods: {
click() {
console.log("我被點(diǎn)啦!??!");
this.str = "我被點(diǎn)啦?。。?;
},
},
// 生命周期鉤子函數(shù)
beforeCreate() {
console.log("beforeCreate");
},
created() {
console.log("created");
},
beforeMount() {
console.log("beforeMount");
},
mounted() {
console.log("mounted");
},
beforeUpdate() {
console.log("beforeUpdate");
},
updated() {
console.log("updated");
},
beforeDestroy() {
console.log("beforeDestroy");
},
destroyed() {
console.log("destroyed");
},
});