| 标题 | JavaScript的MVVM库Vue.js入门学习笔记 |
| 范文 | 这篇文章主要介绍了JavaScript的MVVM库Vue.js入门学习笔记,Vue.js是一个新兴的js库,主要用于实现响应的数据绑定和组合的视图组件,需要的朋友可以参考下 一、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></li> </template> </ul> 对象 v-for <ul id="repeat-object"> <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 的缩写语法通常更简单： ? 1 <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> |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。