二、VueJS介绍
Vue是基于MVVM模式实现的一套框架
V：View表示视图：人眼可读性强的数据
M：Model表示模型：机器可读性强的数据
VM：ViewModel表示视图模型对象：将人眼可读性强的数据，转化成机器可读性强的数据，将机器可读性强的数据转化成人眼可读性强的数据
在过去我们用源生js开发应用程序，随着浏览器增多，页面的兼容性是最大的问题，所以jquery的出现就是解决这类问题的，可以使我们的代码兼容浏览器，可以让我们开发功能更加方便。但是jquery只是一个工具库，没有对数据，业务逻辑等等抽离分层。随着项目的增大，对于项目的管理、维护成本变得越来越高，所以才有了框架的出现，对于已有数据，视图，业务逻辑的抽象让我们开发项目，维护项目变得会越来越方便
Vue就是解决这类需求问题的
2.1 vue源码
Github地址
https://github.com/vuejs/vue/tree/v2.0.0
Vue目前已经有了2.0版本（16.10.1），现在vue1.0
基础学习1.0, 项目使用2.0，
2.2官网
中文官网
Cn.vuejs.org
获取源码
Bower install vue
Vue源码不到1万行，因此是一个轻量级的框架
2.3体验vue
Vue不依赖于任何框架
Vue中的MVVM模式
M指的就是数据（对象）
V指的是视图（看到的页面）
VM指的就是视图模型（Vue实例化对象，组件）
| 1 <!-- 定义模板 --> 2 <div id="app">{{news}}</div> 3 <!-- 体验vue --> 4 <script type="text/javascript" src="vue.js"></script> 5 <script type="text/javascript"> 6 // 定义数据 7 var data = { 8 news: '赵丽颖膝盖伤疤却惹人疼 受伤真相让人点赞' 9 } 10 // 定义视图 11 // 定义VM对象 12 var app = new Vue({ 13 // 选择器（绑定视图） 14 el: '#app', 15 // 绑定数据 16 data: data 17 }) 18 19 // 当我们更新了数据，就会更新视图 20 data.news = '《明日之子》来啦！杨幂和小哥哥准备好接受检阅' 21 </script> |
三、Vue
3.1 Vue实例化对象
$el: 表示源生dom对象
Data属性绑定的数据，会直接添加在vue实例化对象上（设置了特性）
3.2选择器
Vue支持常用选择器
Id选择器
Class选择器
元素名称选择器
自定义元素名称选择器
等等
如果出现多个选择器，只会渲染第一个
如果对于同一个元素，创建两个vue实例化对象，后面的会失效
注意：工作中，只能是一个元素对应一个vue实例化对象（一一对应的）
| 1 var app = new Vue({ 2 // 绑定视图（定义视图容器元素） 3 el: '#app', 4 // 类选择器 5 el: '.msg', 6 // 元素名称选择器 7 el: 'h1', 8 // 自定义元素名称 9 el: 'ickt', 10 data: data 11 }) |
3.3数据绑定
在实例化vue时候，我们可以通过data属性绑定数据
我们修改原数据，会触发视图的更新
绑定的数据始终与vue实例化对象中的数据同步
修改模型中的数据，会更新视图（是单向的）
数据绑定只能实现模型中的数据传递给视图
| 1 // 定义数据 2 var data = { 3 color: 'red', 4 obj: { 5 num: 100, 6 width: 200 7 }, 8 arr: [1, 2, 3, { 9 height: 50 10 }] 11 } 12 // 将对象绑定给vue实例化对象 13 var app = new Vue({ 14 el: '#app', 15 data: data 16 }) 17 18 // 修改data中的color 19 data.color = 'green' 20 // 修改vue实例化对象中的color 21 app.color = 'blue' 22 // 查看数据是否相等 23 console.log(data.color === app.color) 24 // 对象类型呢？ 25 console.log(app.obj === data.obj) |
四、插值
插值：实现数据到视图的一个传递
语法 : {{数据}}
插值语法相当于一个js环境，因此我们可以使用点语法
4.1属性插值
插值不仅仅可以用来渲染元素的内容
还可以渲染元素的属性
特殊属性 id， class， style
自定义属性：data-id
通常在属性值中插值
属性绑定: 可以是属性的一部分，还可以是属性的全部
| 1 <div id="app"> 2 <h1 id="{{id}}" class="{{className}}" data-msg="{{msg}}" style="color: {{style.color}}; background: {{style.background}};">{{title}}</h1> 3 </div> |
4.2单次插值
有时候，我们希望的渲染的数据不要因为数据的改变而变化（只插入一次）
在插入的数据之前添加*
语法 {{*数据}}
| 1 <div id="app"> 2 <h1>{{{*title}}}</h1> 3 </div> |
4.3过滤html插值
语法 {{{数据}}}
此时会过滤数据中的html标签
过滤html插值可以使用单次插值语法{{{*数据}}}
| 1 <div id="app"> 2 <div>{{{*title}}}</div> 3 </div> |
4.4 插值表达式
插值符号提供了js环境，我们可以在js环境中使用任何表达式
| 1 <div id="app"> 2 <h1>{{msg.toUpperCase()}}</h1> 3 <h2>面积: {{width * height}}</h2> 4 </div> |
4.5插值过滤器
解决插值表达式中，业务逻辑不能复用的问题的
语法 {{数据 | 过滤器的名称}}
注意：内置的过滤器在2.0版本已经移除
| 1 <div id="app"> 2 <h1>{{msg | uppercase}}</h1> 3 <h2>{{price | currency}}</h2> 4 </div> |
下午复习
MVVM
M：模型
V：视图
VM：视图模型
Vue实例化对象
$el: 源生DOM
数据的属性会直接添加在实例化对象上
数据绑定
Data绑定数据
视图绑定
El:定义选择器，常用选择器都支持：id，class，tagName,自定义元素名称
插值语法： {{数据}}
单次插值 {{*数据}}
过滤html标签 {{{数据}}}可以使用单次插值
插值表达式
插值过滤器 {{数据 | 过滤器}}
五、数据动态绑定
我们绑定的数据，在插入页面之前是无法修改的，想要修改只能通过插值表达式或者插值过滤器修改
我们想要在插入之前修改，要使用动态绑定数据的语法
静态数据绑定：data： {}数据
动态数据绑定：computed：{}
对象中的key表示数据名称
对象中的value必须是函数
每次访问该数据的时候，该函数都会执行
函数的返回值就是要渲染的数据
作用域是vue实例化对象
参数只有一个，也是vue实例化对象
因此我们想访问vue中的数据，既可以通过参数，也可以通过作用域
动态绑定的数据，跟静态绑定的数据一样，也会添加在vue实例化对象上，并且设置了特性
| 1 // 定义vue实例化对象 2 var app = new Vue({ 3 el: '#app', 4 // 定义静态绑定数据 5 data: { 6 msg: 'what a day' 7 }, 8 // 定义动态绑定数据 9 computed: { 10 // 定义的数据 11 newMsg: function (v) { 12 // 第一种方式 13 return this.msg.toUpperCase() 14 // 第二种方式 15 return v.msg.toUpperCase() 16 } 17 } 18 }) |
六、数据双向绑定
数据的绑定：数据由模型到视图的传递过程，不能由视图到模型传递，是单向的
数据双向绑定：数据既可以由模型流入视图，又可以由视图流入模型
指令：vue对源生dom元素拓展了一些功能，这些功能称之为指令
V-model指令：实现数据由视图（DOM元素）流入模型
语法 v-model=”数据”
这里的数据，就是模型中存储数据
当视图的内容发生改变的时候，会更新这个数据
V-model实现原理就是绑定事件（事件监听）
| 1 <div id="app"> 2 <!-- 用户输入 --> 3 <!-- 通过v-model指令实现数据双向绑定--> 4 <input type="text" v-model="msg"> 5 <!-- 输入到h1中--> 6 <h1>{{msg}}</h1> 7 8 <input type="text" v-model="title"> 9 <h2>{{title | uppercase}}</h2> 10 </div> |
七、绑定类四种方式
我们想动态的切换元素的类，我们就要为元素动态绑定类
V-bind:将属性值变成一个js环境，可以直接使用vue实例化对象中的数据
语法 v-bind:属性名称=””
第一种方式：
插值：{{类的名称}}
此时我们可以动态插入多个类，多个类之间用空格隔开
第二种方式：
V-bind:class=”[cls1, cls2]”
此时每一个成员只能代表一个类，成员中不能出现空格
如果成员带引号：就是字符串，表示类的名称
如果成员不带引号：就是模型数据中的变量，一定要定义在vue实例化对象
第三种方式
V-bind:class=”{className: true}”
Key表示类的名称，只能代表一个类，
不能出现空格
如果出现了特殊符号（-），要加上引号
Value表示是否保留这个类，可以是变量，结果会转化成布尔值
如果value是一个变量，一定要定义在vue实例化对象中
第四种方式
V-bind:class=”类名”
如果类名出现引号，就是字符串，表示类的名称
如果类名没有引号，就是一个变量，要在实例化对象中定义
可以出现空格，表示多个类
| 1 <div id="app"> 2 <!-- 第一种方式 --> 3 <h1 class="fz-50 {{cls}}">爱创课堂</h1> 4 <!-- 第二种方式 --> 5 <h2 v-bind:class="[cls1, 'bg-gold']">爱创课堂</h2> 6 <!-- 第三种方式 --> 7 <h3 v-bind:class="{ 8 red: false, 9 'bg-gold': abc, 10 'fz-50': true 11 }">爱创课堂</h3> 12 <!-- 第四种方式 --> 13 <h4 v-bind:class="'red bg-pink ' + f4">爱创课堂</h4> 14 </div> |
八、绑定样式的四种方式
跟类的绑定一样，样式也有四种绑定方式
第一种 插值（不推荐）
Style=”{{样式}}”
样式可以是全部样式，还可以是一部分样式
第二种
V-bind:style=”样式”
属性值是js环境，因此字符串我们要加引号
第三种
V-bind:style=”[]”
数组每一个成员表示一组样式，是一个对象
Key样式名称
样式名称如果出现-，可以加引号（不推荐），我们尽量使用驼峰式命名
Value样式值
第四种
V-bind:style=”{}”
Key表示样式名称
Value表示样式值
注意：如果数据直接保存在数组中，我们不要直接操作数组成员，而要定义数组覆盖
| 1 <div id="app"> 2 <!-- 第一种 --> 3 <h1 style="color: {{color}} ">爱创课堂</h1> 4 <!-- 第二种 --> 5 <h1 v-bind:style="'color: red;' + bg">爱创课堂</h1> 6 <!-- 第三种 --> 7 <h1 v-bind:style="[{ 8 color: 'red', 9 fontSize: '100px' 10 }, obj]">爱创课堂</h1> 11 <!-- 第四种 --> 12 <h1 v-bind:style="{ 13 color: 'red', 14 background: 'green' 15 }">爱创课堂</h1> 16 </div> |
九、模板指令
9.1条件模板指令
v-if指令：动态创建元素
属性值一个布尔值
True表示创建这个元素
False删除这个元素
对应一个v-else指令，相当于js中的else语句
Vue中，指令通常会创建一个js环境，因此我们可以在指令的属性值中使用变量
提供js环境：一个是指令，一个是插值语法
| 1 <div id="app"> 2 <h1> 3 <strong v-if="type">分类<span>456</span></strong><span>123</span> 4 <strong v-else>其他</strong> 5 </h1> 6 </div> |
9.2 Template模板元素
一个指令只能控制一个元素及其子元素，对于兄弟元素无能为力
如果想同时控制兄弟元素显隐怎么办？
如果能够将指令添加给该元素及其兄弟元素共同父元素，那么就能控制这些元素的显隐了
这样就势必会引入新的元素，
Vue为了解决这个问题，提供过来一个特殊的自定义元素，叫template
可以实现上述功能。
Template很特殊，可以像普通的元素一样，添加属性，绑定样式，设置指令等等，但是不会渲染到页面中
| 1 <template v-if="type"> 2 <strong>{{type}}</strong> 3 <span>{{title}}</span> 4 </template> |
9.3循环模板指令
V-for指令：循环创建dom元素的
语法 v-for=”item in 数据”
数据要在模型（vue实例化对象）中定义
Item是临时模板变量，表示每一个成员值，一旦循环结束，这个变量就消失了
$index: 表示循环变量（索引值）
| 1 <ul> 2 <!-- 循环li创建元素--> 3 <li v-for="item in list" v-bind:style="{ 4 background: $index % 2 ? 'yellow' : 'pink' 5 }">{{$index}}---{{item}}</li> 6 </ul> |
9、4支付宝注册
| 1 <div id="app"> 2 <label for="demo">用户名：</label> 3 <input id="demo" v-model="msg" type="text"> 4 <!-- 显隐有input的值决定--> 5 <ul v-if="msg"> 6 <!-- 动态渲染li --> 7 <li v-for="item in mail">{{dealMsg}}@{{item}}.<template v-if="item == 189">cn</template><template v-else>com</template></li> 8 </ul> 9 </div> |