【前端内容学习】vue的引用，下载，语法

（1）vue的使用方式

0.把相关的vue代码直接搞成一个vue.js的文件，然后正常导入html文件中,获取这个文件的方法就是直接浏览器访问下面的这个网址，然后粘贴复制保存起来即可，以js的形式引入

1，直接在官网上引用网络CDN文件，注意这种引用方式，要把这一段写在所有使用vue的部分前面

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

2.对于大型文件，例如开发前后端分离程序（手绘组管理系统），使用npm下载

我这里使用的应该是vite进行下载的。。。。

这样会直接创建一个完整的前端部分，

先保证电脑已经下载到了node.js，

注意一下，node.js的下载同时要配置环境变量，以及两个文件夹node_cathe还有node_global,和这俩对应的环境变量（这里就不展开说了。可以查阅一下有关的教程）

注意，为了后面不被卡住，我们最好使用一下淘宝镜像

在命令行窗口使用指令

npm config set registry https://registry.npm.taobao.org

如果想知道自己是否成功安装镜像，可以用指令验证

npm config get registry

然后再下载vue

npm init vue@latest

跟着提示选择自己需要的选项，最后会让你设置项目名称和包，然后会自动在你的包地址下面创建一个vue项目，进入以后运行npm install指令，就基本完成了

然后在运行的时候以idea为例

运行的设定就这样配置好了，接下来点击小三角就可以正常创建了，点击运行会在输入框里里面生成一个网页地址，点击地址就会走进我们创建好的vue项目里面

这里可以注意到有三种脚本 dev build 还有preview，这三种不太一样，后面有空我们再解释

这里我们使用dev，因为他可以生成网址，其实就相当于 npm run dev指令

如果想要指定打开前端的端口地址，可以在package。json的这里进行修改

再然后，如果想要这个页面自己弹出来，我们可以在这里加一个--open

就会自动打开了

3.一般的下载方式应该是。。。。。（后续再补充）

（2）vue的基础部分

（注：此内容仅是个人的一点理解和整理，大致知识框架仍然来自于vue3的官方文档，非教程）

1.关于vue应用的创建

先说说vue实体的创建：

不同于之前vue2（想想就觉得觉得离谱，我导入了vue3的链接写了半天vue2。。。）的创建方法，vue3里面，一个vue的对象，应该是这样被创建出来的

const MyVue=vue.createApp({
    data(){
      return{
       //放数据
        }
    }，
    methods:{
      //方法
    }
}).mount('//渲染元素的id')

解释一下这里面的原理，vue下面的createApp方法里面需要传入一个组件，根据这个组件生成一个vue对象，然后根据挂载的id，把对应id的东西进行渲染。

比如说这样一段前端代码

"被选中">{{上面vue对象里面的一个数据名字}}

这样的效果就是把data里面的数据，给渲染到这个文本注入的位置（后面有机会会讲到）

当然，上述的内容基本是写在同一个文件里面的使用情况，对于多组件的开发（比如vite创建的完整项目，我们是这样子进行的）

//一个完整的Vue组件的写法，这就是一整个文件的内容
 
<template/>
 
<style/>

这就是一个单独的vue文件里面的内容，script里面是常规的js内容，这个export default的意思是把里面的对象抛出，可以在template里面直接使用vue对象里面的东西

至于style，单纯的css内容

template就是要往目标上进行渲染的东西，注意这里有个特点，template渲染的目标如果自身有东西，渲染结果就会进行覆盖（也许你会在打开网页短暂的一秒钟见到他们）

这样我们就完成了一个单组件，关于这个组件是如何引用到网页上的，这里我们按照前面提到的创建出来的东西进行解释

 主要和这三个文件有关系，App在main中进行创建应用，挂载元素，index是真正的展示界面，它引入了完整的main.js,这样就完成了App---》main----》index的进化顺序。

APP的东西我们已经看过了，主要看下面

引入createApp的方法，省的再次从vue对象里面调用

引入完整的组件并且命名为APP（注册将会在后面解释）

引入那个css不知道是干啥的，反正没见到啥有用的效果

然后下面根据组件App创建渲染活动，然后挂载到这个id为app的东西上，就会对这个app的东西进行渲染

什么，不知道app是什么？当然我也不知道，别忘了main.js是个js文件，以外接js的方式引入index文件

 主页展示的是这个index界面，其中这个div又被渲染过了，所以展示出来就是渲染的效果

两种应用创建的方式上面已经解释过了，其实原理就是创建组件，创建应用，挂载元素完成vue渲染的操作。

2.关于模板语法

模板语法的内容其实就是数据插值和各种指令，这些部分会单独开一个博客来进行处理

3.关于响应式这东西

响应式解释起来有点麻烦（后续有机会补充）原理上可以理解为“每次修改数据都会触发相应的函数聪儿重新执行”，如果是从直观上显示就是“每次对数据的修改都会快速动态地反映在渲染上面”。

响应式会更新dom，根据官方文档的说法，响应式会把这些更新放进一个队列（缓存）里面，然后直到下一个tick（个人推测是类似时钟周期的一个东西）进行统一执行，这样保证每个组件不会重复更新，

这个过程很快，瞬发，后续有机会再去深究。

4.关于计算属性和方法

（1）计算属性的书写形式是这样的

 computed:{//这里面写的是计算属性
    shu(){
      return this.count;
    },
    now() {
      return Date.now()
    },

位置和methods，data（）等东西并列

一般来说，我们经常使用文本注入的表达式

{{1+1+1}}

这种东西，适用对象以后会变成这个样子

{{book.num+1+attt.sjd+hdj.sh}}

看起来就会很麻烦，我们就会使用计算属性这东西来替代，计算属性，顾名思义是一个计算得到的属性数值，例如上面的例子，我们直接调用

{{shu}}

就可以得到一个结果，和函数很像，但是他们有些不太一样的地方

（1）不同的更新时间：计算属性需要一个返回值，这个返回值如果是使用响应式缓存的话，会随着这个返回值的更新而更新。如果这个返回值不是响应式的缓存，那么这个东西就会在调用的那一刻锁死，真就变成一个常量的属性。（比如下面的哪个date的调用）

而对于方法来说，是否更新取决于你何时何地，是否调用，调用一次刷新一次。

（2）补充一个自己发现的东西：计算属性你可以当成一个只会执行一次的函数进行理解，具体例子

 我弄了这个东西试了一下，发现这个alert在渲染之前运行了一次，但是后续的count发生改变，也不会重新执行整个函数了。可以看出在创建页面的时候，计算属性的函数都会执行一遍，然后把返回值当成属性值，这个属性值是否会发生改变，取决于这个属性值本身是不是可以发生响应式改变的

另外，计算属性一般设置为只读

补充：计算属性里面很重要的一个东西，计算属性的本质

一个计算属性我们常用的写法是这样子的

mes(){
      return "xxx";
    },

看起来很像一个方法，但是不能这样理解，因为计算属性调用的时候{{xx}}，而同名函数调用的时候是{{xx()}},这是因为上述只不过是计算属性根据常用的简写模式，真正的计算属性可以理解为一个对象，自带set（newvalue）和get（）两个方法

mess:{
      set:function (newvalue){
        alert(newvalue);
      },
      get:function (){
        return 1;
      }
    }
 
//这是完整的写法
//set函数在赋值的时候调用，赋数值会当成newvalue参数传入
//get方法类似java中的toString

5.类和样式的绑定主要还是css的class队列语法

class="{spp:true,zt:false}">
//里面是被渲染的内容