vue常用指令复习总结

恬一

于 2021-04-08 12:30:00 发布

阅读量64

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_44158539/article/details/115516213

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!--
    MVVM模型:
           Model View viewModel
           View:视图层
           Model:数据层
           ViewModel:视图模型(桥梁)
    ### v-bind(简写为":"),用于动态地绑定一个或多个特性，比如class或者style样式等
    ### v-if 用于判断，在切换元素时，其属性值的true或false相当于创建或销毁该节点
      (常用在不会频繁改变显示状态的地方)
    ### v-for 用于循环遍历渲染数据，用于循环一个数组或者一个对象来渲染列表，
      vue2.0以上必须配合key值使用
    ### v-on 简写为 "@",用于监听指定元素的DOM事件，比如点击事件
    ### v-model 一般用来实现表单元素和应用状态之间的双向绑定
    ### v-show 根据表达式的真假值，切换元素的display CSS属性
    ### v-text 更新DOM对象的textContent
    ### v-html 更新DOM对象的innerHTML

    ### props:父子组件通讯组件 props是子组件访问父组件数据的唯一接口
      props是单向绑定的，当父组件的属性变化时，将传导给子组件;
      不能通过子组件改变数据,因为单项传递：父传子
      每次父组件更新时，子组件的所有prop都会更新为最新值

    ### $parent可以用来访问父组件的数据，而且子组件可以通过$parent直接修改
    父组件中的数据,但是直接再子组件中修改父组件中的数据是一种很糟糕的做法

    ###vue中watch和computed的使用和区别
      #computed:计算结果并返回，只有当被计算的值发生改变时才会触发
        (即：计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算)
      #watch：监听某一个值，当被监听的值发生变化时，执行对应的操作
      (与computed的区别是，watch更加适合监听某一个值的变化并作出对应操作，
      比如请求后台接口等，而computed适用于计算已有的值并返回结果)
   -->
   <div v-for="item in items">
     {{ item.text }}
   </div>
   <!-- item为当前项，index为索引 -->
   <p v-for="(item, index) in list">{{item}} -- {{index}}</p>
   <!-- item为值，key为键，index为索引 -->
   <p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>
</body>
</html>

恬一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue常用指令复习总结

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt
复制链接

扫一扫