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</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>
vue常用指令复习总结

Guess you like
