初始VUE

news2024/12/25 13:04:18

什么是vue

vue的特点

前置js基础知识

安装vue devtools

搭建开发环境

Vue对象的el及data写法

el的处理

data的处理

特点

什么是js表达式，js代码（语句）

vue脚手架（vue cli）

使用说明

具体步骤

脚手架项目解析

index页面中代码部分解析

总结

vue.js和vue.runtime.xxx.js的区别

什么是vue

用官网的一句话就是：我是一套用于构建用户界面的渐进式JavaScript框架。！

渐进式：vue可以自底向上逐层的应用。

简单应用：只需要一个轻量小乔的核心库即可；

复制应用：引入各式各样的vue插件组合

vue的特点

1、组件化的模式，提高了代码的复用率，并且使得代码更好的维护

2、声明式的编码，使得编码人员不需要直接操作DOM，提高了程序员的开发效率

3、Diff比较算法以及虚拟DOM，尽可能高的去服用DOM节点信息。

前置js基础知识

ES6的语法规范、ES6的模块化、包管理器、原型以及原型连、数组常用方法、axios、promise等等

vue2

vue2文档

安装vue devtools

进入其github主页：https://github.com/vuejs/devtools#vue-devtools

可以看到右侧，根据自己选择浏览器的适配。

搭建开发环境

我们参考vue2文档中，可以参考最简单的使用方式，通过<script>标签引入vue

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

在webstorm中创建一个空白项目，这里的工具使用默认大家都是完全掌握的。创建了helloWordl.html

初学一门开发语言，往往是从hello world开始的。

具体内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body>
<div id="firstvue">
<h1>hello {{name}}</h1>
</div>
<script type="text/javascript">
// 创建一个Vue实例
new Vue({
el:'#firstvue',
data:{ 写为一个对象。
name:'world123'
}
})
</script>
</body>
</html>

第一个helloworld我们就这么完成了，其实这里面没有涉及太多的vue支持，接下来我们看一下这个demo中你要了解的内容：

Vue对象的el及data写法

el的处理

vue给我们提供了2种关于el的写法：

1）、new Vue的时候就将el属性配置上，如上方代码所写

2）、我们只是创建了Vue示例，但是没有配置el属性，在我们想要配置el属性的时候，使用代码vm.$mount('css选择器')来进行el的指定挂载。

data的处理

vue给也为我们提供了2种关于data的写法

1）、对象的形式，如上方代码所写

2）、函数式的形式，在学习的过程中可以采用1的形式，但是在使用到组件的时候，data'就需要使用函数式来写了，

注意：这里我们需要了解，由Vue管理的这些函数，一定不能用箭头函数，只要我们用了箭头函数，this他指的就不是我们Vue实例了。

特点

1、我们如果想让vue去工作，则我们必须要去创建一个vue实例，并且配置一个配置对象；

2、root容器里面的代码他是必然符合html规范的，他只不过是混入了一些特殊的vue语法；

3、root容器里面的代码，我们是统称为“vue模板”

4、花括号中可以接受js表达式和js代码（语句）

5、vue实例他适合容易一一对应的

6、真是开发中只有一个vue实例的，并且会配合着一些组件去使用的

7、{{abc}}中的abc是要写js表达式，并且abc他可以自动读取到data中的所有属性信息

8、我们data中国你的数据一旦发生了改变的话，name页面中用到这个数据的地方他会自动进行更新操作

什么是js表达式，js代码（语句）

1、表达式：一个表达式会生成一个值，可以放在任何一个需要值得地方；

1）、a

2）、a+b

3）、sub(1)

4）、a === b？c:d

2、js代码（语句）

1）、if(){}

2）、for(){}

vue脚手架（vue cli）

使用说明

1、Vue脚手架是Vue官方给我们提供的标准化开发工具（平台）

2、文档地址：https://cli.vuejs.org/zh/

具体步骤

1、全局安装@vue/cli（只有在第一次安装的时候执行即可）

npm install -g @vue/cli

2、切换到我们要创想项目的目录中，在执行下面的命令

vue create 项目名称

3、启动项目

npm run serve

脚手架项目解析

package-lock.json 包版本控制

package.json 包的说明书

README.md 项目使用及升级记录或者笔记

public

index.html 主页面

src

assets 存放静态资源文件

当执行npm run serve后，会执行src下的main.js

index页面中代码部分解析

<!--针对IE浏览器的一个特殊配置，是使得IE的浏览器以最高的渲染级别渲染页面-->

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--开启移动端的理想视口-->

<meta name="viewport" content="width=device-width,initial-scale=1.0">

<!--<%= BASE_URL %>指的是public所在的路径-->

<!--配置页签的图标-->

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

<!--配置网页的标题-->

<!--htmlWebpackPlugin.options.title 这一段是找的package.json中找到name-->

<title><%= htmlWebpackPlugin.options.title %></title>

<noscript><!--如果浏览器不支持js则这段代码会显示出来，否则不显示-->