初识vue

序：

传统设计模式：MVC model view controller

​ 后台 视图 js三模块

VUE框架MVVM model view vm

​ 后台 视图 数据驱动视图改变

​ 使得 数据 和 页面视图 挂钩

​ 双向绑定

Vue

const app = new Vue({
    el: 元素根节点的标识符,
    data: {
        // 自动进行数据监听
        // 实现 数据 驱动 视图 改变
        // 键名:键值
        msg:'这里数据是默认被监听'
    },
    methods:{
        eventCallBack(){
            
        }
    }
});

• 数据渲染采用双胡子语法Mustache
  • 特点是实现数据的动态渲染并且能及时相应数据改变
  • 支持行内表达式 与或非 三目运算符 四则运算符
  • 不支持 自增、自减 因为数据监听器的存在 进入死循环
• Vue指令
  • v-once一次渲染的指令
  • v-html='变量名'等同于之前的innerHtml进行数据渲染 能够识别标签
  • v-bind:行内属性名='变量名' 简写 :行内属性名="变量名" 控制行内属性的
  • v-if v-else v-else-if 操作元素节点来进行判断渲染 (多条件)
  • v-show通过display来控制页面的渲染（推荐切换频繁时使用（两个条件）
  • v-for='(item,index) in 变量名' 遍历渲染
  • v-on:事件名="回调函数名" 事件绑定 可简写 @事件名="回调函数名"
    • .stop阻止事件冒泡
    • .capture改变事件为捕获阶段触发
    • .once设定一次事件
    • @keyup.enter='submit'用户按回车按钮时触发submit事件
  • v-mode:属性名='属性值' 进行数据和视图的双向绑定（往往要配合form表单元素，默认绑value值）
    • .lazy触发事件变为change
    • .number配合type='number'保证获取值为纯数值
    • .trim自动去除用户输入两边空格字符
• computed、watch、methods的特点
  • 调用methods时需要加上小括号 而computed不需要加小括号
  • methods支持传参的 computed是不支持传参的 计算数据来源 data声明那些数据
  • computed计算的结果是缓存 methods每次都会重新计算
  • watch侦听data里面数据的改变 进行后续的操作 通过和请求操作绑定在一起
• Vue的API
• this.$set(响应式对象,属性名,属性值)响应式对象赋予新的可响应键值对

改变样式

new Vue({
        el: '.app',
        data: {
            h1Style: {
                'background-color': 'yellow',
            },
        },
        methods: {
            colorRed() {
                this.h1Style['background-color'] = 'red';
                this.$set(this.h1Style, 'color', 'blue');
                this.$set(this.h1Style, 'transform', 'scale(2)')
            }
        },
    });