vue.js 模板语法（vue 一）

最新推荐文章于 2023-09-18 23:32:51 发布
最新推荐文章于 2023-09-18 23:32:51 发布
阅读量625 收藏 2
点赞数 2
分类专栏： 前端 vue.js
随意转载。
本文链接：https://blog.csdn.net/dengjili/article/details/86678852
版权

vue是一个类似于占位符的数据引擎，简单理解即为数据替换，先这里理解着

开发中js地址

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

入门例子

  • el为作用域，即有效范围
  • data 被替换的数据
  • methods 函数方式，在js中支持函数式编程，可以理解函数与变量为同一体
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js 起步</title>
</head>
<body>
	<h3>Vue.js 起步</h3>

	<div id="vue_app">
		<h4>url : {{url}}</h4>
		<h4>{{details()}}</h4>
	</div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el : '#vue_app',
		data : {
			url : "www.google.com"
		},
		methods : {
			details : function() {
				return this.url + " - 函数返回参数";
			}
		}
	})
	// alert(vm.url);
	// alert(vm.details());
</script>
</html>

测试结果

在这里插入图片描述

插值

文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
html

<span>Message: {{ msg }}</span>
原始 HTML

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

<span v-html="rawHtml"></span>
特性

Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>
<button v-bind:disabled="isButtonDisabled">Button</button>
使用 JavaScript 表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>
完整例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js 模板语法</title>
</head>
<body>
	<div id="vue1">
		<h3>普通文本</h3>
		<h4>订单 : {{orderId}}</h4>
		<h3>html,需要借助 v-html属性</h3>
		<!-- <div v-html="htmlText"/> -->
		<h3>html属性,需要借助 v-bind属性</h3>
		<div v-bind:id="'list-' + id">test</div>
		<button v-bind:disabled="isButtonDisabled">Button</button>
		<h3>JavaScript 表达式支持(不支持语法)</h3>
		{{ number + 1 }} 
		{{ ok ? 'YES' : 'NO' }} 
		{{message.split('').reverse().join('') }}
	</div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el : '#vue1',
		data : {
			orderId : '2018017897987',
			htmlText : '<h4>支持html标签哟</h4>',
			id : 'id-1234',
			isButtonDisabled : true,
			number:100,
			ok: false,
			message:'fuck s'
		}
	});
</script>
</html>

测试结果
在这里插入图片描述

指令

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾我们在介绍中看到的例子：

<p v-if="seen">现在你看到我了</p>

这里，v-if指令将根据表达式 seen 的值的真假来插入/移除 <p>元素。

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 特性：

<a v-bind:href="url">...</a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。

另一个例子是 v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">...</a>
修饰符

这个功能暂时搞不懂，不看
修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">...</form>

在接下来对 v-on 和 v-for 等功能的探索中，你会看到修饰符的其它例子

完整例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js 模板语法</title>
</head>
<body>
	<div id="vue2">
		<p v-if="seen">现在你看到我了</p>
		<a v-bind:href="url">测试url</a>
		<button v-on:click="doSomething">点我一下</button>
	</div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
	new Vue({
		el : '#vue2',
		data : {
			seen : true,
			url: 'https://www.google.com.hk/?gws_rd=ssl'
		},
		methods: {
			doSomething : function() {
				alert('get。。。');
			}
		}
	});
</script>
</html>

测试结果
在这里插入图片描述

缩写

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

v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js 模板语法</title>
</head>
<body>
	<div id="vue2">
		<a :href="url">测试url</a>
		<button @click="doSomething">点我一下</button>
	</div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
	new Vue({
		el : '#vue2',
		data : {
			url: 'https://www.google.com.hk/?gws_rd=ssl'
		},
		methods: {
			doSomething : function() {
				alert('get。。。');
			}
		}
	});
</script>
</html>

测试结果
在这里插入图片描述

dengjili
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
收集22种开源Vue模板和主题框架「干货」
2401_84447390的博客
05-03 324
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Vue.js 模板语法
12-13
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值 文本 数据绑定最...
vue核心语法(超详细)
小罗的博客
03-09 6309
全称是Vue.js或者Vuejs。 基于标准HTML，CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型。
vue脚手架_基础API、Vue基本概念、vue-cli 脚手架、vue指令
weixin_65100963的博客
05-04 945
vue脚手架_基础API 安装：vue-devtools 学习和调试vue必备之利器 - 官方插件 安装： 打开Chrome浏览器 =>点击浏览器右上角小图标，按图示操作 2.进入扩展程序菜单 => 把vue-dev-tool-5.3.crx文件拖入网页中进行添加安装 3.安装完成后，固定显示插件 Vue基本概念 Vue是什么 vue是一个渐进式的javascript框架 库: 封装的属性或方法 (例axios.js, jquery.js)， 框架: 拥有自己的规则和元素, 比库强大
Vue基础之模板语法介绍
最新发布
m0_73647713的博客
09-18 894
上篇我分享了关于Vue的入门，简单的入了个门。本篇文章将要分享的内容为Vue的模板语法。
vue基础语法
若有所执，必有所成，心之所向，必显光芒
07-04 736
内容渲染指令，属性绑定指令，事件绑定，事件修饰符，按键修饰符，双向绑定，列表渲染，v-for语法
四、Vue.js 模板语法
走在bug的路上
09-26 4744
● 应用程序实例 ● 插值 ● 指令
Vue.js的模板语法详解
10-15
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。这篇文章重点给大家介绍Vue.js的模板语法，感兴趣的朋友跟随小编一起看看吧
vue.js入门教程之基础语法小结
10-21
Vue.js 是一款轻量级的前端JavaScript框架，其核心特性在于数据驱动的视图更新，使得开发者能够更方便地管理应用程序的状态。在这个“vue.js入门教程之基础语法小结”中，我们将深入探讨Vue.js的基本语法，帮助初学...
Vue.js学习笔记之常用模板语法详解
10-19
本篇文章主要介绍了Vue.js学习笔记之常用模板语法详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue入门
BAIQW的博客
07-07 676
vue是一个构建用户界面UI的渐进式javascript框架，渐进式的框架是指可以一步一步的由浅入深的去使用这个框架，该框架可以逐步引入项目。作者：尤雨溪vue官网 https://cn.vuejs.org/1.体积小 压缩后33k左右，体积小意味着下载速度很快。运行快，数据传输快。2.更高的运行效率 基于虚拟dom，一种预先通过javascript进行各种计算，把最终的DOM操作计算出来并进行优化的技术。所谓虚拟dom指的是对真实dom的一种模拟。相对于直接操作真实dom，我们构建一棵虚拟的dom树，将各
漂亮的vue.js主页模板，非常有用-Vue.js开发
05-27
一个非常漂亮的vue.js主页模板，非常有用。Vue Nice主页DEMO在这里关于粒子-bg-vue库该项目使用react粒子背景组件库https://github.com/lindelof/particles-bg-vue。 非常简单。 任何人都可以成为火枪手。 说明该项目来自https://github.com/mtobeiyf/vuepress-homepage，感谢作者的帮助，我进行了一些修改和调整。 入门在此处查看完整的文档:backhand_index_pointing_right:指南确保已安装Node.js和yarn
【Vue】template 模板用法
热门推荐
qq_45677671的博客
03-30 5万+
文章目录一、在HTML5中二、在JavaScript中三、在Vue中写在vue构造器里写在template标签里写在script标签里（官方推荐） 一、在HTML5中 template标签：其内容隐藏在客户端之外 该内容在加载页面是不会呈现，不会渲染出任何信息 相当于自带属性：template {display: none;} <body> <template> <!-- 该标签内容是不可见的 --> 内容模板元素 </
Vue.js模板语法
chunwujue9927的博客
05-18 198
模板语法 Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。 在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合相应系统，在应用状态改变时，Vue能...
Vue的字符串模板
VirgoYellow 的专栏
12-05 1万+
这两天看Vue的时候，里面提到字符串模板和非字符串模板，搞的有点儿懵圈，特地查了下，也记录下，免得后面再发生这样的事儿（记性不太好，硬伤呀。。。） 以下是教程里的原文： HTML 特性是不区分大小写的。所以，当使用的不是字符串模板时，camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case (短横线分隔式命名)： Vue.compon
vue.js基本语法
bird_tp的博客
11-08 2410
Vue.js的指令是以v-开头的 1.v-if: v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下： v-if="expression",expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。 2.v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它...
VUE.js第三课模板语法
weixin_34409357的博客
05-25 156
Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值...
二十八、Vue之template占位符
panchang199266的博客
04-29 7388
注意：这里的<template>与组件中的<template>不是一个概念，这里的<template>占位符相当于小程序的<block>节点！   当我们需要在遍历循环时，将数据绑定到多个Dom节点，这种情况下使用<template>占位符将极大的简化代码： <template v-for="(item, index) of l...
Vue模板语法
HiterCoder
04-10 523
1、Vue，渐进式Javascript框架。 　　渐进式的含义理解，从左到右递进关系，声明式渲染（最简单的模式）->组件系统（组件化）->客户端路由（局部更新，浏览器的历史回退功能）->集中式状态管理（Vuex做状态管理）->项目构建（大型项目，前后端分离）。 1 <!DOCTYPE html> 2 <html> 3 &lt...
vue.js的模板语法
05-26
Vue.js的模板语法使用了一种称为“Mustache”的语法来插入数据和表达式，同时也支持一些指令来处理 DOM 元素和组件。下面是一些常用的模板语法： 1. 数据绑定 使用双大括号 {{ }} 插入数据，如： ``` <span>{{ message }}</span> ``` 2. 指令 使用 v- 前缀来添加指令，如： - v-if: 根据表达式的值条件性地渲染元素。 - v-for: 遍历数组或对象，渲染元素列表。 - v-bind: 动态地绑定一个或多个特性，缩写为 :。 - v-on: 绑定事件监听器，缩写为 @。 如： ``` <button v-if="showBtn" v-bind:class="btnClass" v-on:click="handleClick">Click me</button> <div v-for="item in items" :key="item.id">{{ item.name }}</div> ``` 3. 表达式 可以在双大括号 {{ }} 中使用 JavaScript 表达式，如： ``` <span>{{ message + ' world' }}</span> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值