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

一、v-bind 缩写

二、v-on 缩写

三、过滤器

{{ message | capitalize }}

四、条件渲染

v-if
Yes
No


 0.5">
 Sorry


 Not sorry

template-v-if

v-show
Hello!

五、列表渲染 for

v-for

 
 {{ item.message }}
 

var example1 = new Vue({
 el: '#example-1',
 data: {
 items: [
  { message: 'Foo' },
  { message: 'Bar' }
 ]
 }
});
 

 
 {{ parentMessage }} - {{ $index }} - {{ item.message }}
 

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

对象 v-for


 
 {{ $key }} : {{ value }}
 

new Vue({
 el: '#repeat-object',
 data: {
 object: {
  FirstName: 'John',
  LastName: 'Doe',
  Age: 30
 }
 }
});

值域 v-for


 {{ n }}

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


 


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

内联语句处理器


 
 

new Vue({
 el: '#example-2',
 methods: {
 say: function (msg) {
  alert(msg)
 }
 }
});

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


 methods: {
 say: function (msg, event) {
 // 现在我们可以访问原生事件对象
 event.preventDefault()
 }
};

## 事件修饰符

## 按键修饰符

全部的按键别名：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 {
 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

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

Yes

No 0.5"> Sorry Not sorry template-v-if Title Paragraph 1 Paragraph 2 v-show

Hello!

custom header

custom header

JavaScript相关栏目本月热门文章

No 0.5"> Sorry Not sorry template-v-if v-show