一、VUE學習筆記-vue的簡單介紹
阿新 • • 發佈：2019-02-13
一、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 <script type="text/javascript">
var app = new Vue({
el : '#app' 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>