库和插件的区别
- 框架：是一套完整的解决方案；对项目的侵略性较大，项目如果需要重新更换框架，则需要重新架构整个项目
- 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
2538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
