【1113 | Day60】Vue介绍

目录

• Vue的介绍及安装和导入
  • 一 .Vue的介绍
    • • 1、what -- 什么是Vue
      • 2、why -- 为什么要学习Vue
      • 3、special -- 特点
      • 4、how -- 如何使用Vue
  • 二.Vue的安装和导入
    • • 1、安装
      • 2、导入

Vue的介绍及安装和导入

一 .Vue的介绍

1、what -- 什么是Vue

可以独立完成前后端分离式web项目的JavaScript框架

2、why -- 为什么要学习Vue

三大主流框架之一：Angular React Vue

先进的前端设计模式：MVVM

可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发

3、special -- 特点

单页面web应用 数据驱动 数据的双向绑定 虚拟DOM

4、how -- 如何使用Vue

开发版本：vue.js

生产版本：vue.min.js

<div id="app">
 	{{ }}
</div>
<script src="js/vue.min.js"></script>
<script>
 	new Vue({
 		el: '#app'
 	})
</script>

二.Vue的安装和导入

1、安装

去官方网站https://cn.vuejs.org/起步中安装，开发或者生产版本

两者版本的区别

• 开发版本：没有删去空格换行便于查看源码
• 生产版本：删去空格和换行提升加载速度

补充:

由于Vue自带广告，影响查看网页源码可以去屏蔽掉

# 9048行

        } else {
          // console[console.info ? 'info' : 'log'](
          //   'Download the Vue Devtools extension for a better development experience:\n' +
          //   'https://github.com/vuejs/vue-devtools'
          // );
        }
      }
      if (config.productionTip !== false &&
        typeof console !== 'undefined'
      ) {
        // console[console.info ? 'info' : 'log'](
        //   "You are running Vue in development mode.\n" +
        //   "Make sure to turn on production mode when deploying for production.\n" +
        //   "See more tips at https://vuejs.org/guide/deployment.html"
        // );
      }

2、导入

<script src='vue文件的路径'></script>