JZTXT

Vue项目学习

发布时间 2023-06-12 22:22:56作者: hellciw

Vue学习笔记

一、二维数组尝试

var vm = new Vue({
	el: "#app",
	data: {
	huilv:[
	[6.8540, 132.9787, 1298.7013, 1.3278],
	[6.8540, 132.9787, 1298.7013, 1.3278]
		],}

二、watch监听实现

watch: {
			first: function(newValue) {
	  this.second = newValue * this.huilv[Number(this.firstbutton - 1)][Number(this.secondbutton -1)];
					},
			second: function(newValue) {
		this.first = newValue / this.huilv[Number(this.firstbutton - 1)][Number(this.secondbutton -1)];
					}
				}

三、数组的更新检测

#变更方法

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

你可以打开控制台，然后对前面例子的 items 数组尝试调用变更方法。比如 example1.items.push({ message: 'Baz' })。

四、链接数据库

页面调用路由表的函数

getmessage() {
				const self = this;
				self.$http.post('/api/user/getchat').then(function(response) {
					console.log(response.data);
					self.messages = response.data;
				}).catch(function(error) {
					console.log(error);
				});
			},

路由表内的接口

router.post('/getchat', (req, res) => {
  const sql = $sql.userchat.getmessage;
  conn.query(sql, (err, result) => {
    if (err) {
      console.log(err);
      res.json({ success: false, message: 'Database error occurred.' });
      return;
    }

    console.log(result); // 在控制台上打印查找到的结果

    res.json(result); // 将查询结果返回给客户端
  });
});