学习笔记3-Vue语法之指令2
程序员文章站
2022-05-16 18:33:35
...
上一篇学习笔记2-Vue语法，聊了些Vue对JS的语法支持，涉及到了指令，那指令是什么？为什么要有指令这个概念？
- 2014年Vue1.0x问世，它借鉴了当前热火的angular的一个概念： 指令
- 指令是用来操作DOM的。
- 指令其实就是封装的函数，这个函数绑定在元素身上，就可以获取元素，然后就可以操作这个元素了
- Vue也是MVC的衍生框架，所以它采用类似的方案
我们知道标签属性可以随意定义,但是Vue希望添加的属性有vue标识，所以vue给它自定义的属性加了一个表示：这个标识就是 v-
指令的封装思路
分析：v-html其实是封装的函数，只要绑点在元素上，就会执行些它里面的逻辑，给这个元素做些事情。
v-html相当于
function v-html(el,str){
el.innerHTML=str
}
v-html="info"当绑定data里的info,此时info相当于函数的参数，相当于给函数传了个实参
<body>
<div index=1 v-html="info"> </div>
</body>
<script>
new Vue({
el: '#app',
data: {
info: 'hahaha~'
}
})
</script>
自己使用的一些指令的小体会
vue这边给我们提供了一些已经封装好的常用指令，上一篇文章有提到，分析下自己使用的一些小体会：
-
数据展示的：
v-html: 非转义输出： 将xml类型数据解析
v-text 和 {{}} 结果是一样的，但是{{}} 有个短暂的{{}} 显示
PS：项目中； v-text 和 {{}}，我们选择 {{}} -
v-if的单路分支效果和 v-show 一样 ，有何区别呢？
-
对元素控制的形式
+v-if控制的元素的存在与否
v-show控制的事元素的display: none 属性 -
性能的差别：
当初始条件都为false时，v-show的初始渲染开销较高
当频繁切换时，v-if的切换开销较高 -
项目中：
频繁切换： v-show
切换不频繁; v-if
v-bind 单项数据绑定
- 作用: 将一个数据赋值给已有属性
利用单项数据绑定实现双向数据绑定效果
<body>
<div id="app">
<input type="text" :value = "val" @input = "change">
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
val: '预祝大家国庆节快乐'
},
methods: {
change ( e ) {
this.val = e.target.value
}
}
})
</script>
Class绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求
<style>
.size {
width: 100px;
height: 100px;
}
.bg {
background: red;
}
.bg1 {
background: blue;
}
</style>
</head>
<body>
<div id="app">
<h3>格式：vue-class-对象 形式</h3>
<p class="size bg">1</p>
<p :class="{size:true,bg:5>3}">2</p>
<p :class="{size:flag,bg:flag}">3</p>
<!-- 拓展 -->
<p :class="{[size]:true,[bg]:true}">6</p>
<h3>格式：vue-class-数组 形式</h3>
<!--['size','bg']数组里为字符串，代表style里写的样式 -->
<p :class="['size','bg']">4</p>
<!--[size,bg]数组里为data里的两个变量，变量赋值为了style里写的样式 -->
<p :class="[size,bg]">5</p>
<!-- 三目 -->
<p :class="[size,flag? bg:'bg1']">8</p>
<p :class="[size,flag? bg:bg1]">9</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
flag: true,
size: 'size',
bg: 'bg',
bg1: 'bg1'
}
})
</script>
Style 绑定
<body>
<div id="app">
<p style = "width: 100px;height: 100px;background: purple"></p>
<h3> 样式绑定 - 对象 </h3>
<p :style = "{
width: '100px',
height: '100px',
background: 'green'
}"></p>
<p :style = "style"></p>
<p :style = " 5 > 3 &&style"></p>
<h3> 样式绑定 - 数组 </h3>
<p :style = "[{width: '100px',height: '100px'},{ background: 'yellow'}]"></p>
<p :style = "[size,bg]"></p>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
style: {
width: '100px',
height: '100px',
background: 'red'
},
size: {
width: '100px',
height: '100px'
},
bg: {
background: 'blue'
}
}
})
</script>
v-model
- 作用： 实现双向数据绑定
- 作用范围： 表单元素，因为它默认绑定了 value
- 经验： 看到表单元素，直接上v-model
<body>
<div id="app">
<input type="text" v-model = 'val'>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
val: ''
}
})
</script>
未完
v-pre
v-once
v-cloak