首页 > PHP资讯 > HTML5培训技术 > JavaScript的MVVM库Vue.js入门学习笔记_javascript类库

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

HTML5培训技术
一、v-bind 缩写



## 按键修饰符



全部的按键别名: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 过渡

hello

然后为 .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;}

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

hello

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: '

A custom component!

'});// 注册Vue.component('my-component', MyComponent);// 创建根实例new Vue({ el: '#example'});

或者直接写成:Vue.component('my-component', { template: '

A custom component!

'}); // 创建根实例new Vue({ el: '#example'});

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

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

实例二:

  Vue.component('child', {  // camelCase in JavaScript  props: ['myMessage'],  template: '{{ myMessage }}' }); 
 

3.动态props


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

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

比较语法:



其他实例: 

custom header

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: '

A custom component!

'});// 注册Vue.component('my-component', MyComponent);// 创建根实例new Vue({ el: '#example'});

或者直接写成:

Vue.component('my-component', {  template: '

A custom component!

'}); // 创建根实例new Vue({ el: '#example'});

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

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

实例二:

  Vue.component('child', {  // camelCase in JavaScript  props: ['myMessage'],  template: '{{ myMessage }}' }); 
 

8.动态props


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

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

比较语法:



其他实例:

 

custom header

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

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

父组件模板:

 

One

Two

Default A

渲染结果为:

One

Default A

Two

HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持46不支持0