1：MVVM 思想
M
：即
Model
，模型，包括数据和一些基本操作
V
：即
View
，视图，页面渲染结果
VM
：即
View-Model
，模型与视图间的双向操作（无需开发人员干涉）
在
MVVM
之前，开发人员从后端获取需要的数据模型，然后要通过
DOM
操作
Model
渲染
到
View
中。而后当用户操作视图，我们还需要通过
DOM
获取
View
中的数据，然后同步到
Model
中。
而
MVVM
中的
VM
要做的事情就是把
DOM
操作完全封装起来，开发人员不用再关心
Model
和
View
之间是如何互相影响的：
只要我们
Model
发生了改变，
View
上自然就会表现出来。
当用户修改了
View
，
Model
中的数据也会跟着改变。
把开发人员从繁琐的
DOM
操作中解放出来，把关注点放在如何操作
Model
上。
2：
Vue
简介
Vue (
读音
/vjuː/
，类似于
view)
是一套用于构建用户界面的渐进式框架。与其它大型框架不
同的是，
Vue
被设计为可以自底向上逐层应用。
Vue
的核心库只关注视图层，不仅易于上
手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库
结合使用时，
Vue
也完全能够为复杂的单页应用提供驱动。
官网：
https://cn.vuejs.org/
参考：
https://cn.vuejs.org/v2/guide/
Git
地址：
https://github.com/vuej
3：
入门案例
1
、新建文件夹
hello-vue
，并使用
vscode
打开
2
、使用
vscode
控制台，
npm install -y
；
项目会生成
package-lock.json
文件，类似于
maven
项目的
pom.xml
文件。
3
、使用
npm install vue
，给项目安装
vue
；项目下会多
node_modules
目录，并且在下面有
一个
vue
目录。
<body>
<div id="app">
<input type="text" v-model="num">
<button v-on:click="num++">关注</button>
<h2>
{{name}}，非常帅！！！有{{num}}个人为他点赞。
</h2>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
// 创建 vue 实例
let app = new Vue({
el: "#app", // el 即 element，该 vue 实例要渲染的页面元素
data: { // 渲染页面需要的数据
name: "张三",
num: 5
}
});
</script>
</body>
这里用
`v-on`
指令绑定点击事件，而不是普通的
`onclick`
，然后直接操作
num
4：概念
1
、创建
Vue
实例
每个
Vue
应用都是通过用
Vue
函数创建一个新的
Vue
实例
开始的：
let app = new Vue({
});
在构造函数中传入一个对象，并且在对象中声明各种
Vue
需要的数据和方法，包括：
- el
- data
- methods
2
、模板或元素
每个
Vue
实例都需要关联一段
Html
模板，
Vue
会基于此模板进行视图渲染。
我们可以通过
el
属性来指定。
例如一段
html
模板：
<div id="app">
</div>
然后创建
Vue
实例，关联这个
div
let vm = new Vue({
el: "#app"
})
这样，
Vue
就可以基于
id
为
`app`
的
div
元素作为模板进行渲染了。在这个
div
范围以外的部
分是无法使用
vue
特性的。
3
、数据
当
Vue
实例被创建时，它会尝试获取在
data
中定义的
所有属性
，
用于视图的渲染
，并且
监
视
data
中的属性变化
，
当
data
发生改变，所有相关的视图都将重新渲染
，这就是“
响应式
“系统。
<div id="app">
<input type="text" v-model="name" />
</div>let vm = new Vue({
el: "#app",
data: {
name: "刘德华"
}
})
name
的变化会影响到
`input`
的值
input
中输入的值，也会导致
vm
中的
name
发生改变
4
、方法
Vue
实例中除了可以定义
data
属性，也可以定义方法，并且在
Vue
实例的作用范围内使用。
<div id="app">
{{num}}
<button v-on:click="add">加</button>
</div>let vm = new Vue({
el: "#app",
data: {
num: 0
},
methods: {
add: function () {
// this 代表的当前 vue 实例
this.num++;
}
}
})
5
、指令
什么是指令？
指令
(Directives)
是带有
`v-`
前缀的特殊特性。
指令特性的预期值是：
单个
JavaScript
表达式
。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于
DOM
。
1
、插值表达式
1
）、花括号
格式：
{{
表达式
}}
说明：
该表达式支持
JS
语法，可以调用
js
内置函数（必须有返回值）
表达式必须有返回结果。例如
1 + 1
，没有结果的表达式不允许使用，如：
let a = 1 + 1;
可以直接获取
Vue
实例中定义的数据或函数
2
）、插值闪烁
使用
{{}}
方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的
`{{}}`
，
加载完毕后才显示正确数据，我们称为插值闪烁。
3
）、
v-text
和
v-html
可以使用
v-text
和
v-html
指令来替代
{{}}
说明：
v-text
：将数据输出到元素内部，如果输出的数据有
HTML
代码，会作为普通文本输出
v-html
：将数据输出到元素内部，如果输出的数据有
HTML
代码，会被渲染
<div id="app">
v-text:<span v-text="hello"></span> <br />
v-html:<span v-html="hello"></span>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
hello: "<h1>大家好</h1>"
}
})
</script>
2
、
v-bind
html
属性不能使用双大括号形式绑定，我们使用
v-bind
指令给
HTML
标签属性绑定值；
而且在将
`v-bind`
用于
`class`
和
`style`
时，
Vue.js
做了专门的增强。
1
）、绑定
class
<div class="static" v-bind:class="{ active: isActive, 'text-danger'
: hasError }">
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
isActive: true,
hasError: false
}
})
</script>
2
）、绑定
style
`v-bind:style`
的对象语法十分直观，看着非常像
CSS
，但其实是一个
JavaScript
对象。
style
属性名可以用驼峰式
(camelCase)
或短横线分隔
(kebab-case
，这种方式记得用单引号括起
来
)
来命名。
例如：
font-size-->fontSize
<div id="app" v-bind:style="{ color: activeColor, fontSize: fontSiz
e + 'px' }"></div>
<script>
let vm = new Vue({
el: "#app",
data: {
activeColor: 'red',
fontSize: 30
}
})
</script>
3
）、绑定其他任意属性
<div id="app" v-bind:style="{ color: activeColor, fontSize: fontS
ize + 'px' }"
v-bind:user="userName">
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
activeColor: 'red',
fontSize: 30,
userName: 'zhangsan'
}
})
</script>
效果：
<div id="app" user="zhangsan" style="color: red; font-size: 30px;"></div>
4
）、
v-bind
缩写
<div id="app" :style="{ color: activeColor, fontSize: fontSize +
'px' }"
:user="userName">
</div>
3
、
v-model
刚才的
v-text
、
v-html
、
v-bind
可以看做是单向绑定，数据影响了视图渲染，但是反过来就不
行。接下来学习的
v-model
是双向绑定，视图（
View
）和模型（
Model
）之间会互相影响。
既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前
v-model
的可使用元素有：
- input
- select
- textarea
- checkbox
- radio
- components
（
Vue
中的自定义组件）
基本上除了最后一项，其它都是表单的输入项。
<div id="app">
<input type="checkbox" v-model="language" value="Java" />Java<br />
<input type="checkbox" v-model="language" value="PHP" />PHP<br />
<input type="checkbox" v-model="language" value="Swift" />Swift<br />
<h1>
你选择了：{{language.join(',')}}
</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: "#app",
data: {
language: []
}
})
</script>
多个
`CheckBox`
对应一个
model
时，
model
的类型是一个数组，单个
checkbox
值默认是
boolean
类型
radio
对应的值是
input
的
value
值
`text`
和
`textarea`
默认对应的
model
是字符串
`select`
单选对应字符串，多选对应也是数组
4
、
v-on
1
、基本用法
v-on
指令用于给页面元素绑定事件。
语法：
v-on:
事件名
="js
片段或函数名
"
另外，事件绑定可以简写，例如
`v-on:click='add'`
可以简写为
`@click='add'`
2
、事件修饰符
在事件处理程序中调用
`event.preventDefault()`
或
`event.stopPropagation()`
是非常常见的
需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，
而不是去处理
DOM
事件细节。
为了解决这个问题，
Vue.js
为
`v-on`
提供了
事件修饰符
。修饰符是由
点开头的指令后缀
来
表示的。
`.stop`
：阻止事件冒泡到父元素
`.prevent`
：阻止默认事件发生
`.capture`
：使用事件捕获模式
`.self`
：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
`.once`
：只执行一次
<div id="app">
<!--右击事件，并阻止默认事件发生-->
<button v-on:contextmenu.prevent="num++">点赞</button>
<br />
<!--右击事件，不阻止默认事件发生-->
<button v-on:contextmenu="decrement($event)">取消</button>
<br />
<h1>有{{num}}个赞</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
num: 100
},
methods: {
decrement(ev) {
// ev.preventDefault();
this.num--;
}
}
})
</script>
3
、按键修饰符
在监听键盘事件时，我们经常需要检查常见的键值。
Vue
允许为
`v-on`
在监听键盘事件时添
加按键修饰符：
5
、
v-for
遍历数据渲染页面是非常常用的需求，
Vue
中通过
v-for
指令来实现。
1
、遍历数组
语法：
v-for="item in items"
items
：要遍历的数组，需要在
vue
的
data
中定义好。
item
：迭代得到的当前正在遍历的元素
<div id="app">
<ul>
<li v-for="user in users">
{{user.name}} - {{user.gender}} - {{user.age}}
</li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
users: [
{ name: '柳岩', gender: '女', age: 21 },
{ name: '张三', gender: '男', age: 18 },
{ name: '范冰冰', gender: '女', age: 24 },
{ name: '刘亦菲', gender: '女', age: 18 },
{ name: '古力娜扎', gender: '女', age: 25 }
]
},
})
</script>
2
、数组角标
在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：
语法：
v-for="(item,index) in items"
items
：要迭代的数组
item
：迭代得到的数组元素别名
index
：迭代到的当前元素索引，从
0
开始。
<div id="app">
<ul>
<li v-for="(user, index) in users">
{{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}
</li>
</ul>
</div>
3
、遍历对象
v-for
除了可以迭代数组，也可以迭代对象。语法基本类似
语法：
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
1
个参数时，得到的是对象的属性值
2
个参数时，第一个是属性值，第二个是属性名
3
个参数时，第三个是索引，从
0
开始
<div id="app">
<ul>
<li v-for="(value, key, index) in user">
{{index + 1}}. {{key}} - {{value}}
</li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: "#app",
data: {
user: { name: '张三', gender: '男', age: 18 }
}
})
</script>
4
、
Key
用来标识每一个元素的唯一特征，这样
Vue
可以使用“就地复用”策略
有效的提高渲染的
效率。
6
、
v-if
和
v-show
1
、基本用法
v-if
，顾名思义，条件判断。当得到结果为
true
时，所在的元素才会
被渲染
。
v-show
，当得到结果为
true
时，所在的元素才会
被显示
。
语法：
v-if="
布尔表达式
", v-show="
布尔表达式
",
2
、与
v-for
结合
当
v-if
和
v-for
出现在一起时，
v-for
优先级更高。也就是说，会先遍历，再判断条件。
修改
v-for
中的案例，添加
v-if
：
7
、
v-else
和
v-else-if
v-else
元素必须紧跟在带
`v-if`
或者
`v-else-if`
的元素的后面，否则它将不会被识别。
6
、计算属性和侦听器
1
、计算属性（
computed
）
某些结果是基于之前数据实时计算出来的，我们可以利用计算属性。
2
、侦听（
watch
）
watch
可以让我们监控一个值的变化。从而做出相应的反应。
3
、过滤器（
filters
）
过滤器不改变真正的
`data`
，而只是改变渲染的结果，并返回过滤后的版本。在很多不同的
情况下，过滤器都是有用的，比如尽可能保持
API
响应的干净，并在前端处理数据的格式。
243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
