Vue 学习笔记(一)

Vue 学习笔记(一)

文章目录

  • Vue 学习笔记(一)
  • 一、Vue 概述
  • 二、 搭建Vue环境
  • 三、Vue 知识详解
    • 1. hello 小案例
    • 2. Vue 模板语法
      • 1. 插值语法
      • 2. 指令语法
      • 3. 数据绑定
    • 3. data 与 el
    • 4. MVVM 模型
    • 5. 数据代理
    • 6. 事件处理
      • 1. 事件的基本使用:
      • 2. 事件修饰符
      • 3. 键盘事件
      • 4. 鼠标事件
    • 7. 计算属性(computed)
    • 8. 监视属性(watch)
    • 9. 绑定样式
    • 10. 条件渲染
    • 11. 列表渲染
      • 1. 基本原理
      • 2. key的原理
      • 3. 列表过滤
      • 4. 列表排序
      • 5. 更新时的一个问题
      • 6. Vue监测数据改变的原理_对象
      • 7. 模拟一个数据监测
      • 8. Vue.set的使用
      • 9. Vue监测数据改变的原理_数组
      • 10. 总结Vue数据监测

一、Vue 概述

Vue 官网

Vue 一套用于构建用户界面的渐进式JavaScrip 框架。Vue 可以自底向上逐层的应用

  • 简单应用:只需一个轻量小巧的核心库。
  • 复杂应用:可以引入各式各样的 Vue 插件。

Vue 的特点:

  1. 采用组件化模式,提高代码的复用率,且让代码更好维护。(如下图:三个模块类似三个组件,我们修改只需在对应的组件里修改Html或JS文件即可)
    Vue 学习笔记(一)_第1张图片

  2. 声明式编码,让编码人员无需直接操作 DOM ,提高开发效率。
    Vue 学习笔记(一)_第2张图片

  3. 使用虚拟DOM + 优秀的Diff 算法,尽量复用 DOM 节点。

二、 搭建Vue环境

下载Vue
Vue分为开发版本(比较大的,会有很多警告和调试模式)和min版本的(体积小,适合用于生产环境的)。
Vue 学习笔记(一)_第3张图片

下载Vue开发者工具(便于调试Vue):它是浏览器的扩展程序
Vue 学习笔记(一)_第4张图片
浏览器安装程序后:
Vue 学习笔记(一)_第5张图片
Vue 学习笔记(一)_第6张图片

三、Vue 知识详解

1. hello 小案例




    
    
    
    初识Vue
    
        

hello,{{name}}

  • Vue.config.productionTip = false 在我们访问页面的时候,会出现提示:
    Vue 学习笔记(一)_第7张图片

增加该注解后该提示后就能去除。

访问效果

案例总结:

  • 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象。
  • root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法。
  • root容器里的代码被称为【Vue模板】。
  • Vue 容器和实例时一一对应的。
  • 真实开发中只有一个Vue实例,并且会配合着组件一起使用。
  • {{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性。
  • 一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新。

注意:new Vue 一个实例只能接管一个容器




    
    
    
    初识Vue
    
        

hello,{{name}}

hello,{{name}}

效果:只能接管到匹配到的第一个容器
Vue 学习笔记(一)_第8张图片

一个容器也只能被一个Vue实例操作,当出现多个实例时,会报错:




    
    
    
    初识Vue
    
        

hello,{{name}},{{adress}}

Vue 学习笔记(一)_第9张图片

实例中的 data 属性,我们也可以进行设置层级,如:
Vue 学习笔记(一)_第10张图片
效果如下:
Vue 学习笔记(一)_第11张图片

2. Vue 模板语法

1. 插值语法

Vue 学习笔记(一)_第12张图片

2. 指令语法

功能:

  • 用于解析标签(包括:标签属性、标签体内容、绑定事件…)。
  • 比如 v-bind:href=“xxx” 或者 简写为 :href=“xxx”,xxx同样要写js表达式,且可以直接读取到data中的所有属性。
  • Vue有很多指令,且形式都是:v-。此处我们只是拿v-bind举个栗子。

v-bind:[ 属性 ] = :[ 属性 ]
Vue 学习笔记(一)_第13张图片
页面效果:
Vue 学习笔记(一)_第14张图片

3. 数据绑定

Vue有两种数据绑定:

  1. 单向绑定(v-bind):数据只能从data流向页面。
  2. 双向绑定:数据不仅能从data流向页面,还可以从页面流向data。

注:

  1. 双向绑定一般都应用在表单类元素上(如input,select 等)。

  2. v-model:value 可以简写为 v-model,因为v-model 默认收集的就是value值。

    初识Vue
    单向数据绑定:
    双向数据绑定:
            
            单向数据绑定: 
    双向数据绑定:

    你好啊

Vue 学习笔记(一)_第15张图片

3. data 与 el

data 的两种写法:

  1. .new Vue 时候配置el属性
  2. 先创建Vue实例,随后在通过vm.$mount(’#root’) 指定el的值。

data 的两种写法:

  1. 对象式
  2. 函数式

如何原则 data 的写法呢,目前两种写法都可以,以后学习到组件时,data 必须使用函数式,否则会报错。

注意: 由 Vue 管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是 Vue 实例了。




    
    
    
    初识Vue
    
        

hello,{{name}}

4. MVVM 模型

  • M:模型(Model):对应data 中的数据
  • V:试图(View):模板
  • VM:试图模型(ViewModel):Vue实例对象。
    Vue 学习笔记(一)_第16张图片
    虽然没有完全遵循MVVM模型,但是Vue的设计也收到了它的启发。因此在文档中经常会使用(ViewModel的缩写),这个变量名表示Vue实例。
    Vue 学习笔记(一)_第17张图片
    探索发现:
  1. data中所有的属性,最后都出现在了vm身上。
  2. vm 身上所有的属性 及 Vue原型上所有的属性,在Vue模板中都可以直接使用。
    Vue 学习笔记(一)_第18张图片
    Vue 学习笔记(一)_第19张图片

5. 数据代理

Object.defineProperty: 可以动态的个对象绑定属性并赋予值。




    
    
    
    初识Vue
    
        

hello,{{name}}

数据代理: 通过一个对象代理对另一个对象中属性的操作(读/写),就给简单的小栗子:




    
    
    
    初识Vue
    
        

hello,{{name}}

Vue 中的数据代理:
Vue 学习笔记(一)_第20张图片

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

就比如:




    
    
    
    初识Vue
    
        

hello,{{name}},{{adress}}

其中 {{name}} 和 {{adress}} 读取的是 vm 中的_data.name 和 _data.adress。通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性,都指定一个getter/setter。在getter/setter内部去操作(读/写)data中对应的属性

6. 事件处理

1. 事件的基本使用:

  1. 使用 v-on:xxx 或 @xxx 绑定事件,其中 xxx 是事件名。
  2. 事件的回调需要配置在methods对象中,最终会在vm上。
  3. methods 中配置的函数,不要用箭头函数,否则 this 就不是 vm 了。
  4. methods 中配置的函数,都是被 Vue 所管理的函数,this 的指向是 vm 或 组件实例对象。
  5. @click=‘demo’ 和 @click=“demo($event)” 效果一致,但后者可以传参。

代码:




    
    
    
    初识Vue
    
        

hello,{{name}}

2. 事件修饰符

Vue中的事件修饰符:

  1. prevent:阻止默认事件(常用);

  2. stop:阻止事件冒泡(常用);

  3. once:事件只触发一次(常用);

  4. capture:使用事件的捕获模式;

  5. self:只有event.target是当前操作的元素时才触发事件;

  6. passive:事件的默认行为立即执行,无需等待事件回调执行完毕;

    事件修饰符

3. 键盘事件

Vue中常用的按键别名:

  1. 回车 => enter
  2. 删除 => delete (捕获“删除”和“退格”键)
  3. 退出 => esc
  4. 空格 => space
  5. 换行 => tab (特殊,必须配合keydown去使用)
  6. 上 => up
  7. 下 => down
  8. 左 => left
  9. 右 => right

Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)

系统修饰键(用法特殊):tab、ctrl、alt、shift、meta

  1. 配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。
  2. .配合keydown使用:正常触发事件。

也可以使用keyCode去指定具体的按键(不推荐)


Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名




	
	键盘事件
	
	


	
	

欢迎来到{{name}}学习

4. 鼠标事件

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

  1. .left

  2. .right

  3. .middle

    事件的基本使用

    欢迎来到{{name}}学习

    点我提示信息1(不传参)

7. 计算属性(computed)

姓名案例_插值语法实现:




	
	姓名案例_插值语法实现
	
	


	
	
姓:

名:

全名:{{firstName.slice(0,3)}}-{{lastName}}

姓名案例_methods实现:




	
	姓名案例_methods实现
	
	


	
	
姓:

名:

全名:{{fullName()}} //fullName带括号表示将函数的返回值展示出来

计算属性:

  1. 定义: 要用的属性不存在,要通过已有属性(Vue实例中的属性)计算得来。
  2. 原理: 底层借助了Object.defineproperty方法提供的getter和setter。
  3. 计算属性最终会出现在vm上,直接读取使用即可。不能写fullName.get(),没有这种写法。
  4. 如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。

计算属性里的get函数什么时候会执行呢?

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

计算属性优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。

举个栗子:




	
	姓名案例_计算属性实现
	
	



	
	
姓:

名:

测试:

全名:{{fullName}}

全名:{{fullName}}

全名:{{fullName}}

全名:{{fullName}}

8. 监视属性(watch)

监视属性watch:

  • 当被监视的属性变化时, 回调函数自动调用, 进行相关操作
  • 监视的属性必须存在,才能进行监视!!

监视的两种写法:

  1. new Vue时传入watch配置
  2. 通过vm.$watch监视

深度监视:

  1. Vue中的watch默认不监测对象内部值的改变(一层)。因为watch 如果监视的是对象,则对象地址改变时才会触发,对象里某个值改变是不是触发监听的,但是深度监视开启则可以触发监听。
  2. 配置deep:true可以监测对象内部值改变(多层)。

注意:

  1. .Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!
  2. 使用watch时根据数据的具体结构,决定是否采用深度监视。

举个栗子:




	
	天气案例_监视属性
	
	



	
	

今天天气很{{info}} {{x}}


深度监视按钮:

a的值是:{{numbers.a}}

b的值是:{{numbers.b}}

{{numbers.c.d.e}}

computed和watch之间的区别:

  1. computed能完成的功能,watch都可以完成。
  2. watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。computed不可以,因为computed依赖返回值得到结果。而watch则是得到属性改变的结果。

两个重要的小原则:

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

举个栗子:




	
	姓名案例_watch实现
	
	



	
	
姓:

名:

全名:{{fullName}}

9. 绑定样式

  1. css 样式

    写法:class=“xxx” xxx可以是字符串、对象、数组。
    字符串写法适用于:类名不确定,要动态获取。
    数组写法适用于:要绑定多个样式,个数不确定,名字也不确定。
    对象写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。

  2. style样式

    :style="{fontSize: xxx}“其中xxx是动态值。
    :style=”[a,b]"其中a、b是样式对象。

栗子:




	
	绑定样式
	
	



	
	
{{name}}


{{name}}


{{name}}


{{name}}


{{name}}

10. 条件渲染

  1. 1.v-if

    写法:
    (1).v-if=“表达式”
    (2).v-else-if=“表达式”
    (3).v-else=“表达式”
    适用于:切换频率较低的场景。
    特点:不展示的DOM元素直接被移除。

注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。

  1. v-show

    写法:v-show=“表达式”
    适用于:切换频率较高的场景。
    特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉,display:none

  2. 备注:使用v-if的时,元素可能无法获取到,而使用v-show一定可以获取到。

    条件渲染

11. 列表渲染

1. 基本原理



	
		
		基本列表
		
	
	
		
		
		

人员列表(遍历数组)

  • {{p.name}}-{{p.age}}

汽车信息(遍历对象)

  • {{k}}-{{value}}

测试遍历字符串(用得少)

  • {{char}}-{{index}}

测试遍历指定次数(用得少)

  • {{index}}-{{number}}

2. key的原理



	
		
		key的原理
		
	
	
		
		
		

人员列表(遍历数组)

  • {{p.name}}-{{p.age}}

3. 列表过滤



	
		
		列表过滤
		
	
	
		
		

人员列表

  • {{p.name}}-{{p.age}}-{{p.sex}}

4. 列表排序



	
		
		列表排序
		
	
	
		
		

人员列表

  • {{p.name}}-{{p.age}}-{{p.sex}}

5. 更新时的一个问题



	
		
		更新时的一个问题
		
	
	
		
		

人员列表

  • {{p.name}}-{{p.age}}-{{p.sex}}

6. Vue监测数据改变的原理_对象



	
		
		Vue监测数据改变的原理
		
		
	
	
		
		

学校名称:{{name}}

学校地址:{{address}}

7. 模拟一个数据监测



	
		
		Document
	
	
		
	

8. Vue.set的使用



	
		
		Vue监测数据改变的原理
		
		
	
	
		
		

学校信息

学校名称:{{school.name}}

学校地址:{{school.address}}

校长是:{{school.leader}}


学生信息

姓名:{{student.name}}

性别:{{student.sex}}

年龄:真实{{student.age.rAge}},对外{{student.age.sAge}}

朋友们

  • {{f.name}}--{{f.age}}

9. Vue监测数据改变的原理_数组



	
		
		Vue监测数据改变的原理_数组
		
		
	
	
		
		

学校信息

学校名称:{{school.name}}

学校地址:{{school.address}}

校长是:{{school.leader}}


学生信息

姓名:{{student.name}}

性别:{{student.sex}}

年龄:真实{{student.age.rAge}},对外{{student.age.sAge}}

爱好

  • {{h}}

朋友们

  • {{f.name}}--{{f.age}}

10. 总结Vue数据监测



	
		
		总结数据监视
		
		
		
	
	
		
		
		

学生信息









姓名:{{student.name}}

年龄:{{student.age}}

性别:{{student.sex}}

爱好:

  • {{h}}

朋友们:

  • {{f.name}}--{{f.age}}

你可能感兴趣的:(前端,html,面试,vue.js,学习,javascript)