VUE学习

            学习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

$.ajax({    url: this.updateMessageUrl,    type: 'POST',    data: {       message_data: strData,       name: this.user    },    success: (res) => {       const result = JSON.parse(res);       const type = result.code ? 'error' : 'success';       const content = result.code ? '发布失败' : '发布成功';       this.$store.dispatch('updateMessage', {          content: content,          type: type       });    },    error: () => {       this.$store.dispatch('updateMessage', {          content: '失败',          type: 'error'       });    } });

 

 

 

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

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

"el-common">

 

VUE

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

 

import Message from '../../common/ui/message/message';  //引入子组件     import template from './message_center.html'; import './message_center.less';   export default({    template,    props: { //接收父组件传递的对象，接收类型有Object、String、Function、Array、Boolean 类型         categorykey: Object,         message: String    }    watch: { //监听成员变量，在成员变量内容发生变化时触发         message: {             handler(val){                 console.log(val)             },             deep: true //监听对象使用true代表深度监听，监听字符串可以不用         }     }    data() {    //组件放成员变量的地方       return {          loading: false,          header: 'personal_center',          topnav: {             header: 'message_center',             mark: 'message_config'          }       };    },     methods: { //组件自定义事件的地方        getIfManager(IfManager) {           this.IfManager = IfManager;       },         getUser(user) {            this.user = user;         }     },    components: { //声明子组件的地方，在html里可以应用这些子组件       'byted-message': Message,    } });

 

二、生命周期

• 创建阶段：主要用于组件创建时，获取数据设置组件。

1. beforeCreate 在组件的初始化前运行
2. created（能够访问创建成功的组件实例，但不能访问 模板，el 或 DOM）在组件初始化后

• 挂载阶段：主要用于访问组件 DOM。 

1. beforeMount  在初始渲染发生之前和模板或渲染函数被编译之后运行
2. mounted（能够访问组件模板）复用的组件模版已经渲染完毕，自己还没有渲染

• 更新阶段：数据变化，组件重新渲染。

1. beforeUpdate（能够访问组件更新后的数据，但无法访问 DOM）组件的数据更改之后，更新周期开始，就在DOM修改和重新渲染之前运行。
2. updated（能够访问 DOM）组件和DOM重新呈现更改后数据之后运行

• 销毁阶段：（用于销毁组件，做清理工作）

1. beforeDestory（销毁前还能访问组件实例）
2. destory

 

三、父子组件通信

1.父组件 —> 子组件：

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

 

2.子组件 —> 父组件

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

（2）通过监听和触发事件，父：   子：this.$emit(“getValue”, value) 父组件设置监听事件，子组件执行触发事件$emit可以将value通过getValue传回父组件

（3）prop和$emit配合使用方法二：   父组件：  子组件：this.$emit('update:my-prop-name’, newValue); 子组件value数据改变，同步父组件value数据也会改变。

 

四、记录vue使get到的技能

1. this.$nextTick(() => {}) 
   作用：等待dom加载完毕才执行这个函数

2. 箭头函数与普通函数的区别
   箭头函数：() =>{}   普通函数：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