Vue介绍、搭建环境以及构建项目

一、Vue简介

  Vue(发音为/vjuː/,类似于view)是用于构建用户界面的渐进框架。与其他整体框架不同,Vue从头开始设计以逐渐采用。核心库仅集中在视图层,并且易于拾取并与其他库或现有项目集成。另一方面,当与现代工具和支持库结合使用时,Vue也完全能够为复杂的单页应用程序提供支持。

重点:
1.只关注视图层
2.MVVM模式框架
3.SPA(single page web application)应用

-MVVM模式是一种试图与数据双向绑定的框架,即数据发生变化,试图会跟着变化;试图发生变化,数据模型也发生变化,开发者再也不需要操作DOM节点。

案例:乘法表的例子

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    //cdn的方式 引入Vue
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <!--MVVM模式-->
<div id="app">
    <input type="text"  v-model="num"/>
    <table border="1">
        <tr  v-for="i in parseInt(num)">
            <td  v-for="j in i">{{j}}*{{i}}={{j*i}}</td>
        </tr>
    </table>
</div>

  <script>
      var app=new Vue({
          el:"#app",
          data:{
              num:9
          }
      })
  </script>
</body>
</html>

效果图:
Vue介绍、搭建环境以及构建项目_第1张图片

-SPA 单页面应用(其实就是安装Vue的第二种方式),可以实现组件化开发,提高开发效率,适用大型项目。这种项目开发完后,只有一个html页面,内容是由一堆js、css渲染的。
spa的缺点:Spa应用部署后只有1个页面,而且这个页面只有一堆js、css文件,所以Spa应用不易被搜索引擎搜到。

二、为什么选择Vue

1.渐进式框架
2.双向数据绑定
3.不需要操作DOM,状态机,状态的改变,会引起视图的更新
4.Vue不仅仅可以构建整个大型应用,还可以作为一个项目的某一个功能 实现然后嵌入项目
5.Vue环境构建非常方便:vue-cli指令
6.Vue单文件组件:组件化开发
7.社区非常强大,提供各种各样的插件供我们使用

三、Vue创建方式分为两种

1.使用cdn方式直接引入(一般不用)

你可能感兴趣的:(Vue,vue)