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
喜欢就支持一下吧
点赞0
分享
评论 抢沙发

请登录后发表评论