https://www.jianshu.com/p/dc5057e7ad0d    (最全入坑教程)

http://doc.liangxinghua.com/vue-family/1.4.html（vue+vue-cli+vue-router+vuex+axios全套解决方案）

TodoList - 把数据存储到 浏览器中，这样不管怎么刷新，数据都不会丢失了

深度复制。深度监视   deep: true;

vue 指令

vue常用

vue 生命周期

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>

</head>

<body>

<div id="app">

     <p>{{ message }}</p>

</div>

<script type="text/javascript">

  var app = new Vue({

      el: '#app',

      data: {

          message : "xuxiao is boy"

      },

       beforeCreate: function () {

                console.group('beforeCreate 创建前状态===============》');

               console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined

               console.log("%c%s", "color:red","data   : " + this.$data); //undefined

               console.log("%c%s", "color:red","message: " + this.message)

        },

        created: function () {

            console.group('created 创建完毕状态===============》');

            console.log("%c%s", "color:red","el     : " + this.$el); //undefined

               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化

               console.log("%c%s", "color:red","message: " + this.message); //已被初始化

        },

        beforeMount: function () {

            console.group('beforeMount 挂载前状态===============》');

            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化

            console.log(this.$el);

               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化

               console.log("%c%s", "color:red","message: " + this.message); //已被初始化

        },

        mounted: function () {

            console.group('mounted 挂载结束状态===============》');

            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化

            console.log(this.$el);

               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化

               console.log("%c%s", "color:red","message: " + this.message); //已被初始化

        },

        beforeUpdate: function () {

            console.group('beforeUpdate 更新前状态===============》');

            console.log("%c%s", "color:red","el     : " + this.$el);

            console.log(this.$el);

               console.log("%c%s", "color:red","data   : " + this.$data);

               console.log("%c%s", "color:red","message: " + this.message);

        },

        updated: function () {

            console.group('updated 更新完成状态===============》');

            console.log("%c%s", "color:red","el     : " + this.$el);

            console.log(this.$el);

               console.log("%c%s", "color:red","data   : " + this.$data);

               console.log("%c%s", "color:red","message: " + this.message);

        },

        beforeDestroy: function () {

            console.group('beforeDestroy 销毁前状态===============》');

            console.log("%c%s", "color:red","el     : " + this.$el);

            console.log(this.$el);

               console.log("%c%s", "color:red","data   : " + this.$data);

               console.log("%c%s", "color:red","message: " + this.message);

        },

        destroyed: function () {

            console.group('destroyed 销毁完成状态===============》');

            console.log("%c%s", "color:red","el     : " + this.$el);

            console.log(this.$el);

               console.log("%c%s", "color:red","data   : " + this.$data);

               console.log("%c%s", "color:red","message: " + this.message)

        }

    })

</script>

</body>

</html>

生命周期总结

beforecreate : 举个栗子：可以在这加个loading事件 
created ：在这结束loading，还做一些初始化，实现函数自执行 
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestroy： 你确认删除XX吗？ destroyed ：当前组件已被删除，清空相关内容

vue1.0记录：  

事件对象:

@click="show($event)"

事件冒泡:

阻止冒泡: 　　

　a). ev.cancelBubble=true;

　b). @click.stop 推荐

默认行为(默认事件):

　　 阻止默认行为:

　a). ev.preventDefault();

　b). @contextmenu.prevent 推荐

键盘:

@keydown $event ev.keyCode

@keyup

常用键:

回车

a). @keyup.13

b). @keyup.enter

上、下、左、右

@keyup/keydown.left

@keyup/keydown.right

@keyup/keydown.up

@keyup/keydown.down

.....

-----------------------------------------

事件绑定：

<img src="{{url}}" alt=""> 效果能出来，但是会报一个404错误

<img v-bind:src="url" alt=""> 效果可以出来，不会发404请求

-----------------------------------------

模板:

{{msg}}  数据更新模板变化

{{*msg}}  数据只绑定一次

{{{msg}}}  HTML转意输出

-----------------------------------------

过滤器:-> 过滤模板数据

系统提供一些过滤器:

{{msg| filterA}}

{{msg| filterA | filterB}}

uppercase eg: {{'welcome'| uppercase}}

lowercase

capitalize

currency 钱

{{msg| filterA 参数}}

...

----------------------------------

用户会看到花括号标记:

v-cloak  防止闪烁, 比较大段落

----------------------------------

<span>{{msg}}</span>  ->   v-text

{{{msg}}}     ->   v-html

----------------------------------

计算属性的使用:

computed:{

b:function(){ //默认调用get

return 值

}

}

--------------------------

computed:{

b:{

get:

set:

}

}

* computed里面可以放置一些业务逻辑代码，一定记得return

---------------------------------

vue实例简单方法:

vm.$el ->  就是元素

vm.$data  ->  就是data

vm.$mount ->  手动挂载vue程序

vm.$options ->   获取自定义属性

vm.$destroy ->   销毁对象

vm.$log(); ->  查看现在数据的状态

---------------------------------

循环：

v-for="value in data"               会有重复数据？

track-by='索引'   提高循环性能

track-by='$index/uid'

无track-by情况：数据修改时，无论值是否被修改，dom都被重新渲染（控制台可以看到）

加入track-by属性：数据修改时，不变数据所在的dom不被重新渲染，已改变的数据所在dom才被重新渲染

vue2.0变化   ==》  

https://www.cnblogs.com/listen9436/p/10025749.html

vue生命周期部分内容转自：https://segmentfault.com/a/1190000008010666?utm_source=tag-newest

vue入手的更多相关文章

  1. Vue的数据依赖实现原理简析

    首先让我们从最简单的一个实例Vue入手: const app = new Vue({ // options 传入一个选项obj.这个obj即对于这个vue实例的初始化 }) 通过查阅文档,我们可以知道 ...

  2. 一个「学渣」从零开始的Web前端自学之路

    从 13 年专科毕业开始,一路跌跌撞撞走了很多弯路,做过餐厅服务员,进过工厂干过流水线,做过客服,干过电话销售可以说经历相当的“丰富”. 最后的机缘巧合下,走上了前端开发之路,作为一个非计算机专业且低 ...

  3. 月薪12k的零基础自学前端必备手册

    随着互联网的深入发展,前端开发工程师一跃成为市场上非常抢手的人才.很多同学,包括以前做UI的.Java的.或者对于IT完全零基础的同学都想学习前端.下图是网上流传甚广的一张前端学习思维导图,很多初学者 ...

  4. 纯小白入手 vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  5. 纯小白入手 vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  6. 纯小白入手 vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  7. vue再次入手（数据传递①）

    准备 之前使用vue.js完成一个项目之后,对其还是充满着无限兴趣,于是不妨利用碎片时间再次研究一下这个“令人着迷”的js框架. 1.新建一个基于vue的项目,具体方法不再赘述,请看这里:http:/ ...

  8. vue再次入手（数据传递②）

    接上篇~ 5.最后一种,互通:无所谓父组件或者是子组件,而是随时随地都能调用到数据的一种方法.便是利用vuex来管理数据,官网描述: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它 ...

  9. vue.js初探

    前言 入手2016最火前端框架之一vue.js.大概从网上找了些资料看了下vue.js,从网上的资料来看只能惊叹其发展速度太快,让我意外的是其作者是华人的前提下作品这么受欢迎. 网上的博客和教程各种组 ...

随机推荐

  1. IT这条路，适合什么人走。

    今天 ,到图书馆Study,呼,不知道为撒,看到那么多新书,那么多新技术(也不能说是新技术,就是自己没有学习过的技术),特别兴奋,学习的疲劳顿时间就没了,感觉什么都想学,都想据为己有,但是...... ...

  2. 字符设备驱动（二）---key的使用：查询方式

    ---恢复内容开始--- 一.硬件电路 1.1 电路原理图 S1-S5共5个按键,其中,S2-S4为中断按键,S1为复位按键.S1直接为硬件复位电路,并不需要我们写进驱动. 单片机接口如下图: 由图中 ...

  3. system("x")

    system("pause");和system("cls")使用示例程序 #include "stdio.h" #include " ...

  4. 20155324 2016-2017-2 《Java程序设计》第9周学习总结

    20155324 2016-2017-2 <Java程序设计>第9周学习总结 教材学习内容总结 学习目标 了解JDBC架构 掌握JDBC架构 掌握反射与ClassLoader 了解自定义泛 ...

  5. C++ 窗口

    DestroyWindow();     //销毁窗口 可重载的事件: PostNcDestroy    窗口销毁后调用

  6. Centos6.8 下解决服务器被挖矿当肉鸡的方法

    刚上班发现有些服务跑不起来,进入服务器查看原因: 第一部分: 一,#top 因为是刚被我kill 掉一次,kill 掉等会还会自启动,之前yam 进程占cpu 是200% 二,# vim /etc/r ...

  7. 【JS】获取一个月份有多少天

    new Date(year, month, 0).getDate() 通过 Date 构造函数传入年份.月份.零,然后通过调用获取日期函数即可获取当前月份有多少天 new Date(2019, 2, ...

  8. webpack 配置全局 jQuery 对象

    将 lodash 添加到当前模块的上下文中 import _ from 'lodash' 但是你想每个模块都引入的话就特别麻烦,这里有插件可以帮助到您,只需在 webpack.config.js 中配 ...

  9. 实现两线程的同步二（lockSupport的park/unpark）

    1.使用LockSupport的part/unpark实现 package com.ares.thread; import java.util.concurrent.locks.LockSupport ...

  10. modbus 寄存器介绍

    modbus 的查询命令 命令 地址开始(两个地址)     地址长度(两个地址)          检验 01  xx     xx xx                              ...