JavaScript的MVVM库Vue.js入门学习笔记


Posted in Javascript onMay 03, 2016

一、v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url"></a>

<!-- 缩写 -->
<a :href="url"></a>

<!-- 完整语法 -->
<button v-bind:disabled="someDynamicCondition">Button</button>

<!-- 缩写 -->
<button :disabled="someDynamicCondition">Button</button>

二、v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>

<!-- 缩写 -->
<a @click="doSomething"></a>

三、过滤器

{{ message | capitalize }}

四、条件渲染

v-if
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>


<div v-if="Math.random() > 0.5">
 Sorry
</div>
<div v-else>
 Not sorry
</div>
template-v-if
<template v-if="ok">
 <h1>Title</h1>
 <p>Paragraph 1</p>
 <p>Paragraph 2</p>
</template>
v-show
<h1 v-show="ok">Hello!</h1>

五、列表渲染 for

v-for
<ul id="example-1">
 <li v-for="item in items">
 {{ item.message }}
 </li>
</ul>
var example1 = new Vue({
 el: '#example-1',
 data: {
 items: [
  { message: 'Foo' },
  { message: 'Bar' }
 ]
 }
});
 
<ul id="example-2">
 <li v-for="item in items">
 {{ parentMessage }} - {{ $index }} - {{ item.message }}
 </li>
</ul>
var example2 = new Vue({
 el: '#example-2',
 data: {
 parentMessage: 'Parent',
 items: [
  { message: 'Foo' },
  { message: 'Bar' }
 ]
 }
});

数组变动检测
Vue.js 包装了被观察数组的变异方法,故它们能触发视图更新。被包装的方法有:push(), pop(), shift(), unshift(), splice(), sort(), reverse()

example1.items.push({ message: 'Baz' });
example1.items = example1.items.filter(function (item) {
 return item.message.match(/Foo/);
}); 
template-v-for
<ul>
 <template v-for="item in items">
 <li>{{ item.msg }}</li>
 <li class="divider"></li>
 </template>
</ul>

对象 v-for

<ul id="repeat-object" class="demo">
 <li v-for="value in object">
 {{ $key }} : {{ value }}
 </li>
</ul>
new Vue({
 el: '#repeat-object',
 data: {
 object: {
  FirstName: 'John',
  LastName: 'Doe',
  Age: 30
 }
 }
});

值域 v-for

<div>
 <span v-for="n in 10">{{ n }} </span>
</div>

六、方法与事件处理器
方法处理器

<div id="example">
 <button v-on:click="greet">Greet</button>
</div>

var vm = new Vue({
 el: '#example',
 data: {
 name: 'Vue.js'
 },
 // 在 `methods` 对象中定义方法
 methods: {
 greet: function (event) {
  // 方法内 `this` 指向 vm
  alert('Hello ' + this.name + '!')
  // `event` 是原生 DOM 事件
  alert(event.target.tagName)
 }
 }
})

// 也可以在 JavaScript 代码中调用方法
vm.greet(); // -> 'Hello Vue.js!'

内联语句处理器

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

有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法

<button v-on:click="say('hello!', $event)">Submit</button>
 methods: {
 say: function (msg, event) {
 // 现在我们可以访问原生事件对象
 event.preventDefault()
 }
};

## 事件修饰符

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat">

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

## 按键修饰符

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名:enter,tab,delete,esc,space,up,down,left,right

## 其他实例

new Vue({
 el: '#demo',
 data: {
 newLabel: '',
 stats: stats
 },
 methods: {
 add: function (e) {
  e.preventDefault()
  if (!this.newLabel) {
  return;
  }
  this.stats.push({
  label: this.newLabel,
  value: 100
  });
  this.newLabel = '';
 },
 remove: function (stat) {
  if (this.stats.length > 3) {
  this.stats.$remove(stat); // 注意这里的$remove
  } else {
  alert('Can\'t delete more!')
  }
 }
 }
});

七、过渡
CSS 过渡

<div v-if="show" transition="expand">hello</div>
然后为 .expand-transition, .expand-enter 和 .expand-leave 添加 CSS 规则:

/* 必需 */
.expand-transition {
 transition: all .3s ease;
 height: 30px;
 padding: 10px;
 background-color: #eee;
 overflow: hidden;
}

/* .expand-enter 定义进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */
.expand-enter, .expand-leave {
 height: 0;
 padding: 0 10px;
 opacity: 0;
}

你可以在同一元素上通过动态绑定实现不同的过渡:

<div v-if="show" :transition="transitionName">hello</div> 
new Vue({
 el: '...',
 data: {
 show: false,
 transitionName: 'fade'
 }
}

另外,可以提供 JavaScript 钩子:

Vue.transition('expand', {

 beforeEnter: function (el) {
 el.textContent = 'beforeEnter'
 },
 enter: function (el) {
 el.textContent = 'enter'
 },
 afterEnter: function (el) {
 el.textContent = 'afterEnter'
 },
 enterCancelled: function (el) {
 // handle cancellation
 },

 beforeLeave: function (el) {
 el.textContent = 'beforeLeave'
 },
 leave: function (el) {
 el.textContent = 'leave'
 },
 afterLeave: function (el) {
 el.textContent = 'afterLeave'
 },
 leaveCancelled: function (el) {
 // handle cancellation
 }
});

八、组件
1.注册

// 定义
var MyComponent = Vue.extend({
 template: '<div>A custom component!</div>'
});

// 注册
Vue.component('my-component', MyComponent);

// 创建根实例
new Vue({
 el: '#example'
});
<div id="example">
 <my-component></my-component>
</div>

或者直接写成:

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
});

 // 创建根实例
new Vue({
 el: '#example'
});
<div id="example">
  <my-component></my-component>
</div>

2.使用prop 传递数据
实例一:

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

实例二:

Vue.component('child', {
  // camelCase in JavaScript
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
 });
 <!-- kebab-case in HTML -->
 <child my-message="hello!"></child>

3.动态props

<div>
 <input v-model="parentMsg">
 <br>
 <child v-bind:my-message="parentMsg"></child>
</div>

使用 v-bind 的缩写语法通常更简单:

<child :my-message="parentMsg"></child>

4.Prop 绑定类型
prop 默认是单向绑定:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。不过,也可以使用 .sync 或 .once 绑定修饰符显式地强制双向或单次绑定:

比较语法:

<!-- 默认为单向绑定 -->
<child :msg="parentMsg"></child>

<!-- 双向绑定 -->
<child :msg.sync="parentMsg"></child>

<!-- 单次绑定 -->
<child :msg.once="parentMsg"></child>
其他实例:

<modal :show.sync="showModal">
 <h3 slot="header">custom header</h3>
 </modal>
</div>

5.Prop 验证
组件可以为 props 指定验证要求。当组件给其他人使用时这很有用,因为这些验证要求构成了组件的 API,确保其他人正确地使用组件。此时 props 的值是一个对象,包含验证要求:

Vue.component('example', {
 props: {
 // 基础类型检测 (`null` 意思是任何类型都可以)
 propA: Number,
 // 必需且是字符串
 propB: {
  type: String,
  required: true
 },
 // 数字,有默认值
 propC: {
  type: Number,
  default: 100
 },
 // 对象/数组的默认值应当由一个函数返回
 propD: {
  type: Object,
  default: function () {
  return { msg: 'hello' }
  }
 },
 // 指定这个 prop 为双向绑定
 // 如果绑定类型不对将抛出一条警告
 propE: {
  twoWay: true
 },
 // 自定义验证函数
 propF: {
  validator: function (value) {
  return value > 10
  }
 },
 // 转换函数(1.0.12 新增)
 // 在设置值之前转换值
 propG: {
  coerce: function (val) {
  return val + '' // 将值转换为字符串
  }
 },
 propH: {
  coerce: function (val) {
  return JSON.parse(val) // 将 JSON 字符串转换为对象
  }
 }
 }
});

其他实例:

Vue.component('modal', {
 template: '#modal-template',
 props: {
 show: {
  type: Boolean,
  required: true,
  twoWay: true 
 }
 }
});

6.注册

// 定义
var MyComponent = Vue.extend({
 template: '<div>A custom component!</div>'
});

// 注册
Vue.component('my-component', MyComponent);

// 创建根实例
new Vue({
 el: '#example'
});
<div id="example">
 <my-component></my-component>
</div>

或者直接写成:

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
});

 // 创建根实例
new Vue({
 el: '#example'
});
<div id="example">
  <my-component></my-component>
</div>

7.使用prop 传递数据
实例一:

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

实例二:

Vue.component('child', {
  // camelCase in JavaScript
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
 });
 <!-- kebab-case in HTML -->
 <child my-message="hello!"></child>

8.动态props

<div>
 <input v-model="parentMsg">
 <br>
 <child v-bind:my-message="parentMsg"></child>
</div>

使用 v-bind 的缩写语法通常更简单:

<child :my-message="parentMsg"></child>

9.Prop 绑定类型
prop 默认是单向绑定:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。不过,也可以使用 .sync 或 .once 绑定修饰符显式地强制双向或单次绑定:

比较语法:

<!-- 默认为单向绑定 -->
<child :msg="parentMsg"></child>

<!-- 双向绑定 -->
<child :msg.sync="parentMsg"></child>

<!-- 单次绑定 -->
<child :msg.once="parentMsg"></child>

其他实例:

<modal :show.sync="showModal">
 <h3 slot="header">custom header</h3>
 </modal>
</div>

10.Prop 验证
组件可以为 props 指定验证要求。当组件给其他人使用时这很有用,因为这些验证要求构成了组件的 API,确保其他人正确地使用组件。此时 props 的值是一个对象,包含验证要求:

Vue.component('example', {
 props: {
 // 基础类型检测 (`null` 意思是任何类型都可以)
 propA: Number,
 // 必需且是字符串
 propB: {
  type: String,
  required: true
 },
 // 数字,有默认值
 propC: {
  type: Number,
  default: 100
 },
 // 对象/数组的默认值应当由一个函数返回
 propD: {
  type: Object,
  default: function () {
  return { msg: 'hello' }
  }
 },
 // 指定这个 prop 为双向绑定
 // 如果绑定类型不对将抛出一条警告
 propE: {
  twoWay: true
 },
 // 自定义验证函数
 propF: {
  validator: function (value) {
  return value > 10
  }
 },
 // 转换函数(1.0.12 新增)
 // 在设置值之前转换值
 propG: {
  coerce: function (val) {
  return val + '' // 将值转换为字符串
  }
 },
 propH: {
  coerce: function (val) {
  return JSON.parse(val) // 将 JSON 字符串转换为对象
  }
 }
 }
});

其他实例:

Vue.component('modal', {
 template: '#modal-template',
 props: {
 show: {
  type: Boolean,
  required: true,
  twoWay: true 
 }
 }
});

11.使用slot分发内容
<slot> 元素作为组件模板之中的内容分发插槽。这个元素自身将被替换。
有 name 特性的 slot 称为命名 slot。 有 slot 特性的内容将分发到名字相匹配的命名 slot。

例如,假定我们有一个 multi-insertion 组件,它的模板为:

<div>
 <slot name="one"></slot>
 <slot></slot>
 <slot name="two"></slot>
</div>

父组件模板:

<multi-insertion>
 <p slot="one">One</p>
 <p slot="two">Two</p>
 <p>Default A</p>
</multi-insertion>

渲染结果为:

<div>
 <p slot="one">One</p>
 <p>Default A</p>
 <p slot="two">Two</p>
</div>

 

Javascript 相关文章推荐
JavaScript toFixed() 方法
Apr 15 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
jquery对单选框,多选框,文本框等常见操作小结
Jan 08 Javascript
js函数定时器实现定时读取系统实时连接数
Apr 30 Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 Javascript
js中scrollTop()方法和scroll()方法用法示例
Oct 03 Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
Feb 27 Javascript
JavaScript缺少insertAfter解决方案
Jul 03 Javascript
聊一聊JavaScript作用域和作用域链
May 03 #Javascript
小白谈谈对JS原型链的理解
May 03 #Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 #Javascript
JQuery的Pager分页器实现代码
May 03 #Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 #Javascript
JQuery核心函数是什么及使用方法介绍
May 03 #Javascript
jquery对象访问是什么及使用方法介绍
May 03 #Javascript
You might like
强烈推荐:php.ini中文版(2)
2006/10/09 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
jquery蒙版控件实现代码
2010/12/08 Javascript
JS文本框追加多个下拉框的值的简单实例
2013/07/12 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
python批量修改文件后缀示例代码分享
2013/12/24 Python
Python实现网站注册验证码生成类
2017/06/08 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
Python hmac模块使用实例解析
2019/12/24 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
《山谷中的谜底》教学反思
2014/04/26 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
见习报告的格式
2014/11/04 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书