乐趣区

关于vue.js:Vue-快速入门

jiezi

Vue 即 Vue.js，它是风行的前端开发框架，目前曾经倒退成为优良的前端生态。

学习 Vue 之前，须要具备：HTML, CSS, JavaScript 基础知识，最好还领有应用这些技术开发过网站的教训。

如果不相熟 JavaScript，基本上无奈了解 Vue.js。所以读者敌人，请依据本人的状况，做好学习 Vue.js 的筹备工作吧。

一旦具备基础知识后，便开始搭建环境，一边应用一边学习。

毫无疑问，一边入手一边看书，是把握一门利用技能的最佳办法。

装置

针对于小型我的项目，只需将 Vue.js 库用于 援用 到我的项目中即可。
针对于大型项目，官网倡议应用 NPM 装置 Vue.js 以及配套的各种扩大工具。

援用

上面是官网提供的可供援用的办法：

# 测试环境
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

#生产环境 - 指定版本
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

#原生 ES Modules 环境
<script type="module">
  import Vue from https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js'
</script>

装置

NPM 是 JS/Node 的一个包管理工具，Vue 配套工具利用 NPM 装置其余相干的 JS 包到本地我的项目。

上面列出从零开始的 Vue 装置过程：

# 装置 Node 版本管理工具 [nvm](https://github.com/nvm-sh/nvm)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

#装置最新版 Node
nvm install node

#装置

原理

想做到把握 Vue 的实质，须要牢牢记住如下几个要点：

虚构 DOM

虚构 DOM 即虚构进去的 DOM 元素，并不需要提前在 HTML 节点树中定义。而是先充沛把虚构 DOM 想做的事件“构建”进去，再挂载到实在的 HTML 构造中，这样便实现了所谓的前端的 MVC 化。

Vue 的基本原理是虚构 DOM 技术。

根对象

不论你有没有学习过 JS，你肯定要明确，在 JS 中，所有皆对象。一个变量，一个类，一个函数，都具备对象的特色。

Vue 所谓的根实例，就是一个最根本的对象，对于 Vue 对象中定义的其余子项来说，Vue 根实例就是它们的父对象。

个别用 this 示意根实例自身。

格局 JSON 化

Vue 根实例中，次要将“数据 + 函数组选项”通过 JSON 格局展示进去。其中，data 能够写成对象，也能够写成函数（Vue 组件中必须写成函数）

var app = new vue({
    el: '#app',
    
    data:{message: 'hello World'},
    
  data: function() {
    return {mess: 'hello World'},
    
    created: {functionName1: function (){},
      functionName2: function (){},
      functionName3: function (){},
      },
      
    methonds: {functionName1: function (){},
      functionName2: function (){},
      functionName3: function (){},
      },
      
    mounted: {functionName1: function (){},
      functionName2: function (){},
      functionName3: function (){},
      },
      
    beforeDestory: {functionName1: function (){},
      functionName2: function (){},
      functionName3: function (){},
      },
      
    filters: {functionName1: function (){},
      functionName2: function (){},
      functionName3: function (){},
      },
      
    computed: {functionName1: function (){},
      functionName2: function (){},
      functionName3: function (){},
      }, 
}
)

Vue 生命周期

Vue 实例具备一个生命周期，具体参考下图：

灵便的数据绑定

Vue 实例是一起的基本，但须要必须与 HTML 的节点产生连贯，能力产生作用。

这个连贯过程，咱们称之为数据绑定。

Vue 技术体系中，与数据绑定相干的技术因素包含：

  1. 指令：v-model, v-on:click | dblclick | keyup | mousemove, v-bind, v-html, v-if, v-pre, 等。。
  2. 插值：{{message}}, {{message | filter}} 等。

本文由 Websoft9 原创公布，转载请注明出处。创作不易，欢送探讨，感激反对！

退出移动版