概述
学习vue之前最好先对javaScript、html、css有一定的了解，vue是将这三者完美结合的一种框架，例如一个前端功能如导航栏，在很多页面都可能用到，但每个导航栏的信息不一样，也就是说这个导航栏的html和css一样，但js动态渲染的数据不一样，我们可以使用vue将这三者组合起来称为一个组件，在其他页面要用导航栏的时候调用和这个组件，将展示的数据用vue的方法传入这个组件，就可以达到一个组件在不同页面展示不同信息的功能。
JavaScript
一、常用指令
（1）v-text: 用于更新绑定元素中的内容，类似于jQuery的text()方法
（2）v-html: 用于更新绑定元素中的html内容，类似于jQuery的html()方法
（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来与后端进行数据交互不影响前端的正常操作，前端该干啥干啥，在ajax与后端交互完毕时将结果反馈前端就行了 JQuery的ajax使用方法非常简单，http://blog.sina.com.cn/s/blog_4f925fc30100la36.html
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
HTML
超级文本标记语言：html是有许多标签元素组成，又一个概念叫做DOM，就是说html的结构是一种树形的结构，每个标签都是一个盒子，一个网页的的最底部是一个大盒子，然后上面有好多盒子，盒子套盒子，就组成前端各式个样的模版，如果当然盒子的布局还要配合下面的css
<标记 属性="值" 属性="值">【常用的标准属性】
id： 定义元素在页面中的唯一标识
title：鼠标移入到元素上时提示的文本
class：样式相关，定义元素引用的类选择器style：样式相关，定义元素的行内样式常用标签: https://leohxj.gitbooks.io/front-end-database/html-and-css-basic/common-tag.html
https://www.jianshu.com/p/57cecb7cfc4c
CSS
其中一个盒子就像下面这样，有边框、外边框、内边框、长、宽等属性，我们就可以给这些属性赋予一些值来改变这个盒子的位置、大小、颜色等
|
|
VUE
一、vue组件是由js、css、html三者结合的产物，一个网页的入口肯定又一个根组件，这个组件是new出来，不可以被复用，然后其他export的组件是可以被其他组件任意复用的，调用方称为父组件，被调用方称为子组件，两个父组件中使用同一个子组件数据是独立维护的，互相不影响。
|
|
二、生命周期
- 创建阶段：主要用于组件创建时，获取数据设置组件。
- beforeCreate 在组件的初始化前运行
- created（能够访问创建成功的组件实例，但不能访问 模板，el 或 DOM）在组件初始化后
- 挂载阶段：主要用于访问组件 DOM。
- beforeMount 在初始渲染发生之前和模板或渲染函数被编译之后运行
- mounted（能够访问组件模板）复用的组件模版已经渲染完毕，自己还没有渲染
- 更新阶段：数据变化，组件重新渲染。
- beforeUpdate（能够访问组件更新后的数据，但无法访问 DOM）组件的数据更改之后，更新周期开始，就在DOM修改和重新渲染之前运行。
- updated（能够访问 DOM）组件和DOM重新呈现更改后数据之后运行
- 销毁阶段：（用于销毁组件，做清理工作）
- beforeDestory（销毁前还能访问组件实例）
- destory
三、父子组件通信
1.父组件 —> 子组件：
通过prop进行传递：父组件引入子组件，在component中声明子组件，然后在html里就可以使用子组件了，然后可以把一些事件或者变量绑定给子组件，如 <byted :sidenav=“sidenav”> <byted>;然后子组件接可以通过prop接收父组件传来的事件，如prop{ sidenav}
2.子组件 —> 父组件
（1）.通过回调函数，通过上面父组件往子组件通信的方式，给子组件传入一个父组件的函数，子组件在需要的时候就可以回调父组件的这个函数，也就可以回传数据
（2）通过监听和触发事件，父：<byted v-on=“getValue”> 子：this.$emit(“getValue”, value) 父组件设置监听事件，子组件执行触发事件$emit可以将value通过getValue传回父组件
（3）prop和$emit配合使用方法二： 父组件：<byted :value.sync=“includeValue”> 子组件：this.$emit('update:my-prop-name’, newValue); 子组件value数据改变，同步父组件value数据也会改变。
四、记录vue使get到的技能
- this.$nextTick(() => {})
作用：等待dom加载完毕才执行这个函数 -
箭头函数与普通函数的区别
箭头函数：() =>{} 普通函数：func() {}
普通函数默认绑定本层的this，也就是调用者的this； 箭头函数没有this指针，默认绑定外层this，也就是调用者的调用者的this；const objFather{const obj = {a: () => {console.log(this)}}obj.a()//如果a是普通函数打印的this应该是obj对象的，但他是箭头函数打印出来就是objFather的this指针}https://juejin.im/post/5aa1eb056fb9a028b77a66fd
学习了链接：
实战篇：https://segmentfault.com/a/1190000009762198
Vue.Draggable ：https://github.com/SortableJS/Vue.Draggable
轮子工厂：http://www.wheelsfactory.cn/#/search?searchtype=bySearch
vue API：https://cn.vuejs.org/v2/api/#vm-watch
vue 基础：https://cn.vuejs.org/v2/guide/list.html
Element： https://element.eleme.io/#/zh-CN/component/installation
Sortable: https://github.com/RubaXa/Sortable
最后
以上就是缓慢黄蜂为你收集整理的VUE学习的全部内容，希望文章能够帮你解决VUE学习所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复