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

程序员文章站 2022-07-05 20:39:57

...

vue.js框架

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

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>