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\

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

-玫瑰少年-

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值