跟着大佬技术胖学vue系列
每天学一点,自己总结一下。记录一个萌新的爬坑之路,如果有错欢迎各位大佬指正O(∩_∩)O
v-bind
v-bind指令用于绑定html标签中的属性,在日常开发中经常用到的指令之一。
bind绑定一个img的sre属性
<p> <img v-bind:src="imgSrc" alt=""></p>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
imgSrc: 'https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top-e3b63a0b1b.png',
}
})
</script>
‘v-bind:’指令也可以简写为‘:’
bind绑定一个class属性
首先定义class
<style>
.classA {
color: red;
}
</style>
<div :class="classA"> hello world</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
classA: 'classA',
}
})
</script>
bind用动态属性值来确定是否加载class
<div :class="{classA:istrue}"> hello world</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
istrue: true,
}
})
</script>
bind点击切换class
<div :class="{classA:istrue}">hello world</div>
<input type="checkbox" id="oneClass" v-model="istrue">
<label for="onClass">{{istrue}}</label>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
istrue: true,
}
})
</script>
bind绑定多个class
<div :class="classArr">hello world</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
classArr: ['classA', 'classB'],
}
})
</script>
bind三元表达式
<div :class="classArr">hello world</div>
<div :class="istrue==true?classA:classB">hello world</div>
<input type="checkbox" id="oneClass" v-model="istrue">
<label for="onClass">{{istrue}}</label>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
istrue: true,
}
})
</script>
bind绑定style
<div :style="styleBind">hello world</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
styleBind: {
color: 'blue',
fontSize: '30px',
}
}
})
</script>
这里注意一下一个坑,font-size在css中用-链接但是vue不支持这种规则,所以要写为驼峰形式fontSize
v-pre
v-pre跳过vue的预编译显示原始值
<div>{{message}}</div
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
message: "hello Archer"
}
})
</script>
v-once
在第一次DOM时进行渲染,渲染完成后视为静态内容,跳出以后的渲染过程。
<div v-pre>{{message}}</div>
<div>{{message}}</div>
<div v-once>{{message}}</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
message: "hello Archer"
}
})
</script>
v-cloak
在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用
<style>
[v-clock] {
display: none;
}
</style>
<div v-clock>{{message}} 页面全部加载完毕之后渲染</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
message: "hello Archer"
}
})
</script>
结语
每天记录一下学了什么,希望有所进步。萌新有说不清楚或者说错的地方欢迎大佬们吊打。??