>

60分钟轻易入门,js基础知识汇总

- 编辑:www.bifa688.com -

60分钟轻易入门,js基础知识汇总

介绍

简介

Vue.js(读音 /vjuː/, 类似于 view) 是一套塑造用户分界面包车型地铁渐进式框架。与别的重量级框架分化的是,Vue 选拔自底向上增量开辟的设计。Vue 的大旨库只关怀视图层,並且特别容术数习,特别轻松与任何库或已有等级次序整合。另一方面,Vue 完全有技艺驱动选择单文件组件和 Vue 生态系统援救的库开辟的繁杂单页应用。

Vue.js 的靶子是透过尽也许简单的 API 实现响应的数据绑定和构成的视图组件。

Vue.js 本人不是八个全能框架——它只集中于视图层。因而它极其轻松学习,极度轻松与任何库或已有品种整合。另一方面,在与连锁工具和支撑库一同使用时,Vue.js 也能完善地驱动复杂的单页应用。

vue是德文中央广播台图的野趣,Vue.js是一个翩翩、高质量、可组件化的MVVM库。

引用小编的话:

2013年末,我还在Google Creative Lab工作。当时在项目中使用了一段时间的Angular,在感叹数据绑定带来生产力提升的同时,我也感到Angular的API设计过于繁琐,使得学习曲线颇为陡峭。出于对Angular数据绑定原理的好奇,我开始 “造轮子”,自己实现了一个非常粗糙的、基于依赖收集的数据绑定库。这就是Vue.js的前身。同时在实际开发中,我发现用户界面完全可以用嵌套的组件树来描述,而一个组件恰恰可以对应MVVM中的ViewModel。于是我决定将我的数据绑定实验改进成一个真正的开源项目,其核心思想便是 “数据驱动的组件系统”。

详尽请阅读:

Vue.js介绍

vue.js 是用来营造web应用接口的三个库

vue的特点

(1) 简洁 (2) 轻量 (3)连忙 (4) 数据驱动 (5) 模块友好 (6) 组件化

Vue.js是马上相当流行的三个JavaScript MVVM库,它是以多少驱动和组件化的考虑创设的。比较于Angular.js,Vue.js提供了一发从简、更便于精晓的API,使得大家能够急忙地上手并运用Vue.js。

工夫上,Vue.js 入眼集中在MVVM情势的ViewModel层,它连接视图和数码绑定模型通过三种格局。实际的DOM操作和出口格式被架空的办法到指令(Directives)和过滤器(Filters)

何以说vue是以多少驱动的吗?

可查看:

直白抛开手动操作DOM的驰念了。通过某个特种的HTML语法,将DOM和多少绑定起来。一旦你创建了绑定,DOM将和数据保持同步,每当改造了数量,DOM也会相应地翻新。

倘使您前边已经习于旧贯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM。它经过一些特出的HTML语法,将DOM和数量绑定起来。一旦你创制了绑定,DOM将和数码保持同步,每当更改了多少,DOM也会相应地翻新。

在理学领域内,尽量让MVVM数据绑定API尽恐怕轻易。模块化和可组合性也是第一的统一准备思考。vue不是二个完善的框架,它被设计成简单的和灵活的。你能够用它非常快原型,或混合和异常与任何库定义前端酒店。

什么是MVVM(Model-View-ViewModel)?

在Vue.js中ViewModel是和View以及Model实行相互如下:

图片 1

ViewModel是Vue.js的基本,它是多少个Vue实例。Vue实例是意义于某一个HTML成分上的,那么些因素得以是HTML的body元素,也能够是钦点了id的某部成分。

当创造了ViewModel后,双向绑定是何许到达的呢?

首先,大家将上海教室中的DOM Listeners和Data Bindings看作多少个工具,它们是贯彻双向绑定的首要。
从View侧看,ViewModel中的DOM Listeners工具会帮大家监测页面上DOM元素的退换,倘诺有转移,则转移Model中的数据;
从Model侧看,当大家革新Model中的数据时,Data Bindings工具会帮大家立异页面中的DOM成分。

本来了,在选用Vue.js时,你也得以组合其余库一同行使,举个例子jQuery。

Vue。js的API是参照了AngularJS、KnockoutJS Ractive.js Rivets.js。固然有相似之处,作者信任Vue.js提供多个有价值能够令你在未来的一部分现成框架中舍取其价值

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="vue.js"></script>

</head>
<body>
    <!-- view -->
    <div id="app">
      <p>{{ message }}</p>
    </div>

    <script type="text/javascript">
        // Model
        var expData = {
            message:"Hello Vue!"
        }
        // 创建一个 Vue 实例或 "ViewModel"
        // 它连接 View 与 Model
        var app = new Vue({
          el: '#app',
          data:expData
        })
    </script>
<!--注意:这代码要最后引入,因为要先有id为app的div,vue才能获取相应的元素。否则会报错: [Vue warn]: Cannot find element: #app-->
</body> 
</html>

应用Vue的进度就是概念MVVM种种组成都部队分的经过的经过。

  1. 定义View
  2. 定义Model
  3. 创设一个Vue实例或"ViewModel",它用来连接View和Model

在创制Vue实例时,必要传入多少个选拔对象,选项对象能够分包数据、挂载成分、方法、模生命周期钩子等等。

在那个示例中,分挑老婆el属性指向View,el: '#app'代表该Vue实例将挂载到<div id="app">...</div>这一个因素;data属性指向Model,data: expData意味着大家的Model是expData对象。
Vue.js有五种数据绑定的语法,最基础的情势是文件插值,使用一对大括号语法,在运营时{{ message }}会被数据对象的message属性替换,所以页面上会输出"Hello Vue!"。

双向绑定:正是页面输入框内容的退换会绑定到js里面,js里面message的变动也会反映在页面上。可应用v-model达成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="vue.js"></script>

</head>
<body>
    <div id="app">
      <p>{{ message }}</p>
      <input v-model = "message"></input>
    </div>

    <script type="text/javascript">
        var expData = {
            message:"Hello Vue!"
        }
        var app = new Vue({
          el: '#app',
          data:expData
        })
    </script>

</body>
</html>

将message绑定到文本框,当更动文本框的值时,<p>{{ message }}</p> 中的内容也会被更新;

转头,如若更动message的值,文本框的值也会被更新,大家得以在Chrome调节台进行尝试。

图片 2

正文的德姆o和源代码已放置GitHub,要是你认为本篇内容科学,请点个赞,或在GitHub上加个少于!

哪怕你早已深谙个中的部分术语,提议你通过以下概念的概述,因为您的这一个术语的概念或许在Vue.js的下文中有所差异

Vue.js的常用命令

Vue.js的一声令下是以v-开端的,它们作用于HTML成分,指令提供了部分特有的特征,将下令绑定在要素上时,指令会为绑定的目标成分加多一些例外的一言一动,大家得以将下令看作特殊的HTML个性(attribute)

Vue.js提供了有些常用的嵌入指令:

v-if指令
v-show指令
v-else指令
v-for指令
v-bind指令
v-on指令

因为vue.js具备较好的拓展性,能够支付自定义的通令。

v-if指令

v-if是原则渲染指令,它依照表达式的真伪来删除和插入成分,它的主干语法如下:
v-if="expression"
expression是一个回去bool值的表明式,表明式能够是叁个bool属性,也能够是二个赶回bool的运算式。譬喻:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <h1>Hello, Vue.js!</h1>
            <h1 v-if="yes">Yes!</h1>
            <h1 v-if="no">No!</h1>
            <h1 v-if="age >= 25">Age: {{ age }}</h1>
            <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
        </div>
    </body>
    <script src="vue.js"></script>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                yes: true,
                no: false,
                age: 28,
                name: 'keepfool'
            }
        })
    </script>
</html>

专注:v-if指令是依靠法规表明式的值来推行成分的插入恐怕去除行为。

那或多或少方可从渲染的HTML源代码看出来,面上只渲染了3个<h1>成分,v-if值为false的<h1>成分未有渲染到HTML。

图片 3

在chrome调节台修改age的属性:

图片 4

稍差于25,页面将元素删除。

age是概念在选拔对象的data属性中的,为啥Vue实例可以向来访问它吗?

那是因为各种Vue实例都会代理其选取对象里的data属性。

v-show指令

v-show也是标准渲染指令,和v-if指令分歧的是,使用v-show命令的因素始终会被渲染到HTML,它只是轻松地为要素设置CSS的style属性。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <h1>Hello, Vue.js!</h1>
            <h1 v-show="yes">Yes!</h1>
            <h1 v-show="no">No!</h1>
            <h1 v-show="age >= 25">Age: {{ age }}</h1>
            <h1 v-show="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
        </div>
    </body>
    <script src="vue.js"></script>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                yes: true,
                no: false,
                age: 28,
                name: 'keepfool'
            }
        })
    </script>
</html>

查阅成分:

图片 5

要素会被渲染到HTML,不过不符合条件的话就设置display:none.

注意 v-show 不支持 <template> 语法。

v-else指令

可以用v-else指令为v-if丰硕三个“else块”。v-else要素必须及时跟在v-if要素的前面——不然它无法被识别。

注:限制: 前一弟兄成分必须有 v-if 或 v-else-if

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <h1 v-if="age >= 25">Age: {{ age }}</h1>
            <h1 v-else>Name: {{ name }}</h1>
        </div>
    </body>
    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                age: 28,
                name: 'keepfool',
                sex: 'Male'
            }
        })
    </script>
</html>

这段代码中v-if为true,后面的v-else不会渲染到HTML;

v-for指令

v-for命令基于叁个数组渲染一个列表,它和JavaScript的遍历语法相似:

v-for="item in items"

items是三个数组,item是眼前被遍历的数组成分。item 是数组成分迭代的别称。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <ul>
                 <li v-for="item in items">
                    {{ item.message }}
                 </li>
            </ul>
        </div>
    </body>
    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                items: [
                      {message: 'Foo' },
                      {message: 'Bar' }
                    ]
            }
        })
    </script>
</html>

在 v-for 块中,大家富有对父成效域属性的完全访谈权限。 v-for 还帮助三个可选的第2个参数为当下项的目录。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <ul>
                 <li v-for="(item,index) in items">
                    {{parentMessage}}-{{index}}-{{ item.message }}
                 </li>
            </ul>
        </div>
    </body>
    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                parentMessage:"parent",
                items: [
                      {message: 'Foo' },
                      {message: 'Bar' }
                    ]
            }
        })
    </script>
</html>

v-bind指令

v-bind指令能够在其名目后边带一个参数,中间放三个冒号隔绝,这么些参数经常是HTML成分的特色(attribute),举个例子:v-bind:class

v-bind:argument="expression"

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                border:1px dashed #f0f;
            }
            .textColor{
                color:#f00;
                background-color:#eef;
            }
            .textSize{
                font-size:30px;
                font-weight:bold;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <ul class="box" v-bind:class="{'textColor':isColor, 'textSize':isSize}">
                <li>学习Vue</li>
                <li>学习Node</li>
                <li>学习React</li>
            </ul>
        </div>
    </body>
    <script src="vue.js"></script>
    <script>
        var vm= new Vue({
            el:"#app",
            data:{
                isColor:true,
                isSize:true
            }
        })
    </script>
</html>

v-on指令

v-on指令用于给监听DOM事件,它的用语法和v-bind是周围的,比如监听<a>成分的点击事件:

<a v-on:click="doSomething">

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <p><input type="text" v-model="message"></p>
            <p>
                <!--click事件直接绑定一个方法-->
                <button v-on:click="greet">Greet</button>
            </p>
            <p>
                <!--click事件使用内联语句-->
                <button v-on:click="say('Hi')">Hi</button>
            </p>
        </div>
    </body>
    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello, Vue.js!'
            },
            // 在 `methods` 对象中定义方法
            methods: {
                greet: function() {
                    // // 方法内 `this` 指向 vm
                    alert(this.message)
                },
                say: function(msg) {
                    alert(msg)
                }
            }
        })
    </script>
</html>

修饰符:

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.native - 监听组件根元素的原生事件。

v-bind和v-on的缩写

Vue.js为最常用的三个指令v-bindv-on提供了缩写方式。v-bind指令能够缩写为三个冒号,v-on指令能够缩写为@符号。

<!--完整语法-->
<a href="javascripit:void(0)" v-bind:class="activeNumber === n   1 ? 'active' : ''">{{ n   1 }}</a>
<!--缩写语法-->
<a href="javascripit:void(0)" :class="activeNumber=== n   1 ? 'active' : ''">{{ n   1 }}</a>

<!--完整语法-->
<button v-on:click="greet">Greet</button>
<!--缩写语法-->
<button @click="greet">Greet</button>

 

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

概念概述

vue的一个零部件:

图片 6

尽管把HTML、JavaScript、CSS文件增多到后缀名字为.vue的文件之中。

app.vue的文件:<template>里写html;<style>里写css;<script>里写js文件

MVVM模式

ViewModel

付出遭受的搭建:

npm命令完全无反应,不是加载的那种状态,而是下标不停地在哪里闪...
之后找解决方案,说要删除npmrc文件。
强调:不是nodejs安装目录npm模块下的那个npmrc文件,而是在C:Users{账户}下的.npmrc文件....

把npm设置为天猫商城镜像:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

图片 7

全局安装 vue-cli:

Vue-cli是vue官方提供的贰个命令行工具(vue-cli),可用来飞速搭建大型单页应用。该工具提供开箱即用的营造筑工程具配置,带来今世化的前端开拓流程。只需一分钟就能够运转带热重载、保存时静态检查以及可用于生产条件的创设配置的品类。

$ cnpm install -g vue-cli

图片 8

始建二个依照 webpack 模板的新类型:

$ vue init webpack my-project

然后开始展览一种类的安插就能够搭建八个品类了:

图片 9

搭建好之后,要想用浏览器看到项目还得安转依赖。开垦时的借助都设有package.json里面

$ cd my-project

$ cnpm install

比刚刚多了四个node_modules:

图片 10

让项目跑起来:

$ cnpm run dev

接下来展开:  即可:

图片 11

 

接下去就足以在src进行具体的门类支付。

收拾有四个热更新,正是修改以往页面会自动更新

 

下图不仅仅包括了MVVM格局(Model-View-ViewModel),还呈报了在Vue.js中ViewModel是何等和View以及Model进行互相的。

贰个目的,同步模型和视图. 在Vue.js中,ViewModels是实例化的Vue的构造器可能是它的子类

从.vue到页面

图片 12

上学vue主要就是以下八个部分:

图片 13

 

图片 14

var vm = new Vue({ /* options */ })

vue.js组件的严重性选项 

Vue.js组件的重中之重选项-- data

 图片 15

Vue的多少都位于data里面,Vue 实例的多寡对象。Vue 将会递归将 data 的习性转换为 getter/setter,进而让 data 的性情可以响应数据变动。

Vue.js组件的机要选项-- methods

methods 将被混入到 Vue 实例中。能够直接通过  实例访问那几个情势,或然在命令表明式中使用。方法中的 this自动绑定为 Vue 实例。

 图片 16

Vue.js组件的基本点选取--watch

二个目的,键是必要观看的表明式,值是对应回调函数。值也得以是方式名,只怕隐含选项的目的。

 图片 17

Vue对象有如此多东西,那它跟页面和页面显示终究有哪些联系?

模板指令 - html和vue对象的粘合剂(是写在html里面包车型大巴):

数据渲染:v-text 、v-html 、{{}}

 图片 18

决定模板隐蔽:v-if 、v-show

 图片 19

渲染循环列表:v-for

 图片 20

事件绑定:v-on

 图片 21

属性绑定:v-bind

 图片 22

地点的变量哪些是字符串哪些是布尔值呢?

ViewModel是Vue.js的着力,它是贰个Vue实例。Vue实例是法力于某叁个HTML元素上的,那么些因素得以是HTML的body成分,也能够是钦定了id的某部成分。

那是关键的指标,你会与作为开拓人士在使用Vue.js交互。越多细节请参阅Class: Vue.

 小结

  new贰个vue对象的时候能够安装它的质量,在那之中最根本的牢笼多少个,分别是data、methods、watch;

  个中data代表对象的数量、methods代表vue对象的秘技、watch设置了对象监听的法门;

  vue对象里的安装通过html指令展按钮联;

  首要的下令包罗:v-text渲染数据;v-if调节显示;v-on绑定事件;v-for循环渲染等。

 

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

View

vuejs-学习基础框架代码

Index.html:项指标进口

 图片 23 

app.vue:

<hello>是一个登记了的机件。

那其间用了重重ES6的语法。

 

 

http://www.jianshu.com/p/78c9e5342990

率先,大家将上海体育场所中的DOM Listeners和Data Bindings看作八个工具,它们是促成双向绑定的重要。
从View侧看,ViewModel中的DOM Listeners工具会帮大家监测页面上DOM成分的变动,假如有变化,则改换Model中的数据;
从Model侧看,当大家立异Model中的数据时,Data Bindings工具会帮大家立异页面中的DOM成分。

用户看到的实际HTML / DOM

Hello World示例

vm.$el // The View

询问一门语言,也许学习一门新工夫,编写Hello World示例是大家的终南捷径。
这段代码在镜头上输出"Hello World!"。

当使用Vue.js时候,除了本身自定义的命让你差相当少不会触遇到DOM的操作,当数码更新后视图的翻新将会自动的接触,视图的立异能够很纯粹的到每三个testNode节点,他们也批管理和异步试行进而提供越来越好的品质。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>

 <body>
 <!--这是我们的View-->
 <div id="app">
 {{ message }}
 </div>
 </body>
 <script src="js/vue.js"></script>
 <script>
 // 这是我们的Model
 var exampleData = {
 message: 'Hello World!'
 }

 // 创建一个 Vue 实例或 "ViewModel"
 // 它连接 View 与 Model
 new Vue({
 el: '#app',
 data: exampleData
 })
 </script>
</html>

Model

选拔Vue的经过便是概念MVVM各种组成都部队分的历程的历程。

那是三个略微修改的Javascript对象

1、定义View

vm.$data // The Model

2、定义Model

在Vue.js中,模型只是简短的Javascript对象,数据对象,你能够操控他们的习性和视图模型,观望他们的之所以能获取通告后转移。Vue.js在data对象胡总用ES5的 getter/setter 把品质转化了,它同意直接操作而没有须求脏检查。

3、创设一个Vue实例或"ViewModel",它用来连接View和Model

data对象在适度的时候会发出突变,所以修改它与通过援引修改vm.$data是一样的功用。那也可能有益于了七个ViewModel实例阅览同一块数据。

在创制Vue实例时,须求传入一个增挑对象,选项对象能够分包数据、挂载成分、方法、模生命周期钩子等等。

本事细节请看Instantiation Options: data.

在这几个示例中,选项对象的el属性指向View,el: '#app'表示该Vue实例将挂载到<div id="app">...</div>这几个因素;data属性指向Model,data: exampleData表示大家的Model是exampleData对象。
Vue.js有四种数据绑定的语法,最基础的花样是文件插值,使用一对大括号语法,在运转时{{ message }}会被数据对象的message属性替换,所以页面上会输出"Hello World!"。

Directives

Vue.js已经更新到2.0版本了,但鉴于还不是明媒正娶版,本文的代码都以1.0.25版本的。

个体的HTML属性是告诉Vue.js做一些关于DOM的管理

双向绑定示例

<div v-text="message"></div>

MVVM形式自己是贯彻了双向绑定的,在Vue.js中能够使用v-model指令在表单成分上创制双向数据绑定。

此地的div成分有一个v-text的吩咐,值是message.意思是报告Vue.js 保持这些div节点的剧情与viewMode中的message属性同步

<!--这是我们的View-->
<div id="app">
 <p>{{ message }}</p>
 <input type="text" v-model="message"/>
</div>

指令能够打包跋扈DOM操作。比如v-attr 操作壹特性能成分,v-repeat克隆基于数组的一个因素,v-on附加事件监听,大家稍后琢磨.

将message绑定到文本框,当退换文本框的值时, <p>{{ message }}</p> 中的内容也会被更新。

Mustache Bindings

图片 24

你还足以行使mustache-style绑定,在文书和总体性。他们翻译成v-text v-attr指令。比方:

扭曲,假使改换message的值,文本框的值也会被更新,我们能够在Chrome调整台进行尝试。

<div id="person-{{id}}">Hello {{name}}!</div>

图片 25

虽说便民,但有几件事你须要小心的:

Vue实例的data属性指向exampleData,它是一个引用类型,更动了exampleData对象的特性,同期也会耳熏目染Vue实例的data属性。

一经设置多少个image的src属性的时候,会发送七个HTTP央求,所以当模板是第1回解析出现404,此时用v-attr比较好

Vue.js的常用命令

当分析HTML的时候,Internet Explorer将会删除无效的内部style属性,所以我们想要补助IE绑定内联的CSS 作者就接连用v-style

地方用到的v-model是Vue.js常用的二个下令,那么指令是什么吗?

在v-html内部,非转义的HTML你能用两个大括号{{{像这么}}}管理,但是如此会有神秘的XSS攻击,能张开windows,所以提出是纯属安全的多少全的时候才这么做,也许经过自定义管道过滤器清理不可相信的HTML

Vue.js的通令是以v-早先的,它们作用于HTML成分,指令提供了部分独特的风味,将下令绑定在要素上时,指令会为绑定的对象元素增添一些非凡的作为,大家得以将下令看作特殊的HTML个性(attribute)。

Filters

Vue.js提供了有的常用的内置指令,接下去大家将介绍以下多少个放置指令:

在更新视图从前能够用函数来管理那几个原始的数码。他们正在用贰个“管道”指令或绑定:

v-if指令

<div>{{message | capitalize}}</div>

v-show指令

今后在div的公文内容要翻新在此之前,那一个message的值将会通过capitalize函数处理。详细请看Filters in Depth.

v-else指令

Components

v-for指令

在Vue.js,多个零部件是一个轻松易行的视图模型构造函数,通过Vue.component(ID, constructor)注册。通过四个关系的ID,能够嵌套另外的视图模型的模版的v-component指令。这种总结的编写制定使评释视图模型的选择和烧结方式左近于Web组件,而不须要最新的浏览器或特大型polyfills。通过将应用程序分解成越来越小的零件,其结果是一个莫斯中国科学技术大学学解耦和可珍惜的代码库。更加多细节,请参阅Composing ViewModels.

v-bind指令

A Quick Example

v-on指令

<div id="demo">
  <h1>{{title | uppercase}}</h1>
  <ul>
    <li
      v-repeat="todos"
      v-on="click: done = !done"
      class="{{done ? 'done' : ''}}">
      {{content}}
    </li>
  </ul>
</div>



var demo = new Vue({
  el: '#demo',
  data: {
    title: 'todos',
    todos: [
      {
        done: true,
        content: 'Learn JavaScript'
      },
      {
        done: false,
        content: 'Learn vue.js'
      }
    ]
  }
})

Vue.js具备特出的扩张性,大家也能够支付一些自定义的下令,后边的篇章会介绍自定义指令。

简简单单翻译,有不当请提出

v-if指令

你恐怕感兴趣的篇章:

  • 详解vue-router 2.0 常用基础知识点之router-link
  • 详解vue-router 2.0 常用基础知识点之router.push()
  • VUEJS实战之营造基础并渲染出列表(1)
  • 详解vue-router 2.0 常用基础知识点之导航钩子
  • vue.js入门教程之基础语法小结
  • 最留心的vue.js基础语法 值得珍藏!
  • Vue.js基础指令实例疏解(各样数据绑定、表单渲染大计算)
  • JavaScript之Vue.js【入门基础】
  • Vue.js 2.0学习课程之从基础到零部件详解
  • vue双花括号的选取办法 附演习题

v-if是原则渲染指令,它依据表明式的真真假假来删除和插入成分,它的主干语法如下:

v-if="expression"
expression是三个回来bool值的表达式,表明式能够是三个bool属性,也得以是七个回去bool的运算式。比方:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
 <div id="app">
 <h1>Hello, Vue.js!</h1>
 <h1 v-if="yes">Yes!</h1>
 <h1 v-if="no">No!</h1>
 <h1 v-if="age >= 25">Age: {{ age }}</h1>
 <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
 </div>
 </body>
 <script src="js/vue.js"></script>
 <script>

 var vm = new Vue({
 el: '#app',
 data: {
 yes: true,
 no: false,
 age: 28,
 name: 'keepfool'
 }
 })
 </script>
</html>

当心:yes, no, age, name那4个变量都来源于Vue实例选项对象的data属性。

图片 26

这段代码应用了4个表明式:

数据的yes属性为true,所以"Yes!"会被输出;
数据的no属性为false,所以"No!"不会被输出;
运算式age >= 贰14回来true,所以"Age: 28"会被输出;
运算式name.indexOf('jack') >= 0重临false,所以"Name: keepfool"不会被输出。

瞩目:v-if指令是基于条件表达式的值来施行成分的插入只怕去除行为。

那一点足以从渲染的HTML源代码看出来,面上只渲染了3个<h1>成分,v-if值为false的<h1>成分未有渲染到HTML。

图片 27

为了重新申明那点,能够在Chrome调整台改动age属性,使得表明式age >= 25的值为false,可以看看<h1>Age: 28</h1>要素被剔除了。

图片 28

age是概念在采纳对象的data属性中的,为何Vue实例能够一向采访它吗?
那是因为种种Vue实例都会代理其选取对象里的data属性。

v-show指令

v-show也是典型渲染指令,和v-if指令不一样的是,使用v-show指令的成分始终会被渲染到HTML,它只是轻易地为因素设置CSS的style属性。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
 <div id="app">
 <h1>Hello, Vue.js!</h1>
 <h1 v-show="yes">Yes!</h1>
 <h1 v-show="no">No!</h1>
 <h1 v-show="age >= 25">Age: {{ age }}</h1>
 <h1 v-show="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
 </div>
 </body>
 <script src="js/vue.js"></script>
 <script>

 var vm = new Vue({
 el: '#app',
 data: {
 yes: true,
 no: false,
 age: 28,
 name: 'keepfool'
 }
 })
 </script>
</html>

图片 29

在Chrome调整台改变age属性,使得表明式age >= 25的值为false,能够看来<h1>Age: 24</h1>成分被装置了style="display:none"样式。

图片 30

v-else指令

可以用v-else指令为v-if或v-show增添贰个“else块”。v-else成分必须及时跟在v-if或v-show成分的前边——不然它不可能被识别。

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
 <div id="app">
 <h1 v-if="age >= 25">Age: {{ age }}</h1>
 <h1 v-else>Name: {{ name }}</h1>
 <h1>---------------------分割线---------------------</h1>
 <h1 v-show="name.indexOf('keep') >= 0">Name: {{ name }}</h1>
 <h1 v-else>Sex: {{ sex }}</h1>
 </div>
 </body>
 <script src="js/vue.js"></script>
 <script>
 var vm = new Vue({
 el: '#app',
 data: {
 age: 28,
 name: 'keepfool',
 sex: 'Male'
 }
 })
 </script>
</html>

v-else成分是还是不是渲染在HTML中,取决于后面使用的是v-if照旧v-show指令。
这段代码中v-if为true,前面包车型大巴v-else不会渲染到HTML;v-show为tue,可是后边的v-else仍旧渲染到HTML了。

图片 31

v-for指令

v-for指令基于二个数组渲染二个列表,它和JavaScript的遍历语法相似:

v-for="item in items"
items是贰个数组,item是现阶段被遍历的数组成分。

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" href="styles/demo.css" />
 </head>

 <body>
 <div id="app">
 <table>
 <thead>
 <tr>
 <th>Name</th>
 <th>Age</th>
 <th>Sex</th>
 </tr>
 </thead>
 <tbody>
 <tr v-for="person in people">
 <td>{{ person.name }}</td>
 <td>{{ person.age }}</td>
 <td>{{ person.sex }}</td>
 </tr>
 </tbody>
 </table>
 </div>
 </body>
 <script src="js/vue.js"></script>
 <script>
 var vm = new Vue({
 el: '#app',
 data: {
 people: [{
 name: 'Jack',
 age: 30,
 sex: 'Male'
 }, {
 name: 'Bill',
 age: 26,
 sex: 'Male'
 }, {
 name: 'Tracy',
 age: 22,
 sex: 'Female'
 }, {
 name: 'Chris',
 age: 36,
 sex: 'Male'
 }]
 }
 })
 </script>

</html>

小编们在增选对象的data属性中定义了三个people数组,然后在#app成分内利用v-for遍历people数组,输出每一种person对象的人名、年龄和性别。

图片 32

View Demo

v-bind指令

v-bind指令能够在其名近年来边带三个参数,中间放一个冒号隔绝,这几个参数常常是HTML成分的性状(attribute),举例:v-bind:class

v-bind:argument="expression"

上面这段代码营造了一个轻松易行的分页条,v-bind指令成效于成分的class脾性上。
那么些命令包含二个表明式,表明式的意义是:高亮当前页。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" href="styles/demo.css" />
 </head>
 <body>
 <div id="app">
 <ul class="pagination">
 <li v-for="n in pageCount">
 <a href="javascripit:void(0)" v-bind:class="activeNumber === n   1 ? 'active' : ''">{{ n   1 }}</a>
 </li>
 </ul>
 </div>
 </body>
 <script src="js/vue.js"></script>
 <script>
 var vm = new Vue({
 el: '#app',
 data: {
 activeNumber: 1,
 pageCount: 10
 }
 })
 </script>
</html>

注意v-for="n in pageCount"那行代码,pageCount是二个卡尺头,遍历时n从0初叶,然后遍历到pageCount –1完成。

图片 33

View Demo

v-on指令

v-on指令用于给监听DOM事件,它的用语法和v-bind是近乎的,比如监听<a>成分的点击事件:

<a v-on:click="doSomething">

有三种样式调用方法:绑定一个艺术(让事件指向方法的引用),或然利用内联语句。
Greet开关将它的单击事件一向绑定到greet()方法,而Hi按键则是调用say()方法。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
 <div id="app">
 <p><input type="text" v-model="message"></p>
 <p>
 <!--click事件直接绑定一个方法-->
 <button v-on:click="greet">Greet</button>
 </p>
 <p>
 <!--click事件使用内联语句-->
 <button v-on:click="say('Hi')">Hi</button>
 </p>
 </div>
 </body>
 <script src="js/vue.js"></script>
 <script>
 var vm = new Vue({
 el: '#app',
 data: {
 message: 'Hello, Vue.js!'
 },
 // 在 `methods` 对象中定义方法
 methods: {
 greet: function() {
 // // 方法内 `this` 指向 vm
 alert(this.message)
 },
 say: function(msg) {
 alert(msg)
 }
 }
 })
 </script>
</html>

图片 34

v-bind和v-on的缩写

Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。v-bind指令可以缩写为三个冒号,v-on指令能够缩写为@符号。

<!--完整语法-->
<a href="javascripit:void(0)" v-bind:class="activeNumber === n   1 ? 'active' : ''">{{ n   1 }}</a>
<!--缩写语法-->
<a href="javascripit:void(0)" :class="activeNumber=== n   1 ? 'active' : ''">{{ n   1 }}</a>

<!--完整语法-->
<button v-on:click="greet">Greet</button>
<!--缩写语法-->
<button @click="greet">Greet</button>

综述示范

当今大家早就介绍了一部分Vue.js的基础知识了,结合以上文化大家得以来做个小德姆o。

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" href="styles/demo.css" />
 </head>

 <body>
 <div id="app">

 <fieldset>
 <legend>
 Create New Person
 </legend>
 <div class="form-group">
 <label>Name:</label>
 <input type="text" v-model="newPerson.name"/>
 </div>
 <div class="form-group">
 <label>Age:</label>
 <input type="text" v-model="newPerson.age"/>
 </div>
 <div class="form-group">
 <label>Sex:</label>
 <select v-model="newPerson.sex">
 <option value="Male">Male</option>
 <option value="Female">Female</option>
 </select>
 </div>
 <div class="form-group">
 <label></label>
 <button @click="createPerson">Create</button>
 </div>
 </fieldset>
 <table>
 <thead>
 <tr>
 <th>Name</th>
 <th>Age</th>
 <th>Sex</th>
 <th>Delete</th>
 </tr>
 </thead>
 <tbody>
 <tr v-for="person in people">
 <td>{{ person.name }}</td>
 <td>{{ person.age }}</td>
 <td>{{ person.sex }}</td>
 <td :class="'text-center'"><button @click="deletePerson($index)">Delete</button></td>
 </tr>
 </tbody>
 </table>
 </div>
 </body>
 <script src="js/vue.js"></script>
 <script>
 var vm = new Vue({
 el: '#app',
 data: {
 newPerson: {
 name: '',
 age: 0,
 sex: 'Male'
 },
 people: [{
 name: 'Jack',
 age: 30,
 sex: 'Male'
 }, {
 name: 'Bill',
 age: 26,
 sex: 'Male'
 }, {
 name: 'Tracy',
 age: 22,
 sex: 'Female'
 }, {
 name: 'Chris',
 age: 36,
 sex: 'Male'
 }]
 },
 methods:{
 createPerson: function(){
 this.people.push(this.newPerson);
 // 添加完newPerson对象后,重置newPerson对象
 this.newPerson = {name: '', age: 0, sex: 'Male'}
 },
 deletePerson: function(index){
 // 删一个数组元素
 this.people.splice(index,1);
 }
 }
 })
 </script>

</html>

图片 35

在我的GitHub Pages查看该Demo:

View Demo

总结

本文简介了Vue.js的MVVM模型和它的双向绑定机制,然后以贰个Hello World示例开端了大家的Vue.js之旅,接着我们精晓了多少个相比常用的通令,最终依据这几个知识大家创设了八个简易的亲自去做。

本文已被整理到了《Vue.js前端组件学习课程》,招待我们学习阅读。

以上就是本文的全体内容,希望对大家的学习抱有帮忙,也冀望大家多多协助脚本之家。

您只怕感兴趣的稿子:

  • 详解Vue.js——60分钟组件连忙入门(上篇)
  • 读书vue.js条件渲染
  • 学学vue.js总计属性
  • Vue.js路由组件vue-router使用办法详解
  • Vue.js组件tabs完毕选项卡切换效果
  • Vue.js第四天学习笔记(总计属性computed)
  • 依据vue.js达成图片轮播效果
  • Vue.js完毕轻巧ToDoList 前期图谋(一)
  • vue.js实现表格合併示例代码
  • 用Vue.js达成监听属性的成形
  • Vue.js开荒条件搭建
  • JavaScript之Vue.js【入门基础】

本文由必发88官网发布,转载请注明来源:60分钟轻易入门,js基础知识汇总