• vue的基础语法


    mvvm

    • MVC 是后端的分层开发概念; MVVM是前端视图层的概念,主要关注于 视图层分离,也就是说:MVVM把前端的视图层,分为了 三部分 Model, View , VM ViewModel

    • m model 数据

      • 数据层 Vue 中 数据层 都放在 data 里面

    • v view 视图

      • Vue 中 view 即 我们的HTML页面

    • vm (view-model) 控制器 将数据和视图层建立联系

      • vm 即 Vue 的实例 就是 vm

    指令(本质就是自定义属性 v-开头)

    v-cloak  防止页面加载时的闪烁问题,结合css使用

    [v-cloak]{
      display: none;
    }

    v-text  将数据填充到标签中,作用于插值表达式类似,但是没有闪动问题

    v-html  用法和v-text 相似 但是他可以将HTML片段填充到标签中,有安全问题,不在用户提交上使用

    v-pre  显示原始信息跳过编译过程,一些静态的内容不需要编译加这个指令可以加快渲染

    v-once  执行一次性的插值(当数据改变时,插值处的内容不会继续更新)

    v-model  双向数据绑定(限制在 <input>、<select>、<textarea>、components中使用)

    • 当数据发生变化的时候,视图也就发生变化

    • 当视图发生变化的时候,数据也会跟着同步变化

    v-on  用于绑定事件,v-on:click可以缩写为@click

    事件修饰符:

    按键修饰符:

     自定义按键修饰符别名:

     v-bind:响应地更新 HTML 属性,v-bind:class可以简写为:class

     绑定对象和绑定数组的区别:

     分支结构

    v-if  多个元素 通过条件判断展示或者隐藏某个元素。进行两个视图之间的切换。

    v-show 和 v-if的区别

    • v-show本质就是标签display设置为none,控制隐藏

      • v-show只编译一次,后面其实就是控制css,而v-if不停的销毁和创建,故v-show性能更好一点。

    • v-if是动态的向DOM树内添加或者删除DOM元素

      • v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件

    循环结构

    v-for  用于循环的数组里面的值可以是对象,也可以是普通元素

    • 不推荐同时使用 v-ifv-for

    • v-ifv-for 一起使用时,v-for 具有比 v-if 更高的优先级。

    key 的作用   :key="item.id"

    • key来给每个节点做一个唯一标识
    • key的作用主要是为了高效的更新虚拟DOM
  • 相关阅读:
    求100内的数和
    汉诺塔(印度传说)
    ORA-06502:PL/SQL:数字或值错误:数值精度太高
    触发器的编写
    mysql改密码
    LeetCode-238 Product of Array Except Self
    LeetCode-236 Lowest Common Ancestor of a Binary Tree
    LeetCode-233 Number of Digit One
    LeetCode-230 Kth Smallest Element in a BST
    LeetCode-229 Majority Element II
  • 原文地址:https://www.cnblogs.com/evan-wang/p/14179997.html
Copyright © 2020-2023  润新知