来自 服务器&运维 2019-12-12 03:56 的文章
当前位置: 澳门威尼斯人平台 > 服务器&运维 > 正文

Vue.js 60分钟轻松入门_vue.js_脚本之家

vue是西班牙语中央电台图的意味,Vue.js是三个翩翩、高质量、可组件化的MVVM库,同期具有非常轻松上手的API。

零器件简单介绍

上风流倜傥节大家介绍了Vue.js框架,那意气风发节,我们能够来试着动手写点小代码了。

Vue.js介绍

生机勃勃、基本构造

组件系统是Vue.js当中四个要害的定义,它提供了生龙活虎种浮泛,让我们得以接受独立可复用的小组件来营造大型应用,大肆档期的顺序的运用分界面都足以抽象为二个构件树:

1 简易安装

Vue.js是任何时候相当红的二个JavaScript MVVM库,它是以多少驱动和组件化的思忖构建的。比较于Angular.js,Vue.js提供了更为简洁、更便于领悟的API,使得大家能够火速地上手并应用Vue.js。

index.html代码:

那么怎么着是组件呢?

要使用Vue.js,我们得先把它安装到大家的等级次序中,表明了简便易行安装,大家讲课的鲜明是最简单易行的措施,先不管那个高大上的费时间的装置方式,直接引进一个js文件,先把代码敲代码再说。

意气风发旦你以前已经习于旧贯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的考虑,因为Vue.js是数据驱动的,你不必要手动操作DOM。它经过有个别异样的HTML语法,将DOM和数目绑定起来。风流浪漫旦您创设了绑定,DOM将和多左徒持同步,每当改动了数据,DOM也会相应地立异。

  {{ message }}   

new Vue({ el: '#app', //选定要使用vue的部分 data: { //定义数组,可以在该部分使用{{}}引用 message: 'Hello Vue.js!' } })

零器件能够扩展HTML成分,封装可采纳的HTML代码,大家得以将构件看作自定义的HTML成分。

 简易安装 Vue.js  

自然了,在行使Vue.js时,你也能够结合别的库一同利用,例如jQuery。

二、双向数据绑定

由于组件的字数非常的大,小编将会把组件的入门知识分为两篇来说学,那样也可能有扶持各位看官们快快消化吸收。

官方网站提供了Vue.js源码下载之处:

本文的德姆o和源代码已放置GitHub,假令你感到本篇内容科学,请点个赞,或在GitHub上加个少于!

index.html代码:

构件的创始和挂号

要是您不想下载到本地,要能够直接用CDN的点子,引进互连网能源,相像能够:

v-for Demo v-bind Demo Page Demo GitHub Source

  {{ message }}    

new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } })

着力步骤

那样,大家就打响地用最简便的方法把Vue.js引进到大家的项目中了。至于那个高大上的npm,Bower等花式安装方式,我们前期再看它。

MVVM模式

三、渲染列表

Vue.js的组件的行使有3个步骤:成立组件布局器、注册组件和接纳组件。

2 数据驱动视图

下图不只有包罗了MVVM方式,还描述了在Vue.js中ViewModel是何等和View以至Model实行互相的。

index.html代码:

下边包车型客车代码演示了那3个步骤:

澳门威尼斯人平台,引入之后,大家就能够把它用起来。听别人讲它最牛逼的地点是数额驱动视图,解放DOM操作,令你不再做又目眩神摇又耗质量的DOM操作。那么,大家就看看它是怎么玩的!

ViewModel是Vue.js的主导,它是叁个Vue实例。Vue实例是职能于某一个HTML成分上的,那个因素得以是HTML的body成分,也得以是钦命了id的某部成分。

     {{ todo.text }}    

new Vue({ el: '#app', data: { todos: [ //在data中定义todos数据 { text: 'Learn JavaScript' }, { text: 'Learn Vue.js' }, { text: 'Build Something Awesome' } ] } })
         // 1.创建一个组件构造器 var myComponent = Vue.extend({ template: '<div>This is my first component!</div>' }) // 2.注册组件,并指定组件的标签,组件的HTML标签为<my-component> Vue.component('my-component', myComponent) new Vue; 

固然,咱们以往要把js对象中的有个别变量的值渲染在页面上,传统的做法,正是先用getElementById获取到DOM节点目的,再innerHTML设置它的内容。

当创造了ViewModel后,双向绑定是什么样到达的吧?

四、管理顾客输入

能够见到,使用组件和采纳普通的HTML成分没什么区别。

现行反革命,在Vue.js中,你须求如此做:

首先,大家将上海教室中的DOM Listeners和Data Bindings看作七个工具,它们是完成双向绑定的重大。从View侧看,ViewModel中的DOM Listeners工具会帮大家监测页面上DOM成分的转移,假如有变动,则改动Model中的数据;从Model侧看,当大家立异Model中的数据时,Data Bindings工具会帮大家立异页面中的DOM成分。

index.html代码:

知道组件的成立和登记

 公众号:{{ name }}   let vm = new Vue({ el:"#app", data:{ name:"web前端教程", } }); 

Hello World示例

  {{ message }}  Reverse Message  

我们用以下多少个步骤来领悟组件的开创和注册:

小编们透过new Vue创设二个实例vm,参数是多少个json对象,属性el提供叁个在页面上存在的DOM 元素,注脚这几个实例是关联钦点的DOM节点。

摸底一门语言,只怕学习一门新技艺,编写Hello World示例是大家的必要求经过的路。这段代码在画面上输出"Hello World!"。

app.js代码:

1. Vue.extend(卡塔尔是Vue结构器的扩张,调用Vue.extend(卡塔尔(قطر‎创制的是一个组件布局器,并非二个现实的组件实例。

在DOM节点上,大家就足以接纳双大括号{{ }}的语法来渲染Vue实例对象data中已经存在的属性值,如下面案例中的name属性的值“web前端教程”就能被渲染到页面中,替换{{ name }} 显示效果为:“web前端教程”。

       {{ message }}     // 这是我们的Model var exampleData = { message: 'Hello World!' } // 创建一个 Vue 实例或 "ViewModel" // 它连接 View 与 Model new Vue({ el: '#app', data: exampleData }) 
new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, methods: { //methods字段内容用来定义处理方法 reverseMessage: function () { //通过this.message可以更改message数据的值,这里进行了颠倒 this.message = this.message.split.join

2. Vue.extend(卡塔尔布局器有三个采撷对象,选项对象的template属性用于定义组件要渲染的HTML。

在那进程中,大家并从未写过操作DOM节点的代码,何况,上豆蔻梢头节我们讲过,MVVM形式中的viewModel充作着监察和控制者的剧中人物,假诺它监察和控制到model数据发生了扭转,便会打招呼view视图进行更新,这几个进度并没有须求你去参与。

采取Vue的历程就是概念MVVM种种组成都部队分的历程的长河。

本文由澳门威尼斯人平台发布于服务器&运维,转载请注明出处:Vue.js 60分钟轻松入门_vue.js_脚本之家

关键词: