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


Posted in Javascript onNovember 03, 2016

介绍

前段时间接触到一个库叫做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基础语法 值得收藏!

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

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

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

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

Javascript 相关文章推荐
类似CSDN图片切换效果脚本
Sep 17 Javascript
Jquery中获取iframe的代码
Jan 11 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
Jan 15 Javascript
jquery 使用简明教程
Mar 05 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 Javascript
概述javascript在Google IE中的调试技巧
Nov 24 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
express如何使用session与cookie的方法
Jan 30 Javascript
详解基于React.js和Node.js的SSR实现方案
Mar 21 Javascript
AngularJS创建自定义指令的方法详解
Nov 03 #Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 #Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 #Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 #Javascript
jQuery下拉菜单的实现代码
Nov 03 #Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 #Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 #Javascript
You might like
php横向重复区域显示二法
2008/09/25 PHP
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
网页打开自动最大化的js代码
2012/08/22 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
常用的js方法合集
2017/03/10 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
js实现多个倒计时并行 js拼团倒计时
2019/02/25 Javascript
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
python冒泡排序简单实现方法
2015/07/09 Python
python爬虫之百度API调用方法
2017/06/11 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
Python提取频域特征知识点浅析
2019/03/04 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
药学专业大专生的自我评价
2013/12/12 职场文书
18岁生日感言
2014/01/12 职场文书
毕业生自荐信格式
2014/03/07 职场文书
2014预备党员批评与自我批评思想汇报
2014/09/20 职场文书
2015年见习期工作总结
2014/12/12 职场文书
嘉宾邀请函
2015/01/31 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang