vue指令
表达式
- 一些数值通过 运算获取 来取得的结果的式子
- 变量,多个变量,多个数值通过运算组成的内容
- v-指令名称 = 表达式(而不是普通字符串)
表达式的出现
表达式的值放在内容区可以,但不可以放在属性中去
不能使用 {{}}
语法,而是需要 指令
< div class=“box” >
{{x+y}}
< /div>
< script>
let box = new Vue({
el:".box",
data:{
x:4,
y:3,
}
})
< /script>
v-text
< h1 v-text = “text”>hello< /h1>
v-text的弊端 v-text
会填充整个 innerHTML
v-html
为了防止 xss
攻击,默认情况下输出是不会作为 html
解析的,通过 v-html
可以让内容作为 html
进行解析
< p v-html = “content”>< /p>
v-once
只渲染元素和组件一次,后期的更新不再渲染
< div v-once>
< h1>comment< /h1>
< p>{{msg}}< /p>
< /div>
v-pre
不需要表达式, 忽略这个元素和它子元素内容的编译
< span v-pre>{{ msg }}< /span>
v-if
- 改变的是元素的结构(渲染或者删除)
- 使用于:状态切换不频繁的情况
- v-if 和 v-else以及v-else-if 之间必须是连接的,中间不能出现其他元素
< div v-if = “islogin”> 欢迎登陆< /div>
// < p>haahh< /p>
< div v-else = “islogin”> 请登录< /div>
< script>
let box = new Vue({
el:".box",
data:{
islogin:true
}
})
// box.islogin = false
< /script>
v-show
- 改变的只有该元素的disp样式
- 使用于:数据的改变比较频繁
< div v-show = “islogin”>这是秘密< /div>
v-for
- 可以循环的数据:Array | Object | number | string | Iterable
< div id="app">
< ul>
< !-- of 和 in 在这里使用没有区别 -->
< li v-for = "user of users":key="user.id">
< input type="checkbox">
{{user.id}} - {{user.name}}
< /li>
< /ul>
< !-- 循环对象 -->
< div v-for="(val, name, index) in object">
< span>索引值:{{index}}< /span>
< span>值:{{val}},属性名:{{name}}< /span>
< /div>
< /div>
sort排序问题
-
值的排序循序发生改变的时候,值对应的数据一直在变,除此之外的不变
-
涉及到虚拟DOM的概念,这里的数据渲染在模板上,不是直接到DOM上
-
模板上数据先去了vdom上,最后数据才到HTML上
-
vdom 的机制,每次在加载过后会留存一份备份,之后再渲染时,与备份相对比,不一样的地方修改,一样的地方则立即渲染
app.users.sort((a,b)=>{
return Math.random()-0.5
})
- 解决方法: 我们可以通过
:key
属性,来给每个循环节点添加一个标识,达成像彼此绑定的关系
< ul>
< !-- of 和 in 在这里使用没有区别 -->
< li v-for = “user of users”:key=“user.id”>
< input type=“checkbox”>
{{user.id}} - {{user.name}}
< /li>
< /ul>
v-bind
- v-指令名称:参数 = “指令的值”
- 有的一些常用指令会有对应的缩写,
v-bind
对应的缩写为::
- 简写: :=> v-bind
< div id=“app”>
< div v-bind:class=“myclass”>< /div>
< div :id=“ID”>< /div>
< /div>
数组绑定—样式
-
数组写法
-
style 获取的是具体的样式
:class 获取的是类名
< div :class = "one">< /div> < div :style ="[style1,style2]">< /div>
对象写法
> < div :class = "{'box1':newbox,'box2':twobox}">< /div>
<script>
let app = new Vue({
el:"#app",
data:{
style1: {
width: '100px',
height: '100px',
background: 'green'
},
style2: {
border: '1px solid black'
},
one:"box",
newbox:true,
twobox:false
}
})
</script>
数据流
单项数据流
-
v-bind :单项数据绑定, 数据一改变就渲染到视图
-
v-model:双向数据绑定, 数据 => 视图, 视图 => 数据
-
不是所有的标签(组件)都支持 v-model
默认:交互元素(input , textarea, select)比如说用户能够点动的,用户能够输入的
不是所有的属性都支持 v-model -
v-model 只能绑定一个制定好的属性
支持的有:
input :value
textarea : value
select : selected -
非交互:div p img 等静态类标签(不需要统计信息的)
< div id="app">
<!-- 双向数据绑定 -->
<input type="text" v-model = "msg">
<div>{{msg}}</div>
<br />
<!-- 单项数据绑定 -->
<input type="text" :value = "msg2">
<div>{{msg2}}</div>
</div>