1 Vue instance
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue实例</title>
<script src='../vue.js'></script>
</head>
<body>
<div id="root">
<!-- v-on可简写为@ -->
<div @click="handleClick">
{
{message}}
</div>
<item></item>
</div>
<script>
Vue.component('item', {
template: '<div>hello item</div>'
})
/**
* 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始
*/
var vm = new Vue({
/**
* el: '#root'表示Vue实例将挂载到id为"root"的HTML元素
* 这个HTML元素可以是任何元素 如div、section
* Vue实例挂载到该元素后，Vue实例就可以操作该元素及其子元素，以及响应用户的交互行为
*/
el: '#root',
/**
* 当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中
* 当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
* 只有当实例被创建时就已经存在于 data 中的 property 才是响应式的
*/
data: {
message: 'hello world'
},
// 在 `methods` 对象中定义方法
methods: {
handleClick: function () {
alert("hello")
}
}
})
</script>
</body>
</html>
A Vue application consists of new Vuea root Vue instance created via , and optionally a tree of nested, reusable components.
All Vue components are Vue instances and accept the same options object (except some options specific to the root instance).
Components are reusable Vue instances with a name: in this case <item>.
<div id="root">
<!-- v-on可简写为@ -->
<div @click="handleClick">
{
{message}}
</div>
<!-- 使用item组件 -->
<item></item>
</div>
2 Vue instance life cycle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue实例生命周期函数</title>
<script src='../vue.js'></script>
</head>
<body>
<div id="app">Hello World</div>
<script>
// 生命周期函数：Vue实例在某时间点自动执行的函数
var vm = new Vue({
el: "#app",
template: "<div>{
{test}}</div>",
data: {
test: "hello world"
},
beforeCreate: function() {
console.log("beforeCreate");
},
created: function() {
console.log("created");
},
beforeMount: function() {
console.log(this.$el);
console.log("beforeMount");
},
mounted: function() {
console.log(this.$el);
console.log("mounted");
},
beforeDestroy: function() {
console.log("beforeDestroy");
},
destroyed: function() {
console.log("destroyed");
},
beforeUpdate: function() {
console.log("beforeUpdate");
},
updated: function() {
console.log("updated");
}
})
</script>
</body>
</html>
These methods are defined separately, not in the methods object.
Hell, what about the other lifecycle points? Why didn't it print out?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue实例生命周期函数</title>
<script src='../vue.js'></script>
</head>
<body>
<div id="app">Hello World</div>
<script>
// 生命周期函数：Vue实例在某时间点自动执行的函数
var vm = new Vue({
el: "#app",
template: "<div>{
{test}}</div>",
data: {
test: "hello world"
},
// 第一个被调用
beforeCreate: function() {
console.log("beforeCreate");
},
created: function() {
console.log("created");
},
template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue实例生命周期函数</title>
<script src='../vue.js'></script>
</head>
<body>
<script>
// 生命周期函数：Vue实例在某时间点自动执行的函数
var vm = new Vue({
el: "#app",
template: "<div>{
{test}}</div>",
data: {
test: "hello world"
},
beforeCreate: function() {
console.log("beforeCreate");
},
Writing the above is the same as the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue实例生命周期函数</title>
<script src='../vue.js'></script>
</head>
<body>
<script>
// 生命周期函数：Vue实例在某时间点自动执行的函数
var vm = new Vue({
el: "#app",
data: {
test: "hello world"
},
beforeCreate: function() {
console.log("beforeCreate");
},
vm.$destroy()
Completely destroys an instance. Clean up its connection with other instances, and unbind all its commands and event listeners.
Hooks that trigger beforeDestroyand destroyed.
In most scenarios you should not call this method. It is best to use v-ifand v-for, to control the lifecycle of subcomponents in a data-driven manner.
update
