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>