JavaScript的MVVM库怎么使用

本篇内容介绍了“JavaScript的MVVM库怎么使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

一、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 <h2 v-if="ok">Yes</h2> <h2 v-else>No</h2> <div v-if="Math.random() > 0.5">  Sorry </div> <div v-else>  Not sorry </div> template-v-if <template v-if="ok">  <h2>Title</h2>  <p>Paragraph 1</p>  <p>Paragraph 2</p> </template> v-show <h2 v-show="ok">Hello!</h2>

五、列表渲染 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">  <h4 slot="header">custom header</h4>  </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">  <h4 slot="header">custom header</h4>  </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的MVVM库怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！