第一章遇见vue.js
一.MVX模式
1.MVC：Model（模型），Controller（控制器），View（视图）。
View一般都是通过Controller来和Model进行联系。
Controller是Model和View的协调者，View和Model不直接联系。
基本联系都是单向的。
用户通过Controller来操作Model以达到View的变化。
2.MVP（代表Riot.js）
MVP是从MVC模式演变而来，Controller/Presenter负责逻辑的处理，Model提供数据，View负责显示
二.vue是什么？
1.定义：vue.js不是框架+只是聚焦视图层，是一个构建数据驱动的web界面的库。vue通过简单的api提供高效的数据绑定和灵活的组件系统。
2.vue特性
①轻量
②数据绑定
③指令
④插件化（vue核心库不包含Router、ajax、表单验证等功能，但可以方便加载对应的插件）
3.与AngularJS的区别
相同点：
- 都支持指令（内置指令、自定义指令）。
- 都支持过滤器（内置过滤器和自定义过滤器）
- 都支持双向绑定
- 都不支持低端浏览器
不同点：
- AngularJS的学习成本高，而vue本身提供api都是比较简单、直观。
- 性能上，AngularJS依赖对数据做脏检查，所以watcher越多越慢。vue使用基于依赖追踪的观察并且使用异步队列更新，所有数据都是独立触发。对于庞大的应用来说这个优化差异还是比较明显。
4.与react的区别：
相同点：
- 都需要编译后使用
- 中心思想相同：一切都是组件，组件实例之间可以嵌套。
- 都提供合理的钩子函数，让开发者定制化的处理需求
- 都不内置类似ajax、router等功能到核心包，而是以其他方式（插件）加载
- 在组件开发中都支持mixins的特性
不同点
- react依赖virtual DOM，vue使用的是DOM模板
- vue在模板中提供指令、过滤器，方便操作DOM
5.如何使用vue
①安装：1-1 script： 通过script加载CDN<script src="https://cdn.jsdelivr.net/npm/vue"></script>
1-2 npm:基于npm管理依赖，使用npm来安装vue，执行指令$ npm i vue --save-dev
1-3 bower:基于bower管理，安装vue，执行命令$ bower i vue --save-dev
6.第一个HelloWorld程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="box">
<ul>
<li v-for="tab in tabs">{
{tab.text}}</li>
</ul>
</div>
<script>
new Vue({
el:'#box',
data:{
tabs:[{
text:'巴士'},
{
text:'快车'},
{
text:'专车'},
{
text:'代驾'},
{
text:'顺风车'},
{
text:'出租车'},
{
text:'汽车'}]
}
})
</script>
</body>
</html>
第二章
数据绑定是将数据和视图相关联，当数据变化时刻自动更新视图。
一.语法
1.插值
基本形式{
{}}
<span>Text:{
{text}}</span>
text改变，文本中的值也会联动变化。有时候只需渲染一次，后续数据变化不关心的时候可以通过*实现，写法：{
{*text}}
大括号标签会把里面的值全部当做字符串来处理，如果值是HTML片段，则可以使用三个大括号绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue解析带html标签的字符串为dom</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.red{
font-weight: bold;
font-size: 1.2rem;
color: #fff;
background-color: #e94826;
}
</style>
</head>
<body>
<div id="box">
<p v-html="name"></p>
<p>{
{logo}}</p>
</div>
<script>
new Vue({
el:'#box',
data() {
return{
logo:'<span class="red">HelloWorld</span>',
name: '<span class="red">前一部分<br/>后一部分</span>'
}
}
})
</script>
</body>
</html>
vue提供一系列文本渲染方式，vue指令和自身特性内是不可以插值的，用错会报错！
2.表达式
表达式是各种数值、变量、运算符的综合体。简答的表达式可以是常量或变量名称。表达式的值是其运算结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表达式</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="box">
<p>{
{cents/10}}</p>
<p>{
{true?1:0}}</p>
<!--切分-->
<p>{
{example.split("")}}</p>
<!--原过滤器写法，注意在vue2.0中已经去除内置过滤器写法-->
<!--过滤器：小写变大写-->
<p>{
{example | toUpperCase}}</p>
<!--过滤器：首字母大写-->
<p>{
{example | capitalize}}</p>
<!--现在 小写变大写的写法-->
<p>{
{example.toUpperCase()}}</p>
</div>
<script>
new Vue({
el:'#box',
data:{
cents:90,
true:'ddd',
example:'apple'
}
})
</script>
</body>
</html>
3.指令
指令的作用是当表达式的值发生变化时，将这个变化也反映到DOM上
v-if中的内容为true则显示，false则隐藏- 在指令和表达式之间插入一个参数，用
冒号分隔，如v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="box">
<!--v-if中的内容为true则显示，false则隐藏-->
<p v-if="beautiful">beautiful girl</p>
<p v-if="ugly">ugly girl</p>
<!--在指令和表达式之间插入一个参数，用冒号分隔，如v-bind-->
<a v-bind:href="url">点击百度一下！</a>
</div>
<script>
new Vue({
el:'#box',
data:{
beautiful:true,
ugly:false,
url:'https://www.baidu.com/'
}
})
</script>
</body>
</html>
二.分隔符
1.vue数据绑定的语法被设计为可配置的，可以修改
Vue.config.delimiters = {
"<%","%>"}
文本插值的语法由{
{
example}}变更为 <$example$>