1.1 Vue 介绍

1.1.1 官网

  • 中文官网

    1.1.2 介绍与描述

  • Vue是—套用来动态构建用户界面的渐进式JavaScript框架

    • 构建用户界面: 把数据通过某种办法变成用户界面
    • 渐进式: Vue可以自底向上逐层的应用，简单应用只需要一个轻量小巧的核心库，复杂应用可以引入各式各样的Vue插件

1-Vue 简介 - 图1

1.1.3 Vue 的特点

  1. 遵循MVM模式
  2. 编码简洁，体积小，运行效率高，适合移动/PC端开发
  3. 它本身只关注 UI，可以引入其它第三方库开发项目
  4. 采用组件化模式，提高代码复用率、且让代码更好维护

image.png

  1. 声明式编码，让编码人员无需直接操作DOM，提高开发效率。

image.png

  • 命令式编程码一个命令一个操作，声明式编码是一组操作的集合

image.png

  1. 使用虚拟 DOM 和 Diff 算法，尽量复用DOM节点

image.png
如果数据发生改变，原生的 JS 就会将原来原有的一样的数据进行重新覆盖，就如下图，赵六是后面加上去的，但是另外三个人的数据也会重新再生成一次，这样影响并浪费性能。
image.png
Vue 会有个虚拟 DOM，将不变的数据继续保留，只修改变更的数据。
image.png

1.1.4 与其他 JS 架构的关系

  • 借鉴angular的模板和数据绑定技术

  • 借鉴react的组件化和虚拟DOM技术

    1.1.5 Vue 扩展插件

  • vue-cli: vue脚手架

  • vue-resource(axios): ajax 请求
  • vue-router:路由
  • vuex:状态管理(它是vue的插件但是没有用vue-xxx的命名规则)
  • vue-lazyload:图片懒加载
  • vue-scroller:页面滑动相关
  • mint-ui:基于vue 的U组件库（移动端)

  • element-ui:基于vue的UI组件库(PC端)

    1.2 初始 Vue

    1.2.1 引入 Vue

  • 从官网下载 vue.js 开发环境，我下载开发版本，我下载的是 2.6.14 版本的。

  • 将下载下来的vue.js放到自己指定的目录

image.png

  • 在learnVuejs创建一个同级的vue01目录，后续初步学习的内容都会在这个里面。

image.png

  • 用 idea 打开目录

image.png

  • 创建html文件，然后点击右上角的预览，我用的是 Edge浏览器，

image.png
这个时候控制台会报两个错误
image.png
第一个是提示下载开发工具，按照给的链接下载工具包 [https://github.com/vuejs/vue-devtools](https://github.com/vuejs/vue-devtools)
选择安装扩展插件，也可以到官网找到 Vue Devtools
image.pngimage.png
下载你对应浏览器版本的插件，我用的是 Edge 浏览器，所以直接点击 Install on Edge,浏览器会提示安装拓展插件
image.png
安装好后再看浏览器，之前第一个提示已经消失
image.png
第二个提示是我运行的是开发版本的 vue，部署生产的时候要使用生产版本的 vue，因为开发本的体积会比较大。
image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <!-- 引入vue -->
  7.     <script type="text/javascript" src="../vuejs/vue.js"></script>
  8. </head>
  9. <body>
  10.     <script type="text/javascript">
  11.         //设置为 false 以阻止 vue 在启动时生成生产提示。
  12.         Vue.config.productionTip = false
  13.     </script>
  15. </body>
  16. </html>

这样就不是有警告提示了
image.png

1.2.2 创建 Vue 对象

  1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
  2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
  3. root容器里的代码被称为【Vue模板】；
  4. Vue实例和容器是一一对应的；
  5. 真实开发中只有一个Vue实例，并且会配合着组件一起使用；
  6. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
  7. 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

  8. Vue 对象会去解析扫描容器，看容器里是否定义 Vue 对象所包含的语法和属性，如果容器里有 Vue 对象定义的属性，Vue 对象就会将对应的属性值填充到容器里

    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>第一个Vue</title>
 <!-- 引入vue -->
 <script type="text/javascript" src="../vuejs/vue.js"></script>
</head>
<body>
 <!-- 准备一个容器，用户展示 Vue 构建的对象 -->
 <div id="root">
     <h1>Hello, {{name}}</h1>
 </div>

 <script type="text/javascript">
     //设置为 false 以阻止 vue 在启动时生成生产提示。
     Vue.config.productionTip = false

     //创建Vue实例
     new Vue({
         el:'#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
         data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
             name:'湖南'
         }
     });
 </script>
</body>
</html>

    效果如下：
    image.png

  • 借助开发者工具可以直接在页面修改属性值

image.png

  • 一个 Vue 不能同时处理两个容器

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>第一个Vue</title>
  <!-- 引入vue -->
  <script type="text/javascript" src="../vuejs/vue.js"></script>
</head>
<body>
  <!-- 准备一个容器，用户展示 Vue 构建的对象 -->
  <div class="root">
      <h1>Hello, {{name}} 1</h1>
  </div>
  <div class="root">
      <h1>Hello, {{name}} 2</h1>
  </div>

  <script type="text/javascript">
      //设置为 false 以阻止 vue 在启动时生成生产提示。
      Vue.config.productionTip = false
      //创建Vue实例
      new Vue({
          el:'.root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
          data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
              name:'湖南'
          }
      });
  </script>
</body>
</html>

  • 谁在前面就解析谁，并且一个容器只能被一个 Vue 实例处理，它们是一对一关系。

image.png
注意区分：js表达式 和 js代码(语句)，{{}}里必须要写 js 表达式
js 表达式是一种特殊的 js 语句

  • 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
    • a
    • a+b
    • demo(1)
    • x === y ? 'a' : 'b'
  • js代码(语句)
    • if(){}
    • for(){}