vue代码练习及效果图

来源：互联网发布：淘宝直播秒杀怎么付款编辑：程序博客网时间：2024/05/10 12:21

<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
<input v-model="message">
<span v-bind:title="message">
Hello Kitty!
</span>
<p v-if="seen">
Now you see me!
</p>
<ol>
<li v-for="todo in todos">{{ todo.text }}</li>
</ol>
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>

</div>

Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
seen: true,
todos: [
{ text: 'Learn Javascript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
],
groceryList: [
{ text: 'Vegetables' },
{ text: 'Cheese' },
{ text: 'Whatever else humans are supposed to eat' }
]
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})

new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
firstName: 'Foo',
lastName: 'Bar',
question: '',
answer: 'I cannot give you an answer until you ask a question!',
isActive: true,
error: null,
styleObject: {
color: 'red',
fontSize: '13px'
},
items: [
{message: 'Foo'},
{message: 'Bar'}
],
ok:true,
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
},
fullName: function () {
return this.firstName + ' ' + this.lastName
},
fullNameName: {
get: function () {
return this.firstName + ' ' + this.lastName
},
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = name[0]
this.lastName = names[names.length - 1]
}
},
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
},
methods: {
reversedMessageNew: function () {
return this.message.split('').reverse().join('')
},
getAnswer:_.debounce(
function () {
if(this.question.indexOf('?') === -1) {
this.answer = 'Questions usually contain a question mark. ;-)'
return
}
this.answer = 'Thinking...'
var vm = this
axios.get('https://yesno.wtf/api').then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Error! Could not reach the API. ' + error
})
},
500
)
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' +val
},
question: function (newQuestion) {
this.answer = 'Watching for you to stop typing...'
this.getAnswer()
}
}
})

<div id="app">
<p>{{ message }}</p>
<li v-for="value in object">{{ value }}</li>
<div v-for="(value, key) in object">
{{ key }} : {{ value }}
</div>
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</div>
<div>
<span v-for="n in 10">{{ n }}</span>
</div>
<input
v-model="newTodoText"
v-on:keyup.enter="addNewTodo"
placeholder="Add a todo"
>
<ul>
<li
is="todo-item"
v-for="(todo, index) in todos"
v-bind:title="todo"
v-on:remove="todos.splice(index, 1)"
></li>
</ul>
<li v-for="todo in todos" v-if="!todo.isComplete">{{ todo }}</li>
<ul v-if="shouldRenderTodos">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<li v-for="n in evenNumbers">{{ n }}</li>
<li v-for="n in even(numbers)">{{ n }}</li>
</div>

Vue.component('todo-item', {
template: `\
<li>\
{{ title }}\
<button v-on:click="$emit(\`remove\`)">X</button>\
</li>\
`,
props: ['title']
})
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
},
newTodoText: '',
todos: [
'Do the dishes',
'Take out the trash',
'Mow the lawn'
],
shouldRenderTodos: true,
numbers: [1, 2, 3, 4, 5]
},
methods: {
addNewTodo: function () {
this.todos.push(this.newTodoText)
this.newTodoText = ''
},
even: function (numbers) {
return numbers.filter(function (number) {
return number % 2 === 0
})
}
},
computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}
})

<div id="app">
<p>{{ message }}</p>
<button v-on:click="counter += 1">增加 1</button>
<p>
这个按钮被点击了{{ counter }}次。
</p>
<button v-on:click="greet">
Greet
</button>
<select v-modle="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
</div>

new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
counter: 0,
name: 'Vue.js',
selected: 'A',
options: [
{ text: 'One', value: 'A'},
{ text: 'Two', value: 'B'},
{ text: 'Three', value: 'C'}
]
},
methods: {
greet: function (event) {
alert('Hello' + this.name + '!')
if(event) {
alert(event.target.tagName)
}
}
}
})

0 0