最细致的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 相关文章推荐
JavaScript实现动态增加文件域表单
Feb 12 Javascript
JQuery 学习笔记 选择器之四
Jul 23 Javascript
dojo学习第一天 Tab选项卡 实现
Aug 28 Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 Javascript
全屏js头像上传插件源码高清版
Mar 29 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
微信小程序switch组件使用详解
Jan 31 Javascript
bootstrap中的导航条实例代码详解
May 20 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 07 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
jQuery 源码分析笔记
2011/05/25 PHP
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
ThinkPHP空模块和空操作详解
2014/06/30 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
js注意img图片的onerror事件的分析
2011/01/01 Javascript
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python break语句详解
2014/03/11 Python
python执行外部程序的常用方法小结
2015/03/21 Python
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
Python连接mysql方法及常用参数
2020/09/01 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
HTML5地理定位实例
2014/10/15 HTML / CSS
加拿大时装零售商:Influence U
2018/12/22 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
美丽家庭事迹材料
2014/05/03 职场文书
2014年老干部工作总结
2014/11/21 职场文书
工程质检员岗位职责
2015/04/08 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python