Vue（一）
Vue
是什么
Vue.js是前的主流框架之一，和Angular.js、React.js一起，并称为前端三大主流框架。
是一套构建用户界面的框架。
为什么
让用户不再操作DOM元素；
什么是DOM？文档对象模型（Document Object Model），HTML文档解析成树形结构；在操作过程中，将一个元素看成一个对象，使用它的属性和方法进行相关操作。
MVC层（model-view-controller，后端数据-模板页面-控制器）
https://www.runoob.com/design-pattern/mvc-pattern.html
后端
- M
model层，只负责操作数据库。
- V
用户可视化界面。
- C
controller，业务逻辑处理层。
MVVM（Model-View-ViewModel）
将视图 UI 和业务逻辑分开
前端
- M
JavaScript对象
数据。
- VM
关联两者，把Model的数据同步到View显示出来，还负责把View的修改同步回Model。
- V
显示。
html框架。
一个MVVM框架和jQuery操作DOM相比有什么区别？
答：MVVM不关心DOM的结构，关注的是数据的存储。
<div id="app">
<p>{{ msg }}</p>
<div>
<script>
var vm = new Vue({
el: '#app'
data:{
msg:'mmmmmmm'
}
})
<script>
入门代码
下载好vue.js到本地。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<p>Hello, <span id="name">name:{{content}}</span>!</p>
<p>You are <span id="age">age:{{content}}</span>.</p>
<script type="text/javascript">
var vm = new Vue({
el: '#name',
data: {
content: "Homer",
},
methods: {
details: function() {
return this.content;
}
}
})
var vm = new Vue({
el: '#age',
data: {
content: "51",
},
methods: {
details: function() {
return this.content;
}
}
})
</script>
</body>
</html>
数值绑定语法
v-cloak，防止网页卡卡卡出源代码，隐藏未编译的 Mustache 标签直到实例准备完毕。
v-text ，string
v-html，解释为html
v-bind，缩写:，数据data绑定
v-on，缩写@，绑定事件监听器。
<input type="button" value="" v-on:click="show">
methods:{ //这个methods属性中定义了当前vue实例所有可用的方法
show:function(){
alert("Hello")
}
}
事件修饰符https://v3.cn.vuejs.org/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6
.stop
.prevent
.capture
.self
.once
.passive
v-model
表单元素，语法糖，数据表单元素和Model中数据的双向数据绑定，只能运用在表单元素中。
eval()的使用
https://www.runoob.com/jsref/jsref-eval.html
通过属性绑定为元素设置class类样式（4种）
css
<div id="app">
<h4 class="red thin active italic">如果明天有可能见不到你，祝你早上好，下午好，晚上好</h4>
</div>
v-bind
- 数组
创建view实例，得到VM。
var vm = new Vue({
el: '#app',
data:{},
methods:{}
});
<div id="app">
<h4 :class="['red','thin','italic']">如果明天有可能见不到你，祝你早上好，下午好，晚上好</h4>
</div>
- 数组中使用三元表达式（不妨切到下一个）
var vm = new Vue({
el: '#app',
data:{
flag:false
},
methods:{}
});
<div id="app">
<h4 :class="['red','thin',flag?'active':'']">如果明天有可能见不到你，祝你早上好，下午好，晚上好</h4>
</div>
- 数组中嵌套对象
var vm = new Vue({
el: '#app',
data:{
flag:true
},
methods:{}
});
<div id="app">
<h4 :class="['red','thin',{'active':flag}]">如果明天有可能见不到你，祝你早上好，下午好，晚上好</h4>
</div>
- 直接使用对象
<div id="app">
<h4 :class="{red:true, thin:false, italic:false, active:false}">如果明天有可能见不到你，祝你早上好，下午好，晚上好</h4>
</div>
<div id="app">
<h4 :class="classObj">如果明天有可能见不到你，祝你早上好，下午好，晚上好</h4>
</div>
var vm = new Vue({
el: '#app',
data:{
flag: true,
classObj: {red:true, thin:false, italic:false, active:false}
},
methods:{}
});
通过属性绑定为元素设置style行内样式
- 在元素上通过:style的样式，书写样式对象
<body>
<div id="app">
<h4 :style="[styleObj1,styleObj2]">如果明天有可能见不到你，祝你早上好，下午好，晚上好</h4>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
flag: true,
styleObj1: {color:'red', 'font-weight':500},
styleObj2: {'font-style':'italic'}
},
methods:{}
});
</script>
</body>
v-for指令的四种使用方式
<body>
<div id="app">
<p v-for="item in list">{{item}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
list:[1,2,3,4,5,6]
},
methods:{}
});
</script>
</body>
<body>
<div id="app">
<p v-for="(item, i) in list">索引值{{i}} 每一项的值{{item}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
list:[1,2,3,4,5,6]
},
methods:{}
});
</script>
</body>
<body>
<div id="app">
<p v-for="user in list">{{user.id}} {{user.name}} </p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
list:[
{id:1,name:'111'},
{id:2,name:'222'},
{id:3,name:'333'}
]
},
methods:{}
});
</script>
</body>
<body>
<div id="app">
<p v-for="(val, key) in user" class="purple">{{val}}--->{{key}} </p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
user:{
id:20201224004,
user:'houhouhahahi',
gender:'girl'
}
},
methods:{}
});
</script>
</body>
<body>
<div id="app">
<p v-for="count in 10" class="purple">{{count}}--->{{count+1}} </p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
},
methods:{}
});
</script>
</body>
<body>
<div id="app">
<div>
<label>Id:
<input type="text" v-model="id">
</label>
<label>Name:
<input type="text" v-model="name">
</label>
<input type="button" value="tianjia" @click="add">
</div>
<p v-for="item in list" :key="item.id" class="purple">
<input type="checkbox" name="" id=""> {{item.id}}--->{{item.name}} </p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
id:'',
name:'',
list:[
{id:1, name:'apple'},
{id:2, name:'pear'},
{id:3, name:'orange'}
]
},
methods:{
add(){
//this.list.push({id:this.id, name:this.name})
this.list.unshift({id:this.id, name:this.name})
}
}
});
</script>
</body>
key值的绑定！
v-if有较高的切换性能消耗 v-show 有较高的初始渲染消耗
每次都会删除或创建元素；切换display:none;
<body>
<div id="app">
<input type="button" value="dianji" @click="toggle">
<h4 v-if="flag">这是用v-if控制的元素</h4>
<shadow v-show="flag">这是用v-show控制的元素</shadow>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
flag:true
},
methods:{
toggle(){
this.flag = !this.flag
}
}
});
</script>
</body>
案例：综合以上
关键的几个点是：VM如何连接V与M；
V：使用到了v-model，v-on，v-bind；
VM：自定义add方法，del方法，search方法；
学习or复习JavaScript中的内容：
push
https://www.w3school.com.cn/jsref/jsref_push.asp
splice
https://www.w3school.com.cn/jsref/jsref_splice.asp
some
https://www.w3school.com.cn/jsref/jsref_some.asp
findIndex
https://www.w3school.com.cn/jsref/jsref_findindex.asp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>豆瓣top5</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
<!--表上面的部分内容 -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">豆瓣Top</h3>
</div>
<!-- 并排放置-->
<div class="panel-body form-inline">
start!
</div>
<label>
id:
<!--数据绑定 表单控件-->
<input type="text" class="from-control" v-model="id">
</label>
<label>
name:
<input type="text" class="from-control" v-model="name">
</label>
<label>
date:
<input type="text" class="from-control" v-model="date">
</label>
<label>
score:
<input type="text" class="from-control" v-model="score">
</label>
<input type="button" value="添加" class="btn btn-primary" @click="add">
</div>
<!--表 字段+内容 -->
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>date</th>
<th>score</th>
<th>operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>{{item.score}}</td>
<td>
<!-- 阻止默认行为，防止刷新页面；传参-->
<a href="*" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
// 定义，上部分已经做了数据绑定
id:'',
name:'',
date:'',
score:'',
list:[
{id:1, name:'肖申克的救赎', date:1994, score:9.7},
{id:2, name:'霸王别姬', date:1993, score:9.6},
{id:3, name:'阿甘正传', date:1994, score:9.5},
{id:4, name:'这个杀手不太冷', date:1994, score:9.4},
{id:5, name:'泰坦尼克号', date:1997, score:9.4}
]
},
methods:{
// 在Vue中，已经实现了数据的双向绑定，每当我们修改了data中的数据，Vue会默认监听到数据的改动，将最新的数据应用到页面上；
// 前端更多的是在进行VM中有关数据的操作。
add(){
var movie = {id:this.id, name:this.name, date:this.date, score:this.score}
this.list.push(movie)
// 填充完后，将input清空
this.id = this.name = this.date = this.score = ''
},
del(id){
// 根据指定条件找：根据id找索引
/*删除方法一：
this.list.some((item,i)=>{
if(item.id == id){
// 删除，从索引为i的位置开始删除
this.list.splice(i,1)
// 数组some方法中，如果return true，就会立即终止这个数组的后续循环
return true;
}
})
*/
// 删除方法二：
var index = this.list.findIndex(item => {
if (item.id == id){
return true;
}
})
// 输出index，根据index删除；console.log(index)
this.list.splice(index,1)
}
}
});
</script>
</body>
</html>
根据关键字实现数组的过滤
新定义keywords，是我在“搜索名称或关键词”中输入的内容，
search函数：定义一个新的列表存放找到的item，是按照item.name进行的查找，采用了forEach，filter
https://www.w3school.com.cn/jsref/jsref_foreach.asp
https://www.w3school.com.cn/jsref/jsref_filter.asp
V:
<label>
搜索名称或关键词：
<input type="text" class="from-control" v-model="keywords">
</label>
<tbody>
<!-- 根据关键词，渲染出不同的表 -->
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>{{item.score}}</td>
<td>
<!-- 阻止默认行为，防止刷新页面；传参-->
<a href="*" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
M:
data:{
// 定义，上部分已经做了数据绑定
id:'',
name:'',
date:'',
score:'',
keywords:'',
list:[
{id:1, name:'肖申克的救赎', date:1994, score:9.7},
{id:2, name:'霸王别姬', date:1993, score:9.6},
{id:3, name:'阿甘正传', date:1994, score:9.5},
{id:4, name:'这个杀手不太冷', date:1994, score:9.4},
{id:5, name:'泰坦尼克号', date:1997, score:9.4}
]
},
*** VM:
search(keywords){
/* 方法一
var newList = []
this.list.forEach(item=>{
// 包含了这个keywords，添加到新的列表中去
if(item.name.indexOf(keywords) != -1){
newList.push(item)
}
})
return newList
*/
// 方法二：
var newList = this.list.filter(item => {
if (item.name.includes(keywords)){
return item
}
})
return newList
}
| Array方法 | 描述 | |
|---|---|---|
| some() | 检查数组中的任何元素是否通过测试。 | 删除操作，匹配id |
| find() | 返回数组中第一个通过测试的元素的值。 | |
| findIndex() | 返回数组中通过测试的第一个元素的索引。 | 删除操作，匹配id |
| forEach() | 为每个数组元素调用函数。 | 关键词匹配 |
| filter() | 使用数组中通过测试的每个元素创建新数组。 | 关键词匹配 |
