Vue——模板语法、数据代理、监听事件相关笔记

文章目录

• 前言
• 一、模板语法
  • 1. 插值语法
  • 2. 指令语法
• 二、使用步骤
  • 1.MVVM 模型 
  • 2.数据代理
  • 3.  vue中的数据代理
• 三、监听事件
  • 3.1 语法格式
  • 3.2 参数传递与默认形参
  • 3.3 事件修饰符
  • 3.4 常用键盘修饰符
  • 3.5  自定义键盘修饰符
• 总结

---

一、模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

1. 插值语法

概念: 双大括号形式 ，用于解析标签体内容：{{msg}} msg: 为表达式，也就是说大括号内的内容应该是JS表达式。

举例：

<div id="root">{{hello}}</div>

<script src="js/vue.js"></script>

<script>

    Vue.config.productionTip = false;//阻止默认生成提示

    new Vue({

            el:"#root",

            data:{

                    hello:"hello,vue!"

            }

    })

</script>

2. 指令语法

概念：vue中有很多指令，他们用于解析标签属性、解析标签体内容、绑定事件，以v-开头。

2.1  v-html

使用 v-html 指令用于输出 html 代码：

<div id="app">
      <div v-html="message"></div>
</div>
<script>
new Vue({
    el: '#app',
    data: { message: '<h1>菜鸟教程</h1>' }
})
</script>

2.2  v-bind

HTML 属性中的值应使用 v-bind 指令,单向绑定(v-bind)：数据只能从data流向页面。

以下实例判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

v-bind 缩写   

    <!-- 完整书写形式 -->

    <a v-bind:href="url">跳转到百度哦！</a>

    <!-- v-bind 的简写形式 -->

    <a :href="url">跳转到百度哦！</a>

<div id="app">
    <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
    <br><br>
    <div v-bind:class="{'class1': use}">
      v-bind:class 指令
    </div>
  </div>
      
  <script>
  new Vue({
      el: '#app',
    data:{
        use: false
    }
  });
  </script>

2.3  v-model 

双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。多用于表单元件

<div id="root">
		<input type="text" name=""   v-model="msg"/>
</div>
<script>
	Vue.config.productionTip = false;
		new Vue({  
			el:"#root",
			data:{
				msg:"张三"
			}
		})
</script>

2.4  v-if 

指令是带有 v- 前缀的特殊属性。

指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

  <div id="app" :class="{'class1':use}">{{type}}
        <span v-if="see">沾衣欲湿杏花雨</span>
    </div>
    
    <script>
        // 模板语法 v-html,但最好不要使用这种方式渲染页面
        const vm = new Vue({
            el:'#app',
            data:{
                see: true,
            }
        })
    </script>

2.5  v-else 

可以用 v-else 指令给 v-if 添加一个 "else" 块：

 <div id="app">
        <div v-if="Math.random() > 0.5">
          Sorry
        </div>
        <div v-else>
          Not sorry
        </div>
    </div>
        
    <script>
    new Vue({
      el: '#app'
    })
    </script>

2.6  v-else-if  

v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用

<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

2.7  v-show  

我们也可以使用 v-show 指令来根据条件展示元素：

  <div id="app" :class="{'class1':use}">{{type}}
        <span v-show="see">沾衣欲湿杏花雨</span>
    </div>
    
    <script>
        // 模板语法 v-html,但最好不要使用这种方式渲染页面
        const vm = new Vue({
            el:'#app',
            data:{
                see: true,
            }
        })
    </script>

2.8  v-click  

以v-on:事件名称(v-on:click),简写方式：@click。

说明：

1：用methods来配置事件的函数，最终会在VM身上。

2：methods不可用箭头函数，否则this就不是VM。

<div id="root">
			   <button @click="show">单击事件</button>
</div>
<script type="text/javascript">
			   new Vue({
				   el:"#root",
				   methods:{
					   show(){
						   alert("vue中的单击事件");
					   }
				   }
			   })
</script>

二、数据代理

1.MVVM 模型 

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

理解：VM用来把数据放到视图上，data中的所有属性都会放到VM上,在视图中都可以使用。

如下图所示，vue中的MVVM模型就可以这样理解

2.数据代理

2.1 什么是数据代理? 

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

 2.2 Object.defineproperty( )  方法 

“Object.defineProperty()方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象。

可能会有小伙伴好奇，数据代理和这个方法又有什么关系呢？ 其实数据代理其实这样理解：就是在自身追加了所要代理的属性，然后再设置了其他的方法操作属性（具体的方法下文会讲述）此时就可以利用Object.defineproperty（ ）方法实现。

 2.3 Object.defineproperty( )  方法相关参数

参数一： 将要添加属性的对象名。

参数二： 将要代理的属性名。

参数三： 相关配置项。

相关配置项目详解——

  enumerable: true,   //控制该属性是否可以被枚举(遍历),默认为false

  wrtiable: true,    // 控制该属性是否可以被修改，默认为false

  configurable: true,  //控制该属性是否可以被删除，默认为false

 也就是说通过Object.defienproperty（ ）追加的属性默认是不会被遍历的以及修改、删除的，通过上述配置参数可以实现。

举例与思考:

有一名为person的对象，现要求为这个对象追加属性名为 age 值为 20的属性，有多少种方法呢？有聪明的小伙伴可能会想到，直接利用对象追加属性的方法，设置属性名和属性值的方法，直接追加，但如果后续这个追加的属性的值有所改变，这就不得不每次都要修改原码十分不方便，此时就可以在vue中使用数据代理的方式，随后借助vue中的 “响应式”系统就可以实现 data中的数据与页面中的数据实时更新的功能。

实现代码以及代码解释：

// 当有人读取person 的age 属性时，getter方法就会被调用,且返回值就是age 的值。

            get( ){

                return p1.x;

            },

            // 当有人修改person 的age 属性时，setter方法就会被调用，且返回值就是修改的具体值。

            set(value){

                console.log('有人修改了p2的值，是'+value);

            }

     // 数据代理案例
        const  p1 = {x:1};
        const  p2 = {y:2};
        Object.defineProperty(p2,'x',{
            enumerable: true,
            get( ){
                return p1.x;
            },
            set(value){
                console.log('有人修改了p2的值，是'+value);
            }
        })
        Object.defineProperty(p2,'age',{
            value: 24,
            enumerable: true,
            writeable: true,
        })
        let res = Object.keys(p2);
        console.log(res);  
    </script>

3.  vue中的数据代理

3.1 vue数据代理概念

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

3.2 vue数据代理优势

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

3.3 vue数据代理的原理

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

3.4 数据代理图示

如图所示，vm存储data数据的方式是将其赋值了一份，存储在_data，此时还未发生数据代理，所以在此时的vm中需要读取_data中的数据，还需要_data才能够读取，这时候vue又做了一个举动就是将_data中的数据，又分别存放在了vm自身上，这就是为什么data中的数据在 vm身上都能够访问的原因，此时也就完成了数据代理。

也就是说   vm._data == data  ——true

三、监听事件

3.1 语法格式

以v-on:事件名称(v-on:click),简写方式：@click。

<div id="root">
        <button @click="show">单击事件</button>
</div>
<script type="text/javascript">
        new Vue({
            el:"#root",
            methods:{
                show(){
                    alert("vue中的单击事件");
                }
            }
        })
</script>

说明：

1：用methods来配置事件的函数，最终会在VM身上。

2：methods不可用箭头函数，否则this就不是VM。

3.2 参数传递与默认形参

语法：@click="fun($event,123)",@click="fun"等价于@click="fun($event)"

接收：

<script type="text/javascript">

               new Vue({

                   el:"#root",

                   methods:{

                       fun(event,a){

                           alert("接收的参数是：",a);

                       }

                   }

               })

</script>

3.3 事件修饰符

· prevent : 阻止事件的默认行为

· stop : 停止事件冒泡

<div @click="show">

<button @click.stop="show">单击按钮</button>

<!-- 修饰符可以连续写 -->

<!-- <a href="http://www.baidu.com/" @click.prevent.stop="showInfo">

点我提示信息</a> --></div>

· once ：事件只触发一次

<button @click.once="show">单击按钮</button>

·capture：使用事件捕获

·self：只有event.target 是当前做操的元素时才触发事件

<div  @click.self="show">

    <button @click="show">单击按钮</button>

</div>

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

<ul @wheel.passive="demo" >

    <li>1</li><li>2</li><li>3</li><li>4</li>

</ul>

Wheel:鼠标滚轮事件，不加上passive，需要等待事件结束后执行滚动，加上则滚轮不受回调影响

3.4 常用键盘修饰符

·回车 => enter

·删除 => delete (捕获“删除”和“退格”键)

·退出 => esc

·空格 => space

·换行 => tab (特殊，必须配合keydown去使用)

 <input type="text" v-model="age" @keydown.tab ="fun">

·上 => up

·下 => down

·左 => left

·右 => right

举例：

<input type="text" value="" placeholder="按下回车显示信息" @keyup.enter = "show"/>

系统修饰键（用法特殊）：ctrl、alt、shift、meta

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

(2).配合keydown使用：正常触发事件。

3.5  自定义键盘修饰符

<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">

Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

<input type="text" placeholder="按下回车提示输入" @keydown.ctrl.y="showInfo">

按下crtl+y 提示。

不推荐

---

总结

今日的分享到此结束，最后依旧诚挚祝福屏幕前的你健康幸福、平安喜乐！