☞Vue-初识

第一章 Vue

---

---

前言

一、初始 Vue

• 必须创建以以一个Vue实例对象，且要传入一个配置对象
• Vue实例和容器一一对应
• 真实开发只有一个Vue
• {{xxx}}中xxx要写js表达式且xxx可以用到自动读取所有data中的数据
• 一旦data中的数据发生变化，那么模板中所有用到该数据的地方还会发生变化
  el: '#root' = v.$mount('#root')

注意区分表达式和js代码（语句）
表达式：一个表达式会产生一个值，可以放在任意一个需要值地方
js代码：(语句)，if() ,for();

二、Vue模板语法

1.插值语法：
用于解析标签内容

2.指令语法：
用于解析标签（包括：标签属性、标签体内容、绑定事件…）
v-bind:href = ‘xxx’ 简写为：href= ’ xxx ’ xxx是表达式
v-model:value 可以简写为v-model,因为v-model默认就是就是收集value值
双向绑定一般是应用在表单类元素上，（如：input,select）

3.MVVM模型
M-model : data中的所有数据
V- 视图(view) : 模板代码
VM-视图模型（viewmodel）：vue实例

4.添加属性

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

const vm = new Vue({})
data中所有的属性都是，最后都出现在vm身上
get（） 函数调用，读取属性值
set(value) 设置属性值

6.事件的基本使用

• 使用v-on :xxx 或者@xxx 绑定事件，其中xxx是事件名
• 事件的回调需要配置在methods对象中，最后会在vm里面；
• method中配置的函数，不需要箭头函数！ 否则this指向就不是vm；
• methods中配置的函数，都是被vue管理的函数，this指向就是vue或者组件实例对象；
• @click = ‘demo’和@click($event) = ‘demo’ 效果一致 ,但后者可以传递参数

Vue中的事件修饰符
1.prevent: 阻止默认事件（常用阻止网页跳转）
2.stop： 阻止事件冒泡（常用）
3.once： 只触发一次
4.capture： 执行事件的捕获模式
5.self : 只有event.target是当前操作的元素才触发事件
6.passive

---

总结