vuecil-demo            # 项目目录
    – node_modules        # 项目依赖的第三方包
    – public              # 静态文件目录
      – favicon.ico       # 浏览器小图标
      – index.html        # 单页面的html文件
    – src                 # 业务文件夹
      – assets            # 静态资源
        – login.png       # vue 的 logo 图片
      – components        # 组件目录
        – helloword.vue   # 欢迎页面的 vue 代码文件
      – app.vue           # 整个应用的根目录
      – main.js           # 入口 js 文件
    – .gitignore          # jit 忽略提交配置
     – babel.config.js    # babel 配置
    – package.json        # 依赖包列表
    – README.md           # 项目说明
    – yarn.lock           # 项目包版本锁定和缓存地址

<template>
    <div>
        <p v-text="sayHi"></p>
        <p v-html="sayHi"></p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            sayHi: '<h3>Hello vue</h3>'
        }
    }
}
</script>

<template>
    <div>
        <p v-show="type">Hello</p>
        <p v-if="score == 100">满分</p>
        <p v-else-if="score > 60">及格</p>
        <p v-else>不及格</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            type: true,
            score: 70,
        }
    }
}
</script>

<template>
    <div>
        <ul>
            <li v-for="(item, index) in arr" :key="index">
                {{ index }} --- {{ item.name }} --- {{ item.sex }}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            arr: [
                { name: '小明', sex: '男' },
                { name: '屎猫', sex: '男' },
                { name: '七罪', sex: '男' },
                { name: '蝶衣', sex: '女' },
                { name: '小可', sex: '女' },
            ]
        }
    }
}
</script>

<template>
    <div>
        <ul>
            <li v-for="(item, index) in arr" :key="index">
                {{ item }}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            arr: [1, 2, 3, 4, 5, 6],
        }
    },
    methods: {
        revBtn() {
            // 翻转数组 会直接改变数组
            this.arr.reverse();
        },
        silceBtn() {
            // 裁剪数组(下标0数量3) 返回一个新数组
            let temp = this.arr.slice(0, 3);
            // 将得到的新数组 覆盖 原数组 触发变更
            this.arr = temp;
        },
        updataBtn() {
            /*
              $set 实现 视图层同步更新 数组中成员值
              参数1:数组目标 参数2:位置 参数3:更新后的值
            */
            this.$set(this.arr, 0, 7);
        }
    }
}
</script>

<template>
    <div>
        <p :class="{ red: bool }">红色?</p>
        <button @click="btn">变色</button>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            bool: true,
        }
    },
    methods: {
        btn() {
            this.bool = !this.bool;
        }
    }
}
</script>
  
<style>
.red {
    color: red;
}
</style>

<template>
    <div>
        <p :style="{ color:colorStr }">红色</p>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            colorStr: 'red',
        }
    }
 }
</script>

<template>
  <div>
    <input type="button" @click="entFnn" value="sayHi">
  </div>
</template>

<script>
export default {
  methods: {
    entFnn() {
      alert('hello vue');
    }
  }
}
</script>

<template>
    <div>
        <ul v-for="(item, index) in text" :key="index">
            <li @click="entFnn(item)">{{ item }}</li>
        </ul>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            text: [1, 2, 3, 4],
        }
    },
    methods: {
        entFnn(i) {
            alert(i);
        }
    }
}
</script>

<template>
  <div>
    <input type="text" @keydown.enter="entFnn" v-model="text">
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '',
    }
  },
  methods: {
    entFnn(e) {
      // 事件对象
      console.log(e);
    }
  }
}
</script>

<template>
    <div>
        <p>{{ sayHi }}</p>
        <!-- 使用过滤器 -->
        <p>{{ sayHi | reverse }}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            sayHi: 'Hello word',
        }
    },
    // 只在当前 vue 文件内使用
    filters: {
        reverse(val) {
            return val.split('').reverse().join('');
        }
    }
}
</script>

<template>
    <div>
        <p>{{ sayHi }}</p>
        <p>{{ up }}</p>
        <p>{{ up }}</p>
        <p>{{ up }}</p>
        <p>{{ up }}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            sayHi: 'Hello word',
        }
    },
    computed:{
        up(){
            console.log('执行计算属性方法');
            return this.sayHi.toUpperCase();
        }
    }
}
</script>

<template>
    <div class="app">
        <span>全选</span>
        <input type="checkbox" v-model="isAll">
        <button>反选</button>
        <hr />
        <ul>
            <li v-for="(item, index) in arr" :key="index">
                <input type="checkbox" v-model="item.checked">
                <span>{{ item.name }}</span>
            </li>
        </ul>

    </div>
</template>

<script>
export default {
    data() {
        return {
            arr: [
                { name: '屎猫', checked: false, },
                { name: 'AI婆', checked: false, },
                { name: '腐喵', checked: false, },
                { name: '夜夜', checked: false, },
                { name: '泥垢', checked: false, },
            ],
        }
    },
    computed: {
        isAll: {
            // 当 有值 写入到 计算属性中 参数中读取这个值
            set(val) {
                // 执行写入后的操作方法
                this.arr.forEach(item => item.checked = val);
            },
            // 当发生读取 计算属性 操作后
            get() {
                /*
                  执行读取后的操作方法
                * every 方法会遍历验证每个数组
                * 
                * 如若其中有一个 不符合条件 返回 false 
                * 如若都符合条件 返回 true
            */
                return this.arr.every(obj => obj.checked === true);
            },
        }
    }

}
</script>

<template>
    <div>
        <input type="text" v-model="data">
    </div>
</template>

<script>
export default {
    data() {
        return {
            data: ''
        }
    },
    watch: {
        // 参数1 当前更新后的值 参数2 上一个状态的值
        data(newVal, oldVal) {
            console.log(newVal, oldVal);
        }
    }
}
</script>

<template>
    <div>
        <input type="text" v-model="text.name">
    </div>
</template>

<script>
export default {
    data() {
        return {
            text: { name: '' },
        }
    },
    watch: {
            /*
              * [问题!] 我们发现 newVal 与 oldVal 的值相同
              * watch监听到对象的变化，但是在对对象或数组做变更操作时，删除或添加属性，
              * 监听函数中的新值和旧值都指向了同一个对象或数组，并且Vue不会保留变更之前的副本
              
              * [解决方法]
              * 1. 计算属性 使用 JSON.stringify 将需要监听 目标 转为字符串
              * 2. 引入监听对应名称的 计算属性 值 并使用 JSON.parse 转换成对象 完成比较效果
              * tip. 由于字符串是 简单数据 更换值时是直接覆盖 故新值与旧值不存在相同的指向下标
            */
        text: {
            handler(newVal) {
                // 返回 text 对象
                console.log(newVal);
            },
            // 深度监听 (监听对象属性中的变化)
            deep: true,
            // 立即执行 (刷新页面时 立即执行)
            immediate: true,
        }
    }
}
</script>

<template>
    <div>
        <input type="text" v-model="user.name">
    </div>
</template>

<script>
export default {
    data() {
        return {
            user: {
                name: ''
            }
        }
    },
    watch: {
        /*
           * 使用序列化与反序列化的方式 相当于创建了一个新的对象
           * 从字符串转对象 是创建新对象的操作 并对 计算属性 重新赋值
           * [触发更新] 计算属性的值发生变化后 原下标更换 因此得到的结果就不同了
           * https://www.cnblogs.com/MaiRen19970323/p/15160198.html
        */
        username: {
            handler(newVal, oldVal) {
                let temp_1 = JSON.parse(newVal);
                let temp_2 = JSON.parse(oldVal);
                console.log(temp_1.name, temp_2.name);
            },
            deep: true,
        }
    },
    computed: {
        // 定义 计算属性
        username() {
            return JSON.stringify(this.user);
        }
    }
}
</script>

<style scoped>
.btn {
  width: 100px;
  height: 70px;
  border-radius: 10px;
  margin: 10px;
  border: 2px solid #66cc;
}
</style>

<template>
  <div>
    <hellovue></hellovue>
    <hellovue></hellovue>
    <hellovue></hellovue>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

<template>
  <div>
    <hellovue></hellovue>
    <hellovue></hellovue>
    <hellovue></hellovue>
  </div>
</template>

<script>
import hellovue from './helloVue.vue';
export default {
  components: {
    hellovue: hellovue,
  }
}
</script>

<style>

</style>

<template>
  <div>
    <hellovue v-for="(item, index) in arr" :key="index" :text="item"></hellovue>
  </div>
</template>

<script>
import hellovue from './helloVue.vue';
export default {
  components: {
    hellovue,
  },
  data() {
    return {
      arr: ['hello word', 'hello dart', 'hello vue'],
    }
  }
}
</script>

<style>

</style>

<template>
  <div>
    <!-- 传给子级参数 -->
    <hellovue v-for="(item, index) in numArr"
     :key="index"
     :ind="index"
     :num="item"
     <!-- 无需再写传值 否则会被忽略 -->
     @clickbtn="fn"></hellovue>
  </div>
</template>

<script>
import hellovue from './addDemo.vue';
export default {
  components: {
    hellovue,
  },
  data() {
    return {
      numArr: [0, 0],
    }
  },
  methods: {
    // 欲从 子级 获取传入的参数
    fn(num, index, add) {
      let temp = num + add;
      // 通知组件更新
      this.$set(this.numArr, index, temp);
    },
  }
}
</script>

<style>

</style>

<template>
    <div>
      <button @click="comName='UserName'">账号信息填写</button>
      <button @click="comName='UserInfo'">个人信息填写</button>
      <p>下方显示注册组件-动态切换</p>
      <div style="border:1px solid red;">
          <components :is="comName"></components>
      </div>
    </div>
</template>

<script>
import UserInfo from './01_UserInfo.vue';
import UserName from './UserName.vue';
export default {
  data(){
    return{
      comName:'UserName'
    }
  },
   components:{
    UserInfo,
    UserName
   }
}
</script>

  <!-- 组件切换时 会不断的执行销毁创建的动作 -->
  <components :is="comName"></components>
  <script>
export default {
  created(){
    console.log('组件创建完成');
   },
   destroyed(){
    console.log('组件销毁完成');
   }
}
</script>

<!-- vue 内置 keep-alive 组件 实现组件的缓存 -->
<keep-alive>
   <components :is="comName"></components>
</keep-alive>
<script>
export default {
  created(){
    console.log('组件创建完成');
   },
   destroyed(){
    console.log('组件销毁完成');
   }
}
</script>

export default {
    activated(){
        console.log('xxx 组件被激活');
    },
    deactivated(){
        console.log('xxx 组件取消激活');
    }
}

<!-- 子级 定义组件中的插槽 -->

<template>
    <div class="Box">
        <hr />
        <p>展示的内容</p>
        <slot></slot>
        <hr />
    </div>
</template>

<script>
export default {}
</script>
    
<style>
.Box {
    text-align: center;
    width: 300px;
    height: 230px;
    padding: 10px;
    border: 2px solid #000;
    margin: 10px;
}
</style>

<!-- 父级 引用组件并插入标签 -->

<template>
  <div>
    <Pannel>
      <img src="https://www.dmoe.cc/random.php" width="70%">
    </Pannel>
    <Pannel>
      <ul>
        <li>锄禾日当午</li>
        <li>汗滴禾下土</li>
        <li>谁知盘中餐</li>
        <li>粒粒皆辛苦</li>
      </ul>
    </Pannel>
  </div>
</template>

<script>
import Pannel from './插槽.vue';
export default {
  components: {
    Pannel,
  }
}
</script>

<template>
    <div class="Box">
        <hr />
        <p>展示的内容</p>
        <slot>
            <p>无内容</p>
        </slot>
        <hr />
    </div>
</template>

<template>
  <div>
    <Pannel>
      <ul>
        <li>锄禾日当午</li>
        <li>汗滴禾下土</li>
        <li>谁知盘中餐</li>
        <li>粒粒皆辛苦</li>
      </ul>
    </Pannel>
    <Pannel></Pannel>
  </div>
</template>

<script>
import Pannel from './插槽.vue';
export default {
  components: {
    Pannel,
  }
}
</script>

<template>
    <div>
        <slot name="filst"></slot>
        <slot name="item"></slot>
    </div>
</template>

<template>
  <div>
    <Pannel>
      <template v-slot:filst>
        插入的内容
      </template>
      <template v-slot:item>
        插入的内容
      </template>
    </Pannel>
  </div>
</template>

<template>
    <div class="Box">
        <hr />
        <p>展示的内容</p>
        <slot name="item_1">
            <p>展示内容1</p>
        </slot>
        <slot name="item_2">
            <p>展示内容2</p>
        </slot>
        <hr />
    </div>
</template>

<script>
export default {

}
</script>

<template>
  <div>
    <Pannel>
      <template v-slot:item_1>
        <img src="https://www.dmoe.cc/random.php" width="70%">
      </template>
      <template v-slot:item_2>
        <p>无名喵站</p>
      </template>
    </Pannel>
  </div>
</template>

<script>
import Pannel from './插槽.vue';
export default {
  components: {
    Pannel,
  }
}
</script>

<template>
    <div class="Box">
        <hr />
        <!-- 向父级 传入变量 seyHi -->
        <slot :row="sayHi"></slot>
        <hr />
    </div>
</template>

<script>
export default {
    data() {
        return {
            sayHi: {
                one: 'Hello',
                tow: 'Vue',
            }
        }
    }

}
</script>

<template>
  <div>
    <Pannel>
      <!-- v-slot 会收集传入的所有数据 并以子级中书写的 :变量 作为它们的变量名 -->
      <template v-slot="scope">
        <p>{{ scope.row.one }}</p>
        <p>{{ scope.row.tow }}</p>
      </template>
    </Pannel>
  </div>
</template>

<script>
import Pannel from './插槽.vue';
export default {
  components: {
    Pannel,
  }
}
</script>

<template>
  <div>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello Vue',
    }
  },
  beforeCreate() {
    /*
    - beforeCreate 是组件创建前的 钩子函数
    - data 与 methods 创建之前
  */
    console.log('准备初始化 Vue实例阶段');
    console.log(this.msg); // undefind (因为 data 未创建)
  },
  created() {
    /*
    - created 是组件创建后的 钩子函数
    - data 与 methods 创建完成后
    - 常用于 网络请求的场景 或者 注册全局事件
  */
    console.log('创建完毕 Vue实例');
    console.log(this.msg); // Hello Vue
  }
}
</script>

<template>
  <div id="appDemo">
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello Vue',
    }
  },
  beforeMount(){
    /*
    - beforeMount 是虚拟DOM挂载到真实DOM操作之前的 钩子函数
    - 未在真实 DOM 中绑定 vue实例 中建立的 虚拟DOM内容
  */
    console.log('虚拟DOM 挂载到 原生DOM 前');
     // 尝试使用原生获取 vue项目创建的 DOM
     console.log(document.querySelector('#appDemo')); // null (初次操作返回空 因为未挂载)
  },
  mounted(){
    /*
    - mounted 是虚拟DOM挂载到真实DOM操作完成的 钩子函数
    - 已完成 虚拟DOM 绑定到 真实DOM 的操作
  */
    console.log('虚拟DOM 完成挂载到 原生DOM');
    // 尝试使用原生获取 vue项目创建的 DOM
    console.log(document.querySelector('#appDemo')); // <div id="appDemo">...</div>
  }
}
</script>

<template>
  <div>
    <ul id="appDemo">
      <li v-for="item, index in arr" :key="index">{{ item }}</li>
    </ul>
    <button @click="arr.push(1)">增加值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [1, 2, 3, 4],
    }
  },
  /*
    - beforeUpdate 是数据更新到 真实DOM 前的钩子函数
  */
  beforeUpdate() {
    console.log('准备更新');
    // 虚拟DOM未更新到真实DOM 因此无法获取增加的值
    console.log(document.querySelectorAll('#appDemo>li')[4]); // undefined
  },
  updated() {
    /*
    - beforeUpdate 是数据更新到 真实DOM 后的钩子函数
    - 用于获取更新后的真实 DOM
  */
    console.log('更新完成');
    // 虚拟DOM完成更新到真实DOM阶段 因此可以取得最后更新的内容
    console.log(document.querySelectorAll('#appDemo>li')[4]); // <li>1</li>
  }

}
</script>