Vue知识

一、邂逅Vue.js

1、认识Vue.js

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

渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。

或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。

比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。

Vue有很多特点和Web开发中常见的高级功能

解耦视图和数据

可复用的组件- 前端路由技术

状态管理

虚拟DOM

这些特点，在后面的学习和开发中都会慢慢体会到的。

学习Vuejs的前提？

从零学习Vue开发，并不需要你具备其他类似于Angular、React，甚至是jQuery的经验。

但是你需要具备一定的HTML、CSS、JavaScript基础。

2、Vue.js安装方式

CDN引入

下载和引入

NPM安装管理

通过webpack和CLI的使用

3、Vue初体验

创建Vue实例传入的options

el：
类型：string （#app）| HTMLElement  （document.querySelector）
作用：决定之后Vue实例会管理哪一个DOM。
data：
类型：Object | Function （组件当中data必须是一个函数）
作用：Vue实例对应的数据对象。
methods：
类型：{[key:string]:Function}
作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

（1）Hello

<body>
<div id="app">{{message}}</div>
<script src="../js/vue.js"></script>
<script>
    // let（变量）/ const（常量）
    // 编程范式：声明式
    const app = new Vue({
        el: '#app', // 用于挂载要管理的元素
        data: { // 定义数据
            message: "你好啊"
        }
    })
    // 原生js的做法  编程范式：命令式
    // 1.创建div元素，设置id属性
    // 2.定义一个变量叫message
    // 3.将message变量放在div元素中显示
</script>
</body>

（2）列表展示

<body>
<div id="app">
  <ul>
    <li v-for="item in movies">{{item}}</li>
  </ul>
</div>
<script src="../js/vue.js"></script>
<script>
  // let（变量）/ const（常量）
  // 编程范式：声明式
  const app = new Vue({
    el: '#app', // 用于挂载要管理的元素
    data: { // 定义数据
      movies: ['蜘蛛侠','钢铁侠','美国队长','大话西游']
    }
  })
</script>
</body>

（3）计数器

新的属性：methods，该属性用于在Vue对象中定义方法。

新的指令：@click，该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法（方法通常是methods中定义的方法）

<body>
<div id="app">
  <h2>当前计数：{{counter}}</h2>
  <!-- v-on:click = @click -->
  <button @click="counter++">+</button>
  <button @click="counter--">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
  // let（变量）/ const（常量）
  // 编程范式：声明式
  const app = new Vue({
    el: '#app', // 用于挂载要管理的元素
    data: { // 定义数据
      counter: 0
    }
  })
  // 原生JS：
  // 1.拿button元素
  // 2.添加监听事件
</script>
</body>

通过methods

```