vue Todo -list例子
2018-07-10 本文已影响3人
程序员同行者
vue Todo -list例子
<!DOCTYPE html>
<html>
<head>
<title>Todo -list例子</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
<div v-html="messageHtml"></div>
<div v-once="messageonce">{{messageonce}}</div>
</div>
<div id="app-1">
<li v-for="(item,index) in items" :key='index'>
{{index}}--{{item.text}}
</li>
</div>
<div id="app-2">
<p>输入框</p>
<input type="text" v-model="message" />
<p>newmessage is :{{newmessage}}</p>
<p>methnewmessage is :{{methnewmessage()}}</p>
<p>watch is : {{newmess}}</p>
<p>输入框</p>
<input type="text" :value="value" v-on:input="value=$event.target.value" />
<p>{{value}}</p>
</div>
<div id="app-3">
{{message}}
</div>
<div id="app-4">
<input type="text" v-model='value' @keyup.enter="add">
<todo-item v-for='todo in todos' :todo='todo.text' @remove="removeIt"></todo-item>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello vue",
messageHtml: "<div>hello html1</div>",
messageonce: "hello once",
}
})
var app1 = new Vue({
el: "#app-1",
data() {
return{
items: [
{text: "hello1"},
{text: "hello2"},
{text: "hello3"}
]
}
}
})
var app2 = new Vue({
el: "#app-2",
data: {
message: "hello vue",
value: "",
newmess: "",
},
computed: {
newmessage() {
return this.message.split('').reverse().join('')
}
},
methods: {
methnewmessage() {
return this.message.split('').reverse().join('')
}
},
watch: {
message: {
handler(value) {
console.log(value)
if (value === 'hello'){
this.newmess = value.split('').reverse().join('')
}else {
this.newmess = value
}
},
immediate: true
}
}
})
var app3 = new Vue({
el: "#app-3",
data: {
message: "hello vue",
},
beforeCreate() {
console.log('调用beforecreate钩子',this.message)
},
created() {
console.log('调用created钩子',this.message)
},
beforeMount() {
console.log('调用beforeMount钩子',this.message)
},
mounted() {
console.log('调用mounted钩子',this.message)
},
beforeUpdate() {
console.log('调用beforeUpdate钩子',this.message)
},
updated() {
console.log('调用updated钩子',this.message)
},
beforeDestroy() {
console.log('调用beforeDestroy钩子',this.message)
},
destroyed() {
console.log('调用destroyed钩子',this.message)
},
})
// Vue.component('todo-item',{
// props: ['todo'],
// template: '<li>this is {{todo}} item</li>'
// })
// 通过一个普通的 JavaScript 对象来定义局部组件
var todoItem = {
props: ['todo'],
template:`
<li>this is a {{ todo }} item
<button @click="remove">remove</button>
</li>
`,
methods: {
remove() {
this.$emit("remove",this.todo)
}
}
}
var app4 = new Vue({
el: "#app-4",
components : {
// 'todo-item':todoItem
todoItem
},
data() {
return {
value : "",
todos: [
{text: "hello1"},
{text: "hello2"},
{text: "hello3"},
{text: "hello4"},
]
}
},
methods: {
removeIt(deleteText) {
this.todos = this.todos.filter(function(todo) {
return todo.text !== deleteText
});
},
add() {
console.log(this.value)
// some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
// some() 方法会依次执行数组的每个元素：
// 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
// 如果没有满足条件的元素，则返回false。
let isvalid = this.todos.some(todo =>{
console.log(todo.text,this.value)
// let isvalid = this.todos.some(function(todo){
return todo.text === this.value
})
console.log(isvalid)
if (isvalid){
alert('重复啦')
return
}else {
this.todos.push({text:this.value})
this.value = ""
}
}
},
})
</script>
</body>
</html>
