爱创课堂前端培训VueJS第1天课堂笔记(本课程共3天)
- 格式：docx
- 大小：274.21 KB
- 文档页数：17
文档推荐
-
怎样才能成为一名优秀的web前端工程师页数:2
-
爱创课堂零基础入门学jsPPT课件页数:27
-
爱创课堂 前端课堂笔记 js基础字面量页数:4
-
爱创电子监管码赋码系统介绍页数:16
-
Web前端开发需要学什么页数:3
下载文档原格式
合集下载
vue课后习题答案
vue课后习题答案Vue课后习题答案在学习Vue课程的过程中，课后习题是巩固知识、提高技能的重要一环。
通过完成课后习题，我们可以更好地理解和掌握Vue的知识点，加深对框架的理解和运用能力。
下面就让我们来看一下Vue课后习题的答案吧。
第一题：介绍一下Vue的核心概念。
答案：Vue的核心概念包括数据驱动、组件化、响应式和虚拟DOM。
数据驱动是指DOM元素的显示状态是由数据决定的，当数据发生变化时，DOM会自动更新。
组件化是指将页面拆分成多个独立的组件，每个组件负责一部分功能，便于管理和复用。
响应式是指当数据发生变化时，页面会自动更新，无需手动操作DOM。
虚拟DOM是指Vue使用虚拟DOM来提高页面更新的效率，通过比对虚拟DOM和真实DOM的差异，只更新需要更新的部分，减少页面渲染的开销。
第二题：Vue的生命周期有哪些阶段？答案：Vue的生命周期包括创建阶段、挂载阶段、更新阶段和销毁阶段。
创建阶段包括beforeCreate、created、beforeMount和mounted。
挂载阶段包括beforeUpdate、updated。
销毁阶段包括beforeDestroy和destroyed。
第三题：Vue的父子组件通信有哪些方式？答案：Vue的父子组件通信有props、$emit和$refs。
props是父组件向子组件传递数据的方式，$emit是子组件向父组件传递数据的方式，$refs是父组件通过ref属性获取子组件实例的方式。
通过完成这些课后习题，我们可以更好地掌握Vue的核心概念、生命周期和父子组件通信方式，为我们在实际项目中运用Vue提供了更加坚实的基础。
希望大家在学习Vue的过程中能够认真完成课后习题，不断提升自己的技能水平。
爱创课堂前端培训 CSS 第2天课堂笔记
爱创课堂前端培训CSS第2天课堂笔记（本课程共8天）班级：北京前端训练营7期讲师：冯楠娜日期：2017年5月11日爱创课堂官网：目录HTML ................................................................................................................................................. 错误！未定义书签。
目录 .. (1)复习js书写位置：body标签的最底部。
实际工作中使用书写在head标签内一对script标签里。
alert()弹出框。
console.log()字面量：数字字面量：整数，浮点数，特殊字符（Infinity,NaN）。
字符串字面量：所有的语言，语言中的数字，特殊字符串。
变量：定义变量标识符的规则：第一个字符是字母（a-z,A-Z），下划线，$。
其他字符可以是字母（a-z,A-Z），下划线，$，数字。
（还不能使用js规定的关键字，保留字）。
1var a;变量赋值：是把右边的值赋值给左边。
1 a = 10;通常我们将变量声明和赋值写一起：1var a = 10;变量声明提升：只提升声明，不提升变量的赋值。
数据类型：typeof()number:数字类型。
整数，浮点数，特殊字符。
string：字符串类型。
undefined:undefined类型。
表示未定义。
自己就是一个类型。
boolean:布尔类型。
true，false。
null:也是自己是一个类型。
数字类型转换为字符串：数字+“”;1console.log(12 + “3”); //123字符串类型转换为数字：parseInt()：转换为整数。
1console.log(parseInt(“12.234你好世界.233”)); //12parseFloat():将字符串转换为浮点数。
1console.log(parseFloat(“78.2341e3.7898世界”)); //78234.1一、运算符运算符（Operators，也翻译为操作符），是发起运算的最简单形式。
爱前端—AngularJS_课堂笔记
Angular1.x入门和项目开发第1天课堂笔记班级：全栈前端训练营0219班讲师：邵山欢日期：2017年6月14日邵山欢老师微博：@邵山欢QQ:179427026E-mail:ssh@爱前端官网：目录Angular1.x入门和项目开发 (1)目录 (2)零、框架课程概述 (3)一、通过HelloWorld认识MVVM (3)1.1HelloWorld (3)1.2引入控制器 (5)1.3Angular简介 (7)1.4MV* (10)二、双向数据绑定 (12)三、狠砸思维-只关心数据！不关心DOM！ (13)3.1调色板 (13)3.2微博发布框 (15)3.3小小学生表格 (16)3.4联动下拉框 (18)四、Angular中的脏检查 (22)零、框架课程概述Angular共622个职位满足条件react共1017个职位满足条件vue共819个职位满足条件在中国的市场，Angular有10%的公司使用，React和Vue分掉了剩下的90%，各占60%、40%。
React还会越来越多的公司使用，份额更大。
课程颠覆性极强，彻底颠覆我们做网站的思维。
“MVVM+组件化开发”是一个特别引人入胜的模式。
代码量更大，项目更牛ｘ，要更下功夫。
一、通过HelloWorld认识MVVM1.1HelloWorld在百度静态资源库，可以下载Angular1：/我们引包，然后书写一条js程序，并且在html标签上添加了第一条“指令”。
<!DOCTYPE html><html lang="en"ng-app="app"><head><meta charset="UTF-8"><title>angular学习</title></head><body><h1>{{1+2}}</h1><script type="text/javascript"src="js/angular.min.js"></script><script type="text/javascript">//定义模块，"app"是模块的名字，[]表示当前这个模块的依赖为空。
爱创课堂reactJS培训笔记之JSX语法和编译
reactJS培训笔记之JSX语法和编译JSX语法解决创建一个虚拟dom成本过大的问题Jsx语法就是让我们用书写html中元素标签的方式来定义一个虚拟dom，在html中怎么书写元素，我们就怎么书写虚拟dom元素Html中定义id是app的div：<div id=”app”></div>在jsx语法中我们定义一个div：<div id=”app”></div>但是js不支持这个语法，所以我们需要一些编译的插件或者是用工程化工具编译工程化工具，我们用babel2插件解析对于React的jsx语法，我们为了语义化文件，所以我们通常将文件拓展名定义成jsx1 var Uls = React.createClass({2 render: function () {3 // 返回虚拟dom树4 return (5 <ul>6 <li>女装/ 男装/ 内衣</li>7 <li>鞋靴/ 箱包/ 配件</li>8 <li>童装玩具/ 孕产/ 用品</li>9 </ul>10 )11 }12 })Jsx编译Jsx文件写在html中的编译书写jsx语法跟书写html相似，但是有两个属性特殊，一个class属性，我们要写成className一个for属性，我们要写成htmlFor1 <div className="inp-group">2 <label htmlFor="my-input">姓名</label>3 <input id="my-input" type="text" />4 </div>。
爱创课堂 前端课堂笔记 JavaScript简介
爱创课堂前端课堂笔记JavaScript简介一、javascript简介前端分为3层：结构层作用：从html角度搭建网页样式层作用：从美化角度书写样式行为层作用：从交互的角度描述我们的页面行为1.1 用途：数据验证读写HTML元素与浏览器窗口及其内容的交互效果网页特效WEB游戏制作基于Node.js技术进行服务器端编程举例：Javascript用途很多，我们随时学习随时积累。
了解Javascript发展史。
1.2 Javascript简史在WEB日益发展的同时，网页的大小和复杂性不断增加，受制于网速的限制，为完成简单的表单验证而频繁地与服务器交换数据只会加重用户的负担，当时走在技术革新最前沿的Netscape（网景）公司，决定着手开发一种客户端语言，用来处理这种简单的验证。
1995年，就职于Netscape 公司的布兰登·艾奇（Brendan Eich），开始着手为即将于1996年2月发布的Netscape Navigator 2浏览器开发一种名为LiveScript的脚本语言。
为了尽快完成LiveScript 的开发，Netscape 与Sun公司建立了一个开发联盟。
在Netscape Navigator 2 正式发布前夕，Netscape 为了搭上媒体热炒Java 的顺风车，临时把LiveScript 改名为JavaScript。
由于JavaScript1.0获得的关注度越来越高，1996年，微软就在其Internet Explorer 3中加入了名为JScript的JavaScript 实现，这意味着有了两个不同的JavaScript 版本，导致JavaScript没有一个标准化的语法和特性。
1997 年，以JavaScript 1.1 为蓝本的建议被提交给了欧洲计算机制造商协会（ECMA，European Computer Manufacturers Association）。
vue前端课程的心得
vue前端课程的心得在21世纪这个数字化的时代，前端技术日新月异，其中Vue。
js作为一款流行的前端框架，为我打开了一个全新的世界。
我选择参加这门课程，一方面是因为看到了它在实际项目中的广泛应用，另一方面也是因为我渴望掌握这一技能，为自己的职业生涯添加更多的可能性。
在学习过程中，我首先了解了Vue的基础知识，如组件、生命周期钩子、数据双向绑定等。
但随着课程的深入，我逐渐发现，Vue并不是简单地堆砌组件和指令，更重要的是理解其背后的思想和原理。
例如，Vue的响应式原理、组件间的通信方式、性能优化等，这些都是在实际项目中非常关键的部分。
当然，学习的过程并非一帆风顺。
有时候，我会对某个概念感到困惑，或者在编写代码时遇到难题。
但每当我遇到问题时，我都会回想起课程中老师给予的指导，积极查阅资料，与同学交流。
正是这种不断尝试和探索的精神，让我在Vue的世界中逐渐找到了自己的方向。
经过这次学习，我深刻地认识到，技术的学习不仅仅是为了掌握工具本身，更是为了培养一种思维方式。
Vue教会了我如何更好地组织和复用代码，如何构建高效的前端应用。
同时，它也让我明白了，技术是服务于人的，我们应该始终以人为本，为用户提供更好的体验。
未来，我计划深入Vue的更多高级特性，如VueRouter、Vuex等。
同时，我也希望能够将所学应用于实际项目，通过实践不断锻炼自己的技能。
此外，我也意识到持续学习的重要性，我会保持对前端技术发展的关注，以便及时掌握最新的技术和工具。
感谢这门课程为我带来的宝贵经验和知识。
在未来的日子里，我会继续努力，不断探索和学习，为我的职业生涯添砖加瓦。
前端技术培训总结报告：深入了解Vue.js
前端技术培训总结报告：深入了解Vue.js 前言2023年，随着互联网的快速发展和技术的不断更新，前端技术的重要性越来越受到企业和开发者的重视。
Vue.js 作为一款轻量级的前端框架，其使用方便、效率高、功能强大的特点，被越来越多的前端开发者所青睐。
为了更好地学习和掌握 Vue.js 技术，我参加了一次为期两周的 Vue.js 前端技术培训班，下面将对我的学习和体验进行总结。
前期准备在正式开始 Vue.js 的学习之前，我们需要对前期准备工作进行详细的规划和安排。
首先，我们需要对 Vue.js 的基础知识进行深入的了解，熟悉 Vue.js 的工作原理、组件和指令等。
此外，为了更好地学习 Vue.js 技术，我们还需要了解其他前端技术的相关知识，例如 HTML、CSS 和 JavaScript 等。
课程内容本次 Vue.js 前端技术培训班共为期两周，其中包含了 Vue.js 的基础知识、组件化开发、动态路由、VueCLI 等多个方面的内容。
下面将详细介绍每个部分的课程内容和学习体验。
1. Vue.js 基础知识在 Vue.js 基础知识的学习中，我们学会了如何使用 Vue.js 创建数据绑定、循环和条件渲染等基本功能。
同时，我们还学会了如何使用 Vue.js 来展示数据和操作 DOM 元素。
在这一部分的学习中，我们使用了 Vue.js 的官方文档和相关教程，通过多次实践和练习，我对 Vue.js 的基础知识有了更加深入的了解和掌握。
2. 组件化开发在组件化开发的学习中，我们学会了如何使用 Vue.js 的组件化开发来提高项目的复用性和可维护性。
我们了解了父子组件之间的通信和数据传递方式，并使用 Vue.js 的组件化开发来实现复杂的页面布局和交互效果。
通过对组件化开发的深入学习和实践，我逐渐掌握了 Vue.js 的组件化开发思路和实现方式，并能够独立完成较为复杂的 Vue.js 项目。
3. 动态路由在动态路由的学习中，我们了解了前端路由的相关知识，并使用Vue.js 的 Vue Router 插件来实现单页应用的路由功能。
爱创课堂reactJS培训笔记之复习
爱创课堂reactJS培训笔记之复习复习createElement 创建一个虚拟dom的方法，有React对象提供第一个参数表示dom元素名称，它的值可以是html中元素的tagName，例如div，p，h1等等，也可以是组件的名称第二个参数表示虚拟dom的属性从第三个参数开始表示的虚拟dom的子元素Render 将虚拟dom渲染到浏览中，ReactDOM提供的第一个参数表示虚拟dom（如果是组件，必须要转化成虚拟DOM）第二个参数表示真实的dom容器createClass 创建组件的方法参数是一个对象，对象中我们定义组件相关的方法属性，Render，将组件中的虚拟dom输出的Jsx语法为了简化开发的，是对创建虚拟dom简化的内容:像创建html中dom元素一样创建一个虚拟dom，创建方式一模一样特殊属性Class 我们要写成classNameFor 我们要写成htmlfor插值向虚拟dom中动态的添加数据（可以插入元素内容中，也可以插入在元素的属性中）语法{}在{}中我们可以使用js中任何方法，组件实例化对象中的方法，语句，运算符等等Props属性属性是为了实现组件创建时的差异化，通过对创建的组件添加属性来实现对组件创建的结果改变在组件内部可以通过this.props来获取组件的属性数据getDefaultProps 设置默认的属性的作用域作用域是组件构造函数参数空的返回值默认的属性，必须要有返回值Style 虚拟dom中特殊的一个属性，不能使用行内式的属性，只能插入一个js的变量属性名称是特殊的如果是多单词属性：font-size，我们要写成驼峰式的命名fontSize如果是css3的属性：transition，我们要写成WebkitTransition，第一个字母要大写State状态通常组件内部维护的一个数据，通常在组件发生交互时候发生改变State与props一样在改变的时候，都会触发renderProps是在组件创建时候提供的，往往是不会更改的State在组件发生交互的是改变，它是组件自身提供的getInitialState 设置默认的状态作用域是组件实例化对象返回值表示默认的状态，必须要有返回值，是个对象setState 是用来改变状态的，通过this.setState调用他的参数就是一个对象，这个对象中每个属性就是将要改变的状态事件跟html中绑定事件的方式是一样的onClick,他的回调函数，往往我们要写在组件内部回调函数作用域组件实例化对象第一个参数表示事件对象。
爱创课堂reactJS培训笔记之下午复习和插值
爱创课堂reactJS培训笔记之下午复习和插值下午复习ReactReact.createElement创建一个虚拟dom，第一个参数表示虚拟dom的名称（可以是任意元素名称，还是组件名称）第二个参数表示虚拟dom上属性对象从第三个参数开始，表示该虚拟dom下的子元素返回值是一个对象，这个对象就表示一个虚拟DOMReactDOM.render提供的方法将虚拟DOM渲染到页面中第一个参数表示虚拟dom第二个参数表示真实的dom容器元素React.createClass创建一个组件的参数是一个对象对象中有个属性叫render：输出组件中虚拟dom的输出的这些虚拟dom一定用()括起来输出的所有虚拟dom元素都要在一个根元素下Jsx语法：是对js的一个拓展，可以在js中像创建html中元素一样创建一个虚拟dom，语法跟html语法一样比如创建<div><div>创建的虚拟dom有两个特殊的属性一个是class我们要写成calssName一个是for我们写成htmlFor在html中嵌入jsx语法此时script的type：text/x-jsx插值在react中插值语法是{},在大括号中我们可以书写任意的表达式Js内置的方法，定义的方法，运算符，语句等等1 var Header = React.createClass({2 // render输出虚拟dom3 render: function () {4 // 定义用户名5 var username = '雨夜清荷';6 // 定义时间7 var date = new Date();8 return (9 <div className="header">10 <div className="inner">11 {/*在jsx语法中书写注释一定要写在插值符号中*/}12 {/*插入用户名*/}13 <span>{username}</span>14 {/*渲染时间，如果小时大于12，输出下午好，否则输出上午好*/}15 <span>{date.getHours() > 12 ? '下午好' : '上午好'}</span>16 {/*17 这是多行注释18 */}19 </div>20 </div>21 )22 }23 })。
Vue学习笔记（二）动态绑定、计算属性和事件监听
Vue学习笔记（⼆）动态绑定、计算属性和事件监听⽬录⼀、为属性绑定变量在前⾯第⼀部分中，我们已经可以使⽤Vue来动态绑定元素中的值了，但是我们该怎样绑定为元素的属性绑定⼀个变量呢？1. v-bind的基本使⽤我们可以使⽤v-bind来为⼀个元素的属性绑定⼀个在Vue实例中定义好的变量，语法为：v-bind:属性名="表达式"如下例所⽰：var app = new Vue({el: '#app',data: {imgURL: "https:///6ONXsjip0QIZ8tyhnq/it/u=2296203553,2815843260&fm=58",aHref: "",aName: "百度⼀下"}});<div id="app"><!-- 错误的做法 --><!-- <img src="{{imgURL}}" alt=""> --><img v-bind:src="imgURL" alt=""><a v-bind:href="aHref">{{aName}}</a><!-- 语法糖写法,实际开发主要使⽤ --><img :src="imgURL" alt=""><a :href="aHref">{{aName}}</a></div>运⾏结果：可以发现元素上属性的值都可以由变量指定了，⽽ :属性名="表达式"是原始写法的语法糖。
2. v-bind动态绑定class(对象语法)语法：v-bind:class="obj"其中obj是⼀个js对象，它的键（变量名）是某个类的类名，值为bool类型，决定这个类是否绑定到该元素上。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
爱创课堂前端培训VueJS第1天课堂笔记（本课程共3天）班级：北京前端训练营六期讲师：张容铭日期：2016年6月10日张容铭老师微博：@张容铭_YYQHQQ : 286031482E-mail:******************爱创课堂官网：VueJS (1)复习 (3)一、百度图片 (5)二、VueJS介绍 (5)2.1 vue源码 (6)2.2官网 (6)2.3体验vue (7)三、Vue (8)3.1 Vue实例化对象 (8)3.2选择器 (8)3.3数据绑定 (9)四、插值 (9)4.1属性插值 (9)4.2单次插值 (10)4.3过滤html插值 (10)4.4 插值表达式 (10)4.5插值过滤器 (10)下午复习 (11)五、数据动态绑定 (12)六、数据双向绑定 (12)七、绑定类四种方式 (13)八、绑定样式的四种方式 (14)九、模板指令 (15)9.1条件模板指令 (15)9.2 Template模板元素 (15)9.3循环模板指令 (15)9、4支付宝注册 (16)作业 (16)复习Backbone模型创建模型实例化对象DefaultsInitializeSetOnhasChangedGettoJSONUnset删除校验视图创建视图实例化对象ElsetElementInitializeRenderEvents UnderscoreTemplate集合创建集合集合实例化对象Add去重GettoJSONRemoveOn Underscore拓展FilterSomeEverysortBygroupByforEachMapMaxMinindexOfSize事件OnTriggerOff命名空间OncelistenTostopListening路由定义路由Routes动态路由默认路由路由参数路由事件routes 异步拉去数据Fetchsuccess一、百度图片特点：等比例缩放，一行只有两张图片，每一行宽度是一定的数据说明左图片：原始宽度zw 原始高度zh 缩放高度h 缩放宽度zsw右图片：原始宽度yw 原始高度yh 缩放高度h 缩放宽度ysw行宽：（window的宽度-边距）w分析有哪些已知量，哪些未知量已知量：zw，zh，yw，yh，w未知量：h，zsw，ysw举例：zw = 416，zh = 300, yw = 339, yh = 258, w = 320 - 2 * 3 = 314 结果：h = 116，zsw = 161，ysw = 153三元一次方程求解（只需要找到三个表达式）左图片，等比例缩放zw / zh = zsw / h=> zsw = h * zw / zh = 116 * 416 / 300= 161右图片，等比例缩放yw / yh = ysw / h=> ysw = h * yw / yh = 116 * 339 / 258= 153一行有两张图片w = zsw + ysw= h * zw / zh + h * yw / yh= h * (zw * yh / (zh *yh) + yw * zh / (yh * zh))= h * (zw * yh + yw * zh) / (zh * yh)=> h = w * zh * yh / (zw * yh + yw * zh)= 314 * 300 * 258 / (416 * 258 + 339 * 300)= 116二、VueJS介绍Vue是基于MVVM模式实现的一套框架V：View表示视图：人眼可读性强的数据M：Model表示模型：机器可读性强的数据VM：ViewModel表示视图模型对象：将人眼可读性强的数据，转化成机器可读性强的数据，将机器可读性强的数据转化成人眼可读性强的数据在过去我们用源生js开发应用程序，随着浏览器增多，页面的兼容性是最大的问题，所以jquery的出现就是解决这类问题的，可以使我们的代码兼容浏览器，可以让我们开发功能更加方便。
但是jquery只是一个工具库，没有对数据，业务逻辑等等抽离分层。
随着项目的增大，对于项目的管理、维护成本变得越来越高，所以才有了框架的出现，对于已有数据，视图，业务逻辑的抽象让我们开发项目，维护项目变得会越来越方便Vue就是解决这类需求问题的2.1 vue源码Github地址https:///vuejs/vue/tree/v2.0.0Vue目前已经有了2.0版本（16.10.1），现在vue1.0基础学习1.0, 项目使用2.0，2.2官网中文官网获取源码Bower install vueVue源码不到1万行，因此是一个轻量级的框架2.3体验vueVue不依赖于任何框架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// 定义数据7var data = {8news: '赵丽颖膝盖伤疤却惹人疼受伤真相让人点赞'9}10// 定义视图11// 定义VM对象12var app = new Vue({13// 选择器（绑定视图）14el: '#app',15// 绑定数据16data: data17})1819// 当我们更新了数据，就会更新视图20data.news = '《明日之子》来啦！杨幂和小哥哥准备好接受检阅' 21</script>三、Vue3.1 Vue实例化对象$el: 表示源生dom对象Data属性绑定的数据，会直接添加在vue实例化对象上（设置了特性）3.2选择器Vue支持常用选择器Id选择器Class选择器元素名称选择器自定义元素名称选择器等等如果出现多个选择器，只会渲染第一个如果对于同一个元素，创建两个vue实例化对象，后面的会失效注意：工作中，只能是一个元素对应一个vue实例化对象（一一对应的）1var app = new Vue({2// 绑定视图（定义视图容器元素）3el: '#app',4// 类选择器5el: '.msg',6// 元素名称选择器7el: 'h1',8// 自定义元素名称9el: 'ickt',10data: data11})3.3数据绑定在实例化vue时候，我们可以通过data属性绑定数据我们修改原数据，会触发视图的更新绑定的数据始终与vue实例化对象中的数据同步修改模型中的数据，会更新视图（是单向的）数据绑定只能实现模型中的数据传递给视图1// 定义数据2var data = {3color: 'red',4obj: {5num: 100,6width: 2007},8arr: [1, 2, 3, {9height: 5010}]11}12// 将对象绑定给vue实例化对象13var app = new Vue({14el: '#app',15data: data16})1718// 修改data中的color19data.color = 'green'20// 修改vue实例化对象中的color21app.color = 'blue'22// 查看数据是否相等23console.log(data.color === app.color)24// 对象类型呢？25console.log(app.obj === data.obj)四、插值插值：实现数据到视图的一个传递语法 : {{数据}}插值语法相当于一个js环境，因此我们可以使用点语法4.1属性插值插值不仅仅可以用来渲染元素的内容还可以渲染元素的属性特殊属性 id， class， style自定义属性：data-id通常在属性值中插值属性绑定: 可以是属性的一部分，还可以是属性的全部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>下午复习MVVMM：模型V：视图VM：视图模型Vue实例化对象$el: 源生DOM数据的属性会直接添加在实例化对象上数据绑定Data绑定数据视图绑定El:定义选择器，常用选择器都支持：id，class，tagName, 自定义元素名称插值语法： {{数据}}单次插值 {{*数据}}过滤html标签 {{{数据}}} 可以使用单次插值插值表达式插值过滤器 {{数据 | 过滤器}}五、数据动态绑定我们绑定的数据，在插入页面之前是无法修改的，想要修改只能通过插值表达式或者插值过滤器修改我们想要在插入之前修改，要使用动态绑定数据的语法静态数据绑定：data： {}数据动态数据绑定：computed： {}对象中的key表示数据名称对象中的value必须是函数每次访问该数据的时候，该函数都会执行函数的返回值就是要渲染的数据作用域是vue实例化对象参数只有一个，也是vue实例化对象因此我们想访问vue中的数据，既可以通过参数，也可以通过作用域动态绑定的数据，跟静态绑定的数据一样，也会添加在vue实例化对象上，并且设置了特性1// 定义vue实例化对象2var app = new Vue({3el: '#app',4// 定义静态绑定数据5data: {6msg: 'what a day'7},8// 定义动态绑定数据9computed: {10// 定义的数据11newMsg: function (v) {12// 第一种方式13return this.msg.toUpperCase()14// 第二种方式15return 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>78<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="{8red: false,9'bg-gold': abc,10'fz-50': true11}">爱创课堂</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="[{8color: 'red',9fontSize: '100px'10}, obj]">爱创课堂</h1>11<!-- 第四种 -->12<h1 v-bind:style="{13color: 'red',14background: '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可以实现上述功能。