模板代码准备
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>lesson 37</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
template: `
<div>
<div>
<input />
<button >提交</button>
</div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>`
});
const vm = app.mount('#root');
</script>
</html>
首先准备一个setup函数：
<script>
const app = Vue.createApp({
setup() {
const { ref } = Vue;
const inputValue = ref('123');
return {
inputValue
}
},
template: `
<div>
<div>
<input :value="inputValue" />
<button >提交</button>
</div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>`
});
const vm = app.mount('#root');
</script>
接着增加输入事件：
<script>
const app = Vue.createApp({
setup() {
const { ref } = Vue;
const inputValue = ref('123');
const handleInputValueChange=(e)=>{
console.log(e);
}
return {
inputValue,
handleInputValueChange
}
},
template: `
<div>
<div>
<input :value="inputValue" @input="handleInputValueChange"/>
<button >提交</button>
</div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>`
});
const vm = app.mount('#root');
</script>
然后实现一个简单的数据的双向绑定：
<script>
const app = Vue.createApp({
setup() {
const { ref } = Vue;
const inputValue = ref('123');
const handleInputValueChange = e => {
inputValue.value = e.target.value;
};
return {
inputValue,
handleInputValueChange
};
},
template: `
<div>
<div>
<input :value="inputValue" @input="handleInputValueChange"/>
<div>{{inputValue}}</div>
<button >提交</button>
</div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>`
});
const vm = app.mount('#root');
</script>
给提交按钮增加一个点击事件，点击后将数据收集存到一个list中，然后同步绑定ul列表，更新显示。
<script>
const app = Vue.createApp({
setup() {
const { ref, reactive } = Vue;
const inputValue = ref('123');
const list = reactive([]);
const handleInputValueChange = e => {
inputValue.value = e.target.value;
};
const handleSubmit = e => {
list.push(inputValue.value);
};
return {
inputValue,
handleInputValueChange,
handleSubmit,
list
};
},
template: `
<div>
<div>
<input :value="inputValue" @input="handleInputValueChange"/>
<div>{{inputValue}}</div>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<li>1</li>
</ul>
</div>`
});
const vm = app.mount('#root');
</script>
到此，todoList案例编写完毕，但是，向这样做了2件事件，是否可以进行拆分和封装？
最终写法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>lesson 37</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 关于 list 操作的内容进行了封装
const listRelativeEffect = () => {
const { reactive } = Vue;
const list = reactive([]);
const addItemToList = item => {
list.push(item);
};
return { list, addItemToList };
};
// 关于 inputValue 操作的内容进行了封装
const inputRelativeEffect = () => {
const { ref } = Vue;
const inputValue = ref('');
const handleInputValueChange = e => {
inputValue.value = e.target.value;
};
return { inputValue, handleInputValueChange };
};
const app = Vue.createApp({
setup() {
// 流程调度中转
const { list, addItemToList } = listRelativeEffect();
const { inputValue, handleInputValueChange} = inputRelativeEffect();
return {
list, addItemToList,
inputValue, handleInputValueChange
}
},
template: `
<div>
<div>
<input :value="inputValue" @input="handleInputValueChange" />
<button @click="() => addItemToList(inputValue)">提交</button>
</div>
<ul>
<li v-for="(item, index) in list" :key="index">{{item}}</li>
</ul>
</div>`
});
const vm = app.mount('#root');
</script>
</html>
以上类似于() => addItemToList(inputValue)这样的语法不太好懂的话 ，可以如下代码理解：
<script>
......
const app = Vue.createApp({
setup() {
// 流程调度中转
const { list, addItemToList } = listRelativeEffect();
const { inputValue, handleInputValueChange} = inputRelativeEffect(inputValue);
const handleSubmit=()={
addItemToList();
return {
list, addItemToList,handleSubmit,
inputValue, handleInputValueChange,
}
},
template: `
<div>
<div>
<input :value="inputValue" @input="handleInputValueChange" />
<button @click="handleSubmit">提交</button>
</div>
<ul>
<li v-for="(item, index) in list" :key="index">{{item}}</li>
</ul>
</div>`
});
const vm = app.mount('#root');
</script>
当然，这样写没有任何意义。
网友评论