最细致的vue.js基础语法 值得收藏!

介绍

前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。

Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。

可以去 这里下载 。自己整理了一个Vue.js的demo, https://github.com/chenhao-ch/demo-vue

快速入门
以下代码是Vue.js最简单的例子, 当input中的内容变化时,p节点的内容会跟着变化。

<!-- html -->
<div id="demo">
 <p>{{message}}</p>
 <input v-model="message">
</div>
new Vue({
 el: '#demo',
 data: {
  message: 'Hello Vue.js!'
 }
})

语法介绍

数据绑定
数据绑定就是指将js中的变量自动更新到html中。如下代码, message的默认值是“Hello Vue.js!”, 那么当页面启动时,html中的默认值会被设置成“Hello Vue.js”

<!-- html -->
<div id="demo">
 <p>{{message}}</p>
 <input v-model="message">
</div>
new Vue({
 el: '#demo',
 data: {
  message: 'Hello Vue.js!'
 }
})

如果要输出原生的html,可以使用三个大括号来实现

<p>{{{messageHtml}}}</p>

也可以做表达式的绑定

<div>{{length - 1}}</div>
<div>{{isShow ? 'block' : 'none'}}</div>

过滤器
表达式后面可以添加过滤器,对输出的数据进行过滤。

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

自定义过滤器
Vue.js运行自己定义过滤器。比如:

Vue.filter('wrap', function (value, begin, end) {
 return begin + value + end;
})
<!-- 'vue' => 'before vue after' -->
<span>{{ message | wrap 'before' 'after' }}</span>

指令

指令是特殊的带有前缀v-的特性。当表达式的值发生变化时,响应应用特定的行为到DOM。

<!-- 当greeting为true时,才显示p节点 -->
<p v-if="greeting">hello</p>
<!-- 绑定href属性为js中url的值 -->
<a v-bind:href="url"></a>
<!-- 绑定事件,btnClick是js方法 -->
<button v-on:click="btnClick"></button>

bind,on指令可以进行缩写

<a v-bind:href="url"></a>
<a :href="url"></a>

<button v-on:click="btnClick"></button>
<button @click="btnClick"></button>

自定义指令

Vue.directive('demo', {
 bind: function () {
  // 准备工作
  // 例如,添加事件处理器或只需要运行一次的高耗任务
 },
 update: function (newValue, oldValue) {
  // 值更新时的工作
  // 也会以初始值为参数调用一次
 },
 unbind: function () {
  // 清理工作
  // 例如,删除 bind() 添加的事件监听器
 }
})

html模板

Vue.js支持对js对象进行判断(if), 循环(for)输出。类似于前端模板。

<!-- 判断,如果ok为true,则显示yes, 如果为false, 显示no -->
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

<!-- 类似于v-if, v-if是是否加节点, v-show是display是否为none -->
<h1 v-show="ok">Hello!</h1>

<!-- 循环, 对items属性进行循环。 track-by指item的是否重复,对重复的进行服用 -->
<!-- 循环中, $index表示数组第n个元素; $key表示对象的key -->
<ul id="example-1">
 <li v-for="item in items" track-by="_uid">
  {{ $index }} : {{ item.message }}
 </li>
</ul>
var example1 = new Vue({
 el: '#example-1',
 data: {
  items: [
   {_uid: '1', message: 'Foo' },
   {_uid: '2', message: 'Bar' }
  ]
 }
})

样式绑定

样式也可以根据js中的变量来动态确定。

<!-- isA 为true时, class多一个class-a -->
<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>
<!-- classA, classB 两个变量的值设置成class -->
<div v-bind:class="[classA, classB]">

<!-- 绑定style, 自动添加前缀,styleObject里面是style键值对 -->
<div v-bind:style="styleObject"></div>

事件绑定

可以使用v-on指令来监听DOM事件。

<div id="example-2">
 <button v-on:click="say('hi', $event)">Say Hi</button>
 <button v-on:click="say('what', $event)">Say What</button>
</div>
new Vue({
 el: '#example-2',
 methods: {
  say: function (msg, event) {
   alert(msg);
   event.preventDefault();
  }
 }
})

常见的阻止冒泡,禁止默认行为等event方法可以通过修饰符来快速处理。

<!-- 禁止冒泡 -->
<a v-on:click.stop='do'></a>
<!-- 禁止冒泡和默认行为 -->
<a @click.stop.prevent="do"></a>

对特殊按键生效也可以使用修饰符

<!-- keyCode是13的时候出发。 -->
<input v-on:keyup.13="submit" />
<input v-on:keyup.enter="submit" />
<!-- 支持的键名有: enter,tab,delete,esc,space,up,down,left,right -->

组件
组件系统是 Vue.js 另一个重要概念,因为它提供了一种抽象,让我们可以用独立可复用的小组件来构建大型应用。

注册
通过Vue.extend()来定义一个组件,Vue.component()来注册组件。

<div id="box">
 <tree></tree>
</div>
// 定义
var Tree = Vue.extend({
 template: '<div>This is a tree!</div>'
});
// 注册
Vue.component('tree', Tree);
// 开始渲染
new Vue({
 el: '#box'
});

// 定义,注册可以合并成一步。下面的代码和上面一样
Vue.component('tree', {
 template: '<div>This is a tree!</div>'
});
new Vue({
 el: '#box'
});

渲染结果为:

<div id="box">
 <div>This is a tree!</div>
</div>

还可以进行局部注册

var Child = Vue.extend({ /* ... */ })

var Parent = Vue.extend({
 template: '...',
 components: {
  'my-component': Child
 }
})

props
props用于父组件向子组件传递数据。

Vue.component('child', {
 props: ['childMsg'],
 // prop 可以用在模板内
 // 可以用 `this.msg` 设置
 template: '<span>{{ childMsg }}</span>'
});
<child child-msg="hello"></child>

动态props, 当父组件的数据变化时,需要通知子组件跟着变化。

<input v-model="parentMsg" />
<child v-bind:child-msg="parentMsg"></child>

父子组件通信

当父组件数据变化时,可以通过props来通知子组件,子组件状态变化时,可以利用事件的冒泡来通知父组件。

子组件可以用this.$parent访问它的父组件。父组件有一个数组this.$children,包含它所有的子元素。

例子:

<!-- 子组件模板 -->
<template id="child-template">
 <input v-model="msg">
 <button v-on:click="notify">Dispatch Event</button>
</template>

<!-- 父组件模板 -->
<div id="events-example">
 <p>Messages: {{ messages | json }}</p>
 <child></child>
</div>
// 注册子组件
// 将当前消息派发出去
Vue.component('child', {
 template: '#child-template',
 data: function () {
  return { msg: 'hello' }
 },
 methods: {
  notify: function () {
   if (this.msg.trim()) {
    this.$dispatch('child-msg', this.msg) // 触发child-msg事件
    this.msg = ''
   }
  }
 }
})

// 启动父组件
// 将收到消息时将事件推入一个数组
var parent = new Vue({
 el: '#events-example',
 data: {
  messages: []
 },
 // 在创建实例时 `events` 选项简单地调用 `$on`
 events: {
  'child-msg': function (msg) { // 监听到 child-msg事件
   // 事件回调内的 `this` 自动绑定到注册它的实例上
   this.messages.push(msg) // messages改变自动修改html内容
  }
 }
})

上面这种写法child-msg事件触发后,的执行方法不直观。 所以可以采用v-on绑定事件。

<!-- 当child-msg触发时, 执行父组件的handleIt方法。 -->
<child v-on:child-msg="handleIt"></child>

构建大型应用

在典型的 Vue.js 项目中,我们会把界面拆分为多个小组件,每个组件在同一地方封装它的 CSS 样式,模板和 JavaScript 定义,这么做比较好。如上所述,使用 Webpack 或 Browserify 以及合适的源码转换器,我们可以这样写组件:

当然也可以使用预处理器:

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue双花括号的使用方法 附练习题

    本文实例为大家分享了vue双花括号的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>{{}}的使用</title> <script src="js/vue.js"></script> </head> <body> <div id=&qu

  • Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)

    Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用.他是基于AnjularJs 编写的,所以和前者的语法特别相似,却又使用简洁了很多. 那今天,我就给大家详细的说道说道这个 Vue.js ,以下是我们这次详解的目录,朋友们可以根据自己的情况选择性阅读,所有操作均附有代码实现. 1. Vue.js 如何绑定到页面中,使用他的功能. 2.

  • vue.js入门教程之基础语法小结

    前言 Vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容易的和其他库整合.代码压缩后只有24kb. 以下代码是Vue.js最简单的例子, 当 input 中的内容变化时,p 节点的内容会跟着变化. <!-- html --> <div id="demo"> <p>{{message}}</p> <input v-model="message"> </div> new

  • 详解vue-router 2.0 常用基础知识点之router.push()

    除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. router.push(location) 想要导航到不同的 URL,则使用 router.push 方法.这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL. 当你点击 <router-link> 时,这个方法会在内部调用,所以说,点击 <router-link :to="...&

  • Vue.js基础知识汇总

    介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式的ViewModel层,它连接视图和数据绑定模型通过两种方式.实际的DOM操作和输出格式被抽象的方式到指令(Directives)和过滤器(Filters) 在哲学领域内,尽量让MVVM数据绑定API尽可能简单.模块化和可组合性也是重要的设计考虑.vue不是一个全面的框架,它被设计成简单的和灵活的.你可以用它快速原型,或混合和匹配与其他库定义前端堆栈. Vue.js的API是参考了AngularJS

  • JavaScript之Vue.js【入门基础】

    本篇将简单介绍一下Vue.js,并在Node.js环境下搭建一个简单的Demo. 一.简介 我个人理解,Vue.js是一套前端视图层的框架,它只关心视图展示和数据绑定,它的一些语法与Angular 1非常相似,如果有Angular 1相关的使用经验,上手会非常快. 相比较其他的React.Angular 2等MVVM框架,它更加的轻量,效率也更高,也能更好的与其他库集成. 它拥有以下几个出色的特性: 数据双向绑定 指令 模板 组件 当前最新的版本为2.1.4.后续也会在这个版本下演示Demo.

  • Vue.js 2.0学习教程之从基础到组件详解

    前言 最近这段时间里不停的做着Vue的技术分享,虽然不是什么深层次的代码底能架构,如果底层架构真说出来,我就不会做Vue.js 2.0从基础到组件了,就会分享Vue从底层到还是到底层.我相信能来看我这次分享的朋友都是在工作开发层面上面临着一些问题.此次分享我们先抛开Vue - router和Vuex,很多朋友都觉得Vuex和router比较难,大错特错! 对Vue 2.0的介绍 我对Vue 2.0认知,能it前端框架的认知,在我们不算底层原理的情况下,什么才是精髓,那就是基础的方法和一些api介

  • 详解vue-router 2.0 常用基础知识点之导航钩子

    导航钩子 vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消.有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的, 或者组件级的. 全局钩子 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // do something next(); }); router.afterEach((to, from, next) => { console.log(to.

  • 详解vue-router 2.0 常用基础知识点之router-link

    前端采用前后端分离的方式进行开发,我们使用vue2.0框架,做单页面应用难免会用到vue-router,今天把项目中的用到router-link摘出来,一是想整理一下这些用法,方便下次快速查找,二是重新再过一下vue-router,增加熟悉度.也希望下面这些例子能帮到其他使用vue-router的朋友. 1,$route.params 类型: Object 一个 key/value 对象,包含了 动态片段 和 全匹配片段,如果没有路由参数,就是一个空对象. path: '/detail/:id'

  • VUEJS实战之构建基础并渲染出列表(1)

    前言 我的JavaScript水平比较一般.好吧,是相当的一般.因此,对于最新的前端框架技术,实在是有点困难,但现实让我必须面对.因此,学习是唯一的出路. 纵向比较了N款前端框架,最终选择了VUE,为什么呢?理由如下:  1.angular 前途不明,1.x学习曲线高,并且好像被放弃了,而2则还没有正式推出.  2.react 比较厉害,但是没接触.  3.VUE简单,通过上手,比较适合我的思维和水平.  4.vue有中文文档,我看起来比较舒服. 既然决定学习vue,那么最好的学习方法就是实战.

随机推荐