【前端内容学习】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的东西进行渲染。

比如说这样一段前端代码

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

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

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

//一个完整的Vue组件的写法，这就是一整个文件的内容
<script>
export default{
  data(){
    return{//放数据

      }
    }
  },//下面写方法之类的
</script>

<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队列语法

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

这种class的选择方式其实是vue对于style和class的补充
可以注意到class里面很类似对象，确实，这个东西也可以塞入对应的对象·

<style>
.spp{
   ......
}
.zt{
   ......
}
</style>

6.关于条件判断，循环判断以及key

（1）v-if语句，会根据数值判断是否展示

 <br>下面是关于v-if，大概就这样，奇奇怪怪的<br>
  <div v-if="alpha==='A'">这个是a</div>
  <div v-else-if="alpha==='B'">这个是b</div>
  <div v-else-if="alpha==='C'">这个是c</div>
  <div v-else>啥也不是捏</div>

（2）我们常用的一个v-show指令也是一样的效果，区别在于show仍然会渲染，本质上只是更改了dispaly的属性，但是if确确实实是不渲染，而且允许嵌套

再者说 v-if指令支持分块，而且可以用在模板template标签里面

（3）关于循环，分为两种，数组的循环和对象的循环

先说数组的循环，大致格式是这样子的

{v=for“(元素名字，索引名字) in 数组名字”}

这个标签上的东西就会多次循环这个标签

对象的循环也差不多，是这个样子

<li v-for="(item,index) in items" :key="item" ref="ites">{{index}}{{item}}</li><!--可以遍历数组-->
  <li v-for="(item,key,index) in myObject">{{key}}-----{{item}}</li><!--也可以用这个方式去遍历对象里面的属性-->

key是属性名

这里补充一个非常重要的点，v-if标签和v-for标签尽量不要放在一起用 因为if的优先级高于for

比如这样

<div v-for="item in items" v-if="item.num===0"/>

想法是好的，但是默认先加载if的话，它根本不知道这个item是什么东西

解决这种办法就是嵌套，在v-for的循环内容中加v-if即可

另外，利用v-bind指令绑定一个key，类似这样

<li v-for="(item,index) in items" :key="item" ref="ites">{{index}}{{item}}</li><!--可以遍历数组-->

相当于给每个元素都进行一个标识，可以简化后续的某些操作，现在还看不太懂，后续有机会再进行补充算了

7.关于常见的钩子函数

和methods并列的

created：{}//组件创建完成
beforeMount：{}//组件挂载之前
mounted：{}//组件挂载以后
//剩下更多请详见api

8.关于模板引用

和cpp中的引用很类似，给ref元素起个名字

后续就可以用this.$refs.名字进行调用

9.最后整理一个父子组件中的交互

组件的注册引入放到后面谈。。。。

（1）利用props，从父组件中更改子组件的内容

首先子组件是这样的

这个响应式的数据放在props的数组里面，而不是放在data里面

然后主组件再引入的时候，手动修改一下

就可以达到在父组件中修改子组件的内容的效果

（2）使用<slot/>标签在子组件的模板中

然后在父组件中调用子组件标签的部分中如是写道

 

 这段文字就可以在slot的位置显示了

---------------------常见问题----------------------

（1）关于单文件中使用vue

vue的原理是把符合规范的自定义对象，在Vue的createApp函数中创建创建一个活动对象，最后再利用mount挂载到我们需要的元素上面，这个问题不大

不过问题在于活动的创建格式可能有一点点限制，官网上两种简洁一点的方法是

<script>
  const {createApp}=Vue//这个大括号的意思是“给多个变量名字进行赋值”
  createApp({          //后面会讲到
    data:function (){
      return{
        变量名字:"hello"
      }
    }
  }).mount("元素id")
</script>

<script>
  const ll=Vue.createApp({
    data:function (){
      return{
        变量名字:"hello"
      }
    }
  }).mount("元素id")
</script>


//这里我们推荐使用第二种，而且不需要创建const常量
因为这东西只是一个接受作用

若是想把步骤完全分解，应该是这个样子的

 这样子的符合原理，但是不行，因为少东西，无法识别vue从哪里导入

这时候完整的写法应该是

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="v">{{数据名字}}</div>

<script type="module">
  import {createApp} from "vue";//先把这个方法引出来
  const myVue={                 //再创建一个对象
    data:function (){
      return{
        数据名字:"....",
      }
    }
  };
  createApp(myVue).mount("#v");//最后用对象创建
</script>

这里包括module export import以及export faulted，是js的基本语法问题，后续有时间单独开个博客说一说

（2）关于为什么data是一个函数，而不是一个对象

常见的，我们的写法是这样子的

data是个函数的原因是为了能return，而我们return的东西是一个对象

 

 在根组件中这样使用两次子组件，相当于data调用了两次，每次执行完都会产生新的对象，这样return的时候先后创建了两个不同的，能响应式变化的对象

 像这样，你用点击事件修改一个组件的时候，另一个同类组件的数据不会发生改变

我个人的理解是：子组件的template中，是自己的文件里面抛出的vue对象，所以只能更改自己

并且return {}语句能保证生成不重叠的对象，各自只能改各自template里面接收到的data对象，并且互不影响

但是像是这种写法就很有问题

 这种写法里面，a这个东西已经被提前创建过了，相当于每个子组件模板得到的data，都是同一个a，这样的话你改其中一个，就会影响别的组件模板的数据显示

画图为例