Vue(一) 插值与指令语法、数据署理、MVVM模式、变乱处理处罚

1. 初始Vue

1.   <!-- 引入vue -->
2. <script type="text/javascript" src="./js/vue.js"></script>
3.   <!-- 容器 -->
4. <div id="root">
5.     hello {{name}}
6. </div>
8. <script>
9.     // 创建Vue实例
10.     new Vue({
11.         el: '#root',  //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
12.         data: {       //data中用于存储数据，数据供el所指定的容器去使用，data暂时先写成一个对象。
13.             name: 'tom'
14.         }
15.     })
16. </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举个例子。）
  

1. <div id="root">
2.     hello, {{stu.name.toUpperCase()}}
3.     <br>
4.     <a v-bind:href="url">百度</a>
5.     <a v-bind:href="url.toUpperCase()">百度</a>
6. </div>
7. <script>
8.     new Vue({
9.         el: '#root',
10.         data: {
11.             stu: {
12.                 name: 'tom',
13.                 age: 18
14.             },
15.             url: 'https://www.baidu.com/',
16.         }
17.     })
18. </script>

复制代码

终极页面被剖析为：

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

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

3. el与data的两种写法

3.1 el的两种写法

写法一：new Vue的时间设置el属性。

1. <script>
2.     const v = new Vue({
3.         el: '#root',   //第一种写法
4.         data: {
5.             name: 'tom',
6.         }
7.     })
8. </script>

复制代码

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

1. <script>
2.     const v = new Vue({
3.         data: {
4.             name: 'tom',
5.         }
6.     })
7.     // 第二种写法
8.     v.$mount('#root')
9. </script>

复制代码

3.2 data的两种写法

写法一：对象式

1. <script>
2.     // data的两种写法
3.     new Vue({
4.         el: '#root',
5.         // 对象式
6.         data: {
7.             name: 'tom',
8.         }
9.     })
10. </script>

复制代码

写法二：函数式

1. <script>
2.     new Vue({
3.         el: '#root',
4.         // 函数式
5.         data: function () {
6.             console.log(this);  
7.             return {
8.                 name: '山西'
9.             }
10.         }
11.     })
12. // 或者简写为：
13.     new Vue({
14.         el: '#root',
15.         // 函数式
16.        data () { //不可写为箭头函数，否则this返回的不是Vue实例
17.             console.log(this);  // this返回的是vue实例
18.             return {
19.                 name: '山西'
20.             }
21.         }
22.     })
23. </script>

复制代码

data的2种写法：对象式、函数式。
怎样选择：现在哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
一个紧张的原则:由Vue管理的函数 (data函数就是一个Vue管理的函数)，肯定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了
4. MVVM模式

• M—模子(Model) ：data中的数据
  
• V—视图(View) ：模板代码，页面
  
• VM—视图模子(ViewModel)：Vue实例
  
  
  
  Data Bindings: model的数据挂在ViewModel上，然后数据绑定到页面中
  DOM Listeners: 监听View页面里数据的变革，修改Model里对应的数据(有点儿像双向数据绑定)
  View Model则在页面和数据之间起毗连作用，以是一样平常定名Vue实例为vm
  

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

1.    <div id="root">
2.         姓名：{{name}}
3.         <br>
4.         地址：{{address}
5.         <br>
6.         <!-- vm身上的属性及Vue原型上的属性，在vue模板里都可以用 -->
7.         vm属性$options{{$options}}
8.         <br>
9.         Vue原型{{$emit}}
10.     </div>
11.     <script>
12.         const vm = new Vue({
13.             el: '#root',
14.             data: {
15.                 name: '小白',
16.                 address: '北京'
17.             }
18.         })
19.         console.log(vm);
20.     </script>

复制代码

5. 数据署理

5.1 Object.defineProperty()

语法：Object.defineProperty(对象，属性名，设置项) :给对象添加属性
需求1: 给person添加age属性

1. let obj = {
2.     name: 'jerry',
3.     gender: '男',
4.     age: 10
5. }
6. let person ={
7.     name: 'jerry',
8.     gender: '男',
9. }
10. Object.defineProperty(person, 'age', {
11.     value: 10,
12.     enumerable: true, // 控制属性是否可以被枚举，默认false Object.keys(对象)
13.      writable: true,   // 控制属性是否可以被修改，默认false
14.      configurable: true, // 控制属性是否可以被删除，默认false
15. });

复制代码

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

---

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

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

复制代码

别的，打印person也可以发现

点击(…)时，也会调用getter方法
5.2 作甚数据署理

数据署理：通过一个对象来对另一个对象的属性举行读或写的利用。

1. // obj有个x,希望通过obj2对obj的x进行读取和修改
2. let obj = { x: 100 }
3. let obj2 = { y: 200 }
4. Object.defineProperties(obj2, 'x', {
5.     get () {
6.         return obj.x
7.     },
8.     set (value) {
9.         obj.x = value
10.     }
11. })

复制代码

5.4 vue中的数据署理

1. <div class="root">
2.         <h2>学校名称：{{name}}</h2>
3.         <h2>学校地址：{{address}}</h2>
4. </div>
5. <script>
6.         const vm = new Vue({
7.                 el: 'root',
8.                 data: {
9.                         name: '尚硅谷',
10.                         address: '北京'
11.                 }
12.         })
13. </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是变乱名

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

复制代码

不传参的函数默认吸收变乱对象event

1. const vm = new Vue({
2.     el: '#root',
3.     data: {
4.         name: 'tom'
5.     },
6.     methods: {
7.         showInfo1 (event) {
8.             console.log('showInfo1');
9.             console.log(event);
10.         },
11.         showInfo2 (event, number) {
12.             console.log(event);
13.             console.log(number);
14.         },
15.         // showInfo1: (event) => {
16.         //         console.log(this); // window;指向的不是vue实例了
17.         // }
18.     }
19. })

复制代码

• 变乱的回调需设置在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()

1. <div id="root">
2.     <a href="https://www.baidu.cn" @click.prevent="moveToBaidu">点击链接跳转百度</a></div>
3. <script>
4.     const vm = new Vue({
5.         ...
6.         methods: {
7.             moveToBaidu (event) {
8.                 // event.preventDefault()
9.                 console.log('点击链接');
10.             }
11.         }
12.     })
13. </script>

复制代码

2、制止变乱冒泡
Vue: stop ----> 对应原生js event.stopPropagation()

1. <div @click="stopBubble('div')" class="bubbleBox">
2.     <button @click="stopBubble('btn')">点击冒泡</button>
3. </div>
4. <script>
5.     const vm = new Vue({
6.         ...
7.         methods: {
8.             stopBubble (str) {
9.                 // event.stopPropagation();
10.                 console.log(str + '冒泡');
11.             }
12.         }
13.         ...
14.     })
15. </script>

复制代码

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

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

复制代码

注：修饰符可以连写

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

复制代码

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

1. <button @click.once="showOnce">点击事件只触发一次</button>
2. <script>
3.     const vm = new Vue({
4.         ...
5.         methods: {
6.             showOnce () {
7.                 console.log('once');
8.             }
9.         }
10.         ...
11.     })
12. </script>

复制代码

4、变乱捕捉
变乱流是先捕捉，后冒泡。而在上述冒泡变乱点击中，点击button，依次打印：btn冒泡 div冒泡。这是由于默认对冒泡变乱举行相应。
若给div添加捕捉模式，则依次打印：div冒泡，btn冒泡

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

复制代码

6.3 键盘按键变乱

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

1. key <input type="text" @keydown="showKey">
2. <script>
3.     const vm = new Vue({
4.         ...
5.         methods: {
6.             showKey (e) {
7.                 console.log(e.key,e.keycode);  //打印按键
8.             }
9.         }
10.     })
11. </script>

复制代码

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

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

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

复制代码

若两个键共同使用,则：

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

复制代码

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

• 共同keyup使用：按下修饰键的同时，再按下其他键，随后开释其他键，变乱才被触发
  
• 共同keydown使用：正常触发变乱
  

总结： 体系修饰键共同keyup触发变乱很贫困，tab键共同keyup不起作用，因此键盘按键变乱一样平常都用keydown，不消keyup