02-vue模板语法-十八叔

1.插值：

1）文本–{{}}

2）HTML–v-html（慎用）。

更新元素的 innerHTML。注意：内容按普通 HTML 插入 – 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。
在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。

3）表达式

双大括号{{}}中或者指令绑定的内容可以看做javascript的内容区域，支持js表达式的写法。

2.指令: 带有v-前缀的特殊属性。

v-bind:动态绑定属性

v-if:动态创建/删除

v-show:动态显示/隐藏

v-on: 绑定事件（click）

v-for:遍历

v-model:双向绑定表单

3.缩写

v-bind:src => :src 冒号是v-bind的缩写

v-on:click => @click @是v-on的缩写

补充：

:class 动态绑定class，支持对象语法和数组语法

:src 动态绑定图片地址

:style 动态绑定内联样式，支持对象语法和数组语法，css中的-连接符写法要改成驼峰写法（font-size=>fontSize）

条件渲染可以写分支

v-if

v-else-if

v-else

v-if条件为false时，template不会创建

v-show 条件为false时，隐藏template

列表渲染v-for

v-for=”item in arrList” :key=”item.id”

in,of都可以，没有区别。

需要绑定唯一的key值，用于跟踪每个节点的身份，从而重用和重新排序现有元素

数组的更新检测：

1）以下方法操作数组，可以检测变动

push(), pop(), shift(), unshift(), splice(), sort(), reverse()

2)使用以下方法操作数据，需要用新数组替换旧数组

filter(), concat(), slice(), map()

3)以下方法操作数组，不能检测变动

通过index值修改数组内容：vm.items[index] = newValue

解决方法：

使用Vue的set方法：Vue.set(example.items,index,newValue)

使用splice方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>02-vue语法</title>
		<script src="lib/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.myred {
				background-color: red;
			}
			.myyellow{
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="box">
			{{myname}}--{{myage}}
			<button type="button" @click="handleClick()">click</button>
			<div :class="whichColor">动态切换css</div>
			<div v-show="isShow">动态显示和隐藏</div>
			<div v-if="isCreated">动态创建和删除</div>
			

			
			<!-- v-for循环 -->
			<ul>
				<li v-for="(item,index) in datalist">{{item}}--{{index}}</li>
			</ul>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#box",
				data:{
					myname:"Karas",
					myage: '18',
					whichColor: 'myred',
					isShow: true,
					isCreated: true,
					datalist: ["1111","2222","3333","4444"]
				},
				methods:{
					handleClick(){
						console.log("click")
						this.myname = "Aireice"
						this.whichColor = "myyellow"
						this.isShow = !this.isShow
						this.isCreated = !this.isCreated
					}
				}
			})
		</script>
	</body>
</html>

文章版权归作者所有，未经允许请勿转载。

THE END