专栏首页实习面试vue.js如何快速入门第1篇
原创

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

目录

前言:

为什么学Vue框架

基础准备

看视频

常用指令

vue生命周期

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训练营

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 大四如何快速找到实习岗位

    不管你是培训派,自学派,还是学院派,去找实习,去找工作,首先一点,得能干活。不能说给你个需求必须几天完成吧,最起码可以完成一点工作(例如:写个下拉框,写个提交表...

    RDSunday
  • 图解vue生命周期

    学习vue时搞清楚生命周期可以帮助你知道什么时候在什么地方执行该执行的方法,话不多说上图: ? 复制下面代码可以在控制台更详细展示各个钩子的状态 <!DOCTY...

    李文杨
  • es6中class类的全方面理解(一)

    传统的javascript中只有对象,没有类的概念。它是基于原型的面向对象语言。原型对象特点就是将自身的属性共享给新对象。这样的写法相对于其它传统面向对象语言来...

    用户1272076
  • es6 --- Generator 函数

    在 ES6 出现之前,基本都是各式各样类似Promise的解决方案来处理异步操作的代码逻辑,但是 ES6 的Generator却给异步操作又提供了新的思路,马上...

    小蔚
  • SpringBoot嵌入式Tomcat的自动配置原理

    我们知道SpringBoot的自动装配的秘密在org.springframework.boot.autoconfigure包下的spring.factories...

    Java学习录
  • LeetCode 328. 奇偶链表(双指针)

    给定一个单链表,把所有的奇数节点和偶数节点分别排在一起。请注意,这里的奇数节点和偶数节点指的是节点编号的奇偶性,而不是节点的值的奇偶性。

    Michael阿明
  • 面试必备 | 不可不会的反转链表

    反转链表这题真的是面试非常喜欢考的了,这题看起来简单,但是能用两种方法一遍 bug free 也是不容易的,面试的时候可以筛下来一大批人,无论是对 junior...

    敖丙
  • 每日算法系列【LeetCode 328】奇偶链表

    给定一个单链表,把所有的奇数节点和偶数节点分别排在一起。请注意,这里的奇数节点和偶数节点指的是节点编号的奇偶性,而不是节点的值的奇偶性。

    godweiyang
  • RNN示例项目:详解使用RNN撰写专利摘要

    我第一次尝试研究RNN时,我试图先学习LSTM和GRU之类的理论。在看了几天线性代数方程之后(头疼的要死),我在Python深度学习中发生了以下这段话:

    AiTechYun
  • 聊聊QML中的MVC文化

    和大家简单介绍一下QML里面的MVC设计(Model-View-Controller的缩写,UI设计常用的一种设计模式)。

    Jean

扫码关注云+社区

领取腾讯云代金券