初识vue框架（第二天——上篇）

Myth丶恋晨 2023-06-06 08:14 36阅读 0赞

# 初识vue框架 #

**下面是一个今天上午学习的大纲**

*  （1）v-bind属性指令
 *  （2）v-if条件指令
 *  （3）v-show渲染指令
 *  （4）v-on事件指令  
    ①表达式：方法名、内联语句  
    ②修饰符
 *  （5）methods选项-代理方法
 *  （6）拓展：2.6版本新增动态参数  
    **基本指令v-bind**
 *  v-bind动态属性：常用于动态绑定HTML元素的属性，例如id、class、href、src等属性。改变任一方数据后都会实时更新。
 *  语法格式1：单个语法格式  
    v-bind:attributeName=variable
 *  语法格式2：对象语法格式  
    v-bind=“\{attributeName1:variable1,attributeName2:variable2,……\}”  
    案例：在页面中利用Vue实例的变量制作一个超级链接
 *  语法格式3：数组语法格式”绑定类名”  
    v-bind:attributeName=“\[variable1,variable2,……\]”  
    案例（绑定类名）：  
    **以下为第一个案例源代码 html部分**

<!DOCTYPE html>
    <html lang="zh">
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    		<meta http-equiv="X-UA-Compatible" content="ie=edge">
    		<title>demo</title>
    		<link rel="stylesheet" type="text/css" href="css/v-bind.css" />
    	</head>
    	<body>
    		<div id="app">
    			<img v-bind:src="img" alt="">
    			<a 
    			v-bind:class="classname"
    			v-bind:href="url"
    			v-bind:title="title"
    			>{
       {inof}}</a>
    			<p v-if="show">显示这段文本1</p>
    			<p v-if="show1">不显示这段文本1</p>
    			<p v-show="show2">显示这段文本2</p>
    			<p v-show="show3">不显示这段文本2</p>
    			<button @click="hide">点击隐藏</button>
    		</div>
    	</body>
    </html>
    <script src="../vue10.9练习/js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/v-bind.js" type="text/javascript" charset="utf-8"></script>

**以下为第一个案例源代码 css部分**

/* 代码初始化 */
    *{
    	margin: 0;
    	padding: 0;
    }
    a{
    	text-decoration: none;
    }
    li{
    	list-style: none;
    }
    /* 代码主体 */
    #app{
    	margin: 100px auto 0;
    	width: 600px;height: 600px;
    	text-align: center;
    	border: 1px solid grey;
    }
    #app a{
    	display: block;
    	width: 200px;height: 50px;
    	padding: 5px 10px;
    	border: 1px solid transparent;
    	margin: 100px auto;
    	font-weight: bold;
    	font-size: 45px;
    	line-height: 50px;
    }
    #app a:hover{
    	border: 1px solid black;
    	border-radius: 5px;
    }

**以下为第一个案例源代码 js部分**

var app = new Vue({
    	el:"#app",
    	data:{
    		url:'https://www.baidu.com',
    		img:'https://www.baidu.com/img/bd_logo1.png',
    		classname:'one two three',
    		inof:'百度一下',
    		title:'百度一下 你就知道',
    		show:true,
    		show1:false,
    		show2:true,
    		show3:false
    	},
    	methods:{
    		hide:function(){
    			this.show =false;
    		}
    	}
    });

**基本指令v-if**

*  指令主要职责就是当表达式值改动时，相应的将某些行为应用到DOM上，以v-if为例  
    v-if指条件性渲染，为true时渲染DOM，否则不进行渲染：  
    ![在这里插入图片描述][2019101018301410.png]  
    当数据show为true时，p元素会被插入，为false时则会被移除。
 *  数据驱动DOM是Vue.js的核心理念，所以尽量避免直接操作DOM，只需要维护关注数据即可，DOM的事Vue会进行处理。  
    **基本指令v-show**
 *  v-show也是指条件性渲染，用法与v-if类似：  
    不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]  
    **v-show与v-if**
 *  vue中显隐方法常用两种，v-show和v-if，但这两种是有区别的  
    ![在这里插入图片描述][20191010183136602.png]  
    ![在这里插入图片描述][20191010183143107.png]  
    ![在这里插入图片描述][20191010183150199.png]  
    ![在这里插入图片描述][20191010183154831.png]
 *  一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。  
    **基本指令v-on**
 *  v-on： @方法名  
    v-on用于绑定事件监听器，实现一些交互功能。如下所示  
    语法：v-on:事件类型=”方法名”  
    ![在这里插入图片描述][20191010183237758.png]  
    表达式可以是方法名，方法写在methods属性内，且是函数形式，函数内的this指向实例本身，因此可以通过this.xxx来访问修改数据。
 *  在button按钮上绑定事件，除了click还可以是其他事件类型，例如dblclick、keyup、mouseover等。
 *  v-on表达式  
    语法：v-on:事件类型=”内联语句”  
    表达式除了方法名，也可以是内联语句
 *  建议将事件处理放到methods里声明一个方法，提高可读性与维护性。
 *

**v-on修饰符**

*  以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。  
    ①.stop：阻止事件的传递，即阻止事件向上冒泡。  
    ![在这里插入图片描述][20191010183357315.png]  
    ![在这里插入图片描述][20191010183403413.png]  
    ②.prevent：阻止对象的默认行为。.prevent会调用 event.preventDefault() 即取消事件的默认动作。  
    ![在这里插入图片描述][20191010183419572.png]  
    ![在这里插入图片描述][20191010183424440.png]
 *  v-on修饰符  
    .capture：使用事件捕获机制  
    ![在这里插入图片描述][20191010183445147.png]  
    .self：当事件在该元素自身触发时执行相应的事件处理程序，在该元素的子元素上不触发。  
    ![在这里插入图片描述][20191010183456537.png]  
    因为父级点击事件被修饰符绑定，只有在直接点击到父元素 div ，事件才会被触发。  
    即使点击了它的子元素触发了子元素的事件，按照事件冒泡原理，父元素的事件应当被触发，但是因为事件的触发源并不是事件绑定的元素本身，所以父元素事件不会被触发。
 *  v-on修饰符  
    .once：绑定的事件只能触发一次。  
    ![在这里插入图片描述][20191010183520418.png]  
    keyup.keyCode键值修饰符，用来监听键盘事件。可以通过按键名称来监听，也可以自定义按键名称（键盘修饰符及自定义键盘修饰符）  
    ![在这里插入图片描述][2019101018353157.png]  
    ![在这里插入图片描述][20191010183535739.png]  
    ![在这里插入图片描述][20191010183541899.png]

### v-on修饰符小结 ###

*  （1）.stop冒泡事件修饰符，阻止事件向上冒泡
 *  （2）.prevent默认事件修饰符，阻止对象的默认行为
 *  （3）.capture捕获事件修饰符，使用事件捕获机制
 *  （4）.self自身事件修饰符，只当事件是从事件绑定的元素本身触发时才触发回调
 *  （5）.once一次性事件修饰符，绑定的事件只能触发一次
 *  （6）keyup.keyCode键值事件修饰符，用来监听键盘事件（键盘修饰符以及自定义键盘修饰符）  
    ![在这里插入图片描述][20191010183639716.png]  
    **methods选项-代理方法**
 *  代理方法调用：  
    Vue.js将methods里的方法也代理了， 所以可以像访问Vue数据一样来调用方法。  
    ![在这里插入图片描述][20191010183704192.png]  
    ![在这里插入图片描述][20191010183708134.png]  
    在hide方法里，直接通过this.hide\_p()调用了hide\_p()函数。这样只是一种写法，具体应用场景后续结合生命周期讲解。

## 拓展：动态属性参数 ##

*  2.6版本新增：  
    从 2.6.0 开始，可以用方括号括起来的 JS表达式作为一个指令的参数，如下所示动态绑定title属性， 实例有一个 data 属性 attributeName，其值为 “title”，那么这个绑定将等价于 v-bind:title：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]  
如有疑问或者问题请留言练习小编！！！！  
感谢来访！！！

[2019101018301410.png]: /images/20230601/eb29b79bc20346f3a841eb4fbea52951.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]: /images/20230601/14fc48a1dbb444139ce3205a0731ccdd.png
[20191010183136602.png]: /images/20230601/854bc896d5ba482abc67077beb01ddb8.png
[20191010183143107.png]: /images/20230601/51f210d922bc41e58021320c37aea5a9.png
[20191010183150199.png]: /images/20230601/e2db962581564c8ba1a89c05a7e38410.png
[20191010183154831.png]: /images/20230601/e5820689c7f44edab547e3d50d3fca36.png
[20191010183237758.png]: /images/20230601/bcadf1c11f044e88b45f97a821a98986.png
[20191010183357315.png]: /images/20230601/b6c1302cbc7640c096d2a9ca4c43965b.png
[20191010183403413.png]: /images/20230601/f0ce09e305dd4dc3bfce5b739eeccf7e.png
[20191010183419572.png]: /images/20230601/a14ed106ff824b6e8ff2a63f96aa8242.png
[20191010183424440.png]: /images/20230601/35150f76571a4fcf942cdfb7fc7fa8b3.png
[20191010183445147.png]: /images/20230601/fa6eb0a3dcaa48cda2b22f3bd0abc08a.png
[20191010183456537.png]: /images/20230601/bc98c3da23c04ee3be1619f7a3652126.png
[20191010183520418.png]: /images/20230601/eba5ec4191974c3dba49d63e95454b41.png
[2019101018353157.png]: /images/20230601/56980d6e15314d5cb18bb4522082d41c.png
[20191010183535739.png]: /images/20230601/f2507e3562264b14a52480979b6cce8b.png
[20191010183541899.png]: /images/20230601/56a572d942674ec3b7ae594e01c09bdf.png
[20191010183639716.png]: /images/20230601/0e55e14e5b9840a19f9f3965034242a8.png
[20191010183704192.png]: /images/20230601/4ae66ea045974eb3815eb4671b7efc4b.png
[20191010183708134.png]: /images/20230601/2785c7a8494c478f9651e0221a483497.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]: /images/20230601/4ebefe7a75d44951987fce45076dc818.png