Vue学习

1.Vue的介绍

        Vue是一个轻量级框架，前端开发三大主流框架之一，其特点包括MVVM模式、组件化、轻量级、简单易学、双向数据绑定、数据和结构的分离、虚拟DOM、运行速度快、单页面应用以及完善的周边生态库。

        Vue通过MVVM模式实现双向数据绑定，通过数据劫持采用数据驱动页面更新的方式。它具有轻量级、简单易学的特点，可以实现前后台分离开发，节约开发成本，并且适合跨多端开发。Vue的组件化提高了代码复用率，使代码更加容易集中式维护。

        同时，Vue的单页面应用使页面局部刷新，不用每次跳转页面都要请求所有数据和Dom，这大大加快了访问速度和提升了用户体验。此外，Vue还具有虚拟DOM和运行速度快等优势。

2.Vue中属性和事件的绑定

        2.1属性的绑定

                在Vue中，我们可以通过v-bind指令来绑定HTML属性和事件。例如，如果我们想要动态地改变一个元素的背景色，我们可以将该元素的style属性绑定到一个数据对象。类似地，我们可以将某个元素的点击事件绑定到一个方法。

<span v-bind:title="message">
      Counter:{{counter}}
    </span>
data () {
        return {
          counter: 0,
          message: 'hello world!',
          formData: {
            userName: '',
            password: ''
          },
          show: true,
          todos: [{ text: '起床' }, { text: '吃饭' }, { text: '学习' }]
        }
      },
setInterval(() => {
          //在数据的层面加一
          this.counter++
        }, 1000)
      },

        2.2事件的绑定

               Vue中的事件绑定是使用v-on:(事件名)，事件可以自己定义的，也可以是Vue提供的一些事件。

<button v-on:click="plus10">加十</button>
plus10 () {
          this.counter += 10
        },

3.Vue中数据的双向绑定

        Vue中的双向数据绑定是指数据和视图之间的相互影响。当视图中的某些元素发生改变时，相应的数据也会被改变；反之，当数据发生改变时，视图也会被更新。这主要是通过v-model指令实现的。使用的语法是:v-model

<input v-model="formData.userName"><br>
    <input v-model="formData.password"><br>
    <button v-on:click="submit">提交</button>
//在data中添加fromData
formData: {
            userName: '',
            password: ''
          },
//在methods中定义事件，相当于是定义函数
submit () {
          console.log(this.formData)
        },

4.Vue中的条件与循环

        4.1条件语句

                Vue中提供了v-if、v-else、v-else-if等指令来实现条件渲染，提供了v-for指令来实现列表渲染。

<!-- v-if条件判断 -->
    <div v-if="show">你看到我了</div>
    <button v-on:click="show = !show">隐藏</button>
//这里的第一个show是函数，第二个是变量，在Vue中可以直接在方法定义的时候，进行赋值。
//这里其实也省略了一步，就是在data中设置了show的默认值为true

        4.2循环语句

                Vue中提供了v-for指令来实现列表渲染。

<ol>
      <!--todos指的是待办事项 -->
      <li v-for="todo in todos">
        {{todo.text}}
      </li>
    </ol>
todos: [{ text: '起床' }, { text: '吃饭' }, { text: '学习' }]
        }

5.Vue中组件的概述

        Vue中的组件是自定义的HTML元素，它可以封装一段可重复使用的代码，并且可以接收参数。组件可以包含模板、脚本和样式，并且可以在应用中的任何地方重复使用。

<ol>
      <!-- 创建一个todoItem组件 -->
      <todo-item v-for="todoItem in todos" v-bind:todo="todoItem"></todo-item>
    </ol>
//加载组件
      components: {
        TodoItem
      },

        这个例子中我们创建了一个todo-item组件，这样可以在任意地方都能使用。

6总结：

        经过这两天的自学，我觉得Vue相对于原生js使用起来是非常方便，特别是对于一些事件的绑定，比如数据的双向绑定，需要我们在js中定义一样的类名，通过DOM获取数据，而在Vue中我们可以使用一个v-model就可以实现，相当的方便。这还只是Vue相对原生js的一点，相信在接下来的学习中能学到更多方便的方法，解决原本很复杂的内容。