总结:渐进式,Vue框架提供核心的语法,可以在核心语法基础之上完善项目功能、路由、集中式管理等等渐渐完善项目。
项目当中需要使用路由功能:Vue框架没有这个功能-vue-router配置路由
Vue开发者工具的安装 Vue开发者工具,是伺候开发者的,对项目调试有很大用处
作用:可以给标签绑定动态属性值【数据发生变化、标签的属性值也跟着变化】动态属性值与VM有关,VM属性值发生变化,视图跟着变化!!!
作用:可以让表单元素实现数据的双向绑定【页面+数据同步】,主要作用是 收集表单元素 的信息,
//v-if:是Vue框架给我们提供一个指令,它主要的作用是可以让元素进行显示或者隐藏 //v-if指令,右侧需要一般是布尔值,真代表当前元素显示、假代表元素隐藏。 //v-bindv-modelv-onv-if,右侧属性值可以VM对象的属性JS表达式 //需要注意:在使用v-ifv-else-ifv-else中间不要出现其他的标签【东西】,否则失效!!!//v-if是通过何种手段实现元素的显示与隐藏? //显示:每一次展示都是创建一个新的DOM //隐藏:每一次都需要移出、干掉DOM进行隐藏。 //由于v-if:直接操作DOM创建与销毁,频繁的操作DOM,很耗性能的。
v-if:通过创建新的DOM节点移除DOM节点实现DOM显示与隐藏【频繁的创建、销毁DOM】比较消耗性能的
v-show:通过CSS样式控制元素的显示与隐藏【DOM节点仅仅只是需要创建一次即可】
键盘事件的修饰符,一般只是与表单元素一起使用。 键盘相关的修饰符有很多: enter->
回车键 left->
左键 right->
右键 up->
上键 down->
下键 esc、 a-z、 数字的都可以、书写相应的键盘码数字都可以
面试高频题:apply、call、bind区别? 尽管call、apply和bind三个方法的作用都是改变函数执行时this的指向,但它们在使用上还是有一定的区别。
call和apply都是改变函数的上下文this的指向后立即执行该函数,而bind则是返回改变上下文this后的一个函数。
call和apply的第一个参数都是要改变的上下文对象,call从第二个参数开始以及后面的参数都是以参数列表的形式展现,而apply则是把除了要改变的上下文对象外的其他参数放在一个数组作为它的第二个参数。
面试:响应式数据的原理分析 Vue2版本响应式数据实现的原理 : 利用Object.defineProperty实现的
//methods它主要的作用是给VM实例添加方法——-方法 //computed:它是利用已有的属性与属性值创建出一个新的属性与属性值—-属性 //区别1:methods方法在使用的时候一般需要加上小括号,computed计算出来的属性,在使用的时候是不需要加小括号的 //区别2:计算属性算出来的数值有缓存机制,计算出一个可以多次使用
动态类名-字符串写法煮豆持作羹,漉菽以为汁。萁在釜下燃,豆在釜中泣。本自同根生,相煎何太急?
动态类名对象写法 1.《长城》【唐】汪遵 秦筑长城比铁牢,蕃戎不敢过临洮。 虽然万里连云际,争及尧阶三尺高。
动态类名之数组的写法北京(Beijing),简称“京”,古称燕京、北平,是中华人民共和国的首都、直辖市、国家中心城市、超大城市,国务院批复确定的中国政治中心、文化中心、国际交往中心、科技创新中心,截至2020年,全市下辖16个区,总面积16410.54平方千米。根据第七次
动态行内样式我是祖国的老骨朵 行内样式的动态写法之–对象写法Vue框架行内样式写法
watch监听属性//监听属性,作用:watch也是一个配置项,它主要的作用是,可以监听 VM响应式属性的值 的变化。 watch: { //监听属性的时候,当属性值发生变化的监听的函数会立即执行一次 //底下书写的监听VM->
属性名字【VM身上没有这个响应式属性,监听不到的】 //函数写法 // keyword(){ //console.log(我能监听到keyword关键字发生变化,只要关键字发生变化立即执行一次); // } //对象写法 keyword:{ //如果是对象的写法,通过handler方法监听属性值的变化 //函数的名字不能瞎写 handler(){ console.log(VM响应式属性值发生变化); } } }
beforeCreate:VM未完成完全的初始化【不能获取VM的属性、方法】
响应式数据数组和对象的注意事项VM身上的属性->
对象的写法【都是响应式数据】
如果数组里面的元素不是响应式,Vue框架就做不到数据发生变化,视图跟着变化。
利用新的数组替换原始数组:map、filter、slice等等方法都可以使用,因为这些方法都会返回一个新的数组
单文件组件和非单文件组件 单文件组件:一个文件即为一个组件,这个文件的尾缀.vue文件
非单文件组件:一个文件里面可以定义多个组件,这个文件可以是.html文件
组件的基本使用//组件:component //组件:复用的【代码 + 资源(图片、样式、视频)】集合在一起即为组件! //Vue框架中从书写角度出发:分为两大类组件 //单文件组件:一个文件即为一个组件,这个文件的尾缀务必是.vue //非单文件组件:一个文件里面,可以定义多个组件,这个文件尾缀.html //el配置项:只有new Vue构造函数初始化VM实例才可以使用,el配置项只能出现一次!!! //组件不需要书写el配置项!!!! //组件的 Data的配置项b函数写法
版本说明 Vue依赖包:尤雨溪团队,给开发人员提供很多版本的依赖包 【完整版本、压缩版本、运行时版本】
全局组件 全局组件的使用:只需要定义一次,可以在任意组件中直接使用。就不用每一次都在注册了。
全局组件一般在这种情况下才会使用:项目当中很多地方(组件),大家频繁使用某一个功能,你就可以把这个功能封装为全局组件,定义一次,可以在任意地方直接使用【不需要引入、不需要注册】直接使用。
//定义一个组件 const Carousel = Vue.extend({ data(){ return {info:我是轮播图组件,而且我还是全局组件}; }, //结构编辑器onent(Erha,Carousel); //定义为全局组件 :定义一次,可以在任意地方直接使。