在body
標簽底部加上script
標簽,然后在script
標簽中初始化Vue
實例對象码耐;
// 注冊組件(需要在實例化 Vue 對象之前)
Vue.component("todo-item", {
// 父組件傳值到子組件
// 定義子組件接收數(shù)據(jù)的參數(shù)
props: ['item'],
// 定義自定義組件
template: "<li>{{ item }}</li>",
});
// 實例化 Vue
var app = new Vue({
// 指定掛載節(jié)點
el: "#container",
// 聲明并初始化 Vue 實例的成員變量
data: {
str: "hello, Vue.",
},
// 定義 Vue 實例的成員方法
methods: {
click() {
console.log("我被點啦W烦佟!骚腥!");
this.str = "我被點啦6丶洹!束铭!";
},
},
// 生命周期鉤子函數(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");
},
});