学习vue之前最好先对javaScript、html、css有一定的了解,vue是将这三者完美结合的一种框架,例如一个前端功能如导航栏,在很多页面都可能用到,但每个导航栏的信息不一样,也就是说这个导航栏的html和css一样,但js动态渲染的数据不一样,我们可以使用vue将这三者组合起来称为一个组件,在其他页面要用导航栏的时候调用和这个组件,将展示的数据用vue的方法传入这个组件,就可以达到一个组件在不同页面展示不同信息的功能。

(3)v-if: 用于根据表达式的值的真假条件渲染元素,如果上图P3为false则不会渲染P标签

(4)v-show: 用于根据表达式的值的真假条件显示隐藏元素,切换元素的 display CSS 属性

(5)v-for: 用于遍历数据渲染元素或模板,如图中P6为[1,2,3]则会渲染3个P标签,内容依次为1,2,3

(6)v-on: 用于在元素上绑定事件,图中在P标签上绑定了showP3的点击事件

ajax是一种前端异步请求后端的方式,什么叫异步请求,直观的说就是使用ajax来与后端进行数据交互不影响前端的正常操作,前端该干啥干啥,在ajax与后端交互完毕时将结果反馈前端就行了  JQuery的ajax使用方法非常简单,

html是有许多标签元素组成,又一个概念叫做DOM,就是说html的结构是一种树形的结构,每个标签都是一个盒子,一个网页的的最底部是一个大盒子,然后上面有好多盒子,盒子套盒子,就组成前端各式个样的模版,如果当然盒子的布局还要配合下面的css

其中一个盒子就像下面这样,有边框、外边框、内边框、长、宽等属性,我们就可以给这些属性赋予一些值来改变这个盒子的位置、大小、颜色等

一、vue组件是由js、css、html三者结合的产物,一个网页的入口肯定又一个根组件,这个组件是new出来,不可以被复用,然后其他export的组件是可以被其他组件任意复用的,调用方称为父组件,被调用方称为子组件,两个父组件中使用同一个子组件数据是独立维护的,互相不影响。

deep: true //监听对象使用true代表深度监听,监听字符串可以不用

创建阶段:主要用于组件创建时,获取数据设置组件。beforeCreate 在组件的初始化前运行created(能够访问创建成功的组件实例,但不能访问 模板,el 或 DOM)在组件初始化后挂载阶段:主要用于访问组件 DOM。 beforeMount  在初始渲染发生之前和模板或渲染函数被编译之后运行mounted(能够访问组件模板)复用的组件模版已经渲染完毕,自己还没有渲染更新阶段:数据变化,组件重新渲染。beforeUpdate(能够访问组件更新后的数据,但无法访问 DOM)组件的数据更改之后,更新周期开始,就在DOM修改和重新渲染之前运行。updated(能够访问 DOM)组件和DOM重新呈现更改后数据之后运行销毁阶段:(用于销毁组件,做清理工作)beforeDestory(销毁前还能访问组件实例)destory

通过prop进行传递:父组件引入子组件,在component中声明子组件,然后在html里就可以使用子组件了,然后可以把一些事件或者变量绑定给子组件,如 byted :sidenav=“sidenav” byted;然后子组件接可以通过prop接收父组件传来的事件,如prop{ sidenav}

(1).通过回调函数,通过上面父组件往子组件通信的方式,给子组件传入一个父组件的函数,子组件在需要的时候就可以回调父组件的这个函数,也就可以回传数据

普通函数默认绑定本层的this,也就是调用者的this; 箭头函数没有this指针,默认绑定外层this,也就是调用者的调用者的this;

obj.a() //如果a是普通函数打印的this应该是obj对象的,但他是箭头函数打印出来就是objFather的this指针

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注