本文参考尚硅谷Vue2.0+Vue3.0全套教程
VUE从入门到入土 (一) 当中 包括 VUE基础当中的 初识VUE、VUE模板语法、数据绑定、el与data的两种写法、MVVM模型、数据代理、事件处理

初识VUE

1. 一个容器对应一个实例（一对一）
2. 想让Vue工作，就必须创建一个Vue实例
3. 3.root容器里的代码被称为 Vue模板

			new Vue({
			    el: '.root',
			    data: {
			        name: 'myname',
			        address: 'beijing'
			    }
			})

vue实例中的参数

el

el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串

创建vue实例时配置el

const v = new Vue({
    el: '#root',
    data: {
        name: 'myname'
    }
})

挂载el属性

const v = new Vue
v.$mount('#root')

data

data中用于存储数据，数据供el所指定的容器去使用

对象式

new Vue({
    el: '#root',
    data: {
        name: 'myname'
    }
})

函数式

new Vue({
    el: '#root',
    data() {
        console.log('@@@', this) //此处的this是Vue实例对象，data不能用使用箭头函数
        return {
            name: 'myname'
        }
    }
})

Vue模板语法

插值语法

插值语法用于标签体之内

	<div id="demo">
	    <h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
	</div>

“{{xxx}}” 中可以读取到data中的数据，也可以使用js表达式

指令语法

指令语法用于标签属性

<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习</a>
<a :href="school.url" x="hello">点我去{{school.name}}学习</a>

		new Vue({
		    el: '#root',
		    data: {
		        name: 'jack',
		        school: {
		            name: 'schloo1',
		            url: 'http://www.baidu.com',
		        }
		    }
		})

v-bind 简写为 “:”

数据绑定

单向绑定

<div id="root">
    <!-- 普通写法 -->

    <!-- 单向数据绑定： -->
    <input type="text" v-bind:value="name"><br />
    <!-- 双向数据绑定： -->
    <input type="text" v-model:value="name"><br />

    <!-- 简写 -->

    <!-- 单向数据绑定： -->
    <input type="text" :value="name"><br />
    <!-- 双向数据绑定： -->
    <input type="text" v-model="name"><br />

    <!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
    <h2 v-model:x="name">你好啊</h2>
</div>

v-bind
数据只能从data流向页面。

双向绑定

v-model

1. 数据不仅能从data流向页面，还可以从页面流向data。
2. 双向绑定一般都应用在表单类元素上（如：input、select等）
3. v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

MVVM模型

1. M：模型(Model) ：对应data 中的数据
2. V：视图(View) ：模板
3. VM：视图模型(ViewModel) ： Vue 实例对象

数据代理

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

let obj = {x:100}
let obj2 = {y:200}

Object.defineProperty(obj2, 'x', {

    get(){
        return obj.x
    }, 
        set(value){
        obj.x = value
    }

})

忘记使用方法可以先回顾一下以下两个方法

let number = 18
let person = {
    name: '张三',
    sex: '男',
}

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
    }

})

VUE中的数据代理

通过vm对象来代理data对象中属性的操作（读/写）

Vue中数据代理的好处：

更加方便的操作data中的数据

基本原理：

通过Object.defineProperty()把data象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一getter/setter。
在getter/setter内部去操作（读/写data中对应的属性。

事件处理

1. 事件的回调需要配置在methods对象中，最终会在vm上
2. methods中配置的函数，不要用箭头函数！否则this就不是vm了
3. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象

事件基本使用

使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名

@click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；

<div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <!-- <button v-on:click="showInfo">点我提示信息</button> -->
    <button @click="showInfo1">点我提示信息1（不传参）</button>
    <button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
</div>

const vm = new Vue({
    el: '#root',
    data: {
        name: 'myname',
    },
    methods: {
        showInfo1(event) {
            alert('你好！')
        },
        showInfo2(event, number) {
            console.log(event, number)
            alert('你好！！')
        }
    }
})

event

表示出现在DOM中的事件

实例属性

实例方法

事件修饰符

可链式 例:click.prevent.stop

prevent

阻止默认事件（常用）

stop

阻止事件冒泡（常用）

once

事件只触发一次（常用）

capture

使用事件的捕获模式

self

只有event.target是当前操作的元素时才触发事件

passive

事件的默认行为立即执行，无需等待事件回调执行完毕

键盘事件

• keyup
  按键抬起时触发
• keydown
  按键按下时触发

使用示例:

<div id="root">
			<h2>欢迎来到{{name}}</h2>
			<input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">
		</div>

new Vue({
			el:'#root',
			data:{
				name:'北京'
			},
			methods: {
				showInfo(e){
					console.log(e.target.value)
				}
			},
		})

键盘常用别名

VUE中提供的常用别名

回车 : enter
删除 : delete (“退格”键)
退出 : esc
空格 : space
换行 : tab (keydown时使用)
上 : up
下 : down
左 : left
右 : right

Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

系统修饰键（用法特殊）：ctrl、alt、shift、meta
(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用：正常触发事件。

可要求多个按键 例:keyup.ctrl.y

JS原生按键名

使用e.key 可以获取

多个单词例如:CapsLock 需要把大写换成小写字符之间用-连接为：caps-lock