Vue是什么

一套用于构建用户界面的渐进式JavaScript框架

Vue特点

采用组件化模式，提高复用率、且让代码更好维护。
声明式编码，让编码人员无需直接操作DOM，提高开发效率。区别于传统的原生JavaScript命令式编码。
使用虚拟DOM + 优秀的Diff算法，尽量服用DOM节点。

Vue官网

Vue注意事项

一个容器对应一个Vue实例，一对一的关系，开发过程中只有一个Vue实例。
一个Vue实例对应多个组件，一对多的关系。

Vue模板语法

date: {
  name: '学弟不想努力了', 
  url: 'http://blog.renyuxin.cn'
}

插值语法

用于解析标签体内容(一组标签包裹着的内容)

1	<div id="demo">{{date}}<div>

指令语法

用于解析标签（包括：标签属性、标签体内容、绑定事件….）

举例：v-bind:herf=”name”，简写为：:herf=”name”，name要写js表达式，可以直接读取data中的所有属性

1	<a :herf="url" >xxxxx<a>

单项绑定和双向绑定

v-bind：单项绑定
v-model：双向绑定（v-model只支持表单类元素，如：input、select等），全称：v-model:value=”name”；简写：v-model=”name”

实例化Vue

方法一

const vm = new Vue({
  el: "#demo",
  data:{
    name: "学弟不想努力了"
  }
})

方法二

const vm = new Vue({
  data:{
    name: "学弟不想努力了"
  }
}) 

v.$mount("#demo")

date格式

方法一：对象式

1
2
3

date: {
  name: "学弟不想努力了"
}

方法二：函数式

new Vue({
  date: functioin(){
    return{
      name: "学弟不想努力了"
    }
  }
})

或者

new Vue({
  date(){
    return{
      name: "学弟不想努力了"
    }
  }
})

MVVM架构模式

简称	含义	作用
M	模型（Model）	对应date中的数据
V	视图（View）	模板
VM	视图模型（ViewModel）	Vue实例对象

数据代理

let demo = {
  name: "学弟不想努力了",
  url: "http://blog.renyuxin.cn"
}

Object.defineProperty()

默认无法使用枚举值、被修改、被删除等

语法：Object.defineProperty(obj, prop, descriptor)
参数：
obj : 要定义属性的对象。
prop:要定义或修改的属性的名称或 Symbol 。
descriptor:要定义或修改的属性描述符对象。

Object.defineProperty(demo, 'name', {
  value: 18,
  emumerable: true, //控制属性是否可以枚举，默认false
  writable: true, //控制属性是否可以被修改，默认false
  configurable: true, //控制属性是否可以被删除，默认false
  get(){ //
    return 'hello'
  },
  set(){ //
    return 'hello'
  }
})

_date 数据劫持

对date: {}中的数据进行劫持

事件处理 methods

v-on:click

v-on:click = "xxxx"，简写：@click = "xxxx

methods:{
  getInfo(e, num){
    console.log(e, num);
  }
}

1	<button @click="getInfo($event, 123)"></button>

如果函数没有入参的情况，可以省略掉”(xxx)“，例如：

1	<button @click="getInfo"></button>

注意：如果需要event该入参，可以在调用函数时使用$event进行占位

事件修饰符

Vue中的时间修饰符：
举例：
表达式：@click.prevent = "xxxx"

1	<a href="http://blog.renyuxin.cn" @click.prevent="getInfo">点击触发</a>

属性	含义
prevent	阻止默认事件（`常用`）
stop	阻止事件冒泡（`常用`）
once	时间只触发一次（`常用`）
capture	使用时间的捕获模式
self	只有`event.target`是当前操作的元素时才触发事件
passive	事件的默认行为立即执行，无需等待事件回调执行完毕