快速入门

接下来，我们快速领略下 vue 的魅力

创建工程

安装 vue

下载安装

下载地址：https://github.com/vuejs/vue

可以下载 2.5.16 版本https://github.com/vuejs/vue/archive/v2.5.16.zip

下载解压，得到 vue.js 文件。

使用 CDN

或者也可以直接使用公共的 CDN 服务：

<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

推荐 npm 安装

在 idea 的左下角，有个 Terminal 按钮，点击打开控制台：

进入 hello-vue 目录，先输入：npm init -y 进行初始化

安装 Vue，输入命令：npm install vue --save

然后就会在 hello-vue 目录发现一个 node_modules 目录，并且在下面有一个 vue 目录。

node_modules 是通过 npm 安装的所有模块的默认位置。

vue 入门案例

初识 Vue

Vue 是一个渐进式的框架，什么是渐进式的呢？

1. 渐进式意味着你可以将 Vue 作为你应用的一部分嵌入其中，带来更丰富的交互体验。
2. 或者如果你希望将更多的业务逻辑使用 Vue 实现，那么 Vue 的核心库以及其生态系统。
3. 比如 Core+Vue-router+Vuex，也可以满足你各种各样的需求。

Vue 特点

1. 解耦视图和数据
2. 可复用的组件
3. 前端路由技术
4. 状态管理
5. 虚拟 DOM

入门实例

然后我们通过 Vue 进行渲染：

<div id="app">
    <h2>{{message}}</h2>
    <h1>{{name}}</h1>
</div>

<div>{{message}}</div>

<script src="../js/vue.js"></script>
<script>
    // let(变量)/const(常量)
    // 编程范式: 声明式编程
    const app = new Vue({
        el: '#app', // 用于挂载要管理的元素
        data: { // 定义数据
            message: '你好啊,李银河!',
            name: 'coderwhy'
        }
    })

• 首先通过 new Vue()来创建 Vue 实例
• 然后构造函数接收一个对象，对象中有一些属性：
  • el：是 element 的缩写，通过 id 选中要渲染的页面元素，本例中是一个 div
  • data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中。数据可以是自定义的，或网络，或服务器；
    • name：这里我们指定了一个 name 属性
• 页面中的h2元素中，我们通过的方式，来渲染刚刚定义的 name 属性。

数据列表

我们对刚才的案例进行简单修改：

<div id="app">
  <ul>
    <li v-for="item in movies">{{item}}</li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      movies: ['星际穿越', '大话西游', '少年派', '盗梦空间'],
    },
  })
</script>

• HTML 代码中，使用 v-for 指令
• 响应式–数组中的数据发生改变时，界面会自动改变

实例-计数器

代码：

<div id="app">
  <h2>当前计数: {{counter}}</h2>
  <!--<button v-on:click="counter++">+</button>-->
  <!--<button v-on:click="counter--;">-</button>-->
  <button v-on:click="add">+</button>
  <button v-on:click="sub">-</button>
  <!--下面是语法糖写法-->
  <!--<button @click="sub">-</button>-->
</div>

<script src="../js/vue.js"></script>
<script>
  // 语法糖: 简写
  // proxy
  const obj = {
    counter: 0,
    message: 'abc',
  }

  new Vue()

  const app = new Vue({
    el: '#app',
    data: obj,
    methods: {
      add: function () {
        console.log('add被执行')
        this.counter++
      },
      sub: function () {
        console.log('sub被执行')
        this.counter--
      },
    },
    beforeCreate: function () {},
    created: function () {
      console.log('created')
    },
    mounted: function () {
      console.log('mounted')
    },
  })

  // 1.拿button元素
  // 2.添加监听事件
</script>

• methods，该属性用于在 Vue 对象中定义方法。
• 新的指令：@click, 该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法(方法通常是 methods 中定义的方法)

Vue 中的 MVVM

1. View 层
   • 视图层
   • 前端开发中，通常是 DOM 层
   • 主要用于展示数据
2. Model 层
   • 数据层
   • 数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
3. ViewModel 层
   • 视图模型层
   • 视图模型层是 View 和 Model 沟通的桥梁
   • 一方面它实现了 Data Binding，也就是数据绑定，将 Model 的改变实时的反应到 View 中
   • 另一方面它实现了 DOM Listener，也就是 DOM 监听，当 DOM 发生一些事件(点击、滚动、touch 等)时，可以监听到，并在需要的情况下改变对应的 Data。