【万字笔记】前端框架Vue.js快速入门

文中给出的完整代码实例都是可以直接运行的

可以在（建议用下面一个，但是要删掉他原本有的代码）

HTML/CSS/Javascript在线代码运行工具

vue在线编辑器

在线运行

本文架构：

 

 前言：

嗯，学习这个的起因是数据库课程设计，老师说我的前端做的不好看qaq

之前看过一点vue2（很少很少一点），所以来学vue3，准备美化一下个人blog

服务器，后端，域名什么的都弄好了

开始

起步：（初步认识）

在这学的Vue3 起步 | 菜鸟教程 (runoob.com)​​​​​​

首先是vue3的引入，还是从vue.global.js的手动引入开始吧

我是把vue.js下载到了本地，下载地址：https://unpkg.com/[email protected]/dist/vue.global.js

当然你也可以用CDN方法（unpkg的很好用，后面的例子也都是基于unpkg演示）

 然后是先初略学习两个实例

主要就是data用法和methods用法，document是一个js操作

const app=Vue.createApp({
    data(){
      return{count:4}//以$data的形式返回
    },//这个地方有个逗号，就这错了几次
    methods:{
      add(){
        this.count++//this指向相关组件
    }
    }
})

const vm = app.mount('#app')//挂载到app

document.write(vm.$data.count)

这里我把app挂载到了id=‘app’的地方，所以完整代码应该是这样的

	{{count}}

运行结果：

好了，我决定先去吃饭qaq（2022-7-29，11：54） 

吃完了（2022-7-29 12：58）

语法模板

vue是基于html5的语法格式（差不多这个意思)

存放html字段的一个方法，之前学html讲过

web应用开发被迫学的，第一门没考到90的编程，不过这课很多卷王都是70多

  
{{ message }}

使用 v-html 指令用于输出 html 代码：

暂时还没感觉到有什么用，先记下来

    
使用双大括号的文本插值: {{ rawHtml }}
    
使用 v-html 指令: 

 

输出结果：

 v-bind指令

html没学好，看来半天才转过来，截图放这怕以后忘了

改写一下他给的实例

  //判断开关
  修改
  //主体在这
  
//是否使用class1
    v-bind
  

 解释一下：

简而言之，这是在测试自己开发的组件的时候用到的方法，检查传入的参数是否正确

暂时还用不到，现在还在手写Vue阶段，还用不到开发工具

计算属性

这个地方其实可以用methods代替一下，但是computed会快一些，效果是一样的

但是computed会有一个缓存问题

简单的例子在最前面举例过了,这里再写一次（其实我觉得都用methods就好qaq）

    
{{ reverseMessage }}

运行截图

 

setter 

 

 感觉反而弄麻烦了，还是都用methods吧（这个例子不是我写的，不一定能运行）

var vm = new Vue({
  el: '#app',
  data: {
    name: 'Google',
    url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('
');
document.write('url: ' + vm.url);

运行结果（教程给的）

监听属性

vue3使用watch来充当监听属性

先来一个简单的例子

这里的old，new可以自己定义，前面一个是新变量，后面一个是旧变量

    
计数器: {{ counter }}
    点我

    

运行截图

 电脑没电了，该睡觉了qaq，明天起来看看项目和数模吧qaq（2022-7-30 0：20）

起床开肝（2022-7-30 14：05） 

千米与米之间的转换

先来看例子

简单来说就是监听一个值的同时改变另外一个值 

v-model将input和kilometers,meters双向绑定

    千米 : 
    米 : 

    

其中有这一行代码：

document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;

这一行代码的意思是（js基础不好呜呜）

获取id为info的值/修改标签为info的值document.getElementById().innerHTML

 运行结果

vue3-watch监听属性演示案例

 

异步加载使用Watch（跟ajax一起使用，放到后面仔细说）

先来看一下异步的定义（熟悉这一定义的小伙伴可以跳过）

简单来说，有三个任务啊A,B,C，同步执行就是A,B,C的顺序

异步的话，可以是A，(B,C），即B,C同时执行

可以看看这个什么是异步？

来个例子：异步使用watch的例子

样式绑定

 v-bind属性绑定

这个地方在前面讲v-bind的用法提到过：用true和false控制div的样式

 运行截图

 当然，也可以传入多个参数

也可以直接绑定数据里的一个对象

如果本来给div元素指定了一个class，当v-bind绑定的class返回为true时，会覆盖原class

运行截图

使用计算属性来绑定

代码实例

简单来说，先在computed中写好规则，然后直接调用（复用性较高，常用）

 运行截图

  v-bind数组语法

这个地方很简单，后面一个导入的会覆盖前面一个导入的

也可以用三元表达式

先写到这，有点事出去 2022-7-30 16：24