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

最新推荐文章于 2023-06-17 23:00:15 发布

BeanInJ

最新推荐文章于 2023-06-17 23:00:15 发布

阅读量181

点赞数

分类专栏： javascript

@BeanInJ

本文链接：https://blog.csdn.net/a__int__/article/details/104843133

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

vue.js框架

1、v-指令

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

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例：
在这里插入图片描述
v-for：

v-on：

v-if 、v-show

2、methods

methods与el、data同级，里面定义当前vue实例所有可用方法
在这里插入图片描述
在methods可以把方法简写为 方法名（）{}

在同一个vue实例里用this拿data里面的数据

如果有两层函数，要获取this，可以这样

也可以使用=>调用this

3、事件修饰符

在这里插入图片描述
.stop

.prevent

.capture

.self
(和.stop的区别是，self只阻止当前标签的冒泡)

.once

4、样式

在这里插入图片描述

BeanInJ

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue.js框架 2（模板语法）

vue.js框架1、v-指令2、methods3、事件修饰符4、样式1、v-指令v-解释v-model双向绑定，即其中一方改变值，另一方也随之改变v-bind:(绑定元素)其中一种写法，v-bind可以简写为：,v-bind:会把=后面的当js代码处理v-on绑定事件，v-on可以简写为@v-html渲染html代码v-cloak可以设置样...
复制链接

扫一扫