vue 介绍及基本使用

vue 是渐进式javascript 框架，渐进式是指vue有自己的核心库，需要其他功能，可以添加插件。

作用：动态构建用户界面（将后台数据动态显示在页面上）

Vue 特点：

1、遵循MVVM模式

M：model （模型，数据对象，data）

V：view （视图，模板页面）

VM：viewModel 视图模型，Vue的实例

2、编码简洁，体积小，运行效率高，适合移动/pc端开发

3、它本身只关注ui，可以轻松引入vue插件或其他第三库开发项目

vue 与其他前端js框架的关联

1、angular 主要是模板和数据绑定技术

2、react 主要是组件和虚拟DOM技术

模板基本使用：

①双大括号表达式

<template>
    <div  id="input">
        <input type="text" v-model="username">
       <p>home {{username}}</p> 
    </div>
</template>

②指令一：强制数据绑定

<!-- 强制数据绑定 -->
<img :src="imgurl" alt="">
<!-- 简写 -->
<img v-bind:src="imgurl" alt="">

③指令二：绑定事件监听

<!-- 绑定事件监听 -->
<button v-on:click="test">欢迎</button>
<!-- 简写 -->
<button @click="test">简写</button>

计算属性

在computed属性对象中定义计算属性的方法

在页面使用{{方法名}}来显示计算的结果

什么时候执行：初始化显示/相关的data属性数据发生变化

<!-- 计算属性 -->
<input type="text" v-model="firstname"><br>
<input type="text" v-model="lastname"><br>
<input type="text" v-model="fullname">


computed: {
        fullname(){
            return this.firstname+this.lastname
        }
    }

监视：watch

通过vm对象的$watch()或watch配置来监视指定的属性，当属性发生变化时，回调函数自动调用，在函数内部进行计算

方法一：watch

 watch: {
        firstname: function(value){
            return this.fullname2= value + ' ' +this.lastname

方法二：$watch

<script>
const vm = new Vue({
data: {
firstname:'a',
lastname:'b'
})

vm.$watch('firstname',function(value){
this.fullname= value + ' '+this.lastname
})
</sscript>

计算属性高级

通过getter/setter 实现对属性数据的显示和监视，计算属性存在缓存，多次读取只执行一次getter计算

 computed: {
    fullname1() {
      return this.firstname + " " + this.lastname;
    },
    fullname3: {
      get() {
        return this.firstname + " " + this.lastname;
      },
      // 回调函数，监视当前属性的变化，当属性值发生变化时回调，更新相关属性数据
      set(value) {
        const name = value.split(" ");
        this.firstname = name[0];
        this.lastname = name[1];
      }
    }
  },

原文地址：https://www.cnblogs.com/recommencer/p/12663807.html