Vue --02
11.30
1.v-for 使用 遍历循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el: '#app',
data: {
msg: '你好吗？？？？？',
movies:['大哥','二哥','三哥']
}
})
</script>
</body>
</html>
此处体现渐进式 可以通过push 插入
2. v-on:click ==@click 绑定 点击 事件 以及方法 methods 实现计数器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
<h2>当前计数：{{counter}}</h2>
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>
<script>
const app=new Vue({
el: '#app',
data: {
counter : 0
},
methods:{
add:function(){
console.log("add被执行");
this.counter++
},
sub:function(){
console.log("sub被执行");
this.counter--
}
}
})
</script>
</body>
</html>
3.理解 MVVM 思想
4.Vue 生命周期
|
生命周期钩子
|
详细
|
|
beforeCreate
|
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
|
|
created
|
实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
|
|
beforeMount
|
在挂载开始之前被调用：相关的 render 函数首次被调用。
|
|
mounted
|
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
|
|
beforeUpdate
|
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
|
|
updated
|
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
|
|
activated
|
keep-alive 组件激活时调用。
|
|
deactivated
|
keep-alive 组件停用时调用。
|
|
beforeDestroy
|
实例销毁之前调用。在这一步，实例仍然完全可用。
|
|
destroyed
|
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
|
