课程课件01基础dayvue

Vue01-基础语法能够说出Vue的基本用法

能够说出Vue的模板语法能够说出Vue的常用特性

能够基于Vue实现案例效果目标TARGETContents目录Vue概述

Vue基本使用

Vue模板语法

基础案例Vue常用特性

综合案例

vue

框架要点提示掌握程度：了解1-Vue概述视01-Vue概述总Vue是什么用于构建用户界面的渐进式框架声明式渲染组件系统客户端路由集中式状态管理项目构建vue的核心库只关注视图层Vue有哪些优点？易用、灵活、高效简单易上手1-Vue概述课堂问答知识总结总Contents目录Vue概述

Vue基本使用

Vue模板语法

基础案例Vue常用特性

综合案例

Vue使用数据渲染要点提示掌握程度：掌握2-Vue之HelloWorld视Vue之HelloWorld总如何利用Vue将helloworld渲染到页面上1、需要提供标签用于填充数据注意：在标签中我们使用插值语法的形式即{{}}进行填充数据2、引入vue.js库文件注意：一定要先引入Vue文件在使用Vue语法因为存在作用域的问题3、使用vue的语法做功能newVue()创建一个Vue的实例在构造函数中以对象的形式做一些配置4、利用Vue将数据渲染到页面上数据写在data里面2-Vue之HelloWorld课堂问答知识总结总Contents目录Vue概述

Vue基本使用

Vue模板语法

基础案例Vue常用特性

综合案例

要点提示掌握程度：应用3.1模板语法概述视模板语法概述总前端渲染插值语法1、把字符串渲染到页面上有哪些方式？利用原生js拼接字符串利用模板引擎拼接利用Vue插值语法文档碎片document.createDocumentFragment利用es6

``反引号拼接字符串2、我们已经用过哪些模板语法了？插值语法3.1模板语法概述课堂问答课堂问答总指令v-cloak要点提示掌握程度：应用3.2-指令概念与v-cloak指令用法视指令概念与v-cloak指令用法总指令是什么？指令就是一个自定义属性Vue中指令都是以v-开头为什么会有闪烁问题？代码加载的时候先加载HTML把插值语法当做HTML内容加载到页面上当加载完js后才把插值语法替换掉所以我们会看到闪烁问题如何解决插值语法的闪烁问题？v-cloak3.2-指令概念与v-cloak指令用法课堂问答知识总结总v-text和v-html要点提示掌握程度：应用3.3-数据填充相关3个指令的用法总视数据填充相关3个指令的用法v-text和v-html的区别v-text输出的是纯文本，浏览器不会对其再进行html解析html会将其当html标签解析后输出v-pre显示原始信息跳过编译过程一些静态的内容不需要编译加这个指令可以加快渲染3.3-数据填充相关3个指令的用法课堂问答知识总结总数据响应式v-once要点提示掌握程度：应用3.4数据响应式概念与v-once用法视数据响应式概念与v-once用法总什么是数据响应式？当数据改变的时候页面内容跟随者改变v-once有什么好处执行一次性的插值【当数据改变时，插值处的内容不会继续更新】3.4数据响应式概念与v-once用法课堂问答知识总结总

双向数据绑定要点提示掌握程度：应用3.5-双向数据绑定与v-model指令用法视双向数据绑定与v-model指令用法扩总什么是双向数据绑定当数据发生变化的时候，视图也就发生变化当视图发生变化的时候，数据也会跟着同步变化双向绑定的使用场景v-model是一个指令，限制在<input>、<select>、<textarea>、components（组件）

中使用Vue中通过哪一个指令实现双向绑定？v-model3.5-双向数据绑定与v-model指令用法课堂问答知识总结总扩展-Vue双向绑定原理Object.defineProperty()的用法3.5-双向数据绑定与v-model指令用法课堂问答扩展讲解扩mvcmvvm要点提示掌握程度：应用3.6-MVVM设计思想分析视MVVM设计思想分析总M、V、VM分别代表什么？mmodel数据层Vue中数据层都放在data里面vview视图Vue中view即我们的HTML页面vm（view-model）控制器将数据和视图层建立联系vm即Vue的实例就是vm3.6-MVVM设计思想分析课堂问答知识总结总vue中绑定事件v-on要点提示掌握程度：应用3.7-事件绑定基本用法视事件绑定基本用法总Vue中如何绑定事件？通过v-on绑定事件v-on可以简写@3.7-事件绑定基本用法课堂问答知识总结总vue事件中参数传递vue中的事件对象要点提示掌握程度：应用3.8-事件函数参数传递方式视事件函数参数传递方式总vue中事件如何调用？直接绑定函数名称调用<buttonv-on:click='handle1'>点击1</button>调用函数的形式<buttonv-on:click='handle1()'>点击1</button>vue中事件对象怎么使用通过默认的事件参数通过$event使用3.8-事件函数参数传递方式课堂问答知识总结总阻止冒泡和阻止默认行为要点提示掌握程度：应用3.9-事件修饰符的用法视事件修饰符的用法总Vue中常用的事件修饰符有哪些？.stop阻止冒泡.prevent取消默认事件3.9-事件修饰符的用法课堂问答知识总结总键盘事件要点提示掌握程度：应用3.10-按键修饰符的用法视按键修饰符的用法总常见按键修饰符有哪些.enter=>enter键.tab=>tab键.delete(捕获“删除”和“退格”按键)=>删除键.esc=>取消键.space=>空格键.up=>上.down=>下.left=>左.right=>右3.10-按键修饰符的用法课堂问答知识总结总上午复习

vue如何将数据渲染到页面？___________________

v-cloak作用___________________

v-text和v-html的区别_____________什么是双向数据绑定____________________Vue中通过那个指令实现双向数据绑定____________________Vue-基础语法01天上午复习上午复习

mvvm代表什么______________vue如何绑定事件___________________绑定事件的指令可以简写成___________________如何自定义按键修饰符_____________Vue-基础语法01天上午复习自定义按键修饰符要点提示掌握程度：应用3.11-自定义按键修饰符视自定义按键修饰符总怎么自定义按键修饰符通过Vue.config.keyCodes自定义按键修饰符别名Vue.config.keyCodes.f5=116;注意116对应键盘的keycode值f5可以自定义任何名字3.11-自定义按键修饰符课堂问答知识总结总v-onv-model事件处理函数要点提示掌握程度：应用3.12-简单计算器案例视自定义按键修饰符总练简单计算器案例通过v-model实现数值a和数值b的双向绑定给按钮绑定事件让输入框中的值相加将拿到的结果渲染到页面上3.12-简单计算器案例课堂问答知识总结总练习简单计算器案例提示通过v-model实现数值a和数值b的双向绑定给按钮绑定事件让输入框中的值相加将拿到的结果渲染到页面上10分钟3.12-简单计算器案例练v-bind用法属性绑定简写要点提示掌握程度：应用3.13-属性绑定基本用法视属性绑定基本用法总3.13-属性绑定基本用法课堂问答知识总结总vue中怎么操作属性v-bind指令被用来响应地更新HTML属性v-bind:href可以缩写为:hrefv-bind和v-on的区别v-bind绑定属性v-on绑定事件

v-on和v-bind要点提示掌握程度：应用3.14-指令v-model底层原理分析视指令v-model底层原理分析总3.14-指令v-model底层原理分析课堂问答知识总结总模拟v-model第一种方案通过v-on监听输入框的输入事件将输入的值通过事件处理函数存到data中给输入框通过v-bind绑定属性value把数据渲染到页面上第二种方案通过v-on监听输入框的输入事件通过事件对象$event拿到输入的值直接存储到data中给输入框通过v-bind绑定属性value把数据渲染到页面上v-bind绑定类名要点提示掌握程度：应用3.15-样式绑定之class绑定对象用法视样式绑定之class绑定对象用法总如何绑定一个对象通过v-bind:class={键：值}键代表一个类名如果这个值为true表示显示这个类名如果这个值为false表示不显示这个类名3.15-样式绑定之class绑定对象用法课堂问答知识总结总v-bind绑定类名要点提示掌握程度：应用3.16-样式绑定之class绑定数组用法视样式绑定之class绑定数组用法总如何绑定一个数组通过v-bind:class=[值1，值2]值1、值2对应data中的数据3.16-样式绑定之class绑定数组用法课堂问答知识总结总v-bind要点提示掌握程度：应用3.17-样式绑定之class绑定3个细节用法视样式绑定之class绑定3个细节用法总对象绑定和数组绑定可以混用吗？数组中可以存储任何数据类型对象的值中也可以存储任何数据类型绑定数组和绑定对象有什么区别绑定对象的时候对象的属性即要渲染的类名对象的属性值对应的是data中的数据绑定数组的时候数组里面存的值是data中的数据

3.17-样式绑定之class绑定3个细节用法课堂问答知识总结总v-bind绑定行内样式要点提示掌握程度：应用3.18-样式绑定之style绑定用法视样式绑定之style绑定用法总绑定style可以使用数组和对象吗v-bind:style=[值1，值2]数组中的值1和值2中存储的是一个对象这个对象里面存储的css属性和属性值v-bind:style={键：值}键代表CSS的属性值中存贮的是CSS属性值3.18-样式绑定之style绑定用法课堂问答知识总结总分支结构v-if和v-show要点提示掌握程度：应用3.19-分支结构用法视分支结构用法总v-if使用场景多个元素通过条件判断展示或者隐藏某个元素。或者多个元素v-show和v-if区别v-show本质就是标签display设置为none，控制隐藏v-if是动态的向DOM树内添加或者删除DOM元素3.19-分支结构用法课堂问答知识总结总v-forkey的作用要点提示掌握程度：应用3.20-循环结构遍历数组与key的作用分析视循环结构遍历数组与key的作用分析总vue中循环是哪一个指令？v-for=“(item,index)in数组名”Item代表数组中的每一项index代表索引key的作用key来给每个节点做一个唯一标识key的作用主要是为了高效的更新虚拟DOM3.20-循环结构遍历数组与key的作用分析课堂问答知识总结总遍历对象要点提示掌握程度：应用3.21-循环结构遍历对象视循环结构遍历对象总怎么遍历对象v-for=“(item,key,index)in对象名”Item代表对象中的每一项Key代表对应的键名Index代表对应的索引v-if和v-for搭配使用当v-if与v-for一起使用时，v-for具有比v-if更高的优先级。3.21-循环结构遍历对象课堂问答知识总结总Contents目录Vue概述

Vue基本使用

Vue模板语法

基础案例Vue常用特性

综合案例

html结构要点提示掌握程度：应用4.1-案例选项卡-需求分析与UI概览视案例选项卡-需求分析与UI概览总ul中li代表每一项的tab栏div代表每一个对应显示的盒子4.1-案例选项卡-需求分析与UI概览课堂问答知识总结总数据渲染要点提示掌握程度：应用4.2-案例选项卡-实现模板布局视案例选项卡-实现模板布局总如何将data中的数据渲染到页面上利用循环遍历list然后把