●Vue实现双向绑定的原理：
利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的
var Book = {}
var name = '';
Object.defineProperty(Book, 'name', {
set: function (value) {
name = value;
console.log('你取了一个书名叫做' + value);
},
get: function () {
return '《' + name + '》'
}
})
Book.name = 'vue权威指南'; // 你取了一个书名叫做vue权威指南
console.log(Book.name); // 《vue权威指南》
●生命周期：
image.png
这么多钩子函数，我们怎么用呢?
beforecreate : 举个栗子：可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestroy： 你确认删除XX吗？ destroyed ：当前组件已被删除，清空相关内容
首先根据https://www.jianshu.com/p/e168b0d9bda9构建一个初始项目，
运行：
npm run dev
- 下面是基础示例
App.vue:
<template>
<div id="app">
<ComputedMethod/>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld"
import ComputedMethod from "./components/ComputedMethod"
export default {
name: 'app',
components:{
HelloWorld,
ComputedMethod
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
ComputedMethod.vue:
<template>
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
</template>
<script>
export default {
name: "ComputedMethod",
data(){
return{
message: "Hello"
}
},
computed:{
reversedMessage:function(){
return this.message.split('').reverse().join('')
}
}
}
</script>
<style scoped>
</style>
问题1：
Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
解决方法:
vue模板只能有一个根对象
所以你想要出现正常的效果，你的用一个div来或是别的标签来包裹全部的元素
正确的写法就是：
<template>
<div>
<el-button type="primary">haha1</el-button>
<div>hahhaa</div>
<el-input type="text" placeholder="测试一下"></el-input>
<h1>{{test1}}</h1>
</div>
</template>
问题2：
export default {
name: 'app',
data：{
name: ''
}
}
出现The "data" option should be a function that returns a per-instance value in component definitions
原因：简单地说，在实例中data是对象, 在组件中data就得是函数返回对象
解决办法：将data改为函数且返回data中的数据对象
export default {
name: 'app',
data() {
return {
name: ''
}
}
}
