版权声明：转载请注明出处，谢谢 https://blog.csdn.net/m0_37867405/article/details/80334380
一、vue起步
1.渲染节点数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello world</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="app">{{content}}</div>
</body>
<script type="text/javascript">
var vue = new Vue({
el : '#app',
data : {
content:'hello world 世界你好'
}
});
</script>
</html><script type="text/javascript">
var app = new Vue({
el : '#app',
data : {
content:'hello world 世界你好'
}
});
//定时任务
setTimeout(function() {
app.$data.content = 'I like java';
},2000)
</script>2.开发简单的ToList
在这一章节主要涉及：v-for、v-model、v-on:click等概念
v-for:数组的遍历，java中的foreach循环
v-model:数据的双向绑定
v-on:click: v-on主要的是数据事件的绑定，这里click是单击事件，简单形式@Click
【toList案例】
<body>
<div id="app">
<!--
v-model进行数据的双向绑定，无论哪个发生改变，另一个也会被改变
-->
<input type="text" v-model="inputValue">
<input type="button" value="提交" v-on:click="submitClick">
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el :'#app',
data : {
list : [],
// 双向绑定数据
inputValue : ''
},
methods : {
submitClick : function() {
this.list.push(this.inputValue);
this.inputValue=""
}
}
});
</script>2.2组件化ToList
1.简单的组件
// 定义一个全局的组件
Vue.component("TodoItem", {
template : '<li>hello todoList<li>'
});<!-- html使用组件 -->
<todo-item v-for="item in list"></todo-item>2.动态设置组件的内容
<body>
<div id="app">
<!--
v-model进行数据的双向绑定，无论哪个发生改变，另一个也会被改变
-->
<input type="text" v-model="inputValue">
<input type="button" value="提交" @Click="submitClick">
<ul>
<!-- <li v-for="item in list">{{item}}</li> -->
<todo-item v-bind:content="item" v-for="item in list"></todo-item>
</ul>
</div>
</body>
<script type="text/javascript">
// 定义一个全局的组件
Vue.component("TodoItem", {
props : ['content'],
template : '<li>{{content}}<li>'
});
var app = new Vue({
el : '#app',
data : {
list : [],
// 双向绑定数据
inputValue : ''
},
methods : {
submitClick : function() {
if (this.inputValue) {
this.list.push(this.inputValue);
}
this.inputValue=""
}
}
});
</script>
</html>2.定义一个局部的组件
//定义一个局部组件
var Tod = {
props : ['content'],
template : '<li>{{content}}<li>'
};
var app = new Vue({
el : '#app',
components:{
TodoItem :Tod //组件注册
},
data : {
list : [],
// 双向绑定数据
inputValue : ''
},
methods : {
submitClick : function() {
if (this.inputValue) {
this.list.push(this.inputValue);
}
this.inputValue=""
}
}
});2.3子组件向父组件传值
v-bind:content 可以向子组件传值，可以简写:content
this.$emit('delete',this.index); 监听父组件的事件，并且向父组件传值
v-for="(item,index) in list" 此种方式遍历item为数据，index为下标
<body>
<div id="app">
<!--
v-model进行数据的双向绑定，无论哪个发生改变，另一个也会被改变
-->
<input type="text" v-model="inputValue">
<input type="button" value="提交" @Click="submitClick">
<ul>
<!-- <li v-for="item in list">{{item}}</li> -->
<!-- v-bind向子组件传值 -->
<todo-item
v-bind:content="item"
v-bind:index="index"
v-for="(item,index) in list"
@delete="handDeletClick">
</todo-item>
</ul>
</div>
</body>
<script type="text/javascript">
// 定义一个全局的组件
// Vue.component("TodoItem", {
// props : ['content'],
// template : '<li>{{content}}<li>'
// });
//定义一个局部组件
var Tod = {
props : ['content','index'],
template : "<li @click='handItem'>{{content}}</li>",
methods : {
handItem: function(){
this.$emit('delete',this.index); //监听父组件delete事件,并且传递参数index
}
}
};
var app = new Vue({
el : '#app',
components:{
TodoItem :Tod
},
data : {
list : [],
// 双向绑定数据
inputValue : ''
},
methods : {
submitClick : function() {
if (this.inputValue) {
this.list.push(this.inputValue);
}
this.inputValue=""
},
handDeletClick : function(index){
this.list.splice(index, 1);
}
}
});
</script>
</html>