vue01,插值表达式、基础指令、属性绑定、事件绑定及修饰符、样式绑定

最新推荐文章于 2021-04-15 09:04:53 发布
最新推荐文章于 2021-04-15 09:04:53 发布
阅读量185 收藏 1
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Function0zyn/article/details/115675703
版权

vue01,插值表达式、基础指令、属性绑定、事件绑定及修饰符、样式绑定

1. 插值表达式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>{
   {
   msg}}</h1>
			<p>{
   {
   n+100}}</p>
			<p>{
   {
   "今年"+age+"岁"}}</p>
			<p>{
   {
   arr[2]}}</p>  <!-- //表示的是数组的第三个元素 -->
			<p>{
   {
   a===10?"=10":"不等于10"}}</p>  <!--  三目运算符 -->
			<p>{
   {
   obj.age}}</p> <!--  对象 -->
		</div>
		<!-- {
   {
   }}是vue的一种模板语法，代表解析时遇见了这个符号中的表达式运行然后取到结果-->
		<!-- 普通插值表达式插入数据，在标签内使用{
   {
   }}插入js表达式：变量、函数调用、三目运算符-->
		<script type="text/javascript">
			new Vue({
   
				el:'#app',
				data:{
   
					msg:'hello',
					n:100,
					age:23,
					arr:[12,12,5],
					a:9,
					obj:{
   age:31}
				}
			})
		</script>
		<!-- 其他写法，原生写法
		 1.获取或者创建节点
		 2.给节点添加属性 innerHTML innerText
		 3.渲染（绘制或者回流）
		 -->
	</body>
</html>

代码运行结果
在这里插入图片描述

2. 基础指令

<body>
		<div class="app">
			<!-- 文本指令 -->
			<h1 v-cloak>{
   {
   msg}}
最低0.47元/天 解锁文章
Function0zyn
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue赋值样式_Vue 2.0的学习笔记：在Vue中使用样式
weixin_36316574的博客
12-23 283
到目前为止，学习Vue的时候也写了相当的示例，但老实说，这些示例在视觉上并没有什么吸引人的地方。今天我们将学习如何将样式运用到我们的元素中，让事情变得更加有趣。首先我们将通过将内联样式添加到HTML的元素中，其实也就是我们以前所说的内联样式。其实在学习v-bind的时候，我们已经或多或少的接触了，如何给元素添加内联样式或者绑定类名添加样式。但这可能不够系统，为了更好的学习这方面的知识，这篇文章专门...
Vue插值表达式和事件
qac的博客
01-25 570
文章目录01.Vue声明式渲染02.MVVM03.Vue使用相关问题04.插值表达式05.事件06.操作标签内容 01.Vue声明式渲染 <body> <div id="#app"> {{msg}} </div> <script src="js/vue.js"></script> <script> new Vue({ el:"#app", data:{ msg:"Hello!Vue" }
vue :class 动态绑定样式_Vue之路 | 03插值操作与Vbind
weixin_39718286的博客
11-25 244
点击左上方“熊吱”关注我们吧！1插值操作1、Mustache Mustache是胡子，胡须的意思，在Vue中，通过Mustache语法(双大括号)将data中的文本数据插入到HTML中。 Mustache语法可以是简单的语句，也可以是表达式，有很多种写法。 <div id="app"> <h2>{{message}}h2> ...
Vue插值及表达式绑定数据
Z94264426的博客
04-15 413
Vue插值及表达式绑定数据 1.插值有两种方式： (1).使用双大括号将数据编译成普通文本,并输出到插值的位置({{变量名}}) <body> <div id="app"> <!--1.插值{{变量名}}--> <p>{{msg}}</p> </div> </body> <script> var app=new Vue({ el:"#app",//可以是css选择器,例如：#ap
vue学习 （一 模板语法）
xia_zai_ya的博客
04-29 292
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架 使用Vue将helloworld 渲染到页面上 以上就是一个简单的vue使用。 1.差值表达式 上面就是一个差值表达式的应用，<div> {{ value }} </div> ,但是这样直接使用差值表达式会有一个小小的bug， 有文字闪动缺陷，因为vue会先把这个差值表达式先显示在...
Vue.js单向绑定和双向绑定实例分析
10-18
例如，在以下代码中，`message`是一个数据属性，`{{message}}`插值表达式在页面上显示这个属性的值。当`message`改变时，页面上的文本也会相应更新： ```html {{message}} var app = new Vue({ el: '#app', ...
vue基础入门源码-01
最新发布
05-10
8. **事件处理**：`v-on`可以绑定事件监听器，但Vue还提供了事件修饰符，如`.stop`、`.prevent`、`.capture`等，以实现更精细的事件控制。 9. **条件与循环结构**：学习如何在Vue中进行条件渲染和列表渲染，如使用`...
Vue01. Vue.js MVVM 基础.pdf_前端学习资料
09-01
- **模板语法与绑定**：Vue.js 的模板语法允许使用Mustache语法（{{ }}）进行文本绑定，还可以使用v-bind和v-on指令绑定元素属性和事件。 - **过滤器 Filter**：过滤器用于对数据进行转换，如`{{ message | ...
自写原生仿vue数据绑定和路由
04-28
这包括添加事件监听器、触发事件以及可能的事件修饰符（如阻止默认行为或阻止冒泡）。 最后，我们讨论路由。在Web应用中，路由是连接各个视图的关键。Vue Router是Vue.js官方的路由管理器，它使得页面跳转变得简洁...
Vue的土著指令和自定义指令实例详解
08-28
- `v-on`：用于绑定事件监听器，可以添加修饰符如`.stop`阻止冒泡，`.prevent`阻止默认行为等。 - `v-bind`：动态地绑定一个或多个属性，包括class和style，支持对象和数组语法，子组件的prop绑定需要预先声明。 ...
Vue-基本使用、模板语法(插值表达式、指令、事件绑定、属性绑定、样式绑定、分支循环结构)
qq_39206750的博客
12-11 749
Vue Vue14年发布、16年2.0版本、 特点():易用、灵活、高效 是一套用于构建用户界面的渐进式框架 vue使用基本步骤 <title>你好世界</title> </head> <body> <div id="app"> <div>{{msg}}</div> ...
Vue---插值表达式{{}}、v-text、v-html用法
GaoXiR的博客
12-25 1137
1、v-cloak: 标签属性能够解决插值表达式闪烁的问题，在style标签内设置[v-cloak]{display:none;} 2、插值表达式{{ 值 }}：在html标签中使用插值表达式{{ 值 }}，通过此方式可将data中的属性值以文本的形式显示在前端，插值表达式的前后都可以插入文本或者其他内容，在网页渲染时不会被覆盖，类似于占位符，同时它还有闪烁的问题需要配合v-cloak属性解决。 ...
Vue --- 区分vm.$data.msg、data.msg、vm.msg
JKR10000的博客
01-16 1973
上代码： <body> <div id="app"> {{msg}} </div> <script> let datas = { //声明一个名为data的对象 msg: "hello" } let vm = new Vue({ el: '#app', data: datas //把声明的date对象赋值给date属性 }) //现在，有三种方法可以获取到msg的值 console.log(datas
js插值法的使用_vue.js实现插入数值与表达式的方法分析
weixin_39640090的博客
12-20 708
本文实例讲述了vue.js实现插入数值与表达式的方法。分享给大家供大家参考，具体如下：vue.js在插入数值的时候有三种方式1、插入纯文本插入纯文本是最简单的方式，使用双大括号就能插入想要的值。{{ msg }}mustache也可以在属性中使用就能显示所需要显示的文本信息了。但是有时候，我们想要插入的html文本，这时候要怎么办呢？在插入html的时候有两种方式，一种是用三个大括号的形式，这种是...
vue day1 插值表达式 属性绑定
qq_42031243的博客
08-18 528
插值表达式： 在vue中插值表达式和Python中的jinja2语法有点相似，， 都是 {{ 数据 }} 以大括号的形式来进行的 <html lang="en"> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <meta charset="UTF-8"> <meta name="viewport" content
（八）vue.js插值与绑定
默守的博客
11-11 758
1.前言 在第一个vue应用中，我们说明了如何在网页模板中插入变量 即：{{ 变量名 }} 但是这种插入和innerText很像，即使我们插入一个网页标签，他也只会渲染位普通的文本，而不会像innerHTML一样渲染 如： 那么这里我们就来讲讲如何在网页模板以各种形式插入变量值。 2. {{ }} ：插入与绑定文本 （类似与innerText） 插入文本就是我们前面讲：{{…}}（双大括号），这...
vue中的插值表达式
wuliangfan的博客
07-18 6403
前言：在html页面上只能展示字符串，console.log()打印出的也是字符串，意味着都会调用toString()方法，但实际上控制台展示的既有数组又有对象等类型，那是由于浏览器会进行处理 用法： 使用在vue实例对象对应的DOM元素的html的正反标签之间 支持匿名变量 支持三目运算符 数值 支持四则运算 支持比较运算符 支持数值类型的一些内置方法 ...
vue插值表达式和数据绑定
缚己
01-24 1339
插值表达式 Vue 中的插值表达式类似模板引擎中的写法，通过 {{ value }} 的形式在打括号内填充数据。如下代码所示： <body> <!-- 插值表达式，类似模板引擎中的待填充数据 --> <div class="container">{{msg}}</div> <script src="../lib/vue.js"></script> <script> let v
Vue基础入门到组件开发全指南
- **双向数据绑定**：讲解Vue如何实现实时更新数据，以及模板语法的基础用法，包括插值表达式和指令。 3. **常用指令**： - 阐述各个重要指令的功能，如v-cloak隐藏初始状态、v-once只渲染一次、v-on用于处理用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值