<script src="./js/vue.js"></script>
<div id="root">
  <h1>helloworld,{{name}}</h1>
</div>
<script>
  new Vue({
    el: '#root',
    data: {
      name: 'vue'
    }
  })
</script>

<div id="root">
  <h1>helloworld,{{name}}</h1>
  <div>
    <h1>插值语法</h1>
    <h2>{{gumisa.age}}</h2>
    <h2>{{gumisa.sex}}</h2>
    <h1>指令语法</h1>
    <a v-bind:href="url.toUpperCase()">点我去月晕的博客</a>
    <!-- v-bind作用 将标签属性改成js表达式  v-bind:=====>: -->
    <a :href="gumisa.url"></a>
  </div>
</div>
<script>
  new Vue({
    el: '#root',
    data: {
      name: 'vue',
      url: 'https://blog.apprehen.space/',
      gumisa: {
        age: 18,
        sex: '♀',
        url: 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fbaike.baidu.com%2Ftashuo%2Fbrowse%2Fcontent%3Fid%3Df24f0a8054a35a347f0c089c&psig=AOvVaw0HW4oaUzGDeJMMHRz42zpZ&ust=1677555645426000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCIjg5vTjtP0CFQAAAAAdAAAAABAE'
      }
    }
  })
</script>

<div id="root">
  <!-- 普通写法 -->
  <!-- 单向数据绑定：<input type="text" v-bind:value="name"><br>
双向数据绑定：<input type="text" v-model:value="name"><br> -->
  <!-- 简写 -->
  单向数据绑定：<input type="text" :value="name" /><br />
  双向数据绑定：<input type="text" v-model="name" /><br />
</div>

<div id="root">{{name}}</div>
<script>
  const vm = new Vue({
    el: '#root',
    data() {
      return {
        name: 'test'
      }
    }
  })
</script>

<div id="root">
  <h1>gumisa</h1>
  <h2>{{gumisa.age}}</h2>
  <h1>megumi</h1>
  <h2>{{megumi.age}}</h2>
</div>
<script>
  const vm = new Vue({
    el: '#root',
    data() {
      return {
        gumisa: {
          age: 18,
          sex: '♀'
        },
        megumi: {
          age: 19,
          sex: '♀'
        }
      }
    }
  })
</script>

<script>
     let obj = {
         x:100
     }
  let obj2 = {
         y:200
     }
     Object.defineProperty(obj2,'x',{
         get () {
  		return obj.x
         }
         set (value) {
         	obj.x = value
     	}
     })
</script>

<div id="root">
  <h1>名称:{{name}}</h1>
  <h1>年龄:{{age}}</h1>
</div>
const vm = new Vue({ el: '#root', data: { name: 'gumisa', age: 18 } })

<div id="root">
  <h1>{{name}}</h1>
  <button @click="showinfo">点我提示信息(不传参)</button>
  <button @click="showinfo2($event,18)">点我提示信息(传参)</button>
</div>
<script>
  const vm = new Vue({
    el: '#root',
    data() {
      return {
        name: 'gumisa'
      }
    },
    methods: {
      showinfo() {
        alert(this.name)
      },
      showinfo2(event, age) {
        console.log(event, age)
      }
    }
  })
</script>

    <div id="root">
        姓：<input type="text" v-model="firstname"><br>
        名：<input type="text" v-model="lastname"><br>
        全名：<span>{{firstname}}-{{lastname}}</span>
    </div>
</body>
<script>
    const vm = new Vue({
        el: '#root',
        data: {
            firstname: '张',
            lastname: '三'
        },
    })
</script>

    <div id="root">
        姓：<input type="text" v-model="firstname"><br>
        名：<input type="text" v-model="lastname"><br>
        全名：<span>{{fullname()}}</span>
    </div>
</body>
<script>
    const vm = new Vue({
        el: '#root',
        data: {
            firstname: '张',
            lastname: '三'
        },
        methods: {
            fullname() {
                return this.firstname + '-' + this.lastname
            }
        }
    })
</script>

<div id="root">
  姓：<input type="text" v-model="firstname" /><br />
  名：<input type="text" v-model="lastname" /><br />
  全名：<span>{{fullname}}</span><br />
  全名：<span>{{fullname}}</span><br />
  全名：<span>{{fullname}}</span><br />
  全名：<span>{{fullname}}</span><br />
  全名：<span>{{fullname}}</span>
</div>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      firstname: '张',
      lastname: '三'
    },
    computed: {
      fullname: {
        //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
        //get什么时候调用？1.初次读取fullName时.2.所依赖的数据发生改变时
        get() {
          console.log('get被调用了')
          //console.log(this) //此处的this是vm
          return this.firstname + '-' + this.lastname
        },
        //get什么时候调用？当fullName被修改时.
        set(value) {
          console.log('set', value)
          const arr = value.split('-')
          this.firstname = arr[0]
          this.lastname = arr[1]
        }
      }
    }
  })
</script>

computed: { //完整写法 /*fullname: { get() { console.log('get被调用了') return
this.firstname + '-' + this.lastname }, set(value) { console.log('set', value)
const arr = value.split('-') this.firstname = arr[0] this.lastname = arr[1] }
}*/ //简写 fullname() { console.log('get被调用') return this.firstname + '-' +
this.lastname } }

<div id="root">
  <h2>今天天气很{{info}}</h2>
  <button @click="changeWeather">切换天气</button>
</div>
<script>
  Vue.config.productionTip = false
  const vm = new Vue({
    el: '#root',
    data: {
      isHot: true
    },
    computed: {
      info() {
        return this.isHot ? '炎热' : '凉爽'
      }
    },
    methods: {
      changeWeather() {
        this.isHot = !this.isHot
      }
    }
  })
</script>

<div id="root">
  <h2>今天天气很{{info}}</h2>
  <button @click="changeWeather">切换天气</button>
</div>
<script>
  Vue.config.productionTip = false
  const vm = new Vue({
    el: '#root',
    data: {
      isHot: true
    },
    computed: {
      info() {
        return this.isHot ? '炎热' : '凉爽'
      }
    },
    methods: {
      changeWeather() {
        this.isHot = !this.isHot
      }
    }
    /*watch: {
            isHot: {
                immediate:true,//初始化时让handler调用一下
                //handler什么时候调用，当isHot发生改变时
                handler(newValue, oldValue) {
                    console.log('isHot的值被修改了', newValue, oldValue)
                }
            },
        },*/
  })

  vm.$watch('isHot', {
    immediate: true, //初始化时让handler调用一下
    //handler什么时候调用，当isHot发生改变时
    handler(newValue, oldValue) {
      console.log('isHot的值被修改了', newValue, oldValue)
    }
  })
</script>

<div id="root">
  <h2>今天天气很{{info}}</h2>
  <button @click="changeWeather">切换天气</button>
  <hr />
  <h3>a的值是{{numbers.a}}</h3>
  <button @click="numbers.a++">点我让a+1</button>
  <h3>b的值是{{numbers.b}}</h3>
  <button @click="numbers.b++">点我让b+1</button>
</div>
<script>
  Vue.config.productionTip = false
  const vm = new Vue({
    el: '#root',
    data: {
      isHot: true,
      numbers: {
        a: 1,
        b: 2
      }
    },
    computed: {
      info() {
        return this.isHot ? '炎热' : '凉爽'
      }
    },
    methods: {
      changeWeather() {
        this.isHot = !this.isHot
      }
    },
    watch: {
      isHot: {
        //immediate:true,//初始化时让handler调用一下
        //handler什么时候调用，当isHot发生改变时
        handler(newValue, oldValue) {
          console.log('isHot的值被修改了', newValue, oldValue)
        }
      },
      //监视多级结构中某个属性的变化
      'numbers.a': {
        handler() {
          console.log('a被改变了捏')
        }
      },
      //监视多级结构中所有属性的变化
      numbers: {
        deep: true,
        handler() {
          console.log('numbers改变了')
        }
      }
    }
  })
</script>

<div id="root">
  <h2>今天天气很{{info}}</h2>
  <button @click="changeWeather">切换天气</button>
</div>
<script>
  Vue.config.productionTip = false
  const vm = new Vue({
    el: '#root',
    data: {
      isHot: true
    },
    computed: {
      info() {
        return this.isHot ? '炎热' : '凉爽'
      }
    },
    methods: {
      changeWeather() {
        this.isHot = !this.isHot
      }
    },
    watch: {
      //正常写法
      /*isHot: {
                // deep:true,//深度监视
                // immediate:true,//初始化时让handler调用一下
                //handler什么时候调用，当isHot发生改变时
                handler(newValue, oldValue) {
                    console.log('isHot的值被修改了', newValue, oldValue)
                }
            },*/
      //简写
      /*isHot(newValue, oldValue) {
                console.log('isHot的值被修改了', newValue, oldValue)
            }*/
    }
  })
</script>

<div id="root">
  <!-- 绑定class样式--字符串写法，使用于：样式的类名不确定，需要动态指定 -->
  <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
  <br />
  <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定，名字也不确定 -->
  <div class="basic" :class="classArr">{{name}}</div>
  <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定，名字也确定，但要动态决定用不用 -->
  <div class="basic" :class="classObj">{{name}}</div>
  <!-- 绑定style样式--对象写法 -->
  <div class="basic" :style="styleObj">{{name}}</div>
  <!-- 绑定style样式--数组写法 -->
  <div class="basic" :style="styleArr">{{name}}</div>
</div>
<script>
  new Vue({
    el: '#root',
    data: {
      name: 'Explosion！！',
      mood: 'normal',
      classArr: ['atguigu1', 'atguigu2', 'atguigu3'],
      classObj: {
        atguigu1: false
      },
      styleObj: {
        fontSize: '40px',
        color: 'red'
        //backgroundColor: 'grey'
      },
      styleObj2: {
        backgroundColor: 'grey'
      },
      styleArr: [
        {
          fontSize: '40px',
          color: 'red'
          //backgroundColor: 'grey'
        },
        {
          backgroundColor: 'grey'
        }
      ]
    },

    methods: {
      changeMood() {
        //实现随机获取
        const arr = ['happy', 'sad', 'normal']
        const index = Math.floor(Math.random() * 3)
        this.mood = arr[index]
      }
    }
  })
</script>

<div id="root">
  <h2>当前n的值是:{{n}}</h2>
  <button @click="n++">点我n+1</button>
  <!-- 使用v-show做条件渲染-->
  <!-- <h2 v-show="false">欢迎来到{{name}}学习</h2> -->
  <!-- <h2 v-show="1===1">欢迎来到{{name}}学习</h2> -->
  <!-- 使用V-if做条件渲染 -->
  <!-- <h2 v-if="false">欢迎来到{{name}}学习</h2> -->
  <!-- <h2 v-if="1===1">欢迎来到{{name}}学习</h2> -->
  <!-- v-else和v-else-if -->
  <!-- <div v-if="n===1">Angular</div>
    <div v-else-if="n===2">React</div>
    <div v-else-if="n===3">Vue</div>
    <div v-else>哈哈</div> -->
  <template v-if="n===1">
    <h2>你好</h2>
    <h2>gumisa</h2>
    <h2>toko</h2>
  </template>
</div>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      name: '尚硅谷',
      n: 0
    }
  })
</script>

<div id="root">
  <!-- 遍历数组 -->
  <h2>人员列表(遍历数组)</h2>
  <ul>
    <li v-for="(p,index) of persons" :key="index">
      {{p.id}}--{{p.name}}--{{p.age}}
    </li>
  </ul>
</div>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      persons: [
        { id: '001', name: '张三', age: '18' },
        { id: '002', name: '李四', age: '19' },
        { id: '003', name: '王五', age: '20' }
      ]
    }
  })
</script>

<div id="root">
  <!-- 遍历数组 -->
  <h2>人员列表(遍历数组)</h2>
  <button @click.once="add">添加一个老刘</button>
  <ul>
    <li v-for="(p,index) of persons" :key="p.id">
      {{p.name}}--{{p.age}}
      <input type="text" />
    </li>
  </ul>
</div>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      persons: [
        { id: '001', name: '张三', age: '18' },
        { id: '002', name: '李四', age: '19' },
        { id: '003', name: '王五', age: '20' }
      ]
    },
    methods: {
      add() {
        const p = { id: '004', name: '老刘', age: '40' }
        this.persons.unshift(p)
      }
    }
  })
</script>

<div id="root">
  <h2>人员列表</h2>
  <input type="text" placeholder="请输入名字" v-model="keyWords" />
  <ul>
    <li v-for="(p,index) of filpersons" :key="index">
      {{p.name}}--{{p.age}}--{{p.sex}}
    </li>
  </ul>
</div>
<script>
  //watch实现
  //#region
  /*const vm = new Vue({
        el: '#root',
        data: {
            persons: [
                { id: '001', name: '马冬梅', age: '18', sex: '女' },
                { id: '002', name: '周冬雨', age: '19', sex: '女' },
                { id: '003', name: '周杰伦', age: '20', sex: '男' },
                { id: '004', name: '温兆伦', age: '22', sex: '男' },
            ],
            keyWords: '',
            filpersons: [],
        },
        watch: {
            keyWords: {
                immediate: true,
                handler(val) {
                    //过滤数组
                    this.filpersons = this.persons.filter((p) => {
                        return p.name.indexOf(val) !== -1
                    })
                }
            }
        }
    })*/
  //#endregion

  //用computed实现
  const vm = new Vue({
    el: '#root',
    data: {
      persons: [
        { id: '001', name: '马冬梅', age: '18', sex: '女' },
        { id: '002', name: '周冬雨', age: '19', sex: '女' },
        { id: '003', name: '周杰伦', age: '20', sex: '男' },
        { id: '004', name: '温兆伦', age: '22', sex: '男' }
      ],
      keyWords: ''
    },
    computed: {
      filpersons() {
        return this.persons.filter((p) => {
          return p.name.indexOf(this.keyWords) !== -1
        })
      }
    }
  })
</script>

<div id="root">
  <h2>人员列表</h2>
  <input type="text" placeholder="请输入名字" v-model="keyWords" />
  <button @click="sortType=2">年龄升序</button>
  <button @click="sortType=1">年龄降序</button>
  <button @click="sortType=0">原顺序</button>
  <ul>
    <li v-for="(p,index) of filpersons" :key="index">
      {{p.name}}--{{p.age}}--{{p.sex}}
    </li>
  </ul>
</div>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      persons: [
        { id: '001', name: '马冬梅', age: '30', sex: '女' },
        { id: '002', name: '周冬雨', age: '31', sex: '女' },
        { id: '003', name: '周杰伦', age: '20', sex: '男' },
        { id: '004', name: '温兆伦', age: '22', sex: '男' }
      ],
      keyWords: '',
      sortType: 0 //0代表原顺序，1降序，2升序
    },
    computed: {
      filpersons() {
        const arr = this.persons.filter((p) => {
          return p.name.indexOf(this.keyWords) !== -1
        })
        //判断
        if (this.sortType) {
          arr.sort((a, b) => {
            return this.sortType === 1 ? b.age - a.age : a.age - b.age
          })
        }
        return arr
      }
    }
  })
</script>

<div id="root">
  <h1>学生信息</h1>
  <button @click="student.age++">年龄＋1岁</button><br />
  <button @click="addSex">添加一个性别属性，默认值：男</button><br />
  <button @click="student.sex= '你说捏' ">修改性别</button><br />
  <button @click="addFriend">在列表首位添加一个朋友</button><br />
  <button @click="updateFirstFriend">修改第一个朋友的名字为:张三</button><br />
  <button @click="addHobby">添加一个爱好</button><br />
  <button @click="updateHobby">修改第一个爱好为:开车</button><br />
  <button @click="removeSmoke">过滤掉爱好中的抽烟</button>
  <h3>姓名：{{student.name}}</h3>
  <h3>年龄：{{student.age}}</h3>
  <h3 v-if="student.sex">性别：{{student.sex}}</h3>
  <h3>爱好：</h3>
  <ul>
    <li v-for="(h,index) in student.hobby" :key="index">{{h}}</li>
  </ul>
  <h3>朋友们：</h3>
  <ul>
    <li v-for="(f,index) in student.friends" :key="" index>
      {{f.name}}--{{f.age}}
    </li>
  </ul>
</div>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      student: {
        name: 'tony',
        age: '18',
        hobby: ['抽烟', '喝酒', '烫头'],
        friends: [
          { name: 'Tom', age: 35 },
          { name: 'jerry', age: 36 }
        ]
      }
    },
    methods: {
      addSex() {
        Vue.set(this.student, 'sex', '男')
      },
      addFriend() {
        this.student.friends.unshift({ name: 'jack', age: 70 })
      },
      updateFirstFriend() {
        this.student.friends[0].name = '张三'
      },
      addHobby() {
        this.student.hobby.push('学习')
      },
      updateHobby() {
        //this.student.hobby.splice(0,1,'开车')
        // Vue.set(this.student.hobby,0,'开车')
        this.$set(this.student.hobby, 0, '开车')
      },
      removeSmoke() {
        this.student.hobby = this.student.hobby.filter((h) => {
          return h !== '抽烟'
        })
      }
    }
  })
</script>

<div id="root">
  <form @click.prevent="Demo">
    账号：<input
      type="text"
      v-model="userInfo.account"
      value="male"
    /><br /><br />
    密码：<input
      type="password"
      v-model="userInfo.password"
      value="female"
    /><br /><br />
    性别： 男<input
      type="radio"
      v-model="userInfo.sex"
      value="male"
      name="sex"
    />
    女<input
      type="radio"
      v-model="userInfo.sex"
      value="female"
      name="sex"
    /><br /><br />
    爱好： 学习<input type="checkbox" v-model="userInfo.hobby" value="study" />
    打游戏<input type="checkbox" v-model="userInfo.hobby" value="game" />
    吃饭<input
      type="checkbox"
      v-model="userInfo.hobby"
      value="eat"
    /><br /><br />
    所属校区
    <select v-model="userInfo.city">
      <option value="">请选择校区</option>
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
      <option value="shenzhen">深圳</option>
      <option value="wuhan">武汉</option>
    </select>
    <br /><br />
    其他信息
    <textarea cols="30" rows="10" v-model="userInfo.other"></textarea>
    <br /><br />
    <input type="checkbox" v-model="userInfo.agree" />阅读并接受<a
      href="http://www.atguigu.com"
      >《用户协议》</a
    ><br /><br />
    <button>提交</button>
  </form>
</div>
<script>
  Vue.config.productionTip = false
  const vm = new Vue({
    el: '#root',
    data: {
      userInfo: {
        account: '',
        password: '',
        sex: 'female',
        hobby: [],
        city: 'beijing',
        other: '',
        agree: ''
      }
    },
    methods: {
      Demo() {
        console.log(JSON.stringify(this.userInfo))
      }
    }
  })
</script>

<div id="root">
  <h2>显示格式化后的时间</h2>
  <!-- 计算属性实现 -->
  <h3>现在是:{{fmtTime}}</h3>
  <!-- methods实现 -->
  <h3>现在是:{{getFmtTime()}}</h3>
  <!-- 过滤器实现 -->
  <h3>现在是:{{time | timeFormater }}</h3>
  <!-- 过滤器实现(传参) -->
  <h3>现在是:{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
  <h3 :x="msg | mySlice">捏捏捏</h3>
</div>
<script>
  Vue.config.productionTip = false
  //全局过滤器
  Vue.filter('mySlice', function (value) {
    return value.slice(0, 4)
  })
  const vm = new Vue({
    el: '#root',
    data: {
      time: 1648366720578, //获取当前的时间戳
      msg: '你好捏捏捏捏'
    },
    computed: {
      fmtTime() {
        return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
      }
    },
    methods: {
      getFmtTime() {
        return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
      }
    },
    filters: {
      //局部过滤器
      timeFormater(value, str = 'YYYY年MM月DD日 HH:mm:ss') {
        return dayjs(value).format(str)
      },
      mySlice(value) {
        return value.slice(0, 4)
      }
    }
  })
</script>

<div id="root">
  <h2>{{name}}</h2>
  <h2>当前的n值是:<span v-text="n"></span></h2>
  <!-- <h2>当放大十倍后的n值是:<span v-big="n"></span></h2> -->
  <h2>当放大十倍后的n值是:<span v-big-number="n"></span></h2>
  <button @click="n++">点我n+1</button>
  <hr />
  <input type="text" v-fbind:value="n" />
</div>
<script>
  new Vue({
    el: '#root',
    data: {
      name: 'gumisa',
      n: 1
    },
    directives: {
      //big函数何时会被调用？ 1.指令与元素成功绑定时(一上来).2.指令所在的模板被重新解析时.
      // big(element,binding){
      //   // console.log('big')，简写属性其中只包括了 bind 和 update
      //   element.innerText = binding.value * 10
      // },
      'big-number'(element, binding) {
        // console.log('big')，简写属性其中只包括了 bind 和 update
        element.innerText = binding.value * 10
      },
      fbind: {
        //指令与元素成功绑定时(一上来)
        bind(element, binding) {
          element.value = binding.value
        },
        //指令所在元素被插入页面时
        inserted(element, binding) {
          element.focus()
        },
        //指令所在的模板被重新解析
        update(element, binding) {
          element.value = binding.value
        }
      }
    }
  })
</script>

<div id="root">
    <h2 :style="{opacity}">欢迎学习Vue</h2>
</div>
</body>
<script>
  Vue.config.productionTip = false
  new Vue({
    el:"#root",
    data:{
      opacity:1
    },
    methods:{

    },
    //Vue 完成模板的解析并把初始的真实的DOM元素放入页面后(完成挂载)调用mounted
    mounted(){
      setInterval(() => {
        this.opacity -= 0.01
        if(this.opacity <=0) this.opacity = 1
      },16)
    }
  })
    //通过外部的定时器去实现(不推荐)
    // setInterval(() => {
    //     vm.opacity -= 0.01
    //     if(vm.opacity <=0) vm.opacity = 1
    //   },16)
</script>

<div id="root">
  <h2>当前的n值是:{{n}}</h2>
  <button @click="add">点我n+1</button>
  <button @click="bye">点我销毁vm</button>
</div>
<script>
  new Vue({
    el: '#root',
    // template:`
    //   <div>
    //     <h2>当前的n值是:{{n}}</h2>
    //     <button @click="add">点我n+1</button>
    //   </div>
    // `,
    data: {
      n: 1
    },
    methods: {
      add() {
        console.log('add')
        this.n++
      },
      bye() {
        console.log('bye')
        this.$destroy()
      }
    },
    watch: {
      n() {
        console.log('n变了')
      }
    },
    beforeCreate() {
      console.log('beforeCreate')
      console.log(this)
    },
    created() {
      console.log('created')
      console.log(this)
    },
    beforeMount() {
      console.log('beforeMount')
      console.log(this)
    },
    mounted() {
      console.log('mounted')
      console.log(this)
    },
    beforeUpdate() {
      console.log('beforeUpdate')
    },
    updated() {
      console.log('updated')
    },
    beforeDestroy() {
      console.log('beforeDestroy')
      this.add()
    },
    destroyed() {
      console.log('destroyed')
    }
  })
</script>

<transition *name*="hello">
  <h1 *v-show*="isShow">你好啊</h1>
</transition>

1.创建文件:src/store/index.js.
<!-- 引入Vue核心库 -->
improt Vue from 'vue'
<!-- 引入Vuex -->
improt Vuex from 'vuex'
<!-- 应用Vuex插件 -->
Vue.use(Vuex)
<!-- 准备actions对象--响应组件中用户的动作 -->
const actions = { }
<!-- 准备mutations对象--修改state中的数据 -->
const mutations = { }
<!-- 准备state对象--保存具体的数据 -->
const state = { }
<!-- 创建并暴露 -->
export default new Vuex.Store({ actions, mutations, state })