1.插值:
1)文本–{{}}
2)HTML–v-html(慎用)。
更新元素的
在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。只在可信内容上使用innerHTML
。注意:内容按普通 HTML 插入 – 不会作为 Vue 模板进行编译。如果试图使用v-html
组合模板,可以重新考虑是否通过使用组件来替代。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>
请登录后发表评论
注册