库和插件的区别
- 框架:是一套完整的解决方案;对项目的侵略性较大,项目如果需要重新更换框架,则需要重新架构整个项目
- node中的express
- 库(插件):提供某一个小功能,对项目的侵入性比较小,可以很容易切换到其他库实现需求
Node(后端)中的MVC与前端中的MVVM之间的区别
- MVC是后端的分层开发概念
- MVVM是前端的视图层的概念,主要关注于视图层分离,也就是说:MVVM把前端的视图层分为了三部分Model,View,VM(ViewModel)
Vue.js 基本代码 和 MVVM之间的关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.min.js"></script>
</head>
<body>
<!--将来new的Vue实例,会控制这个元素中的所有内容-->
<!--Vue 实例所控制的这个元素区域,就是我们的V-->
<div id="app">
{{msg}}
</div>
</body>
<script>
//2创建一个Vue得实例
//当我们导入包之后,在浏览器的内存中,就多了一个Vue构造函数
//注意:我们new出来的这个Vue对象,就是我们MVVM中的VM的调度者
var vm = new Vue({
el: '#app', //表示,当前我们new的这个Vue实例,要控制页面上的哪个区域
//这里的data就是MVVM中的M,专门用来保存每个页面的数据的
data: {
msg: '欢迎学习Vue' //通过Vue提供的指令,很方便的就能把数据渲染到页面上,程序员不需要再手动操作DOM元素了【前端的Vue之类的框架,不提倡我们手动操作DOM元素】
}
})
</script>
</html>
V-clock V-text V-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.min.js"></script>
<style>
[v-clock] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用v-clock能够解决 插值表达式闪烁的问题 -->
<p v-clock>{{msg}}</p>
<h4 v-text='msg'>==========</h4>
<!-- 默认 v-text 是没有闪烁问题的 -->
<!-- v-text 会覆盖元素中原本的内容,但是插值表达式只会替换自己这个占位符,不会吧整个元素的内容清空 -->
<div>
{{msg2}}
</div>
<p v-html='msg2'></p>
<!-- v-html 会解析HTML标签 -->
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '123',
msg2: '<h1>我是H1</h1>'
}
})
</script>
</html>
v-bind
<!-- v-bind 是Vue中,提供的用于绑定属性的指令 --!>
<input type='button' value='按钮' v-bind='mytitle + "123"'/>
可以简写为 :要绑定的属性
v-bind中可以写合法的JS表达式
v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="按钮" v-on:click='show'>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
methods: { //这里的methods 属性当前Vue实例的所有可用方法
show: function(){
alert('hello')
}
}
})
</script>
</html>
v-on 的简写 @:
跑马灯效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="跑起来" v-on:click='show'>
<input type="button" value="停止" v-on:click='stop'>
<p>
{{msg}}
</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '猥琐发育,别浪',
timer:null
},
//注意:VM实例,会监听自己身上data中所有数据的改变,只要数据一发生改变,最新的数据,从data上同步到页面中去:【好处:程序员只需要关心数据,不需要考虑如何重新渲染DOM页面】
methods: {
// show: function(){
// if(this.timer !=null) return
// var _this = this
// this.timer= setInterval(function(){
// var start = _this.msg.substring(0,1)
// var end = _this.msg.substring(1)
// _this.msg = end + start
// },400)
// },
// stop: function(){
// clearInterval(this.timer)
// this.timer = null
// }
//箭头函数让函数内部的this与外部的this保持一致
show() {
if(this.timer !=null) return
this.timer = setInterval(() => {
var start = this.msg.substring(0,1)
var end = this.msg.substring(1)
this.msg = end + start
},400)
},
stop: function(){
clearInterval(this.timer)
this.timer = null
}
}
})
</script>
</html>
事件修饰符
- .stop 阻止冒泡
- .prevent 阻止默认事件(a标签的跳转,表单的提交)
- .capture 添加事件监听使用事件捕获模式
- .self 只当事件在该元素本身(比如不是子元素)触发时触发回调self只会阻止自己身上的冒泡行为,并不会真正阻止冒泡行为
- .once 事件只触发一次
注意可以链式调用
v-model(唯一一个数据双向绑定指令) 和 双向数据绑定
- v-bind 只能实现数据的单向绑定,从M自动到V,无法实现数据的双向绑定
- 使用v-model指令,可以实现表单元素和Model中数据的双向绑定注意 v-model只能运用在表单元素这中input(redio,text,address,email…)select checkbox,textarea
Vue中使用class样式
- 数组
<h1 :class="['red','thin']">
这是一个邪恶的H
</h1>
- 数组中使用三元表达式
<h1 :class="['red','thin',isactive?active:'']">
这是一个邪恶的H1
</h1>
- 数组中嵌套对象
<h1 :class="['red','thin',{'active':isactive}]">
这是有个邪恶的H1
</h1>
- 直接使用对象
<h1 :class="{red:true,italic:true,active:false,thin:true}">
这是一个邪恶的H1
</h1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.min.js"></script>
<style>
.red {
color: red;
}
.thin {
font-weight: 200
}
.italic {
font-style: italic
}
.active {
letter-spacing: 0.5rem
}
</style>
</head>
<body>
<div id="app">
<!-- 第一种方式 数组 注意:这里的class需要用V-bind做数据绑定-->
<!-- <h1 :class="['red', 'thin']">这是一个大大的H1</h1> -->
<!-- 在数组中使用三元表达式 -->
<!-- <h1 :class="['red', isactive? 'thin':'']">这是一个大大的H1</h1> -->
<!-- 在数组中使用对象来代替三元表达式,提高代码的可读性 -->
<!-- <h1 :class="['red', 'thin', {'active':flag} ]">这是一个大大的H1</h1> -->
<!-- 在为class使用绑定对象的时候,对象的属性是类名,由于,对象的属性可以带引号,也可以不带引号,所以这里我没有写引号;属性的值时一个标志符 -->
<!-- <h1 :class="{red: true,active: true, italic: false}">这是一个大大的H1</h1> -->
<h1 :class="classObj">这是一个大大的H1</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
isactive: true,
flag: true,
classObj: {
red: true,
active: true,
italic: true
}
}
})
</script>
</html>
使用内联样式
- 直接在元素上通过
:style
的形式,书写样式对象
<h1 :style="{color:'red','font-size':'40px'}">
我是一个善良的
</h1>
-
将样式对象,定义到
data
中,并直接引用到:style
中- 在data上定义样式
data: { styleOBJ: { color: 'red', 'font-size': '40px', font-weight: '200' } }
- 在元素中通过属性绑定的形式,将样式应用到元素中
<h1 :style="styleOBJ"> 我很沙量 </h1>
v-for
- 迭代数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue.min.js"></script> </head> <body> <div id="app"> <p v-for='(item, index) in list'>{{item}}----------{{index}}</p> </div> </body> <script> var vm = new Vue({ el: '#app', data: { list: [1,2,3,4,5,6] } }) </script> </html>
<ul> <li v-for="(item,index) in list">索引:{{i}}-----姓名:{{item.name}}-------年龄:{{item.age}}</li> </ul>
- 迭代对象中的属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue.min.js"></script> </head> <body> <div id="app"> <p v-for="(item, index) in list">{{item.id}}-----{{item.name}}---------{{item.gender}}-------{{index}}</p> </div> </body> <script> var vm = new Vue({ el: '#app', data: { list: [{ id:1, name: 'feifei', gender: '女' },{ id:2, name: 'dd', gender: '女' },{ id:3, name: 'jij', gender: '女' }] } }) </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue.min.js"></script> </head> <body> <div id="app"> <p v-for="item in list">{{item}}</p> </div> </body> <script> var vm = new Vue({ el: '#app', data: { list: { name: 'feifei', age: 26, genser: '男' } } }) </script> </html>
//循环遍历对象中的属性 <div v-for="(val, key, i)in userInfo">{{val}}----{{key}}-----{{i}} </div>
- 迭代数字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue.min.js"></script> </head> <body> <div id="app"> <!-- i后面我们放过 普通数组,数组对象,对象,还可以放数字 --> <!-- 注意:如果使用v-for迭代数字的话,前面的count值从1开始 --> <p v-for="i in 10">这是第{{i}}个p标签</p> </div> </body> <script> var vm = new Vue({ el: '#app' }) </script> </html>
<p v-for="i in 10"> 这是第{{i}}p标签 </p>
2.20的版本里面,当在组件中使用v-for时,key现在是必须的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue.min.js"></script> </head> <body> <div id="app"> <label for="">id <input type="text" v-model='id'> </label> <label for="">name <input type="text" v-model='name'> </label> <button value="添加" v-on:click='add'>添加</button> <p v-for="item in list" :key='item'> <input type="checkbox">{{item.id}}---------{{item.name}} </p> <!-- 注意:v-for循环的时候,key属性只能使用number或者string --> <!-- 注意:key在使用的时候,必须使用v-bind属性绑定的形式,指定key的值 --> <!-- 在组件中,使用v-for循环的时候,或者在一些特殊情况中,如果v-for有问题,必须在使用v-for的同时指定唯一的字符串/数字 类型 :key值 --> </div> </body> <script> var vm = new Vue({ el: '#app', data: { list: [{ id: 1, name: '华小雯', },{ id: 2, name: '叶俊宽' },{ id: 3, name: '猪猪' }], id: '', name: '' }, methods: { add() { this.list.unshift({id:this.id,name:this.name}) } } }) </script> </html>
v-if v-show
- v-if:每次都会重新删除或创建元素
- v-show:每次不会重新进行DOM的删除和创建操作,只是切换了元素的display:none样式
- v-if有较高的切换性能消耗
- v-show有较高的初始渲染消耗
- 如果元素涉及到频繁的切换,最好不要使用v-if,而是推荐使用v-show
- 如果元素可能永远也不会被显示出来的用户看到,则推荐使用v-if