05vue_模板语法_缩写

布满荆棘的人生 2022-05-31 10:45 201阅读 0赞

v- 前缀作为vue的属性提示（因为，vue是利用HTML的自定义属性，vue的属性都是以“v-”开头的），用来识别模板中 Vue 特定的属性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue.js 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：  
  
  
v-bind 缩写 是冒号

v-on 缩写是 @

### 代码： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<style type="text/css">
    		[v-cloak] {
    		  display: none;
    		}
    	</style>
    	<body>		
    		<div id="app1">			
    			<input type="button" value="测试" @click="func()" />
    			<img :src="imgsrc" :style="imgcss" />			
    		</div>
    	</body>
    </html>
    <script type="text/javascript" src="vue.min.js" ></script>
    <script type="text/javascript">
    /*
    v-bind：的缩写是冒号
    v-on的缩写是@
    */
    
    let v1 = new Vue({
    	el:"#app1",
    	data:{
    		imgsrc:"img/timg2.jpg",
    		imgcss:{"width":"120px","height":"80px"}
    	},
    	methods:{
    		func:function(){
    			alert('点击了按钮');
    		}
    	}
    });
    
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，201人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue模板语法

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

阳光穿透心脏的1/2处/ 2022年11月01日 13:41/ 0 赞/ 198 阅读

相关 vue模板语法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

比眉伴天荒/ 2022年10月27日 01:38/ 0 赞/ 205 阅读

相关 VUE模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的

梦里梦外;/ 2022年09月13日 04:16/ 0 赞/ 215 阅读

相关 05vue_模板语法_缩写

v- 前缀作为vue的属性提示（因为，vue是利用HTML的自定义属性，vue的属性都是以“v-”开头的），用来识别模板中 Vue 特定的属性。当你在使用 Vue.js

布满荆棘的人生/ 2022年05月31日 10:45/ 0 赞/ 202 阅读

相关 Vue_模板语法

1.插值表达式：\{ \{\}\} 2.v-text=“name” ：该指令指向的“name”并不是字符串。它指的一定是JS的表达式 3.v-html: 指向实例中的数据

布满荆棘的人生/ 2022年05月22日 13:20/ 0 赞/ 313 阅读

相关 vue模板语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。插值： 1：文本最常见的数据绑定形式：使用 \{

柔光的暖阳◎/ 2022年05月10日 05:22/ 0 赞/ 406 阅读

相关 VUE模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范

痛定思痛。/ 2022年03月27日 13:14/ 0 赞/ 310 阅读

相关 Vue 模板语法

[目录][Link 1] -------------------- 1. 前言一开始我一直以组件化的思维去学习Vue，但学习的效果不是很有效，生出了很多

忘是亡心i/ 2022年02月23日 05:24/ 0 赞/ 286 阅读

相关 vue--模板语法

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" conte

ゝ一纸荒年。/ 2021年09月29日 06:06/ 0 赞/ 399 阅读

相关 Vue模板语法

本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔

绝地灬酷狼/ 2021年09月20日 01:10/ 0 赞/ 461 阅读