vue2版本通俗易懂教程（一）

vue核心理念

1 模版句法

1> 对数句法 {{ name }}

2> 命令句法

<a href=”http://www.baidu.com”>点我重定向</a><a :href=”url”>点我重定向</a><script> new Vue({ el:”#app”, data:{ url:”http://www.baidu.com” } })</script>

1.2 统计数据存取

关键性条码 v-bind 、v-model(单向统计数据存取)

1.3 统计数据全权

Object.defineProperty方式 => 给第一类加进特性用的

// 给person第一类加进age特性<script> let number = 18; let person = { name:”tome”, age:number }; Object.defineProperty(person,age,{ value:15, enumerable:true, // 此增设圣吉龙县true,可被隐式，预设false writeable:true, // 减少的age可被修正预设false configurable:true //掌控特性可被删掉预设false get(){ // (getter) return number // 当没人初始化person的age特性值时， }, set(value){ // 当没人修正person的age特性时，被初始化 number = value; } }) console.log(person)</script>当中 age 无法被隐式，也是无法被结点。(for in 结点无法结点出age)

Vue 中的统计数据全权

统计数据全权：通过一个第一类全权另外一个第一类中特性的操作（读、写）

基本原理+总结：

通过vm第一类来全权data中的特性的操作

通过Object.defineProperty()方式把data中的所有特性加进到vm上

为每个特性指定getter、setter

在getter、setter 内部操作data中的相应的特性

vm._data 做的统计数据劫持，实现页面的响应式

1.4 事件处理

关键性字 v-on:click=”xxx”

对应的定义的方式应该写在methods配置项内。

1.5 计算特性

关键性字 computed ：{}配置项，计算特性内的方式需要 return 返回值。

1.6 监视特性

监视特性的变化

watch:{ age:{ handler(newValue,oldValue){ console.log(newValue,oldValue) }, deep:true // 深度监视，适用于当一个第一类内部特性被改变时 }, // 简写形式 age(newValue,oldValue){ console.log(newValue,oldValue) },}