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]; } } },