Vue.js第一天

Posted 2021-05-01 SillyCode

Vue.js(读音类似vue)

1.使用类似jQuery的方式练习基础

src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'

2. {{ message }}

3. v-bind:title="message" :鼠标悬停查看与message绑定的title

4. v-if='bool_var': 小程序的wx:if

5. v-for='array_list': wx:for

6. v-on : 添加事件监听器

v-on:click='event_function_name'

7. v-model :表单输入和应用状态之间的双向绑定

Vue.component('组件名', 模板对象)

先绑定组件再new Vue对象

Vue.component('todo-item', { 
template: <li>{{what.text}}</li>',
props: ['what'] 
}),

//先绑定组件再new Vue对象
var app = new Vue({
el: '#app1',

data: {
groceryList: [{id: 0, text: 'vegetable'}, {id: 1, text: 'cheese'}, {id: 2, text: 'others'}] }
})

Vue.component例子

1. vegetable

2. cheese

3. others