Vue2学习笔记

  <body>  
    <div id="root">
      <h4>你好，{
  { name }}</h4>
      <hr />
      <h2>指令语法</h2>
      <a v-bind:href="tencent.url.toUpperCase()" x="hello">点我去看{
  { tencent.name }}1</a>
      <a :href="tencent.url" x="hello">点我去看{
  { tencent.name }}2</a>
    </div>
  </body>

  <script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    new Vue({
      el: '#root',
      data: {
        name: '张三',
        tencent: {
          name: '开端',
          url: 'https://v.qq.com/x/cover/mzc00200mp8vo9b/n0041aa087e.html',
        }
      }
    })
  </script>

1.2 数据绑定

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

a.单向绑定v-bind数据只能从data流向页面
b.双向绑定v-model数据不仅能从data流向页面，还可以从页面流向data

备注

a.双向绑定一般都应用在表单类元素上，如<input>、<select>、<textarea>等
b.v-model:value可以简写为v-model,因为v-model默认收集的就是value值

      单向数据绑定：<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/>

1.3 el与data的两种写法

el有2种写法

a.创建Vue实例对象的时候配置el属性
b.先创建Vue实例，随后再通过vm.$mount('#root')指定el的值

data有2种写法

a.对象式：data:{ }
b.函数式：data(){return{ }}

组件时，data必须使用函数，否则会报错；由Vue管理的函数，一定不要写箭头函数，否则this就不再是Vue实例了

new Vue({
  render: h => h(App),
}).$mount('#app')

1.4 MVVM模型

M:模型 Model,data 中的数据
V:视图 View,模板代码
VM:视图模型 ViewModel,Vue 实例

1.5 数据代理

通过一个对象代理对另一个对象中属性的操作（读/写）

let number = 18
let person = {
  name: '张三',
  sex: '男',
}

Object.defineProperty(person, 'age', {
  // value:18,
  // enumerable:true,		// 控制属性是否可以枚举，默认值是false
  // writable:true,			// 控制属性是否可以被修改，默认值是false
  // configurable:true	// 控制属性是否可以被删除，默认值是false

  // 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
  get() {
    console.log('有人读取age属性了')
    return number
  },

  // 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
  set(value) {
    console.log('有人修改了age属性，且值是', value)
    number = value
  }

})

Vue 将 data 中的数据拷贝了一份到 data 属性中，又将 data 里面的属性提到 Vue 实例中（如name ),通过 Object.defineProperty() 实现数据代理，通过 Object.defineProperty() 方法设置属性的 setter 与 getter 方法，从而达到劫持 _data 对象中的 name 属性的读取和设置操作的目的。

1.6 事件处理

事件的基本用法：

使用 v-on:xxx 或 @xxx 绑定事件，其中 xxx 是事件名
事件的回调需要配置在 methods 对象中，最终会在 vm 上

methods 中配置的函数，都是被 Vue 所管理的函数，this 的指向是 vm 或组件实例对象

<button @click="showInfo1">点我提示信息1（不传参）</button>
<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>

事件修饰符：

prevent 阻止默认事件（常用）
stop 阻止事件冒泡（常用）
once 事件只触发一次（常用）
capture 使用事件的捕获模式（冒泡、捕获，只在捕获阶段触发事件）
self 只有event.target是当前操作的元素时才触发事件
passive 事件的默认行为立即执行，无需等待事件回调执行完毕
修饰符可以连续写，比如可以这么用：@click.prevent.stop="showInfo"

键盘事件：

Vue中常用的按键别名

回车 enter
删除 delete 捕获“删除”和“退格”键
退出 esc
空格 space
换行 tab特殊，必须配合keydown去使用
上 up
下 down
左 left
右 right

Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-cas
(多单词小写短横线写法)

<input type="text" placeholder="按下回车提示输入" @keyup.caps-lock="showInfo">

系统修饰键（用法特殊）ctrl、alt、shift、meta(meta就是win键)

a.配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发指定ctr+y使用@keyup.ctr.y
b.配合keydown使用：正常触发事件

也可以使用keyCode去指定具体的按键（不推荐）（@keyup.13="showInfo"）
Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名

<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">

Vue.config.keyCodes.huiche = 13 // 定义了一个别名按键

1.7 computed 计算属性

1.定义：要用的属性不存在，需要通过已有属性计算得来

2.原理：底层借助了Objcet.defineproperty()方法提供的getter和setter

3.get函数什么时候执行？

a.初次读取时会执行一次
b.当依赖的数据发生改变时会被再次调用

4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便

5.备注

a.计算属性最终会出现在vm上，直接读取使用即可
b.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖
的数据发生改变
c.如果计算属性确定不考虑修改，可以使用计算属性的简写形式

    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
      }
    }

1.8 watch 监视属性

可以监视 data，也可以监视计算属性
配置项属性 immediate:false,改为 true,则初始化时调用一次回调函数
配置项属性 deep:true 可以深度监听对象内部值的改变

监视有两种写法：a.创建Vue时传入 watch:{ } 配置；b.通过vm.$watch()监视

// 方式一
watch:{		
	isHot:{
		immediate:true,
		handler(newValue,oldValue){
			console.log('isHot被修改了',newValue,oldValue)
		}
	}
//简写
    isHot(newValue, oldValue) {
      console.log('isHot被修改了', newValue, oldValue, this)
    }
} 



// 方式二
vm.$watch('isHot', {	
  deep：true,//深度监听	
  immediate: true, // 初始化时让handler调用一下
  //handler什么时候调用？当isHot发生改变时
  handler(newValue, oldValue) {
    console.log('isHot被修改了', newValue, oldValue)
  }
})

//简写
vm.$watch('isHot', (newValue, oldValue) => {
   console.log('isHot被修改了', newValue, oldValue, this)
})

1.9 computed 和 watch 之间的区别

computed能完成的功能，watch都可以完成
watch能完成的功能，computed不一定能完成，例如watch可以进行异步操作

两个重要的小原则

所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象
所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数)，最好写成箭头函数，这样this的指向才是vm或组件实例对象

1.10 绑定样式

class样式

写法：:class="xxx",xxx可以是字符串、数组、对象
:style="[a,b]"其中a、b是样式对象
:style="{fontsize:xxx}"其中xxx是动态值

字符串写法适用于：类名不确定，要动态获取

数组写法适用于：要绑定多个样式，个数不确定，名字也不确定

对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用

<div id="root">
  <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
  <div class="basic" :class="mood" @click="changeMood">{
  {name}}</div><br/><br/>

  <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
  <div class="basic" :class="classArr">{
  {name}}</div><br/><br/>

  <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
  <div class="basic" :class="classObj">{
  {name}}</div><br/><br/>

  <!-- 绑定style样式--对象写法 -->
  <div class="basic" :style="styleObj">{
  {name}}</div><br/><br/>

  <!-- 绑定style样式--数组写法 -->
  <div class="basic" :style="styleArr">{
  {name}}</div>
</div>

<script type="text/javascript">
  Vue.config.productionTip = false

  const vm = new Vue({
    el: '#root',
    data: {
      name: '尚硅谷',
      mood: 'normal',
      classArr: ['atguigu1', 'atguigu2', 'atguigu3'],
      classObj: {
        atguigu1: false,
        atguigu2: false,
      },
      styleObj: {
        fontSize: '40px',
        color: 'red',
      },
      styleObj2: {
        backgroundColor: 'orange'
      },
      styleArr: [
        {
          fontSize: '40px',
          color: 'blue',
        },
        {
          backgroundColor: 'gray'
        }
      ]
    },
    methods: {
      changeMood() {
        const arr = ['happy', 'sad', 'normal']
        const index = Math.floor(Math.random() * 3)
        this.mood = arr[index]
      }
    },
  })
</script>

1.11 条件渲染

v-if

v-if="表达式"
v-else-if="表达式"
v-else

v-show

v-show="表达式”

v-show和v-if的区别

v-show控制标签是否显示，v-if控制标签是否渲染
多条件渲染使用v-if,因为他配套有v-else-if,v-else.
频繁的切换(tab栏切换)使用v-show要好一点.
实际开发的时候用v-if其实更多一点，因为他更灵活.不用在乎那么点性能.
template标签不影响结构，页面html中不会有此标签，但只能配合v-if,不能配合v-show

  <!-- v-if与template的配合使用 -->
  <template v-if="n === 1">
    <h3>你好</h3>
    <h3>尚硅谷</h3>
    <h3>北京</h3>
  </template>

1.12 列表渲染

v-for指令

用于展示列表数据
语法：<li v-for="(item,index) of items" :key="index">,这里key可以是index,更好的是遍历对象的唯一标识（id）
可遍历：数组、对象、字符串（用的少）、指定次数（用的少）

key 的作用与原理

1.虚拟 DOM 中 key 的作用：key 是虚拟 DOM 中对象的标识，当数据发生变化时，Vue 会根据新数据生成新的虚拟 DOM，随后 Vue 进行新虚拟 DOM 与旧虚拟 DOM 的差异比较，比较规则如下

2.对比规则

a.旧虚拟 DOM 中找到了与新虚拟 DOM 相同的 key
ⅰ.若虚拟 DOM 中内容没变，直接使用之前的真实 DOM
ⅱ.若虚拟 DOM 中内容变了，则生成新的真实 DOM,随后替换掉页面中之前的真实 DOM

b.旧虚拟 DOM 中未找到与新虚拟 D0M 相同的 key
创建新的真实 DOM，随后渲染到到页面

3.用index作为key可能会引发的问题
a.若对数据进行逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实 DOM 更新
==>界面效果没问题，但效率低

b.若结构中还包含输入类的 DOM：会产生错误 DOM 更新==>界面有问题

4.开发中如何选择key?

a.最好使用每条数据的唯一标识作为 key,比如 id、手机号、身份证号、学号等唯一值

b.如果不存在对数据的逆序添加、逆序删除等破坏顶序的操作，仅用于渲染列表，使用
index 作为 key 是没有问题的

1.13 Vue data中数据检测

1.vue会监视data中所有层次的数据

2.如何监测对象中的数据？
        通过setter实现监视，且要在new Vue()时就传入要监测的数据
           对象创建后追加的属性，Vue默认不做响应式处理
如需给后添加的属性做响应式，请使用如下API
                Vue.set(target,propertyName/index,value)
                vm.$set(target,propertyName/index,value)

3.如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事
a.调用原生对应的方法对数组进行更新
b.重新解析模板，进而更新页面

4.在Vue修改数组中的某个元素一定要用如下方法
push()、pop()、unshift()、shift()、splice()、sort()、reverse()，这几个方法被Vue重写了
Vue.set()或vm.$set()
特别注意：Vue.set() 和 vm.$set() 不能给 vm 或 vm 的根数据对象 ( data 等) 添加属性