Vue基础day01

1. Vue的安装

首先电脑上要现有node.js。在命令行运行

npm install -g vue-cli//这个是vue2的安装方式
npm install -g @vue/cli//这个是vue3的安装方式

2. Vue基础语法

1. 表达式：一个表达式会生成一个值，可以放在任何一个需要值的地方
       (1). a
       (2). a+b
       (3). demo(1)
       (4). x===y?'a':'b' 
2. js代码
       (1). if()
       (2). for()

3. Vue模板语法有2大类

 1. 插值语法：
          功能：用于解析标签体内容
          写法：{{xxx}}，xxx是js表达式，且可以直接读取data中的所有属性。
 2. 指令语法：
          功能：用于解析标签（包括：标签属性、标签体内容、绑定事件）
          备注：Vue中有很多指令，且形式都为:v-???

<h2>{{name}}</h2>//插值语法
<h2 v-bind="name"></h2>//指令语法

4. Vue中有2种数据绑定的方式

1. 单向绑定（v-bind）：数据只能从data流向页面
2. 双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data
3. v-model的三个修饰符：
   1. lazy：失去焦点再收集数据
   2. number：驶入字符串转为有效的数字
   3. trim：输入首位空格过滤

<h2 v-bind="school"></h2>又可以写成<h2 :school></h2>
<h2 v-model="school"></h2>
<input type="text" v-model.trim='userInfo.account'><br /><br />
<input type="number" v-model.number='userInfo.age'><br /><br />
<textarea v-model.lazy="userInfo.other" cols="30" rows="10"></textarea>

1：双向绑定一般都应用在表单元素上
2：v-model:value 可以简写为v-model。v-bind可以简写为“ ：”*
3：data中所有的属性，最后都出现在了vm身上
4：vm身上所有的属性及Vue原型上所有属性，在Vue模板上都可以直接使用

5. 数据代理

1：Vue中的数据代理：通过vm对象来代理data对象中属性的操作
2：Vue中数据代理的好处：更加方便的操作datat中的数据
3：基本原理：
	   通过Object.defineProperty()把data对象中所有属性都添加到vm上，
	   为每一个添加到vm上的属性，都指定一个getter/setter， 在getter/setter内部去操作data中对应的属性。

//这个要写在new Vue的外头
Object.defineProperty(person, 'age', {
      value: 18,
      enumerable: true//控制属性是否可以枚举（可以枚举的属性可以遍历）
})

6. 事件的基本使用

1.使用v-on:xxx或@xxx绑定事件，其中xxx是事件名
2.事件的回调需要配置在methods对象中，最终会在vm上
3.methods中配置的函数，不要用剪头函数！否则this就不是vm了
4.methods中配置的函数，都是被vue所管理的函数，this的指向都是vm或组件实例对象

<button v-on:click="showInfo">点我提示信息</button>
另一种写法<button @click="showInfo">点我提示信息</button>

7.Vue中的事件修饰符

  1.prevent:阻止默认事件
  2.stop:阻止事件冒泡
  3.once:事件只触发一次
  4.self:只有event.target是当前操作的元素才是触发事件
  5.passive:事件的默认行为立即执行，无需等待事件回调执行完毕 

//加入prevent之后，showInfo就不会再触发
<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

8. Vue中提供的按键别名

  1.Vue中常用的按键别名（配合keyup使用）
    回车=>enter
    删除=>delete(他这个会捕获“删除”和“退格”键)
    退出=>esc
    空格=>space
    换行=>tab（比较特殊，必须配合keydown使用）
    上=>down
    左=>left
    右=>rigth 
 2.Vue未提供别名的按键，可以使用-按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)->
 3.系统修饰键（用法特殊）：ctrl\alt\shift\meta
	 - 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
	 - 配合keydown使用，正常触发事件

9.计算属性

计算属性：
1. 定义：要用的属性不存在，要通过已有属性计算得来
2. 原理：底层借助了Object.defineproperty方法提供的getter和setter
3. get函数什么时候执行？
   （1） 初次读取时会执行一次
   （2）当依赖的数据发货所能变化时会被再次执行

//在vue模板中的用法，跟正常在data中的属性一样
<h2>{{fullName)}}</h2>
//在vue实例中的用法
computed: {
    fullName: {
    // 完整写法
   // get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fulName的值
   // set什么时候调用？1.初次读取Fullname时，2.所依赖的数据发生变化时。
       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() {
    }
}

10.监视属性

1. 当被监视的属性变化时i，回调函数自动调用，进行相关操作
2. 监视的属性必须存在，才能进行监视
3. 监视的两种写法：
   1. new Vue时传入watch配置。
   2. 通过vm.&watch监视

 watch: {
    // 正常写法
    isHot: {
        immediate: true,//初始化时让handler调用一下
        handler(newValue, oldValue) {
            console.log('isHot被修改', newValue, oldValue)
        }
    },
    // 简写
    isHot(newValue, oldValue) {
        console.log('isHot被修改了', newValue, oldValue)
    },
    // keyword: {
    //     immediate: true,
    //     handler(val) {
    //         console.log(val)
    //         this.newpersons = this.persons.filter((p) => {
    //             return p.name.indexOf(val) !== -1
    //         })
    //     }

    // }
},

11.遍历

1. 遍历数组
2. 遍历对象

<!-- 遍历数组 -->
<ul>
     <li v-for="p in persons" :key='p.id'>{{p.name}}-{{p.age}}</li>
</ul>
<!-- 遍历对象 -->
<ul>
    <li v-for="(value,key) of car" :key='key'>
        {{key}}--{{value}}
    </li>
</ul>
//data中对象的书写形式
car: {
   name: '奥迪',
    price: '70w万',
    color: '黑色'
},
<!-- 值得注意的是，遍历数组用的是in,而遍历对象用的是of -->

使用v-show和v-if都可以做条件渲染，其中v-if与template可以配合使用，但是v-show不行。

11.computed跟watch(监视属性)之间的区别：

1.computed能完成的功能，watch都可以完成
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的原则：
	1.所被vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
	2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等），最好写成剪头函数。
	这样this的指向才是vm或组件实例对象。

 watch: {
      firstname(val) {
          this.fullName = val + '-' + this.lastname
      },
      lastname(val) {
          this.fullName = this.firstname + '-' + val
      }
  }

计算属性跟监视属性。一般来说尽量使用计算属性，因为计算属性可以直接定义一个属性，但是监视属性必须是已经存在的。但是如果是有异步任务的时候，必须使用监视属性，而不能使用计算属性。