Vue.js学习笔记(一)

●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: ''
        }
    }
}