15
2020
11

说一下Vue.js的认识?

Vue.js(读音/vjuː/,类似于view)是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和Vue生态系统支持的库结合使用时,Vue也完全能够为复杂的单页应用程序提供驱动。Vue.js起步:

 

引入相应文件:

 

<script src="https://unpkg.com/vue"></script>

 

声明式渲染:Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统:

 

<!-- html 文件中 -->

<div id="app">

    {{ message }}

</div>

<!-- js 文件中 -->

var app = new Vue({

    el: '#app',

    data: {

        message: 'Hello Vue!'

    }

})

 

通过浏览器查看效果图为:

 1558056837@9bfea47ade58d69d9a332357a345ebe0.png


 

创建 vue 实例:每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的,当创建一个 Vue 实例时,你可以传入一个选项对象。可以使用这些选项来创建你想要的行为。

 

<!-- js 文件中 -->

var vm = new Vue({

    // 选项

})

 

据变化时更新 DOM  等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码。比如 created 钩子可以用来在一个实例被创建之后执行代码:

 

<!-- js 文件中 -->

new Vue({

    data: {

        a: 1

    },

    created: function () {

        console.log('a is: ' + this.a)

    }

})

 

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。