初识Vue

1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
3.root容器里的代码被称为【Vue模板】；
4.Vue实例和容器是一一对应的；
5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

<div id="demo">
<h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
</div>
new Vue({
el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
name:'atguigu',
address:'北京'
	}
})

模板语法

插值语法和指令语法

Vue模板语法有2大类：

插值语法：功能：用于解析标签体内容。写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
指令语法：功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。举例：v-bind:href="xxx" 或简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。

<div id="root">
      <h1>插值语法</h1>
      <h3>你好，{{name}}</h3>
      <hr />
      <h1>指令语法</h1>
      <a v-bind:href="school.url.toUpperCase()" x="hello"
        >点我去{{school.name}}学习1</a
      >
      <a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
</div>
new Vue({
      el: "#root",
      data: {
        name: "jack",
        school: {
          name: "豪大大",
          url: "http://www.baidu.com",
        },
      },
    });

数据绑定

单向绑定

单向绑定(v-bind)：数据只能从data流向页面。

 单向数据绑定：<input type="text" :value="name">

双向绑定

双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
备注：
- 双向绑定一般都应用在表单类元素上（如：input、select等）
- v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
```
双向数据绑定：<input type="text" v-model="name">
```

data和el的两种写法

el的两种写法

new Vue时候配置el属性。
先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。

const v = new Vue({
//el:'#root', //第一种写法
data:{
  name:'尚硅谷'
  }
})
console.log(v)
v.$mount('#root') //第二种写法 */

data的二种写法

对象式
函数式如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
一个重要的原则：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了

new Vue({
   el:'#root',
//data的第一种写法：对象式
 data:{
	name:'尚硅谷'
}
//data的第二种写法：函数式
   data(){	
   console.log('@@@',this) //此处的this是Vue实例对象
return{
	name:'尚硅谷'
		}
	}
})

MVVM模型

M：模型(Model) ：data中的数据
V：视图(View) ：模板代码
VM：视图模型(ViewModel)：Vue实例

观察发现：

data中所有的属性，最后都出现在了vm身上。 2. vm身上所有的属性及 Vue原型上所有属性，在Vue模板中都可以直接使用。

数据代理

回顾Object.definePeoperty方法

Object.defineProperty(person,'age',{
	value:18,
	enumerable:true, //控制属性是否可以枚举，默认值是false
	writable:true, //控制属性是否可以被修改，默认值是false
	configurable:true //控制属性是否可以被删除，默认值是false
//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
get(){				
console.log('有人读取age属性了')
return number
				},
//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
set(value){					console.log('有人修改了age属性，且值是',value)
number = value				}

数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

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中对应的属性。

事件处理

事件的基本使用：

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

<button v-on:click="showInfo">点我提示信息</button> 
<button @click="showInfo1">点我提示信息1（不传参）</button>
<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
methods:{
	showInfo1(event){
console.log(event.target.innerText)
console.log(this) //此处的this是vm
},

事件修饰符

Vue中的事件修饰符：

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

<!-- 阻止默认事件（常用） -->
<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>
<!-- 阻止事件冒泡（常用） -->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点我提示信息</button>
<!-- 修饰符可以连续写 -->
<!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
</div>
<!-- 事件只触发一次（常用） -->
<button @click.once="showInfo">点我提示信息</button>

键盘事件

1.Vue中常用的按键别名：回车 => enter 删除 => delete (捕获“删除”和“退格”键) 退出 => esc 空格 => space 换行 => tab (特殊，必须配合keydown去使用) 上 => up 下 => down 左 => left 右 => right

Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
系统修饰键（用法特殊）：ctrl、alt、shift、meta

(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。			
(2).配合keydown使用：正常触发事件。

也可以使用keyCode去指定具体的按键（不推荐）
Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

<input
        type="text"
        placeholder="按下回车提示输入"
        @keyup.enter="showInfo"
      />
methods: {
        showInfo(e) {
          console.log(e.target.value);
        },

计算属性

定义：要用的属性不存在，要通过已有属性计算得来。
原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
get函数什么时候执行？ (1).初次读取时会执行一次。 (2).当依赖的数据发生改变时会被再次调用。
优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
备注： 1.计算属性最终会出现在vm上，直接读取使用即可。 2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

<div id="root">
姓：<input type="text" v-model="firstName"><br/><br/>
名：<input type="text" v-model="lastName"><br/><br/>
全名：<span>{{fullName}}</span>
</div>
</body>
<script>
new Vue({
    el:'#root',
    data:{
    firstName:'李',
    lastName:'慕北'
    },
computed:{
  fullName:{
     get(){
        return this.firstName + '-' + this.lastName
            },
      set(value) {
        const arr = value.split('-');
        this.firstName = arr[0];
        this.lastName = arr[1];
            }
        }
    }
    })

简写形式

当只有get属性时才能简写
fullName(){
return this.firstName + '-' + this.lastName
	}
}

Vue2知识点一网打尽系列

初识Vue

模板语法

插值语法和指令语法

数据绑定

单向绑定

双向绑定

data和el的两种写法

el的两种写法

data的二种写法

MVVM模型

数据代理

回顾Object.definePeoperty方法

数据代理

Vue中的数据代理

事件处理

事件的基本使用：

事件修饰符

键盘事件

计算属性