一、Vue 简介

  • Vue 是一套用于构建用户界面的渐进式 javaScript 框架。

    • 构建用户界面：把数据渲染成页面的工具
    • 渐进式：
      • 简单应用：引入核心库就可以
      • 复杂应用：可以引入各式各样的 Vue 插件
      • 即自底向上逐层应用

  • 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

  • Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

  • 另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

特点：

  • 采用组件化模式，提高代码复用率、且让代码更好维护
  • 声明式编码，让编码人员无需直接操作 DOM，提高开发效率
  • 使用虚拟 DOM和Diff 算法，尽量复用 DOM 节点

关联

  • 借鉴 angular 的 模板 和 数据绑定 技术
  • 借鉴 react 的 组件化 和 虚拟 DOM 技术

扩展插件

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

引入：参考官方文档

1
2
3
4
5
6
7
8
9
10
11
12
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue基础</title>
</head>

<body>
    <script src="../js/vue.js"></script>
</body>

</html>
  • 引入后就有了 Vue 全局对象
  • 可以下载 vue devtools
  • 取消开发版本警告
1
2
3
<script>
  Vue.config.productionTip = false;
</script>

起步：Hello Vue.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
  <!-- 总结：
            1、想让vue工作，就必须创建一个vue实例，且要传入一个配置对象
            2、root容器里的代码仍然符合html规范，只不过混入了一些特殊的vue语法
            3、root容器里的代码被称为【vue模板】
    -->
  <div id="root">
    <!-- vue语法 -->
    <h2>{{name}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    Vue.config.productionTip = false;

    new Vue({
      //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符
      el: "#root",
      //data中用于存储数据，数据供el所指定的容器使用。
      data: {
        name: "Hello Vue.js",
      },
    });
  </script>
</body>

Hello Vue.js 细节问题

  • 1、vue 实例与容器是一一对应的

    • 一个容器多个实例：第二个实例可以执行，但没有作用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="root">
       <!-- vue语法 -->
<h2>{{name}}</h2>
   </div>
   <script src="../js/vue.js"></script>
   <script>Vue.config.productionTip = false

       new Vue({
           el: '#root',
           data: {
               name: 'Hello Vue.js'
           }
       })
       new Vue({
           el: '#root',
           data: {
               name: 'Hello Vue.js'
           }
       })
![](http://cdn.michstabe.cn/blog/211113/g6b4Gh9K08.png?imageslim)
  • 多个容器一个实例：只会解析到第一个容器，第二个容器按 html 语法显示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="root">
        <h2>{{name}}</h2>
    </div>
    <div id="root">
        <h2>{{name}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>Vue.config.productionTip = false

        new Vue({
            el: '#root',
            data: {
                name: 'Hello Vue.js'
            }
        })
![](http://cdn.michstabe.cn/blog/211113/CB4Aa5chm9.png?imageslim)
  • 2、真实开发中只有一个 vue 实例，并且会配合组件一起使用
  • 3、中的 xxx 要写 js 表达式，且 xxx 可以自动读取到 data 中的所有属性
1
<h2>{{name}} {{1+1}} {{Date.now()}}</h2>

  • 表达式：表达式会产生一个值，可以放到任何一个需要值的地方

    • a
    • a+b
    • demo(1)
    • x === y?1:2

  • 语句：

    • if() {}
    • for() {}

  • 4、一旦 data 中的数据发生改变，那么页面中用到该数据的地方也会自动更新