前言:最近跟着老许学习了前端的三个基础,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中消失,他们的共同点就是他们两个都接收一个布尔值。