css代码
#app{
padding: 150px;
}
#app img{
width: 150px;
}
.change1{
background-color: aliceblue;
font-size: 26px;
}
.change2{
width: fit-content;
padding: 30px;
margin: 50px auto;
}
js代码
new Vue({
el: '#app',
data() {
return {
tip1:"change1",
tip2:"change2",
ww:"100px",
hh:"100px",
cc:"#f00",
imgSrc:"./img/mbh.webp",
divStyle:{
width:"100px",
height:"100px",
background:"#f0f"
},
arr:[
{
name:"杜甫",
id:1
},
{
name:"李白",
id:2
},
{
name:"苏轼",
id:3
},
]
}
},
methods: {
changeSrc(){
this.imgSrc="./img/laosi.webp"
}
}
});
用于修改行内属性
格式：v-bind:属性名='变量'
简写：`:属性名=‘变量’
<button @click="changeSrc">切换图片</button> <br>
<img v-bind:src="imgSrc" alt="">
<img :src="imgSrc" alt="">
注意：
<!-- 写单个变量名 -->
<div :style="divStyle">这是写的变量名</div>
<div :style="{width:'200px',height:'150px',background:'#f00'}">这是单独写的</div>
<div :style="{width:ww,height:hh,background:cc}"></div>
:class="变量名"只写一个的话，要写变量名：class=['class名1','class名2'] 数组里的数据加引号的话，就填入class名：class=[变量名1,变量名2] 数组里面的数据不加引号，就填入变量名：class="{class名:true/false,class名2:true/false}"：class="[{class名:true/false},变量名] <!-- class后面写对象格式 {class名：布尔值} -->
<div :class="{change1:true}">
这是class后面写对象格式,为 true
</div>
<div :class="{change1:false}">
这是class后面写对象格式,为 false
</div>
<div :class="[tip1,{change2:4>3}]">
这是class后面写对象格式，里面写了多个
</div>
v-for中的key是用于确定当前循环的唯一性，尽量不适用index，一般有id就绑id
<ul>
<li v-for="(r,i) in arr" :key="r.id">
{{r.name}}--{{r.id}}
</li>
</ul>
Vue.directive("指令名",{bind(e){},inserted(e){}})directives:{指令名:{bind(e){},inserted(e){}}}bind和inserted都是钩子函数
bind(e){
指令第一次被绑定时触发
e是挂载到的元素，e就相当于我们的DOM元素
},
inserted(e){
操作元素时触发
e是挂载到的元素，e就相当于我们的DOM元素
}
<div v-指令名></div>aB===>v-a-b <div id="app">
<div v-click-change>点击一下吧</div>
<div v-change2>再点击一下吧</div>
</div>
<script>
var flag = 1;
// 全局自定义指令
Vue.directive("clickChange", {
bind(e) {
console.log(e);
e.innerText = "人约黄昏后";
},
inserted(e) {
e.onclick = () => {
console.log(e);
if (flag) {
e.innerText = "月上柳梢头"
flag = 0
} else {
e.innerText = "人约黄昏后";
flag = 1
}
}
}
})
new Vue({
el: '#app',
data() {
return {
}
},
methods: {
},
// 局部自定义指令
directives: {
change2: {
bind(e) {
console.log(e);
e.innerText = "南风知我意"
},
inserted(e) {
e.onclick = () => {
console.log(e);
e.innerText = "吹梦到西洲"
}
}
}
}
});
</script>
Vue.filter("过滤器名称",function(e){})filters{
过滤器名称(e){
}
}
使用过滤器
{{变量 | 过滤器}}
这里的过滤器与数组迭代方法中的过滤是不同的，这里的过滤器是将传入的数据进行一系列的操作，再返回出来，更类似于数组迭代方法中的map方法。
<div id="app">
{{text | fmtText("这是","一首诗")}}
</div>
<script>
Vue.filter('fmtText', function(e,f,g){
return e+f+g
})
new Vue({
el: '#app',
data() {
return {
text:"满城尽带黄金甲"
}
},
methods: {
}
});
</script>
我们在进行调用的时候，过滤器名后面可以不加参数，它就是指向我们前面的变量，但是如果有多个参数，可以从案例中看到，第一个参数e我并没有写出来，它自己直接识别为前面的变量，后面的“这是”“一首诗”分别对应了f和g
过滤器中的函数可以放多个参数，但我们一般只放一个参数，用于指向我们的变量。
过滤器的功能目前来看是十分强大的，从后面我放的案例中也可以看出来，在处理数据格式上还是十分方便的
今日所学大概分为三大点：v-bind修改样式属性、自定义命令以及过滤器，v-bind中的内容还是很多的，但是常用的也就是那几个，比如给标签修改属性（：src=“imgSrc”）、给元素添加样式（：style=“变量名”）、修改元素的类名（：class=“变量名”、：class=“[变量名1，变量名2]”）。自定义命令使用比较少，过滤器的强大之处要在实践中才能看出来，这就上案例
功能：按要求输入品牌名称和评价以后，点击添加，会在表格下新增内容，在搜索框输入内容以后，搜索的内容会被渲染出来
html和js代码
<div id="app">
<span class="menu">名称</span>
<input type="text" v-model="phoneName">
<span class="menu">评价</span>
<select v-model="comment">
<option value="4">很好</option>
<option value="3">一般</option>
<option value="2">较差</option>
<option value="1">极差</option>
</select>
<button @click="add">添加</button>
<!-- 搜索框 -->
<span class="menu">搜索</span>
<input type="text" v-model="searchText">
<br>
<table>
<th>名称</th>
<th>评价</th>
<th>时间</th>
<th>操作</th>
<tbody>
<!-- tbody不是单纯地获取数据库arr里的内容，我们通过给搜索框进行数据双向绑定，能够实现搜索内容的实时传输，下面的循环就能够实时获取到，需要渲染出来的内容 -->
<tr v-for="(r,i) in search(searchText)">
<td>{{r.name}}</td>
<td>{{r.pj | fmtComment}}</td>
<td>{{r.ctime | fmtTime}}</td>
<td><button @click="del(i)">删除</button></td>
</tr>
</tbody>
</table>
</div>
<script>
// 过滤器，将评价里的数字转换为文字
Vue.filter("fmtComment", function (e) {
if (e == 1) return "极差"
if (e == 2) return "较差"
if (e == 3) return "一般"
if (e == 4) return "很好"
});
// 过滤器，将时间格式进行调整
Vue.filter("fmtTime", function (e) {
let oMonth = (e.getMonth() + 1) < 10 ? "0" + (e.getMonth() + 1) : (e.getMonth() + 1);
return e.getFullYear() + "年" + oMonth + "月" + e.getDate() + "日" + e.getHours() + ":" + e.getMinutes() + ":" + e.getSeconds()
})
// 创建实例
new Vue({
el: '#app',
data() {
return {
// 品牌名
phoneName: "",
// 评价
comment: "",
// 搜索框文字
searchText: "",
arr: [
{
id: 1,
name: "华为",
ctime: new Date(),
pj: "1",
}, {
id: 2,
name: "小米",
ctime: new Date(),
pj: "3"
}
],
}
},
methods: {
// 点击添加的函数
add() {
if (this.comment && this.phoneName) {
this.arr.push({
name: this.phoneName,
ctime: new Date(),
pj: this.comment
})
}
},
// 点击删除的函数
del(i) {
this.arr.splice(i, 1)
},
// 实时返回符合条件的内容
search(i) {
return this.arr.filter(r => {
return r.name.includes(i)
})
}
}
});
</script>
css代码
#app {
width: 600px;
margin: 100px auto;
}
table {
width: 100%;
text-align: center;
border: 1px solid;
border-collapse: collapse;
margin: 20px 0;
}
th,
td {
height: 40px;
line-height: 40px;
border: 1px solid;
}
直到做完这个案例，我才明白为什么说vue的dom操作更少，的确从这整个案例中可以看出来，我们一直在对arr数据进行一个添加和删除，但是操作数据还有着很多很多的注意点等着我们去发现。就比如今天做搜索框的功能时，卡壳了很久，之前的想法一直是给这个搜索框绑定一个事件，由这个事件去修改arr里的数据，结果虽然能做到输入什么就渲染出相关的内容，但是再想渲染出原来的数据就办不到了。后面再彭大神的指导下，才明白以上的一个做法，在此要特别鸣谢我的好儿子：彭神