1.MVC与MVVM的区别
MVC 是后端的分层开发概念。分为view(视图层）、controllor(调用层)、model(数据层)，视图层是展示给用户的，调用层可以看作是为视图层和数据层传递信息的。
MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分Model、View、VM ViewModel;
2. Vue.js的代码结构
1、引入vue.js
2、写视图层：我们要展示的内容
3、实例化Vue()
data:存放数据
el:控制区域
methods:放我们的方法
3. 插值表达式、v-cloak、v-text、v-html
插值表达式{{}}，可以在前后插入一些内容
v-cloak:在浏览器刷新时不会把插值表达式显示在页面上，还需要设置一个[v-cloak]{display：block}的样式。
v-text：会替换掉元素里的内容。
v-html：可以渲染html界面，可以设置行内样式。
4. v-bind：界面元素属性值的绑定
简写：“：”
书写样式：<!-- <button v-bind:title="nihao">按钮</button> -->
1. 括号里不加引号的都是我们data里的数据读取
2. 如果想使用字符串需要加上引号
3. 里面可以写表达式
4. 里面也可以调用定义好的方法，拿到的是方法的返回值
5. v-on： 进行事件的绑定，我们用的最多的是click事件绑定
2. 简写@
3. 实现跑马灯的效果
6.事件修饰符
事件修饰符：
- .stop 阻止冒泡
- .prevent 阻止默认事件
- .capture 添加事件侦听器时使用事件捕获模式。
- .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
- .once 事件只触发一次
7. v-model数据双向绑定
作用：数据双向绑定
注意：绑定的是表单控件
可以实现计算器功能。
8. Vue中样式的使用
使用class样式:
· 数组
· 三木表达式
· 数组内置对象（对象的键是样式的名字，值是bool类型）
· 直接通过对象
设置样式部分代码：
<style>
.first {
color: red;
}
.second {
font-size: 25px
}
</style>
视图层部分代码：
<body>
<div id='app'>
<p class="first second">这是一段文字...</p>
<!-- 使用vue设置多个样式的时候可以使用数组 -->
<p :class="[pClass,flag?'second':'']">这是一段文字...</p>
<!-- 当我们根据某个条件显示某个样式的时候可以使用对象的方式 -->
<!-- 对象里的键就是我们显示的样式，值是个bool类型，就是我们是否显示这个样式 -->
<p :class="[pClass,{'second':flag}]">这是一段文字...</p>
<!-- 直接使用对象，对象里的键就是我们显示的样式，值是个bool类型，就是我们是否显示这个样式 -->
<p :class="{'first':false,'second':true}">这是一段文字...</p>
</div>
<!-- 1、引入vue的js，引入js之后他为我们提供了Vue类 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
调用层代码：
<script>
// 调度层
var vm = new Vue({
// vue控制的区域
el: '#app',
// data参数存放我们的数据，这一层就是mvvm里的model层
data: {
message: 'Hello Vue!',
pClass: 'first',
flag: true
}
})
</script>
使用内联样式
1、直接在元素上通过 :style 的形式，书写样式对象
2、将样式对象，定义到 data 中，并直接引用到 :style 中
a)、在data上定义样式
b)、在元素中，通过属性绑定的形式，将样式对象应用到元素中
3、在 :style 中通过数组，引用多个 data 上的样式对象
a)、在data上定义样式
b)、在元素中，通过属性绑定的形式，将样式对象应用到元素中
<!-- 视图层 -->
<div id="app">
<!-- 插值表达式，可以读取我们的变量 -->
<!-- !!!键如果包含-的话，我们必须要加上引号 -->
<div :style="{'font-size':'32px'}">{{message}}</div>
<div :style="textStyle">{{message}}</div>
<div :style="[textStyle,textStyle2]">{{message}}</div>
<div :style="getStyle(2)">{{message}}</div>
</div>
<script>
// 调度层
var vm = new Vue({
// vue控制的区域
el: '#app',
// data参数存放我们的数据，这一层就是mvvm里的model层
data: {
message: 'Hello Vue!',
textStyle: {
color: 'red',
'font-size': '50px'
},
textStyle2: {
'font-weight': '600'
}
},
methods: {
getStyle(num) {
let obj = {
color: 'red',
'font-size': '50px'
};
if (num == 1) {
obj.color = 'red'
} else {
obj.color = 'green'
}
return obj
}
},
})
</script>
9. V-for和key属性
1. 便利数组，参数(item,index) in list
2. 便利对象，参数(value,key,index) in list
3. 便利数字，num in 10 (1~10)
4. key在使用v-for的时候都需要去设置key
key的特点：
4.1 让界面元素和数组里的每个记录进行绑定
4.2 key只能是字符串或者数字
4.3 key必须是唯一的
注意：
2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。
10. v-if与v-show区别
都是表示显示隐藏元素。
区别：
1. v-if删除dom元素
2. v-show设置display:none
应用场景：
1. v-if只修改一次的时候可以使用v-if，例如登录跳转网页。
2. v-show频繁切换的时候可以使用v-show，例如table切换
2229
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
