1 つの Vue インスタンス
<!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>
Vue アプリケーションはnew Vue、によって作成されたルート Vue インスタンスと、オプションでネストされた再利用可能なコンポーネントのツリーで構成されます。
すべての Vue コンポーネントは Vue インスタンスであり、同じオプション オブジェクトを受け入れます (ルート インスタンスに固有の一部のオプションを除く)。
コンポーネントは、名前が付けられた再利用可能な Vue インスタンスです。この場合は<item>。
<div id="root">
<!-- v-on可简写为@ -->
<div @click="handleClick">
{
{message}}
</div>
<!-- 使用item组件 -->
<item></item>
</div>
2 Vue インスタンスのライフサイクル
<!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>
これらのメソッドは、メソッド オブジェクト内ではなく、個別に定義されます。
ところで、他のライフサイクル ポイントについてはどうでしょうか? なぜ印刷されなかったのでしょうか?
<!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");
},
レンプレート
<!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");
},
上記を書くと以下と同じです。
<!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()
インスタンスを完全に破棄します。他のインスタンスとの接続をクリーンアップし、すべてのコマンドとイベント リスナーのバインドを解除します。
beforeDestroyと をトリガーするフックdestroyed。
ほとんどのシナリオでは、このメソッドを呼び出す必要はありません。データ駆動型の方法でサブコンポーネントのライフサイクルを制御するには、v-ifと を使用するのが最善です。v-for
アップデート
