vue的介绍

一、vue的简单介绍

1.简介

插件：日历插件、轮播图、选项卡。

框架：bootstrap。能够独立做来一个一个网页（项目就是由每一个网页组成 ） 响应式布局的项目

vue是渐进式 JavaScript 框架

渐进式 ：主张最少。最大的特点是没有ＤＯＭ操作。主张只操作数据 。

2.优点

1.轻量级的数据框架
2.双向数据绑定
3.提供了指令
4.组件化开发
5.客户端路由
6.状态管理：同cookie、session、本地存储类似

3.缺点

1.Vue 底层基于 Object.defineProperty 实现数据响应式，而这个 api 本身不支持 IE8 及以下浏 览器，所以Vue不支持IE8及其以下浏览器；
2.Vue 打造的是SPA，所以不利于搜索引擎优化(SEO)； single page application
    以前是每一个显示的页面都应该有一个html才能设置不同的title、description、keywords
    app
    做项目时，必须使用Vue的脚手架创建项目，但脚手架就是基于webpack的一个脚手架。
3.由于 CSR的先天不足，导致首屏加载时间长，有可能会出现闪屏。
    client side render: 客户端渲染( 后端提供json数据，前端拼接字符串，再渲染 )
    server side render: 服务端渲染( json+html拼接字符串都在后端做，返回给前端 )

4.核心

数据驱动（ 数据改变驱动我们视图的改变 ） 组件系统

5.MVVM

M-model模型
V-view视图
VM-viewModel 视图模型
模型（model）通过了视图模型  决定了视图(view)
视图(view)  通过视图模型 修改模型 (model) 
视图模型是模型和视图之间的桥梁。

6.SPA :vue或react、小程序

single page application
你的项目里面只有一个index.html
但是肯定也要以多页面视图展示。但是我们没有体会到页面刷新。
index.html#cinema
index.html#movies
index.html#movie/classic

实现原理：地址栏#后面变化了，然后发送ajax请求，实现页面的变化  
地址栏发生变化会向服务器发请求，但是#后面变化不会发请求。
体验好。第1次访问可能会出现白屏，但是后面整体体验是很好的

二、vue的初体验

1.安装

    1.cdn [不推荐]：线上的一个网址
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    2.npm  [推荐]
    3.脚手架[做项目]

2.引用

<!-- 
        引入方式：
     -->
     <!-- 
         1. CDN: 就是引入一个线上的地址。
      -->
      <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
      <!-- 
          开发阶段： 写的一些代码提示相对更好
       -->
      <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
      <!-- 
          生产阶段
       -->
      <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> -->


      <!-- 
         2. 使用npm下载到本地
       -->
       <!-- <script src="./node_modules/vue/dist/vue.js"></script> -->
       <script src="vue.js"></script>

       <!-- 
           3. 项目肯定是 脚手架帮我们搭好所有的架子么。
        -->

      <script>
        // 在局部就暴露出一个 Vue 构造函数,那必然是要实例化Vue的
        console.log( Vue );
      </script>