Vue学习笔记

初识Vue

  1. 需要创建Vue实例
  2. root容器代码需要符合html规范,但是混入了一些特殊的Vue语法
  3. root容器代码被称为Vue模板
  4. 容器和Vue实力之间一一对应

注意区分js表达式、js代码 :一个表达式会生成一个值,可以放在任何一个需要值的地方

  1. {{}}需要写js表达式,可以读取data中的所有属性
  2. data中属性的值发生改变,那么页面中用单该属性的地方也会自动更新
  3. 真实开发中只有一个vue实力,并且会配合着组件一起使用

Vue模板语法的两大类

  1. 插值语法
  • 功能:用于解析标签题内容
    {{xxx}}这种,xxx是js表达式,可以读到data中的所有属性
  1. 指令语法
  • 功能: 用于解析标签(含标签属性、标签体内容、绑定事件等)

举例
Vue学习笔记_第1张图片
其中的:href就是v-bind:href的简写, 它会把后面的字符串Date.now()当作js表达式处理。 但如果只是 那么字符串Date.now()就真的只是字符串而已

Vue数据绑定

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

  1. v-bind:单向绑定,数据只能从data流向页面
  2. v-model:双向绑定,数据可以在data和页面中双向流动
    • 一般都用在表单类(输入类型)的元素
    • v-model:value可简写为v-model

el和data的两种写法

el的两种写法

  1. new Vue时配置el属性
    Vue学习笔记_第2张图片
  2. 先创建Vue实例,随后再通过vm.$mount('.root')这种方式指定el的值

data的两种写法

  1. 对象式
  2. 函数式

但是由vue管理的函数,例如上面的函数式data,不要写箭头函数,因为箭头函数的this是window,写了之后函数的this就不再是Vue实例了

MVVM模型

Vue学习笔记_第3张图片
View Model是model和view间的桥梁

  1. Model:模型 == data中的数据
  2. View:视图 == 模板代码(页面)
  3. VM: 视图模型 == Vue实例
    观察发现:
  4. data种的所有属性,最后都出现在VM身上
  5. VM身上所有的属性,以及Vue原型山的所有属性, 在Vue模板中都可以直接使用

数据代理

回顾Object.defineproperty()

[参考,为什么value、writebale不能和getter、setter一起出现] (https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)

语法
Object.defineProperty(obj, prop descriptor)

  • obj: 要定义属性的对象。
  • prop: 一个字符串或 Symbol,指定了要定义或修改的属性键。
  • descriptor: 要定义或修改的属性的描述符。
  • 返回值:传入函数的对象,其指定的属性已被添加或修改。

descriptor是个对象:

  • value是数值
  • writable是控制属性是否可以被修改,默认是false
  • configurable:控制属性是否可以被删除,默认是false
  • enumerable: 控制属性是否可以被枚举,默认是false
  • get()函数:当有人读取obj的prop属性时,getter会被调用,返回值为该prop的value
  • set()函数:当有人修改obj的prop属性时,setter会被调用,且会接收到被修改的值

数据代理

通过一个对象代理对另一个对象中属性的操作,就是数据代理
可以使用Object.defineProperty()去做数据代理

  1. Vue中的数据代理: 通过vm对象来代理data对象中属性的操作
  2. Vue中数据代理的好处: 更加方便操作data中的数据
  3. 基本原理:
    通过Object.defineProperty()把data对象中所有的属性添加到vm上。为每一个添加到vm属性都指定一个getter、setter。在getter、setter内部去操作data对应的属性
    ObObject.definePropertyObject.defineProperty
    Vue学习笔记_第4张图片

事件处理(事件的基本使用)

  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.js,学习,笔记)