node 中的 express；
库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。
1.从Jquery 切换到 Zepto
2.从 EJS 切换到 art-template
MVC 是后端的分层开发概念；
MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel
为什么有了MVC还要有MVVM
vue指令介绍
vue基本代码结构和插值表达式，v-cloak
<div id="app"> <div>{{ msg }}div> <div v-cloak>{{ msg }}div> <div v-cloak>++++++++ {{ msg }} ----------div> div>
<script> var vm = new Vue({ el: "#app", data: { msg: "沉迷学习，日渐消瘦", } }) script>
vue指令之v-text,v-html
<div id="app"> <div>{{ msg }}div> <div v-cloak>{{ msg }}div> <div v-cloak>++++++++ {{ msg }} ----------div> <div v-text="msg2">123456789div> <div v-html="msg2">123456789div> div>
<script> var vm = new Vue({ el: "#app", data: { msg: "沉迷学习，日渐消瘦", msg2: "我太难了
", }, methods: { }, }) script>
vue指令之v-bind
直接使用指令 v-bind 使用简化指令 : 在绑定的时候，拼接绑定内容：:title="btnTitle + ', 这是追加的内容'"
<div id="app"> <input type="button" value="v-bind演示" v-bind:title="mytitle"> <hr> <input type="button" value="v-bind简写演示" :title="mytitle"> <hr> <input type="button" value="v-bind拼接演示" :title="mytitle + '要努力啊'"> <hr> div>
vue指令之v-on和跑马灯案例
vue指令演示案例
<div id="app"> <input type="button" value="v-on演示" v-on:click="show"> <hr> <input type="button" value="v-on简写演示" @click="show"> div>
跑马灯案例
<div id="app"> <input type="button" value="浪起来" @click="start"> <input type="button" value="低调" @click="stop"> <h1 v-cloak>{{ msg }}h1> div>
.stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事件在该元素本身（比如不是子元素）触发时触发回调 .once 事件只触发一次
事件修饰符演示案例
<style> .inner { height: 150px; background-color: blue; } .outer { padding: 40px; background-color: red; } style> <div id="app"> <div class="inner" @click="div1Handler"> <input type="button" @click.stop="btnHandler" value="按钮"> div> <a href="https://www.baidu.com" @click.prevent="linkHandler">百度一下a> <div class="inner" @click.capture="div1Handler"> <input type="button" @click="btnHandler" value="按钮"> div> <hr> <div class="inner" @click.self="div1Handler"> <input type="button" @click="btnHandler" value="按钮"> div> <a href="https://www.baidu.com" @click.prevent.once="linkHandler">百度一下a> <div class="outer" @click="div2Handler"> <div class="inner" @click="div1Handler"> <input type="button" @click.stop="btnHandler" value="按钮"> div> div> <hr> <div class="outer" @click="div2Handler"> <div class="inner" @click.self="div1Handler"> <input type="button" @click="btnHandler" value="按钮"> div> div> div>
vue指令之v-model实现双向数据绑定
v-model实现双向绑定示例演示
<div id="app"> <div><h1>{{ msg }}h1> <input type="text" v-model="msg" style="width:100%"> div> div>
<div id="app"> <input type="text" v-model="i1"> <select v-model="s1"> <option value="+">+option> <option value="-">-option> <option value="*">*option> <option value="/">/option> select> <input type="text" v-model="i2"> <input type="button" value="=" @click="opt"> <input type="text" v-model="ret"> div>
使用class样式
完整代码
1.数组
<h1 :class="['red','thin']">明天会更好h1>
2.数组中使用三元表达式
<h1 :class="['red', 'thin', isactive?'active':'']">明天会更好h1>
3.数组中嵌套对象
<h1 :class="['red', 'thin', {'active': isactive}]">明天会更好h1>
4.直接使用对象
<h1 :class="{red:true, italic:true, active:true, thin:true}">明天会更好h1>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<h1 :style="styleObj1">hello,worldh1>
<h1 :style="[styleObj1,styleObj2]">hello,worldh1>
div>
<script src="lib/vue-2.4.0.js">script>
<script>
var vm = new Vue({
el: "#app",
data: {
styleObj1:{color:"red","font-weight":200},
styleObj2:{'font-style': 'italic'}
},
methods: {}
})
script>
body>
html>
style样式
1.
<h1 :style="{color:"red","font-weight":200}">hello,worldh1>
data: {
styleObj1:{color:"red","font-weight":200},
}
在元素中，通过属性绑定的形式，将样式对象应用到元素中
<h1 :style="styleObj1">hello,worldh1>
data: {
styleObj1:{color:"red","font-weight":200},
styleObj2:{'font-style': 'italic'}
},
在元素中，通过属性绑定的形式，将样式对象应用到元素中
<h1 :style="[styleObj1,styleObj2]">hello,worldh1>
vue指令之v-for，key属性
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<ul>
<li v-for="(value,index) in lst1">"index":{{ index }}--------"value":{{ value }}li>
ul>
div>
<script src="lib/vue-2.4.0.js">script>
<script>
var vm = new Vue({
el: "#app",
data: {
lst1:[1,2,3,4,5,6,7,8],
methods: {}
})
script>
body>
html>
2. 迭代对象数组
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<ul>
<li v-for="(value,index) in lst2">"index":{{ index }}--"id":{{ value.id }}--"name":{{ value.name }}li>
ul>
div>
<script src="lib/vue-2.4.0.js">script>
<script>
var vm = new Vue({
el: "#app",
data: {
lst2: [{id: 1, name: 'zs1'}, {id: 2, name: 'zs2'}, {id: 3, name: 'zs3'}, {id: 4, name: 'zs4'}]
},
methods: {}
})
script>
body>
html>
3.迭代对象
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<ul>
<li v-for="(value,key,index) in lst3">"index":{{ index }}--"key":{{ key }}--"value":{{ value }}li>
ul>
div>
<script src="lib/vue-2.4.0.js">script>
<script>
var vm = new Vue({
el: "#app",
data: {
lst3:{
"name":"张晚七",
"age":18,
"hobby":"music"
}
},
methods: {}
})
script>
body>
html>
4.迭代数字
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<ul>
<li v-for="i in 10">"value":{{ i }}li>
ul>
div>
<script src="lib/vue-2.4.0.js">script>
<script>
var vm = new Vue({
el: "#app",
data: {},
methods: {}
})
script>
body>
html>
2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。
key属性的演示案例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<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="submit" value="提交" @click="add">
div>
<p v-for="item in lst" :key="item.id">
<input type="checkbox">{{ item.id }}----{{ item.name }}
p>
div>
<script src="lib/vue-2.4.0.js">script>
<script>
var vm = new Vue({
el: "#app",
data: {
lst: [
{id: 1, name: "张晚七"},
{id: 2, name: "吕不韦"},
{id: 3, name: "赵高"},
{id: 4, name: "张三丰"},
],
id: "",
name: ""
},
methods: {
add() {
this.lst.unshift({id: this.id, name: this.name});
}
}
});
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<h3 v-if="flag">这是v-if的flagh3>
<h3 v-show="flag">这是v-show的flagh3>
div>
<script src="lib/vue-2.4.0.js">script>
<script>
var vm = new Vue({
el: "#app",
data: {
flag: true
},
methods: {}
})
script>
body>
html>