vue

vue.js如何快速入门第1篇

前言:

在学校我是学java后端的，对前端很感兴趣于是自学了前端，我之前没有接触过任何前端知识,连基本的HTML语法,css,js的基础知识都不懂，现在不能说多么精通吧，但是可以轻松解决工作中需求任务。作为自学派前端开发，聊聊如何快速上手vue.js吧

为什么学Vue框架

vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。我就不比较vue,angular,react了，网上太多。

基础准备

vue.js是前端的框架。学入门vue框架，必须学好前端三大件：html,css ,js。其中js的话最好学习es6。如果三大件不是很了解，后面都没法学，很吃力。

看视频

学习编程语言最好是先去找有关视频教程，可以去B站啊，中国大学mooc啊等等，看那些免费的就够了。我自学时百度了好多都是说去看官方文档，但是作为前端的小白，怎么可能能看懂呢，肯定一头雾水。跟着视频教程一步一步来，不懂得百度一下，从陌生到掌握是需要时间的，不要想着几天必须看完，必须掌握，一口吃不了胖子。当你看完视频后，脑子有点乱，记不住，没关系，我在后面的文章都给你总结好了。

常用指令

v-on：使用v-on我们可以在标签上面绑定事件

v-bind: 绑定属性，不多说了，注意冒号后面跟标签的属性，属性后面的等号指向数据它可以简写为 :class, :href。

v-if v-show 加载性能：v-if加载速度更快，v-show加载速度慢切换开销：v-if切换开销大，v-show切换开销小 v-if是惰性的，它是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，v-show 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好，如果在运行时条件很少改变，则使用v-if较好。

v-for: 数组和对象的渲染

v-text: 渲染数据的一种方式

v-html: 双大括号语法无法渲染HTML标签，我们需要使用v-html。

Mustache: 语法 (双大括号) 的文本插值。

v-mode: 渲染数据并响应式的监听数据修改

vue生命周期

每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出所有的钩子函数，然后我们再一一详解:

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

先来一波代码，各位复制在浏览器中运行，打开console查看就行了：

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>vue生命周期学习</title>
   <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
 </head>
 <body>
   <div id="app">
     <h1>{{message}}</h1>
   </div>
 </body>
 <script>
   var vm = new Vue({
     el: '#app',
     data: {
       message: 'Vue的生命周期'
     },
     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>
 </html>

运行后打开console可以看到打印出来内容如下:

进一步学习请关注：

vue.js如何快速入门第2篇

技术创作101训练营