Vue(一) 插值与指令语法、数据代理、MVVM模式、事件处理

1. 初始Vue

  <!-- 引入vue -->
<script type="text/javascript" src="./js/vue.js"></script><!-- 容器 -->
<div id="root">hello {{name}}
</div><script>// 创建Vue实例new Vue({el: '#root',  //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。data: {       //data中用于存储数据，数据供el所指定的容器去使用，data暂时先写成一个对象。name: 'tom'}})
</script>

总结：
1、想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
​2、root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
3、root容器里的代码被称为【Vue模板】；
4、Vue实例和容器是一一对应的；一个容器只能由一个Vue实例接管，
5、真实开发中只有一个Vue实例，并且会配合着组件一起使用；

2. 模板语法

2.1 插值语法

• 功能：用于解析标签体内容。
• 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

2.2 指令语法

• 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
• 写法：v-xxx
• 比如：v-bind语法，v-bind:href=“xxx” xxx同样要写js表达式，且可以直接读取到data中的所有属性。（注：Vue中有很多的指令，且形式都是：v-???，只是拿v-bind举个例子。）

<div id="root">hello, {{stu.name.toUpperCase()}}<br><a v-bind:href="url">百度</a><a v-bind:href="url.toUpperCase()">百度</a>
</div>
<script>new Vue({el: '#root',data: {stu: {name: 'tom',age: 18},url: 'https://www.baidu.com/',}})
</script>

最终页面被解析为：

注意区分：js表达式 和 js代码(语句)

1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
   (1). a
   (2). a+b
   (3). demo(1)
   (4). x === y ? ‘a’ : ‘b’
2. js代码(语句)
   (1). if(){}
   (2). for(){}

3. el与data的两种写法

3.1 el的两种写法

写法一：new Vue的时候配置el属性。

<script>const v = new Vue({el: '#root',   //第一种写法data: {name: 'tom',}})
</script>

写法二：先创建Vue实例，随后再通过 Vue实例.$mount(‘#root’)指定el的值

<script>const v = new Vue({data: {name: 'tom',}})// 第二种写法v.$mount('#root')
</script>

3.2 data的两种写法

写法一：对象式

<script>// data的两种写法new Vue({el: '#root',// 对象式data: {name: 'tom',}})
</script>

写法二：函数式

<script>new Vue({el: '#root',// 函数式data: function () {console.log(this);  return {name: '山西'}}})
// 或者简写为：new Vue({el: '#root',// 函数式data () { //不可写为箭头函数，否则this返回的不是Vue实例console.log(this);  // this返回的是vue实例return {name: '山西'}}})
</script>

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

4. MVVM模式

1. M—模型(Model) ：data中的数据
2. V—视图(View) ：模板代码，页面
3. VM—视图模型(ViewModel)：Vue实例
   
   Data Bindings: model的数据挂在ViewModel上，然后数据绑定到页面中
   DOM Listeners: 监听View页面里数据的变化，修改Model里对应的数据(有点儿像双向数据绑定)
   View Model则在页面和数据之间起连接作用，所以一般命名Vue实例为vm

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

   <div id="root">姓名：{{name}}<br>地址：{{address}<br><!-- vm身上的属性及Vue原型上的属性，在vue模板里都可以用 -->vm属性$options{{$options}}<br>Vue原型{{$emit}}</div><script>const vm = new Vue({el: '#root',data: {name: '小白',address: '北京'}})console.log(vm);</script>

5. 数据代理

5.1 Object.defineProperty()

语法：Object.defineProperty(对象，属性名，配置项) :给对象添加属性

需求1: 给person添加age属性

let obj = {name: 'jerry',gender: '男',age: 10
}
let person ={name: 'jerry',gender: '男',
}
Object.defineProperty(person, 'age', {value: 10,enumerable: true, // 控制属性是否可以被枚举，默认false Object.keys(对象)writable: true,   // 控制属性是否可以被修改，默认falseconfigurable: true, // 控制属性是否可以被删除，默认false
});

相较于obj，person这种添加属性的方式可以对属性进行设置，obj则不能设置

---

需求2：现有一个number数据，如何使age的值始终为number的值

let number = 10;
const person = {name: 'tom',gender: '男',
}
Object.defineProperty(person, 'age', {// 当有人读取person的age属性时，get函数(一般说getter方法)就会被调用，且返回值就是age的值get () {console.log('读取age值');return number},// 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值set (value) {console.log('修改age值');number = value}
})

此外，打印person也可以发现

点击(…)时，也会调用getter方法

5.2 何为数据代理

数据代理：通过一个对象来对另一个对象的属性进行读或写的操作。

// obj有个x,希望通过obj2对obj的x进行读取和修改
let obj = { x: 100 }
let obj2 = { y: 200 }
Object.defineProperties(obj2, 'x', {get () {return obj.x},set (value) {obj.x = value}
})

5.4 vue中的数据代理

<div class="root"><h2>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2>
</div>
<script>const vm = new Vue({el: 'root',data: {name: '尚硅谷',address: '北京'}})
</script>

打印vm得知，vm身上的name和address都是Object.definePropterty()加上去的

vm将data数据存在了自身的_data中，当读取vm.address时，通过getter方法获取Vm._data.address的值


总结：
1、Vue中的数据代理：通过vm对象来代理data对象中属性的操作(读、写)
2、Vue中数据代理的好处：更方便操作data中的数据,不用写_data.name,直接写name就行。
3、基本原理：通过Object.defineProperty()把data对象中的所有属性加到vm上，为每一个添加到vm上的属性指定getter/setter。在getter/setter内部操作(读、写)data中对应的属性

6. 事件处理

6.1 v-on

语法：v-on:xxx 或简写方式 @xxx绑定事件,xxx是事件名

<div id="root"><button v-on:click="showInfo1">(v-on)不传参函数</button><button @click="showInfo2($event,66)">(@)不传参函数</button>
</div>

不传参的函数默认接收事件对象event

const vm = new Vue({el: '#root',data: {name: 'tom'},methods: {showInfo1 (event) {console.log('showInfo1');console.log(event);},showInfo2 (event, number) {console.log(event);console.log(number);},// showInfo1: (event) => {// 	console.log(this); // window;指向的不是vue实例了// }}
})

• 事件的回调需配置在methods对象中，最终会挂在vm上
• methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；如果是箭头函数，则指向的不是vm了
• @click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；

6.2 事件修饰符

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

1、阻止默认事件
Vue: prevent ----> 对应原生jsevent.preventDefault()

<div id="root"><a href="https://www.baidu.cn" @click.prevent="moveToBaidu">点击链接跳转百度</a></div>
<script>const vm = new Vue({...methods: {moveToBaidu (event) {// event.preventDefault()console.log('点击链接');}}})
</script>

2、阻止事件冒泡
Vue: stop ----> 对应原生js event.stopPropagation()

<div @click="stopBubble('div')" class="bubbleBox"><button @click="stopBubble('btn')">点击冒泡</button>
</div>
<script>const vm = new Vue({...methods: {stopBubble (str) {// event.stopPropagation();console.log(str + '冒泡');}}...})
</script>

未添加stop修饰符时,点击button，分别打印：btn冒泡 div冒泡。
添加stop修饰符后,点击button，打印：btn冒泡

<button @click.stop="stopBubble('btn')">点击冒泡</button>

注：修饰符可以连写

<div @click="stopBubble('div')" class="bubbleBox"><!-- 既阻止冒泡又阻止跳转 --><a href="https://www.baidu.cn" @click.stop.prevent="stopBubble('a链接')">点击链接跳转百度</button>
</div>

3、事件只发生一次
点击button，打印once；再点击，则不会再触发事件

<button @click.once="showOnce">点击事件只触发一次</button>
<script>const vm = new Vue({...methods: {showOnce () {console.log('once');}}...})
</script>

4、事件捕获
事件流是先捕获，后冒泡。而在上述冒泡事件点击中，点击button，依次打印：btn冒泡 div冒泡。这是因为默认对冒泡事件进行响应。
若给div添加捕获模式，则依次打印：div冒泡，btn冒泡

<div @click.capture="stopBubble('div')" class="bubbleBox"><button @click="stopBubble('btn')">点击冒泡</button>
</div>

6.3 键盘按键事件

keyup和keydown都是键盘按键事件。
键盘每个键都有键名和值，通过key和keycode可以获取

key <input type="text" @keydown="showKey">
<script>const vm = new Vue({...methods: {showKey (e) {console.log(e.key,e.keycode);  //打印按键}}})
</script>

每按一个键，都会触发一次事件。若想在按某个键(比如回车)之后再触发事件，可以在keydown/keyup后指定按键。
Vue里常用的按键别名:

• 回车 => enter ； 删除 => delete ； 退出 => esc ； 空格 => space
• 换行 => tab ； 上 => up ； 下 => down ； 左 => left ； 右 => right

enter<input type="text" @keydown.enter="showInfo"><br>
<!-- Vue未定义别名的键，直接用key值进行指定(不建议keycode，每个键盘同一个键的keycode可能不一样) -->
Tab<input type="text" @keydown.Tab="showInfo"><br>
<script>const vm = new Vue({...methods: {showInfo (e) {console.log(e.target.value);}}})
</script>

若两个键配合使用,则：

Ctrl+y <input type="text" @keydown.ctrl.y="showInfo">

系统修饰键：ctrl、alt、shift、meta

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

总结： 系统修饰键配合keyup触发事件很麻烦，tab键配合keyup不起作用，因此键盘按键事件一般都用keydown，不用keyup