老张跟着老许学前端之VUE2的初次接触-CSDN博客

本文链接：https://blog.csdn.net/ajq950224/article/details/137636325

前言：最近跟着老许学习了前端的三个基础，html，css，JavaScript，最近的学习主要以js为主，js学习了String，Number，布尔值，Object，Undefind，Null，数组，Function，知道了Function是对象的引用数据类型，知道了七个基础数据类型，基本可以正常写出js的东西，只是程序员思维还没有培养完成，老许就让我接触了js的第一个框架，vue，后面还会继续学习react，今天就写一篇文章，把学习vue的第一课，以自己的逻辑和学习思维把他以文字的形式写出来，方便后面的查阅和学习。

1、怎么用脚手架CLI，新建一个vue2项目

https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

上方链接是讲述vueCli脚手架怎么创建一个页面的教程

a、打开电脑终端，在终端里面输入，然后回车确认

vue create hello-world

前面的vue create是创建vue项目的意思，后面的hello-world是项目的名称，你可以改成任何你想改的名称，但是名称的名字一定要贴合你的整个项目。

b、在安装过程中会有vue版本选择，我选择的是vue2

选择后他就会开始创建并下载vue文件，下载后的文件打开访达，点击左上方前往-个人就可以找到自己下载好的文件，把文件移动到文档里面并用vscode打开文件，一个vue项目就创建成功了。

2、vue项目打开后的各个代码集对应的用处

a、node_modules这个文件夹里面放的是你创建vue文件的时候，自动给你生成和下载的各种包，所谓的包，就是方便你后续开发的时候，让你的开发更加的便捷。

b、public里面放入的是公共资源，一般用于存放互联网开发所用到的公共资源，但是你开发的时候所用到的大部分资源都不放在这里。

c、src里面放的就是你开发时候用到的东西了，里面有两个文件夹，分别是assets，里面放入的是图片资源，components，里面放入的是你开发的时候写的组件。里面还有一个固定的主文档，他的名字就是你创建vue文件的时候的名字，但是这个名字是大驼峰，叫做HelloWorld.vue，这个文档就是你的主文件，你所有开发的资源，最后都会汇总到这个文档里面

d、里面很重要的一个文档就是：package.json，这个文档里面写了你的文档名称，你所需要的各种包的版本号，你的文件名称会放在scripts对象的第一个，也就是你启动文档的时候，需要输入yarn run 文档名，去启动文件。

以上就是我暂时对vue文档创建到现在的理解，在接下来的学习过程中，会及时来补充。这里特别说一点，之前我们写的文档都是html.html以html为后缀，现在的vue文档全部都是vue为后缀结束语。

3、vue项目的写法改变

a、开始：

vue文档的开始比较特殊，他的html的开始不在是传统的html文档了，传统的html文档开始是这样的：

<html>
    <head>
        <title></title>
    </head>
    <body>
        <div>这个里面才开始写内容</div>
    </body>
</html>

而vue的代码变成了：

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

他是以另外一个标签template去作为最外层标签，而他最后会编译成html的形式展现到dom代码里

b、js

①、vue.js最外层变化

vue的js代码也有一些改变，他最外层依旧是script标签包裹，但是里面的内容做了其他的一些改变：声明：js里面必须要有一个name，这个name取名方式必须和你的项目有关联，这是取名字的规则：


export default{
    name:"app"
    // 这里面是js的内容
}

②、变量

而我现在对他的理解就是，js是以对象的形式包裹在了这个里面，这是固定写法，不用太过纠结，在他的里面有又有其他的写法，比如，之前我们的变量声明全部用let、const或者是var，而在vue里面他的声明方式是这样的：

data:() => {
    return {
        变量名：变量值
        result : 0
    }
}

③、函数

vue.js里面的函数写法，和原生js的区别也有点大，原生js的写法是：function name(){}，先声明，后命名，在小括号，后面跟着大括号，然后大括号里面是函数体，而现在vue.js里面的函数是这样的：

methots:{
    name:function(){函数体}
}

他的最外层包裹了methots，他把函数也变成了对象，里面的函数写法，函数名也写在了前面，但是函数体里面的内容没有太大的变化。

④、组件

vue和原生的js不同且更加方便的是，原生js一个页面写在一起，代码量会特别的多，如果想将代码量缩小非常的麻烦，而vue就很好的解决了这一切，他可以将一个页面的每一块都写成一个组件，然后引用这些组件，让这些组件最后组合成一个页面，便捷且方便：

引用组件的方式：

// 首先第一步，我们要在主页面上的js代码集中声明我们要引用的组件的名字：
 components: { // 这个就是声明我要引用这个组件，组件的名字
    calcuLators,
  },

// 第二步，我们要在上方通过目录找到这个组件：固定写法
import calcuLators from "./components/calculators.vue";

// 第三步，我们要将组件插入到dom代码中

<calcuLators />

这样，我们的组件就引入成功了。

⑤、组件写法以及内容

上面我们把组件引入成功后，组件里面又要写很多东西，那么组件里面的东西怎么书写呢：

1、我们的组件里面的所有数据，都应该在主页里面去书写，并且应该是传入值，所以在组件里面的js中会有一个属性叫做：props,这个里面会规定组件的dom元素中传入的值是什么数据类型比如：

  props: {
    msg: Number,
  },

那么，组件中的dom中的所有msg元素传入的值都应该是数字类型，那么怎么去传入值呢，在组件中他的写法是这样的：

<div>{{msg}}</div>

这样，msg里面就可以传入任何的number类型的值，那么他在主页中怎么去给他传入值呢，在主页中他的写法是这样的：

<calcuLators  :msg = result/>

因为前面我们在主页中的data中给了一个变量result，所以就可以直接讲result的值赋给msg，但是因为规定了msg的类型是number，所以在这里叫在msg前面加上冒号，不然msg的类型就就会变成字符串，他的全拼是：v-bind:msg = result.

⑥、事件绑定

vue的时间绑定一般都是在组件中完成，因为主页是由各个组件组合完成的页面，而他的事件绑定和原生js的写法也有一些区别，原生的写法是：onclick = click()，然后在js中用函数调用就可以了：function click(){}，这样一个点击事件就写完了。而在vue里面，他的点击事件绑定方式是这样的：

<div class="operator" @click="operatorNum()"></div>
// 这里operatorNum是一个函数，而这个函数是点击的时候触发，所以相当于是这个函数绑定了这个点击事件

// 因为点击事件需要调用一个函数，所以我们要在组件里面规定operatorNum的属性：为function

  props: {
    operatorNum: Function,
  },

他的全称是v-on :click = "operatorNum()"，这里用了缩写@。因为这个时间是写在组件里面的，所以如果主页想调用他，写法也有很大的区别：

<operatorButton :operatorNum="countNum" />

这里operatorNum是我们组件里面规定的属性，他的属性是一个function，所以后面的countNum就是我们给他的一个函数名，然后我们直接在主页的methots里面调用这个函数就可以，又因为，这个函数绑定的是一个点击事件，所以这个函数的触发条件就是点击的时候触发。这就是组件和父级主页时间绑定的联动性。

⑦、v-if和v-show的区别：

在上课的最后，老许给我大概讲了一下两者的区别，因为还没开始使用，所以这里的代码后面补充，大概的区别就是，v-if他所判断的值，会在dom文档里面消失，而v-show他所判断的值，会失去所有的css，比如长宽高颜色，但是他只是隐藏了这个值，而并不会在dom中消失，他们的共同点就是他们两个都接收一个布尔值。