1.第一个Vue程序
留神Vue的版本,不同版本的语法可能不同.
<!DOCTYPE html>
<html>
<head>
<title>VUE第一个实例</title>
</head>
<body>
<div id="app">{{msg}}
<div>
<!--v-model绑定到info变量上-->
<input type="text" v-model="info">
<!--@click绑定点击事件-->
<button @click="handle">增加</button>
</div>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.min.js"></script>
<script>
var app=new Vue({
el: "#app", //挂载到id=app的元素节点上
data() {
return {
msg: "hello 入门小站",
info: '',
list: []
}
},
methods: {
handle(){
this.list.push(this.info);
this.info='';
}
}
});
</script>
</body>
</html>2.组件的应用
<!DOCTYPE html>
<html>
<head>
<title>VUE第一个实例</title>
</head>
<body>
<div id="app">{{msg}}
<div>
<!--v-model绑定到info变量上-->
<input type="text" v-model="info">
<!--@click绑定点击事件-->
<button @click="handle">增加</button>
</div>
<ul>
<!--<li v-for="item in list">{{item}}</li> 替换成组件-->
<!--:comitem="item" 将for循环外面的itme传递到组件外面,并绑定到comitem上-->
<item-one v-for="item in list" :comitem="item"></item-one>
</ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.min.js"></script>
<script>
//定义一个名字叫item-one的组件
Vue.component('item-one',{
props:['comitem'], //申明变量
template:'<li>{{comitem}}</li>'
});
var app=new Vue({
el: "#app", //挂载到id=app的元素节点上
data() {
return {
msg: "hello 入门小站",
info: '',
list: []
}
},
methods: {
handle(){
//将input的值动静增加到list中
this.list.push(this.info);
this.info='';
}
}
});
</script>
</body>
</html>
发表回复