这篇文章主要介绍了Vue基础语法知识梳理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue简介
- 让Vue工作，就须创建一个Vue实例，且要传入一个配置对象
- demo容器里的代码符合html规范，只不过混入了一些特殊的Vue语法
- demo容器里的代码被称为【Vue模板】
- Vue实例和容器是一一对应的
- 真实开发中只有一个Vue实例，并且会配合着组件一起使用
- {{xxx}}是Vue的语法：插值表达式，{{xxx}}可以读取到data中的所有属性
- 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新(Vue实现的响应式)
Hello，{{name.toUpperCase()}}，{{address}}
模板语法
（1）插值语法：
功能：用于解析标签体内容
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性
（2）指令语法:
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
举例：v-bind:href=“xxx” 或 简写为
:href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性
数据绑定
（1）单向绑定(v-bind)：数据只能从data流向页面
（2）双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值
单向数据绑定：
双向数据绑定：
单向数据绑定：
双向数据绑定：
el与data的两种写法
（1）el有2种写法
- new Vue时候配置el属性
- 先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值
（2）data有2种写法
- 对象式
- 函数式
在组件中，data必须使用函数式
Vue中的MVVM
- M：模型(Model) ：data中的数据
- V：视图(View) ：模板代码
- VM：视图模型(ViewModel)：Vue实例
数据代理
了解数据代理需要js的一些知识：Object.defineProperty()，属性标志，属性描述符，getter，setter
属性标志:
对象属性（properties），除 value 外，还有三个特殊的特性（attributes），也就是所谓的“标志”
writable— 如果为true，则值可以被修改，否则它是只可读的enumerable— 如果为true，则表示是可以遍历的，可以在for… .in Object.keys()中遍历出来configurable— 如果为true，则此属性可以被删除，这些特性也可以被修改，否则不可以
Object.getOwnPropertyDescriptor(obj, propertyName)
这个方法是查询有关属性的完整信息 obj是对象， propertyName是属性名
let user = { name: "John" }; let descriptor = Object.getOwnPropertyDescriptor(user, 'name'); console.log(descriptor) /* 属性描述符： { "value": "John", "writable": true, "enumerable": true, "configurable": true } */Object.defineProperty(obj, prop, descriptor)
obj：要定义属性的对象。
prop：要定义或修改的属性的名称
descriptor：要定义或修改的属性描述符
let user = { name: "John" }; Object.defineProperty(user, "name", { writable: false }); user.name = "Pete"; // 打印后还是显示 'John',无法修改name值其他的属性标志就不演示了，接下来看重点：访问器属性。
访问器属性：
本质上是用于获取和设置值的函数，但从外部代码来看就像常规属性。
访问器属性由 “getter” 和 “setter” 方法表示。在对象字面量中，它们用 get 和 set 表示：
let obj = { get name() { // 当读取 obj.propName 时，getter 起作用 }, set name() { // 当执行 obj.name = value 操作时，setter 起作用 } } 更复杂一点的使用
let user = { surname: 'gao', name: 'han' get fullName() { return this.name + this.surname; } } console.log(user.fullName)从外表看，访问器属性看起来就像一个普通属性。这就是访问器属性的设计思想。我们不以函数的方式 调用 user.fullName，我们正常 读取 它：getter 在幕后运行。
截至目前，fullName 只有一个 getter。如果我们尝试赋值操作 user.fullName=，将会出现错误：
user.fullName = "Test"; // Error（属性只有一个 getter）
为 user.fullName 添加一个 setter 来修复它：
let user = { surname: 'gao', name: 'han' get fullName() { return this.name + ' ' + this.surname; } set fullName(value) { // 这个用到了新语法 结构赋值 [this.surname, this.name] = value.split(' '); } } user.fullName = 'Li Hua' console.log(user.name); console.log(user.surname);数据代理：
数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）
例： let obj = { x: 100 } let obj2 = { y: 200 } 我们想要访问 **obj** 中的 **x** 的值，但我们最好不要直接去访问 **obj** ,而是想要通过 **obj2** 这个代理对象去访问。
这时候就可以用上 Object.defineProperty()，给 obj2 添加访问器属性（也就是getter和setter）
代码
let obj = { x: 100 } let obj2 = { y: 200 } Object.defineProperty(obj2, 'x', { get() { return obj.x; }, set(value) { obj.x = value; } })Vue中的数据代理
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
Vue中数据代理的好处：更加方便的操作data中的数据
基本原理：
- 通过Object.defineProperty()把data对象中所有属性添加到vm上。
- 为每一个添加到vm上的属性，都指定一个getter/setter。
- 在getter/setter内部去操作（读/写）data中对应的属性。
学校名称：{{name}}
学校地址：{{address}}
我们在控制台打印 new 出来的 vm
可以看到，写在配置项中的 data 数据被 绑定到了 vm 对象上，我先来讲结果，是 Vue 将 _data 中的 name，address 数据 代理到 vm 本身上。
先来解释下_data 是啥， _data 就是 vm 身上的 _data 属性，就是下图那个
这个 _data 是从哪来的？
new Vue 时， Vue 通过一系列处理， 将匹配项上的 data 数据绑定到了 _data 这个属性上，并对这个属性进行了处理（数据劫持），但这个属性就是来源于配置项中的 data，我们可以来验证一下。
这一切都是通过 Object.defineProperty() 来完成的，我来模拟一下这个过程
Object.defineProperty(vm, 'name', { get() { return vm._data.name; }, set(value) { vm._data.name = value } }) 在插值语法中，{{ name }} 取到的值就相当于 {{ vm.name }}，不用数据代理的话，在插值语法就要这样去写了。
事件处理
事件的基本使用：
- 使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名
- 事件的回调需要配置在methods对象中，最终会在vm上
- methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象
欢迎来到{{name}}学习
Vue中的事件修饰符
- prevent：阻止默认事件（常用）
- stop：阻止事件冒泡（常用）
- once：事件只触发一次（常用）
到此这篇关于Vue基础语法知识梳理上篇的文章就介绍到这了,更多相关Vue语法内容请搜索0133技术站以前的文章或继续浏览下面的相关文章希望大家以后多多支持0133技术站！
以上就是Vue基础语法知识梳理上篇的详细内容，更多请关注0133技术站其它相关文章！
