61.[前端开发-Vue3]Day03-购物车-v-model-组件化-Vue脚手架
Vue基础 – v-model表单
1 v-model基本使用
综合案例
index.html
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table {border-collapse: collapse;/* text-align: center; */}thead {background-color: #f5f5f5;}th, td {border: 1px solid #aaa;padding: 8px 16px;}.active {background-color: skyblue;}</style>
</head>
<body><div id="app"><!-- 1.搭建界面内容 --><template v-if="books.length"><table><thead><tr><th>序号</th><th>书籍名称</th><th>出版日期</th><th>价格</th><th>购买数量</th><th>操作</th></tr></thead><tbody><tr v-for="(item, index) in books" :key="item.id"@click="rowClick(index)":class="{ active: index === currentIndex }"><td>{{ index + 1 }}</td><td>{{ item.name }}</td><td>{{ item.date }}</td><td>{{ formatPrice(item.price) }}</td><td><button :disabled="item.count <= 1" @click="decrement(index, item)">-</button>{{ item.count }}<button @click="increment(index, item)">+</button></td><td><button @click="removeBook(index, item)">移除</button></td></tr></tbody></table><h2>总价: {{ formatPrice(totalPrice) }}</h2></template><template v-else><h1>购物车为空, 请添加喜欢的书籍~</h1><p>商场中有大量的IT类的书籍, 请选择添加学习, 注意保护好自己的头发!</p></template></div><script src="../lib/vue.js"></script><script src="./data/data.js"></script><script>// 1.创建appconst app = Vue.createApp({// data: option apidata() {return {books: books,currentIndex: 0}},// computedcomputed: {totalPrice() {// 1.直接遍历books// let price = 0// for (const item of this.books) {// price += item.price * item.count// }// return price// 2.reduce(自己决定)return this.books.reduce((preValue, item) => {return preValue + item.price * item.count}, 0)}},methods: {formatPrice(price) {return "¥" + price},// 监听-和+操作decrement(index, item) {console.log("点击-")// this.books[index].count--item.count--},increment(index, item) {console.log("点击+:", index)// this.books[index].count++item.count++},removeBook(index, item) {this.books.splice(index, 1)},rowClick(index) {this.currentIndex = index}}})// 2.挂载appapp.mount("#app")</script>
</body>
</html>列表选中
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.active {color: red;}</style>
</head>
<body><div id="app"><ul><!-- <h2 :class="{title: false}"></h2> --><!-- 对active的class进行动态绑定 --><!-- 需求一: 将索引值为1的li添加上active --><!-- 需求二：用一个变量（属性）记录当前点击的位置 --><li :class="{active: index === currentIndex}"@click="liClick(index)"v-for="(item, index) in movies">{{item}}</li></ul></div><script src="../lib/vue.js"></script><script>// 1.创建appconst app = Vue.createApp({// data: option apidata() {return {movies: ["星际穿越", "阿凡达", "大话西游", "黑客帝国"],currentIndex: -1}},methods: {liClick(index) {console.log("liClick:", index)this.currentIndex = index}}})// 2.挂载appapp.mount("#app")</script>
</body>
</html>v-model的基本使用
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><!-- 1.手动的实现了双向绑定 --><!-- <input type="text" :value="message" @input="inputChange"> --><!-- 2.v-model实现双向绑定 --><!-- <input type="text" v-model="message"> --><!-- 3.登录功能 --><label for="account">账号:<input id="account" type="text" v-model="account"></label><label for="password">密码:<input id="password" type="password" v-model="password"></label><button @click="loginClick">登录</button><h2>{{message}}</h2></div><script src="../lib/vue.js"></script><script>// 1.创建appconst app = Vue.createApp({// data: option apidata() {return {message: "Hello Model",account: "",password: ""}},methods: {inputChange(event) {this.message = event.target.value},loginClick() {const account = this.accountconst password = this.password// url发送网络请求console.log(account, password)}}})// 2.挂载appapp.mount("#app")</script>
</body>
</html>2 v-model绑定原理
v-model的原理
事实上v-model更加复杂
v-model绑定textarea
v-model绑定checkbox
3 v-model绑定radio
v-model绑定radio
4 v-model绑定checkbox
5 v-model绑定select
v-model绑定select
v-model的值绑定
texarea
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><textarea cols="30" rows="10" v-model="content"></textarea><p>输入的内容: {{content}}</p></div><script src="../lib/vue.js"></script><script>// 1.创建appconst app = Vue.createApp({// data: option apidata() {return {content: ""}},})// 2.挂载appapp.mount("#app")</script>
</body>
</html>checkbox
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><!-- 1.checkbox单选框: 绑定到属性中的值是一个Boolean --><label for="agree"><input id="agree" type="checkbox" v-model="isAgree"> 同意协议</label><h2>单选框: {{isAgree}}</h2><hr><!-- 2.checkbox多选框: 绑定到属性中的值是一个Array --><!-- 注意: 多选框当中, 必须明确的绑定一个value值 --><div class="hobbies"><h2>请选择你的爱好:</h2><label for="sing"><input id="sing" type="checkbox" v-model="hobbies" value="sing"> 唱</label><label for="jump"><input id="jump" type="checkbox" v-model="hobbies" value="jump"> 跳</label><label for="rap"><input id="rap" type="checkbox" v-model="hobbies" value="rap"> rap</label><label for="basketball"><input id="basketball" type="checkbox" v-model="hobbies" value="basketball"> 篮球</label><h2>爱好: {{hobbies}}</h2></div></div><script src="../lib/vue.js"></script><script>// 1.创建appconst app = Vue.createApp({// data: option apidata() {return {isAgree: false,hobbies: []}},})// 2.挂载appapp.mount("#app")</script>
</body>
</html>radio
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><div class="gender"><label for="male"><input id="male" type="radio" v-model="gender" value="male"> 男</label><label for="female"><input id="female" type="radio" v-model="gender" value="female"> 女</label><h2>性别: {{gender}}</h2></div></div><script src="../lib/vue.js"></script><script>// 1.创建appconst app = Vue.createApp({// data: option apidata() {return {gender: "female"}},})// 2.挂载appapp.mount("#app")</script>
</body>
</html>select
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><!-- select的单选 --><select v-model="fruit"><option value="apple">苹果</option><option value="orange">橘子</option><option value="banana">香蕉</option></select><h2>单选: {{fruit}}</h2><hr><!-- select的多选 --><select multiple size="3" v-model="fruits"><option value="apple">苹果</option><option value="orange">橘子</option><option value="banana">香蕉</option></select><h2>多选: {{fruits}}</h2></div><script src="../lib/vue.js"></script><script>// 1.创建appconst app = Vue.createApp({// data: option apidata() {return {fruit: "orange",fruits: []}},})// 2.挂载appapp.mount("#app")</script>
</body>
</html>v-model的值绑定
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><!-- 1.select的值绑定 --><select multiple size="3" v-model="fruits"><option v-for="item in allFruits" :key="item.value" :value="item.value">{{item.text}}</option></select><h2>多选: {{fruits}}</h2><hr><!-- 2.checkbox的值绑定 --><div class="hobbies"><h2>请选择你的爱好:</h2><template v-for="item in allHobbies" :key="item.value"><label :for="item.value"><input :id="item.value" type="checkbox" v-model="hobbies" :value="item.value"> {{item.text}}</label></template><h2>爱好: {{hobbies}}</h2></div></div><script src="../lib/vue.js"></script><script>// 1.创建appconst app = Vue.createApp({// data: option apidata() {return {// 水果allFruits: [{ value: "apple", text: "苹果" },{ value: "orange", text: "橘子" },{ value: "banana", text: "香蕉" },],fruits: [],// 爱好allHobbies: [{ value: "sing", text: "唱" },{ value: "jump", text: "跳" },{ value: "rap", text: "rap" },{ value: "basketball", text: "篮球" }],hobbies: []}}})// 2.挂载appapp.mount("#app")</script>
</body>
</html>6 v-model的修饰符
v-model修饰符 - lazy
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><!-- 1.lazy: 绑定change事件 --><input type="text" v-model.lazy="message"><h2>message: {{message}}</h2><hr><!-- 2.number: 自动将内容转换成数字 --><input type="text" v-model.number="counter"><h2>counter:{{counter}}-{{typeof counter}}</h2><input type="number" v-model="counter2"><h2>counter2:{{counter2}}-{{typeof counter2}}</h2><hr><!-- 3.trim: 去除收尾的空格 --><input type="text" v-model.trim="content"><h2>content: {{content}}</h2><hr><!-- 4.使用多个修饰符 --><input type="text" v-model.lazy.trim="content"><h2>content: {{content}}</h2></div><script src="../lib/vue.js"></script><script>// 1.创建appconst app = Vue.createApp({// data: option apidata() {return {message: "Hello Vue",counter: 0,counter2: 0,content: ""}},watch: {content(newValue) {console.log("content:", newValue)}}})// 2.挂载appapp.mount("#app")</script>
</body>
</html>v-model修饰符 - number
v-model修饰符 - trim
v-mode组件上使用
Vue组件化基础 - 脚手架
1 Vue组件化开发思想
人处理问题的方式
跟组件的使用
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2></div><script src="../lib/vue.js"></script><script>// 1.组件: App组件(根组件)const App = {data() {return {message: "Hello Vue"}}}// 1.创建appconst app = Vue.createApp(App)// 2.挂载appapp.mount("#app")</script>
</body>
</html>认识组件化开发
组件化开发
Vue的组件化
注册组件的方式
2 注册Vue的全局组件
注册全局组件
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.product {background-color: orange;}</style>
</head>
<body><div id="app"><!-- 1.内容一: --><product-item></product-item><!-- 2.内容二: --><product-item></product-item><!-- 3.内容三: --><product-item></product-item></div><!-- 组件product-item的模板 --><template id="item"><div class="product"><h2>我是商品</h2><div>商品图片</div><div>商品价格: <span>¥9.9</span></div><p>商品描述信息, 9.9秒杀</p></div></template><script src="../lib/vue.js"></script><script>/*1.通过app.component(组件名称, 组件的对象)2.在App组件的模板中, 可以直接使用product-item的组件*/// 1.组件: App组件(根组件)const App = {}// 2.创建appconst app = Vue.createApp(App)// 3.注册一个全局组件// product-item全局组件app.component("product-item", {template: "#item"})// 2.挂载appapp.mount("#app")</script>
</body>
</html>全局组件的逻辑
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.product {background-color: orange;}</style>
</head>
<body><div id="app"><!-- <home-nav></home-nav> --><HomeNav></HomeNav><home-nav></home-nav><product-item></product-item><product-item></product-item><product-item></product-item></div><template id="nav"><h2>我是应用程序的导航</h2></template><template id="product"><div class="product"><h2>{{title}}</h2><p>商品描述, 限时折扣, 赶紧抢购</p><p>价格: {{price}}</p><button @click="favarItem">收藏</button></div></template><script src="../lib/vue.js"></script><script>// 1.创建appconst app = Vue.createApp({// data: option apidata() {return {message: "Hello Vue"}},})// 2.注册全局组件app.component("product-item", {template: "#product",data() {return {title: "我是商品Item",price: 9.9}},methods: {favarItem() {console.log("收藏了当前的item")}}})app.component("HomeNav", {template: "#nav"})// 2.挂载appapp.mount("#app")</script>
</body>
</html>组件的名称
注册局部组件
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.product {background-color: orange;}</style>
</head>
<body><div id="app"><home-nav></home-nav><product-item></product-item><product-item></product-item><product-item></product-item></div><template id="product"><div class="product"><h2>{{title}}</h2><p>商品描述, 限时折扣, 赶紧抢购</p><p>价格: {{price}}</p><button>收藏</button></div></template><template id="nav"><div>-------------------- nav start ---------------</div><h1>我是home-nav的组件</h1><product-item></product-item><div>-------------------- nav end ---------------</div></template><script src="../lib/vue.js"></script><script>// 1.创建appconst ProductItem = {template: "#product",data() {return {title: "我是product的title",price: 9.9}}}// 1.1.组件打算在哪里被使用const app = Vue.createApp({// components: option apicomponents: {ProductItem,HomeNav: {template: "#nav",components: {ProductItem}}},// data: option apidata() {return {message: "Hello Vue"}}})// 2.挂载appapp.mount("#app")</script>
</body>
</html>全局组件的特点
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.product {background-color: orange;}</style>
</head>
<body><div id="app"><!-- <home-nav></home-nav> --><HomeNav></HomeNav><home-nav></home-nav><product-item></product-item><product-item></product-item><product-item></product-item></div><template id="nav"><div>---------------------nav start ------------------------</div><h2>我是应用程序的导航</h2><product-item></product-item><div>---------------------nav end ------------------------</div></template><template id="product"><div class="product"><h2>{{title}}</h2><p>商品描述, 限时折扣, 赶紧抢购</p><p>价格: {{price}}</p><button @click="favarItem">收藏</button></div></template><script src="../lib/vue.js"></script><script>// 1.创建appconst app = Vue.createApp({// data: option apidata() {return {message: "Hello Vue"}},})// 2.注册全局组件// 全局组件的特点: 一旦注册成功后, 可以在任意其他组件的template中使用app.component("product-item", {template: "#product",data() {return {title: "我是商品Item",price: 9.9}},methods: {favarItem() {console.log("收藏了当前的item")}}})app.component("HomeNav", {template: "#nav"})// 2.挂载appapp.mount("#app")</script>
</body>
</html>3 注册Vue的布局组件
布局组件注册代码
4 Vue的开发模式解析
Vue的开发模式
单文件的特点
如何支持SFC
VSCode对SFC文件的支持
5 Vue CLI安装和使用
Vue CLI脚手架
Vue CLI 安装和使用
vue create 项目的过程
6 Vue的项目目录分析
项目的目录结构
Vue CLI的运行原理
