vue入门PPT课件

Vue.js入门,1,课程介绍,1、初步了解Vuejs框架2、介绍Vuejs开发环境的搭建和脚手架工具的使用3、项目实践,2,学习Vue.js的准备知识,node以及npm操作html、css、js基础jsES6语法基础,3,Vue.js的特点,轻量级高效率上手快、简单易学文档全面而简洁,4,Vue.js的安装,在Vue.js的官网上直接下载vue.min.js并用标签引入使用CDN方法BootCDN（国内）:unpkg：cdnjs:npminstallvue,5,Vue实例,每个Vue.js应用都是通过构造函数Vue创建一个Vue的根实例启动的在实例化Vue时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。,6,一个最简单的实例,7,模版指令html与vue对象的粘合剂,数据渲染：、v-text、v-html、javascript表达式等形式指令：带有v-前缀的特殊属性，常见的指令有v-if、v-show、v-model、v-bind、v-on、v-for等过滤器：Vue2.x需要自定义过滤器，过滤器可以用在两个地方：mustache插值()和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符(|)指示,8,模版指令v-textv-html,与v-text渲染方式相同，不对数据进行处理直接渲染v-html则是会先对值进行html解析，再渲染。,9,模版语法v-ifv-show,v-if和v-show都是可以控制模块的显示和隐藏，不同的是：v-if在每次切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，同时v-if也是惰性的，如果初始渲染条件为假，则什么也不会做，直到条件为真时，才渲染条件块；相比之下，v-show就简单得多不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件不太可能改变，则使用v-if较好。,10,列表渲染,Templatev-for对象迭代v-for整数迭代v-for数组迭代v-for组件和v-for,11,列表渲染的语法,v-for可以接收第二个参数作为键名(对象迭代)或者索引(数组迭代)，在对象迭代时还可以接收第三个参数作为索引。,12,模版指令v-on,用v-on指令监听DOM事件来触发一些JavaScript代码；v-on指令也可以简写成,13,模版指令v-bind,属性绑定：v-bindv-bind指令同样可以简写成:,14,组件,什么是组件？组件（Component）是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。,15,注册组件,全局注册局部注册,16,组件是如何工作的,组件A在它的模版中使用了组件B。它们之间必然需要相互通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。在Vue.js中，父子组件的关系可以总结为propsdown,eventsup。父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息。,17,props,子组件要显式地用props选项声明它期待获得的数据。,18,动态props和单向绑定,在模版中，你可以使用v-bind动态绑定父组件的数据到子组件，当父组件的数据变化时，子组件的props都会更新为最新值，但反过来说，子组件props数据的变化不会更新到父组件，因为在Vue2.x中，props是单向绑定的，这就意味着在子组件内不应该修改props，如果你这么做了，Vue会在控制台给出警告。,19,自定义事件,那如果子组件要把数据传递回去，该怎么做呢？ps:除了自定义事件，还有以下几种形式可以实现双向绑定1、利用引用类型；2、使用自定义事件的表单输入组件,20,使用slot分发内容,总而言之就是在组件内容定义了模版，并使用了特殊slot元素作为插槽，至于替换插槽的原始内容则是由父组件进行填充。,21,小结,Vue应用都是通过调用构造函数来创建一个实例，在实例时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。html与Vue对象是通过各种模版指令进行数据双向绑定可以自定义模版成为组件，组件的作用域都是各自独立的，需要propsdown，emitup进行父子组件的互相通信可以定义一个通用的模版，然后使用特殊元素slot分发内容，实现同一个模版内容多样化,22,Vue全家桶系列,Vue.js作为一个轻量级的框架，它的核心库只关心视图层，在大型项目开发中，我们需要引入Vue官方提供的其它一系列模块：vue-router：路由vue-resource：网络请求vuex：状态管理以上的几个模块便是Vue著名的全家桶系列，再加上下面要讲的vue-cli构建工具，就是一个完整的Vue项目的核心构成。,23,vue-cli命令行工具,在很多Vue项目中，我们使用Vponent来定义全局组件，紧接着用newVue(el:#container)在每个页面内指定一个容器元素。这种方式在很多中小规模的项目中运作的很好，在这些项目里JavaScript只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由JavaScript驱动的时候，下面这些缺点将变得非常明显：全局定义(Globaldefinitions)强制要求每个component中的命名不得重复字符串模板(Stringtemplates)缺乏语法高亮，在HTML有多行的时候，需要用到丑陋的转义字符不支持CSS(NoCSSsupport)意味着当HTML和JavaScript组件化时，CSS明显被遗漏没有构建步骤(Nobuildstep)限制只能使用HTML和ES5JavaScript,而不能使用预处理器，如Pug(formerlyJade)和Babel文件扩展名为.vue的单文件组件为以上所有问题提供了解决方法，并且还可以使用Webpack或Browserify等构建工具。为了更快速的搭建大型单页应用，Vue.js提供了一个官方命令行工具：vue-cli；该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。,24,如何安装vue-cli,安装步骤：vue-cli的github地址：,25,从.vue到页面,前面学习到了vue-cli工具的安装，但在使用之前我们要了解的是.vue单文件有什么内容？它是怎么生成页面的？,26,vue-cli搭建的项目目录结构介绍,1.build和config都是webpack配置2.src是存放项目源文件的目录3.static存放第三方静态资源，这个里面的gitkeep是这个目录为空，也可以把这个目录提交的git仓库里面，因为通常一个空目录是不能提交git仓库里面的4.babelrc是babel的配置项。5.editorconfig是编辑器的配置项6.gitignore里面存放的是会忽略语法检查的目录7.index.html入口页面8.package.json是项目的描述