[鼠年全马] W22 - Vue心得笔记 - Vue实例的组成

来到了连假Day3~
今天要写一个Vue实例的组成

一样是很无聊却又非常重要的观念篇~

撑住就是你的!!
　　--某个老师跟我讲的

---

#Vue实例的组成

基本一个Vue实例会包含以下, 但不是一定会需要, 视情况使用:

el: 对应要实例的元件data: 用于存放各种数据methods: 用于存放方法供呼叫props: 来自父层给予的资料computed: 用于计算资料后回传watch: 用于观察数据的改变

其中 el & data & methods 在前几篇都有用到, 大致用法也有提到, 这几个待会会简单带过

---

#el

el的部分, 前面某篇提到过, 它是使用CSS选择器来抓到要实例的元件
这里写个简单範例:

<div id="app"></div>

var app = new Vue({  el: '#app' //抓到id为app的元件并将它Vue实例化})

---

#data

data的部分
非常重要!!!!
非常重要!!!!
非常重要!!!!
Vert important!!!!
由于Vue是用资料来驱动画面, 于是存放资料的地方就相当于人的大脑, 是整个Vue实例的核心
存放资料是使用key:value的方式, 例如:

var app = new Vue({  ...,  data: () => ({      key1: 'value1',      key2: 'value2',  }),})

---

#methods

methods没甚么好说的~
就是个放function的地方, 等待呼叫
写法如下:

var app = new Vue({  ...,  methods: {      myFunction1(){          //dosomething...      },      myFunction2(){          //dosomething...      },  },})

是个无聊的区块

---

///分隔线///接下来是之前没有出现过的成员了///

---

#props

props是接收从父层传递进来的资料
写法如下:

var app = new Vue({  ...,  props: ['myProps1', 'myProps2'],})

接收进来的资料, 使用方式就跟data一样

顺带一提父层是使用v-bind把资料绑定后传进来的
例如:

<mycomponent :myProps1="fatherData"></mycomponent>

传入后子层的元件就可以去呼叫他使用啰!!

---

#computed

computed也是很重要常常使用到
他的用途在于, 常常我们的data不会是要呈现在画面上的样子, 透过computed做加工的动作再去呈现出来
写个简单的範例, 假设今天得到的data->datetime长这样:

var app = new Vue({  ...,  data: () => ({      datetime: '20200627104030',  }),})

但我们要把它改为人看的日期格式, 这时利用computed来协助:

var app = new Vue({  ...,  data: () => ({      datetime: '20200626104030',  }),  computed: {      formatdatetime() {          return (              this.datetime.substr(0, 4) +              "/" +              this.datetime.substr(4, 2) +              "/" +              this.datetime.substr(6, 2) +              " " +              this.datetime.substr(8, 2) +              ":" +              this.datetime.substr(10, 2) +              ":" +              this.datetime.substr(12, 2)          );      }  }})

最后在原本呼叫datetime的地方改为呼叫formatdatetime就可以啰~

//这边会出现20200627104030<div>    {{ datetime }}</div>//花括号改成formatdatetime<div>    {{ formatdatetime }}</div>//结果变为2020/06/27 10:40:30

---

#watch

最后一个watch顾名思义是在观察, 观察什么呢? 观察你(羞)
它的用途是在观察指定值, 当值发生变动时, 做一些什么事
套一个官网的範例:

var app = new Vue({  ...,  data: () => ({      a: 1,  }),  watch: {      a: function(val, oldVal) {          console.log('new: ' + val + ', old: ' + oldVal)      },  },})

当a值改变为2时, 看一下console会发现跑出
new: 2, old: 1

这个功能就很适合拿来用在前端表单验证上
例如input先v-model某个data, 且限制输入数字, 当内容改变, 就用watch来写判断这个data是否为数字, 进而跳出提示之类的

---

今天大概就到这~
重新複习了一下vue的组成部分
充实了第三天的早上

PS. 天气似乎有一天比一天热的现象, 家里冷气又刚好坏掉...你懂的