vue.js框架 2（模板语法）

超、凢脫俗 2023-10-08 12:08 48阅读 0赞

#### vue.js框架 ####

*   *   *  1、v-指令
         *  2、methods
         *  3、事件修饰符
         *  4、样式

#### 1、v-指令 ####

<table> 
 <thead> 
  <tr> 
   <th>v-</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>v-model</td> 
   <td>双向绑定，即其中一方改变值，另一方也随之改变</td> 
  </tr> 
  <tr> 
   <td>v-bind:</td> 
   <td>(绑定元素)其中一种写法，v-bind可以简写为：,v-bind:会把=后面的当js代码处理</td> 
  </tr> 
  <tr> 
   <td>v-on</td> 
   <td>绑定事件，v-on可以简写为@</td> 
  </tr> 
  <tr> 
   <td>v-html</td> 
   <td>渲染html代码</td> 
  </tr> 
  <tr> 
   <td>v-cloak</td> 
   <td>可以设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。</td> 
  </tr> 
  <tr> 
   <td>v-text</td> 
   <td>和v-cloak差不多可以解决闪烁问题，功能和{ { }} 一致</td> 
  </tr> 
  <tr> 
   <td>v-for</td> 
   <td>迭代</td> 
  </tr> 
  <tr> 
   <td>v-if</td> 
   <td>重新创建或删除元素</td> 
  </tr> 
  <tr> 
   <td>v-show</td> 
   <td>切换元素的display：none样式</td> 
  </tr> 
  <tr> 
   <td>…</td> 
   <td>…</td> 
  </tr> 
 </tbody> 
</table>

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

<body>
    <script src="vue.min.js"></script>
    <div id="app">
        <div v-html="message"></div>
    </div>
    	
    <script>
    new Vue({
         
      el: '#app',
      data: {
         
        message: '<h1>v-html输出的标签</h1>'
      }
    })
    </script>
    </body>

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

<body>
    <script src="vue.min.js"></script>
    
    <div id="app">
      <label>修改颜色</label>
      <input type="checkbox" v-model="use">
      <br>
      <div v-bind:class="{
         'class1': use}">看我的颜色</div>
    </div>
        
    <script>
    new Vue({
         
        el: '#app',
      data:{
         
          use: false
      }
    });
    </script>
    </body>

v-cloak例：当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。

<html>
    	<head>
    		<meta charset="utf-8">
    		<script src="vue.js"></script>
    		<style>
    			[v-cloak]{
         
    				display: none;
    			}
    		</style>
    	</head>
    	<body>
    
    		<div id="app">
    			<p v-cloak>{
       { message }}</p>
    		</div>
    
    		<script>
    			new Vue({
         
    				el: '#app',
    				data: {
         
    					message: '你好vue.js!'
    				}
    			})
    		</script>
    	</body>

v-text例：  
![在这里插入图片描述][20200313164412694.png]  
v-for：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70]  
v-on：  
![在这里插入图片描述][20200313195151753.png]  
v-if 、v-show  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 1]

#### 2、methods ####

methods与el、data同级，里面定义当前vue实例所有可用方法  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 2]  
在methods可以把方法简写为 **方法名（）\{\}**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 3]  
在同一个vue实例里用this拿data里面的数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 4]  
如果有两层函数，要获取this，可以这样  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 5]  
也可以使用=>调用this  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 6]

#### 3、事件修饰符 ####

![在这里插入图片描述][20200313173724101.png]  
.stop  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 7]  
.prevent  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 8]  
.capture  
![在这里插入图片描述][20200313180531941.png]  
.self  
(和.stop的区别是，self只阻止当前标签的冒泡)  
![在这里插入图片描述][20200313180906728.png]  
.once  
![在这里插入图片描述][20200313181158429.png]

#### 4、样式 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 10]  
![在这里插入图片描述][20200313190443479.png]

[20200313164412694.png]: https://img-blog.csdnimg.cn/20200313164412694.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200313190721667.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[20200313195151753.png]: https://img-blog.csdnimg.cn/20200313195151753.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020031319231739.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200313170446163.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200313172332544.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200313172453452.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200313172910215.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200313173030877.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[20200313173724101.png]: https://img-blog.csdnimg.cn/20200313173724101.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200313174046521.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200313174228428.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[20200313180531941.png]: https://img-blog.csdnimg.cn/20200313180531941.png
[20200313180906728.png]: https://img-blog.csdnimg.cn/20200313180906728.png
[20200313181158429.png]: https://img-blog.csdnimg.cn/20200313181158429.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200313185830731.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200313190254331.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FfX2ludF9f,size_16,color_FFFFFF,t_70
[20200313190443479.png]: https://img-blog.csdnimg.cn/20200313190443479.png