week10_day06_Vue基础2

通过做昨天的作业，会发现有了Vue之后：
我们不用动html和css的代码，只需要创建一个Vue对象，对象中有一些数据，仅需要操作对象就能让页面进行各种显示，不再去做底层的DOM操作了，Vue会帮我们做。
接下来，需要动态的从数据库中取出数据，放到Vue对象中，就能动态的显示页面了。

问题：

1. data中的数据可以调用methods中的方法吗？
   不可以，data中的数据是key-value形式，只能写成key:value
2. methods中的方法可以有返回值么？
   可以，但是没有任何意义，站在前端的角度，根本不需要返回值

我们想通过数据相互引用，引用的目的是什么？可能就是想对某个参数做个简单的改变。
这就需要计算属性。

1.6计算属性
一个属性是通过别的属性计算而来, 是个属性(虽然看起来, 看起来像个方法, 但是外在表现是个属性)

计算属性所计算的时机: 当它依赖的属性发生变化的时候, 那么它就会重新计算

不是存在于data里的一个参数, 存在computed

computed: {
    sum: function () {
        return this.num1 + this.num2
    }
},

1.7侦听器
监听器, 侦听一个vue对象中属性的变化, 然后触发一些操作

Watch: 是vue对象的一个固有属性, 里面写侦听器
注意: 我们如果想侦听那个参数发生改变, 侦听器的方法名就是该参数

watch: {
    msg: function () {
        this.changetimes ++
    }
}

1.8模板
Template: 模板是vue对象(此时此刻写法) 是一个以标签包裹的html代码块
模板会替换挂载的元素

一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略(除非模板的内容有分发插槽 v-solt)。

new Vue({
    el:'#root',
    template: '<div>567</div>',
    data: {
        msg: 123
    }
})

1.9组件
把一个整体的东西拆分成不同的东西,
表现在我们前端里, 就是把一个页面拆分成不同的分块来实现
表现在我们vue里, 把一个页面, 拆分成多个vue对象来实现
在vue中更深层次的表现, 就是,把一个页面关联成一个vue对象(入口对象)（即一个页面只有一个入口，这样更方便于操控页面）, 这个对象有一系列子对象(子对象通过某种途径和入口对象建立引用关系), 构建出一种类似于dom树结构, 组件树(对象树)

组件: 在vue中就是vue对象

最顶层的绿色结点表示整个也买，下面三个结点分别表示三块浅灰色页面，再下面几个结点表示这些浅灰色页面里面的深灰色页面。

1.10在html中有两种组件的写法
1.10.1全局组件
1.10.2局部组件

1.10.3安装一下Node, 下载地址，下载长期支持版
默认安装在c盘即可
如何查看是否下载成功呢？

我的安装路径：C:\Program Files\nodejs\