初探vue

vue是什么?

  1. Vue是一套用于构建用户界面的渐进式框架。
  2. Vue 被设计为可以自底向上逐层应用,并且其核心库只关注视图层。
  3. Vue 能够为复杂的单页应用提供驱动。

vue对移动端和浏览器版本支持

vue采用ES5的特性,所以浏览器兼容问题不容忽视!

  1. 红色:几乎不支持
  2. 黄色:大部分支持(有很小的可能会影响使用)
  3. 绿色:几乎全部支持(不影响使用)

IE9部分支持,IE9以下就不用考虑兼容了,其他浏览器支持都还不错,可以放心使用,一些老旧的政府网站就不用考虑了!

如何初始化一个Vue项目?

目前vue已经更新到了3.0版,与2.x版某些地方有所改变,但对于初学无所谓哪个版本,只要掌握了其中一个版本,理解了其思路,升级版只是对之前版本的完善,看文档即可学会!

  • 直接通过<script>标签引入,开发时引入开发版,部署时更换为生产环境版本;
// 开发环境版本,包含了有帮助的命令行警告
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

// 生产环境版本,优化了尺寸和速度 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

 

  • 通过npm的方式引入

通过npm引入必须先安装node.js,安装npm

npm install vue

一般在使用 Vue 来构建大型项目的时候,通常会通过npm + vue-cli + webpack的方式进行项目初始化。

node.js官网下载

vue-cli创建vue项目

  1. 安装vue-cli脚手架
// 安装脚手架
npm install -g @vue/cli

// 升级脚手架
npm update -g @vue/cli

 

  1. 创建一个项目
// myvue为自己的项目名称
vue create myvue

 

终端会出来如图所示的选项,Default为默认配置,现在默认配置多了两个版本选择,是使用vue2还是选择vue3,这里先选择vue2的默认选项!箭头键上下选中,回车

  1. 查看项目
// 进入项目文件夹
cd myvue

// 运行命令查看
npm run serve

访问: http://localhost:8080/ 即可查看到vue的默认首页!

思考: 脚手架方式创建的项目是否可以通过<script>标签引入vue ?

答案是:可以的!

在通过 npm run build 方式打包完成之后,可以在index.html文件中通过CDN的方式引入,可以尽量的避免服务器中的流量流出,一般个人服务器可能带宽只有1M,这种方式多少还是有些效果的。

vue的代码结构

  • 非单文件组件(.js文件);

这种文件指的是我们直接通过<script>标签引入vue而创建的,js是可以直接被浏览器解析的!

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue学习</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
      
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue!'
        }
      })
    </script>
</body>
</html>

可以运行这个文件看看效果,vue连接了视图和数据,当数据改变时,视图中的数据也会跟随改变,可以试着改变dada中的message 的值看看效果!

所以这个#app是视图层

<div id="app">
  {{ message }}
</div>

<script>包裹起来的dada部分为model层,即数据层!

data: {
    message: 'Hello Vue!'
  }

这种方式在 Vue 中被称作声明式渲染。

另外,如果要在vue中定义一些方法,则需要使用到vue提供的methods声明,如下:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
      methodsName: function (event) {
          ...
      }
  }
});

同样,如果要监听 Vue生命周期或者计算属性的话,也同样以这种方式来声明即可。

  • 单文件组件(.vue文件);

这种方式是vue推崇的一种方式,即模块化开发,便于维护,单个组件拆分。 这才是 vue 真正强大之处,在vue中的这种模块化方式,被称为单文件组件(.vue文件),即每一个组件都被拆分成了一个个 .vue 文件,需要用到的时候直接引入即可!

先来看一下单文件组件(.vue 文件)的文件结构。

<template>
     // html
</template>

<script>
    // js
</script>

<style>
    // css
</style>

每个单文件都是一个组件,由 html/js/css 三部分构成,每个组件的css以及js只影响组件本身,对全局毫无影响,这就优势非常明显,代码耦合度低,组件化,一次开发,可重复使用,更利于团队开发和维护!

缺点: 这种单文件后缀为.vue,浏览器无法直接解析,这就需要借助外部工具,也就是借助我们安装的vue-cliwebpack的原因之一。

今天就大概学习这些,明天我们继续学习整理,项目中生成的每个文件都是用来干什么,有什么用!