Vue基础之Vue的模板语法

时间 2020-12-08

标签 javascript css html vue java app dom ide 函数栏目 JavaScript 繁體版

原文原文链接

Vue基础之Vue的模板语法

数据绑定

01 数据绑定最多见的形式就是使用插值表达式（两个大括号!）【也就是小胡子语法！mustache】

<body>
	<!-- Vue.js的应用能够分为两个重要的组成部分
	一个是视图!
	另外一个是脚本!！ -->
	<!-- 下面的就是视图！ -->
	<div id="app">
		<h1>{{message}}</h1>
	</div>
	<!-- 下面的就是脚本！ -->
	<script type="text/javascript">
	// 
		
	var app = new Vue({
		
		el:'#app', // 这个就是你要操做的元素！
		data: {
			message: 'lvhang'
		} // data用于保存数据！插值表达式！咱们在视图中声明了那些变量， 就须要在data中注册同名的变量，而且对变量进行赋值！
		
	}) 
	</script>

</body>

02 经过便用v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留这会影响到该节点上的其它数据绑定：

<body>
		<div id="app">
			<h1 v-once>{{message}}</h1>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					message: 'lvhang!'
				}
			})
			app.message = 'lvchengcxin'
		</script>
	</body>

如何输出原始的HTML

v-html

<body>
		<div id="app">
			未加v-html属性！
			<div id="">
				<h2>{{message}}</h2>
			</div>
			加上v-html属性！
			<div id="">
							<h2 v-html="message"></h2>
						</div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					message: '<h2 style="color: red;">lvchengxin</h2>'
				}
			})
		</script>
	</body>

使用Vue的语法为HTML绑定属性！

v-bind

<body>
		<div id="app">
			<!-- 这样就能够为某一个元素动态的绑定属性了!！ -->
			<div id="" v-bind:class="dynamicId">
				v-bind:某一个标签具备的属性="某一个变量的值"
				栗子：
				v-bind:class"dynamicId" 就是为当前的标签绑定一个class属性！
			</div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					message: 'lvhang',
					dynamicId: 'app2'
				}
			})
		</script>
		<style type="text/css">
			/* 咱们在为你上面绑定的元素添加一个样式! */
			.app2 {
				color: red;
			}
		</style>
	</body>

在模板语法中使用JavaScript表达式

01 变量的算术运算！

<body>
		<div id="app">
			<p>{{number1 + 10}} 结果为11</p>
			<p>{{ ok ? 'YES' : 'NO' }} 
			<br />三元表达式的判断! ok 是一个变量  类型是 布尔类型！要在data里面进行定义!
			</p>

			<p>进行复杂的函数运算！<br />b
			在Vue的表达式中能够彻底支持JavaScript的表达式!<br />			{{ message.split('').reverse().join('') }}</p>

			<div v-bind:id="'list-' + id"></div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					message: 'lvhang',
					dynamicId: 'app2',
					number1: 1,
					ok: 3 < 2,
					message: 'lvhang'
				}
			})
		</script>

	</body>

指令

指令（Directives）是带有v-前缀的特殊特性。指令特性的值预期是单个JavaScript表达式指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地做用于DOM

指令的参数!

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

指令的修饰符！

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

<body>
<div id="app">
	<!-- 指令（Directives）是带有v-前缀的特殊特性。指令特性的值预期是单个JavaScript表达式 -->
	<!-- （v-for是例外状况，稍后咱们再讨论），指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地做用于DOM，回顾咱们在介绍中看到的例子： -->
	<!-- 这里，v-if指令将根据表达式seen的值的真假来插入移除<p>元素. -->
	<p v-if="seen">如今你看到我了</p>
	<!-- 一些指令可以接收一个“参数”，在指令名称以后以冒号表示。例如，v-bind 指令能够用于响应式地更新 HTML attribute： -->
	<a v-bind:href="url">...</a>
	<div @click="click1">
		<div @click.stop="click2">
			click me
		</div>
	</div>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		seen : false,
		url : "https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4"
	},
	methods:{
		click1 : function () {
			console.log('click1......');
		},
		click2 : function () {
			console.log('click2......');
		}
	}
});
</script>
<style type="text/css">

</style>
</body>

Vue基础之Vue的模板语法

Vue基础之Vue的模板语法

数据绑定

01 数据绑定最多见的形式就是使用插值表达式（两个大括号!）【也就是小胡子语法！mustache】

02 经过便用v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留这会影响到该节点上的其它数据绑定：

如何输出原始的HTML

v-html

使用Vue的语法为HTML绑定属性！

v-bind

在模板语法中使用JavaScript表达式

01 变量的算术运算！

指令

指令（Directives）是带有v-前缀的特殊特性。指令特性的值预期是单个JavaScript表达式 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地做用于DOM

指令的参数!

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

指令的修饰符！

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

指令（Directives）是带有v-前缀的特殊特性。指令特性的值预期是单个JavaScript表达式指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地做用于DOM