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

站长资源 2024/11/16 佚名

7 1538 7

相思资源网 Design By www.200059.com

一、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,Vue.js,MVVM,Vue,js

标签：

JavaScript,Vue.js,MVVM,Vue,js

相思资源网 Design By www.200059.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

相思资源网 Design By www.200059.com

评论“JavaScript的MVVM库Vue.js入门学习笔记”

暂无JavaScript的MVVM库Vue.js入门学习笔记的评论...

www.200059.com 相思资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

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

JavaScript,Vue.js,MVVM,Vue,js

jQuery的promise与deferred对象在异步回调中的作用

聊一聊JavaScript作用域和作用域链

评论“JavaScript的MVVM库Vue.js入门学习笔记”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

友情链接

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

JavaScript,Vue.js,MVVM,Vue,js

jQuery的promise与deferred对象在异步回调中的作用

聊一聊JavaScript作用域和作用域链

评论“JavaScript的MVVM库Vue.js入门学习笔记”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存