共计 28772 个字符,预计需要花费 72 分钟才能阅读完成。
1540394364528
路由 vue-router
场景模仿
当初咱们来实现这样一个性能:
一个页面,蕴含登录和注册,点击不同按钮,实现登录和注册页切换。
编写父组件
为了让接下来的性能比拟清晰,咱们先新建一个文件夹:src
而后新建一个 HTML 文件,作为入口:index.html
而后编写页面的根本构造:
<div id="app">
<span> 登录 </span>
<span> 注册 </span>
<hr/>
<div>
登录页 / 注册页
</div>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript"> var vm = new Vue({el:"#app"})</script>
编写登录及注册组件
接下来咱们来实现登录组件,以前咱们都是写在一个文件中,然而为了复用性,开发中都会把组件放入独立的 JS 文件中,咱们新建一个 user 目录以及 login.js 及 register.js。
编写组件,这里咱们只写模板,不写性能。
login.js 内容如下:
const loginForm = {
template:'
<div>
<h2> 登录页 </h2>
用户名:<input type="text"><br/>
明码:<input type="password"><br/>
</div>
'
}
register.js 内容:
const registerForm = {
template:'
<div>
<h2> 注册页 </h2>
用   户   名:<input type="text"><br/>
密    码:<input type="password"><br/>
确认明码:<input type="password"><br/>
</div>
'
}
在父组件中援用
<div id="app">
<span> 登录 </span>
<span> 注册 </span>
<hr/>
<div>
<!--<loginForm></loginForm>-->
<!--
疑难:为什么不采纳下面的写法?因为 html 是大小写不敏感的,如果采纳下面的写法,则被认为是 <loginform></loginform>
所以,如果是驼峰模式的组件,须要把驼峰转化为“-”的模式
-->
<login-form></login-form>
<register-form></register-form>
</div>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="user/login.js"></script>
<script src="user/register.js"></script>
<script type="text/javascript"> var vm = new Vue({
el: "#app",
components: {
loginForm,
registerForm
}
})</script>
问题
咱们期待的是,当点击登录或注册按钮,别离显示登录页或注册页,而不是一起显示。
然而,如何能力动静加载组件,实现组件切换呢?
尽管应用原生的 Html5 和 JS 也能实现,然而官网举荐咱们应用 vue-router 模块。
vue-router 简介和装置
应用 vue-router 和 vue 能够十分不便的实现 简单单页利用的动静路由性能。
官网:https://router.vuejs.org/zh-cn/
应用 npm 装置:npm install vue-router --save
在 index.html 中引入依赖:
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
疾速入门
新建 vue-router 对象,并且指定路由规定:
// 创立 VueRouter 对象
const router = new VueRouter({
routes:[ // 编写路由规定
{
path:"/login", // 申请门路
component:loginForm // 组件名称
},
{path:"/register",component:registerForm},
]
})
- 创立 VueRouter 对象,并指定路由参数
-
routes:路由规定的数组,能够指定多个对象,每个对象是一条路由规定,蕴含以下属性:
- path:路由的门路
- component:组件名称
在父组件中引入 router 对象:
var vm = new Vue({
el:"#app",
components:{// 援用登录和注册组件
loginForm,
registerForm
},
router // 援用下面定义的 router 对象
})
页面跳转管制:
<div id="app">
<!--router-link 来指定跳转的门路 -->
<span><router-link to="/login"> 登录 </router-link></span>
<span><router-link to="/register"> 注册 </router-link></span>
<hr/>
<div>
<!--vue-router 的锚点 -->
<router-view></router-view>
</div>
</div>
- 通过 router-view 来指定一个锚点,当路由的门路匹配时,vue-router 会主动把对应组件放到锚点地位进行渲染
- 通过 router-link 指定一个跳转链接,当点击时,会触发 vue-router 的路由性能。
单文件组件
vue-cli3 开发单文件组件
Vue.component('组件名',{})
new Vue({})
毛病
- 全局定义组件的名字时不能反复
- 字符串模板 es6 提供了模板字符串
- 不反对 css
在 vue 中把.vue 的文件称为 单文件组件
Vue CLI3 脚手架
根本配置
-
装置 Nodejs
- 保障 Node.js8.9 或更高版本
- 终端中输出
node -v
, 保障已装置胜利
-
装置淘宝镜像源
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 当前的 npm 能够用 cnpm 代替
-
装置 Vue Cli3 脚手架
cnpm install -g @vue/cli
-
查看其版本是否正确
vue --version
疾速原型开发
在命令行工具 cmd,或者 Intellij IDEA 的 Terminal 中进入想要构建我的项目的目录,输出
vue init webpack project-name
回车,webpack 默认版本为 2.0。
接下来会呈现几个提醒,别离是输出项目名称、形容、作者等,按理论状况抉择即可。
?Project name ---- 项目名称,init 命令时也填了个 project-name,如果无需更改,间接回车即可;?Project description ---- 我的项目形容,按需填写。无需填写能够间接回车;?Author ---- 作者?Vue build ---- 构建模式,个别默认第一个;?Install vue-router? ---- 是否装置 vue-router。选 Y。后边构建我的项目会用到。?Use ESLint to lint yout code? ---- 格局校验,按需;?Set up unit tests ---- 测试相干,按需;?Setup e2e tests with Nightwatch? ---- 测试相干,按需;?Should we run‘npm install’for you after the project has been created? ---- 按需,这里我选 Yes, use NPM。如果选 No,后续本人在指标
目录下执行 npm install 即可。这样构建进去的我的项目,能够间接运行。进入我的项目所在目录,执行 npm run dev,执行完看到以下提醒:
Your application is running here: http://localhost:8080
在浏览器关上 http://localhost:8080,看到这个页面,接下来就能够开始开发了。
剖析 Vue 脚手架生成的我的项目构造
node_modules: 依赖包目录 public:动态资源目录 src:源码目录 src/assets: 资源目录 src/components:组件目录 src/views: 视图组件目录 src/App.vue: 根组件 src/main.js: 入口 js src/router.js: 路由 js babel.config.js:babel 配置文件
应用单文件组件开发购物车
<template>
<div id="app">
<h1>{{title}}</h1>
<ul>
<li v-for="item in cartList" :key="item.id">
<h2>{{item.title}}</h2>
<p>${{item.price}}</p>
</li>
</ul>
<my-cart :title="title" :cart-list="cartList"></my-cart>
</div>
</template>
<script> import MyCart from './components/Cart';
export default {
name:"app",
data() {
return {
cartList:[{id:1,title:"vue 实战",price:188,active:true,count:2},
{id:2,title:"react 实战",price:288,active:false,count:1}],
title:"购物车"
};
},
components:{MyCart}
} </script>
购物车文件代码:
<template>
<div>
<h1>{{title}}</h1>
<table border="1">
<tr>
<th>#</th>
<th> 课程 </th>
<th> 单价 </th>
<th> 数量 </th>
<th> 总价 </th>
</tr>
<tr v-for="(c,index) in cartList" :key="c.id">
<td>
<input type="checkbox" v-model="c.active">
</td>
<td>{{c.title}}</td>
<td>{{c.price}}</td>
<td>
<button @click="substract(index)">-</button>
{{c.count}}
<button @click="add(index)">+</button>
</td>
<td>¥{{c.price*c.count}}</td>
</tr>
<tr>
<td></td>
<td colspan="2">{{activeCount}}/{{count}}</td>
<td colspan="2">¥{{total}}</td>
</tr>
</table>
</div>
</template>
<script> export default {
name:"cart",
props:['title','cartList'],
methods: {remove(i) {if (window.confirm("确定是否要删除?")) {this.cartList.splice(i, 1);
}
},
substract(i) {let count = this.cartList[i].count;
count > 1 ? (this.cartList[i].count -= 1) : this.remove(i);
},
add(i) {this.cartList[i].count++;
}
},
computed:{count(){return this.cartList.length;},
activeCount(){return this.cartList.filter(v=>v.active).length;
},
total(){
let sum=0;
this.cartList.forEach(c=>{if(c.active){sum+=c.price*c.count;}
});
return sum;
}
}
}</script>
<style scoped>
</style>
Vuejs Ajax
Vuejs 并没有间接解决 ajax 的组件,但能够应用 axios 组件实现对异步申请的操作。
Axios 简介
# 如果应用 npm 则能够如下装置
npm install axios
axios 利用
办法阐明
axios 能够应用的办法有:
- axios(config)
config 申请配置
这些是创立申请时能够用的配置选项。只有 url
是必须的。如果没有指定 method
,申请将 默认应用 get 办法。
{
// `url` 是用于申请的服务器 URL
url: '/user',
// `method` 是创立申请时应用的办法
method: 'get', // 默认是 get
// `baseURL` 将主动加在 `url` 后面,除非 `url` 是一个相对 URL。// 它能够通过设置一个 `baseURL` 便于为 axios 实例的办法传递绝对 URL
baseURL: 'https://some-domain.com/api/',
// `params` 是行将与申请一起发送的 URL 参数
// 必须是一个无格局对象 (plain object) 或 URLSearchParams 对象
params: {ID: 12345},
// `data` 是作为申请主体被发送的数据
// 只实用于这些申请办法 'PUT', 'POST', 和 'PATCH'
// 在没有设置 `transformRequest` 时,必须是以下类型之一:// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - 浏览器专属:FormData, File, Blob
// - Node 专属:Stream
data: {firstName: 'Fred'},
// `timeout` 指定申请超时的毫秒数(0 示意无超时工夫)
// 如果申请话费了超过 `timeout` 的工夫,申请将被中断
timeout: 1000
}
响应构造
{
// `data` 由服务器提供的响应
data: {},
// `status` 来自服务器响应的 HTTP 状态码
status: 200,
// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: 'OK',
// `headers` 服务器响应的头
headers: {},
// `config` 是为申请提供的配置信息
config: {}}
axios 办法示例
能够通过向 axios
传递相干配置来创立申请
axios(config)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs 测试 </title>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="js/axios.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(user,index) in users" :key="index">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
</div>
<script type="text/javascript"> var app = new Vue({
el: "#app",
data: {users: []
},
created() {
// 初始化加载数据
axios({
method: "get",
url: "data.json"
}).then((res) => {console.log(res);
// 将获取数据设置到 users 属性
// 不能应用 this,在 axios 回调函数中示意窗口,不是 vue 实例
app.users = res.data;
}).catch(error => {alert(error);
})
}
});</script>
</body>
</html>
综合案例
购物车综合案例
第一步:实现图书的列表显示
<body>
<div id="myDiv">
<table border="1">
<tr>
<td> 图书编号 </td>
<td> 图书名称 </td>
<td> 出版日期 </td>
<td> 价格 </td>
<td> 购买数量 </td>
<td> 操作 </td>
</tr>
<tr v-for="book in books">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.pubDate}}</td>
<td>{{book.price}}</td>
<td>
<button>-</button>
{{book.number}}
<button>+</button>
</td>
<td>
<button> 删除 </button>
</td>
</tr>
</table>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript"> const app = new Vue({
el: "#myDiv",
data: {
books: [{id: 1, name: '天龙八部', pubDate:'1988-02' ,price: 80.00, number: 1},
{id: 2, name: '射雕英雄传', pubDate:'2000-09', price: 20.00, number: 1},
{id: 3, name: '倚天屠龙记', pubDate:'1986-12', price: 60.00, number: 1},
{id: 4, name: '鹿鼎记', pubDate:'2001-05', price: 70.00, number: 1}
]
}
}); </script>
</body>
第二步:价格小数问题解决
形式一:methods
<body>
<div id="myDiv">
<table border="1">
<tr>
<td> 图书编号 </td>
<td> 图书名称 </td>
<td> 出版日期 </td>
<td> 价格 </td>
<td> 购买数量 </td>
<td> 操作 </td>
</tr>
<tr v-for="book in books">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.pubDate}}</td>
<td>{{getPrice(book.price)}}</td>
<td>
<button>-</button>
{{book.number}}
<button>+</button>
</td>
<td>
<button> 删除 </button>
</td>
</tr>
</table>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript"> const app = new Vue({
el: "#myDiv",
data: {
books: [{id: 1, name: '天龙八部', pubDate:'1988-02' ,price: 80.01, number: 1},
{id: 2, name: '射雕英雄传', pubDate:'2000-09', price: 20.00, number: 1},
{id: 3, name: '倚天屠龙记', pubDate:'1986-12', price: 60.00, number: 1},
{id: 4, name: '鹿鼎记', pubDate:'2001-05', price: 70.00, number: 1}
]
},
methods: {getPrice(price){return '¥' + price.toFixed(2);
}
}
}); </script>
</body>
形式二:过滤器
== 能够利用到插值表达式或 v -bind 表达式中,能够做格式化。==
<body>
<div id="myDiv">
<table border="1">
<tr>
<td> 图书编号 </td>
<td> 图书名称 </td>
<td> 出版日期 </td>
<td> 价格 </td>
<td> 购买数量 </td>
<td> 操作 </td>
</tr>
<tr v-for="book in books">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.pubDate}}</td>
<td>{{book.price | getPrice}}</td>
<td>
<button>-</button>
{{book.number}}
<button>+</button>
</td>
<td>
<button> 删除 </button>
</td>
</tr>
</table>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript"> const app = new Vue({
el: "#myDiv",
data: {
books: [{id: 1, name: '天龙八部', pubDate:'1988-02' ,price: 80.01, number: 1},
{id: 2, name: '射雕英雄传', pubDate:'2000-09', price: 20.00, number: 1},
{id: 3, name: '倚天屠龙记', pubDate:'1986-12', price: 60.00, number: 1},
{id: 4, name: '鹿鼎记', pubDate:'2001-05', price: 70.00, number: 1}
]
},
filters: {getPrice(price){return '¥' + price.toFixed(2);
}
}
}); </script>
</body>
第三步:数量加减操作
<body>
<div id="myDiv">
<table border="1">
<tr>
<td> 图书编号 </td>
<td> 图书名称 </td>
<td> 出版日期 </td>
<td> 价格 </td>
<td> 购买数量 </td>
<td> 操作 </td>
</tr>
<tr v-for="book in books">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.pubDate}}</td>
<td>{{book.price}}</td>
<td>
<button @click="decrement(book)" v-bind:disabled="book.number < 2">
-
</button>
{{book.number}}
<button @click="increment(book)">+</button>
</td>
<td>
<button> 删除 </button>
</td>
</tr>
</table>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript"> const app = new Vue({
el: "#myDiv",
data: {
books: [{id: 1, name: '天龙八部', pubDate:'1988-02' ,price: 80.01, number: 1},
{id: 2, name: '射雕英雄传', pubDate:'2000-09', price: 20.00, number: 1},
{id: 3, name: '倚天屠龙记', pubDate:'1986-12', price: 60.00, number: 1},
{id: 4, name: '鹿鼎记', pubDate:'2001-05', price: 70.00, number: 1}
]
},
methods: {decrement(book){book.number--;},
increment(book){book.number++;}
}
}); </script>
</body>
第四步:移除按钮
<body>
<div id="myDiv">
<table border="1">
<tr>
<td> 图书编号 </td>
<td> 图书名称 </td>
<td> 出版日期 </td>
<td> 价格 </td>
<td> 购买数量 </td>
<td> 操作 </td>
</tr>
<tr v-for="(book,index) in books">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.pubDate}}</td>
<td>{{book.price}}</td>
<td>
<button @click="decrement(book)" v-bind:disabled="book.number < 2">-</button>
{{book.number}}
<button @click="increment(book)">+</button>
</td>
<td>
<button @click="deleteHandle(index)"> 删除 </button>
</td>
</tr>
</table>
<h2 v-if="books.length <= 0">
购物车空洞无物
</h2>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript"> const app = new Vue({
el: "#myDiv",
data: {
books: [{id: 1, name: '天龙八部', pubDate:'1988-02' ,price: 80.01, number: 1},
{id: 2, name: '射雕英雄传', pubDate:'2000-09', price: 20.00, number: 1},
{id: 3, name: '倚天屠龙记', pubDate:'1986-12', price: 60.00, number: 1},
{id: 4, name: '鹿鼎记', pubDate:'2001-05', price: 70.00, number: 1}
]
},
methods: {deleteHandle(index){this.books.splice(index,1);
}
}
}); </script>
</body>
第五步:计算最终价格
<body>
<div id="myDiv">
<table border="1">
<tr>
<td> 图书编号 </td>
<td> 图书名称 </td>
<td> 出版日期 </td>
<td> 价格 </td>
<td> 购买数量 </td>
<td> 操作 </td>
</tr>
<tr v-for="(book,index) in books">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.pubDate}}</td>
<td>{{book.price}}</td>
<td>
<button @click="decrement(book)" v-bind:disabled="book.number < 2">-</button>
{{book.number}}
<button @click="increment(book)">+</button>
</td>
<td>
<button @click="deleteHandle(index)"> 删除 </button>
</td>
</tr>
</table>
<h1> 总价:{{totalPrice | getPrice}}</h1>
<h2 v-if="books.length <= 0">
购物车空洞无物
</h2>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript"> const app = new Vue({
el: "#myDiv",
data: {
books: [{id: 1, name: '天龙八部', pubDate:'1988-02' ,price: 80.01, number: 1},
{id: 2, name: '射雕英雄传', pubDate:'2000-09', price: 20.00, number: 1},
{id: 3, name: '倚天屠龙记', pubDate:'1986-12', price: 60.00, number: 1},
{id: 4, name: '鹿鼎记', pubDate:'2001-05', price: 70.00, number: 1}
]
},
filters: {getPrice(price){return '¥' + price.toFixed(2);
}
},
computed: {totalPrice(){return this.books.reduce((sum,book)=>{return sum + book.price;},0)
}
}
}); </script>
</body>
图书治理综合案例
第一步:实现列表、新增和删除
<body>
<div id="myDiv">
id: <input type="text" v-model="id"/>
图书名称: <input type="text" v-model="name"/>
<button @click="add"> 增加 </button>
<table border="1">
<tr>
<td> 图书编号 </td>
<td> 图书名称 </td>
<td> 出版日期 </td>
<td> 操作 </td>
</tr>
<tr v-for="(book,index) in books">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.pubDate}}</td>
<td>
<a href=""@click.prevent="deleteHandle(index)"> 删除 </a> // 阻止事件默认行为
</td>
</tr>
</table>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript"> const app = new Vue({
el: "#myDiv",
data: {
id: '',
name: '',
books: [{id: 1, name: '天龙八部', pubDate: new Date()},
{id: 2, name: '射雕英雄传', pubDate: new Date()},
]
},
methods: {add(){let book = {id:this.id, name:this.name , pubDate:new Date()};
this.books.push(book);
},
deleteHandle(index){this.books.splice(index,1);
}
}
}); </script>
</body>
第二步:实现搜寻筛选
<body>
<div id="myDiv">
id: <input type="text" v-model="id"/>
图书名称: <input type="text" v-model="name"/>
<button @click="add"> 增加 </button>
依据图书名称搜寻:<input type="text" v-model="kw"/>
<table border="1">
<tr>
<td> 图书编号 </td>
<td> 图书名称 </td>
<td> 出版日期 </td>
<td> 操作 </td>
</tr>
<tr v-for="(book,index) in search(kw)">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.pubDate}}</td>
<td>
<a href=""@click.prevent="deleteHandle(index)"> 删除 </a>
</td>
</tr>
</table>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript"> const app = new Vue({
el: "#myDiv",
data: {
id: '',
name: '',
kw: '',
books: [{id: 1, name: '天龙八部', pubDate: new Date()},
{id: 2, name: '射雕英雄传', pubDate: new Date()},
]
},
methods: {add(){let book = {id:this.id, name:this.name , pubDate:new Date()};
this.books.push(book);
},
search(kw){let result = [];
this.books.forEach((item)=>{if (item.name.includes(kw)){result.push(item);
}
});
return result;
}
}
}); </script>
</body>
== 换种形式实现:==
search(kw){return this.books.filter((item)=>{return item.name.includes(kw);
})
}
第三步:日期格式化
<body>
<div id="myDiv">
id: <input type="text" v-model="id"/>
图书名称: <input type="text" v-model="name"/>
<button> 增加 </button>
依据图书名称搜寻:<input type="text" v-model="kw"/>
<table border="1">
<tr>
<td> 图书编号 </td>
<td> 图书名称 </td>
<td> 出版日期 </td>
<td> 操作 </td>
</tr>
<tr v-for="(book,index) in books">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.pubDate | dateFormat}}</td>
<td>
<a href=""> 删除 </a>
</td>
</tr>
</table>
</div>
<script src="../js/vue.js"></script>
<script src="../js/moment.js"></script>
<script type="text/javascript"> Vue.filter("dateFormat",(value)=>{return moment(value).format("YYYY-MM-DD");
});
const app = new Vue({
el: "#myDiv",
data: {
id: '',
name: '',
kw: '',
books: [{id: 1, name: '天龙八部', pubDate: new Date()},
{id: 2, name: '射雕英雄传', pubDate: new Date()},
]
}
}); </script>
</body>
第四步:优化增加性能
== 需要:下面的案例中,咱们须要点击增加按钮实现增加一本书,有时候是这样子的,咱们按下回车键也能够增加,上面就来做这个性能。==
按下 enter 键实现增加形式 1
图书名称: <input type="text" v-model="name" @keyup.enter="add"/> // 可行
按下 enter 键实现增加形式 2
图书名称: <input type="text" v-model="name" @keyup.13="add"/> // 键码可行
按下 F2 键实现增加形式 1
图书名称: <input type="text" v-model="name" @keyup.f2="add"/> // 可行,低版本不可行
按下 F2 键实现增加形式 2
图书名称: <input type="text" v-model="name" @keyup.113="add"/> // 可行,通过键码代表 F2 可行
按下 F2 键盘实现增加形式 3
== 通过键码代表 F2 可行,然而浏览性不好,能够自定义按键修饰符,次要是解决低版本 Vue 的问题。==
图书名称: <input type="text" v-model="name" @keyup.f2="add"/>
Vue.config.keyCodes.f2 = 113
第五步:页面关上的时候就搜寻框取得焦点
依据图书名称搜寻:<input type="text" v-model="kw" v-focus/>
Vue.directive("focus",{inserted: function(el){el.focus();
}
});
第五步:实现批改性能
<body>
<div id="myDiv">
id: <input type="text" v-model="id" :disabled="disable"/>
图书名称: <input type="text" v-model="name"/>
<button @click="handle"> 提交 </button>
依据图书名称搜寻:<input type="text" v-model="kw"/>
<table border="1">
<tr>
<td> 图书编号 </td>
<td> 图书名称 </td>
<td> 出版日期 </td>
<td> 操作 </td>
</tr>
<tr v-for="(book,index) in books">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.pubDate}}</td>
<td>
<a href=""@click.prevent="update(book.id)"> 批改 </a>
<a href=""> 删除 </a>
</td>
</tr>
</table>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript"> const app = new Vue({
el: "#myDiv",
data: {
id: '',
name: '',
kw: '',
disable: false,
books: [{id: 1, name: '天龙八部', pubDate: new Date()},
{id: 2, name: '射雕英雄传', pubDate: new Date()},
]
},
methods: {
// 增加和批改重用
handle(){if(this.disable){
// 为 true, 就示意批改
this.books.forEach((item)=>{if(item.id == this.id){
item.name = this.name;
return item;
}
});
// 批改结束之后还须要对 disable 设置为 true 示意容许增加
this.disable = false;
this.id = "";
this.name = "";
}else{
// 就示意增加
let book = {id:this.id, name:this.name , pubDate:new Date()};
this.books.push(book);
}
},
update(bookId){
// 0、禁止批改 id 文本框
this.disable = true;
// 1、依据 bookId 查找出要编辑的图书
let book = this.books.filter((item)=>{return item.id == bookId;});
// 2、把获取到的图书填充到表单中
this.id = book[0].id;
this.name = book[0].name;
}
}
}); </script>
</body>
第六步:应用计算属性统计图书品种
<h1> 总共有 {{totalCount}} 种不同品种的书 </h1>
computed: {totalCount(){return this.books.length;}
}
第七步:不能增加反复的图书【监听器】
<body>
<div id="myDiv">
id: <input type="text" v-model="id" :disabled="disable"/>
图书名称: <input type="text" v-model="name"/>
<button @click="handle" :disabled="flag"> 提交 </button>
依据图书名称搜寻:<input type="text" v-model="kw"/>
<table border="1">
<tr>
<td> 图书编号 </td>
<td> 图书名称 </td>
<td> 出版日期 </td>
<td> 操作 </td>
</tr>
<tr v-for="(book,index) in books">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.pubDate}}</td>
<td>
<a href=""@click.prevent="update(book.id)"> 批改 </a>
<a href=""> 删除 </a>
</td>
</tr>
</table>
<h1> 总共有 {{totalCount}} 种不同品种的书 </h1>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript"> const app = new Vue({
el: "#myDiv",
data: {
id: '',
name: '',
kw: '',
disable: false,
flag: false,
books: [{id: 1, name: '天龙八部', pubDate: new Date()},
{id: 2, name: '射雕英雄传', pubDate: new Date()},
]
},
computed: {totalCount(){return this.books.length;}
},
methods: {
// 增加和批改重用
handle(){if(this.disable){
// 为 true, 就示意批改
this.books.forEach((item)=>{if(item.id == this.id){
item.name = this.name;
return item;
}
});
// 批改结束之后还须要对 disable 设置为 true 示意容许增加
this.disable = false;
this.id = "";
this.name = "";
}else{
// 就示意增加
let book = {id:this.id, name:this.name , pubDate:new Date()};
this.books.push(book);
}
},
update(bookId){
// 0、禁止批改 id 文本框
this.disable = true;
// 1、依据 bookId 查找出要编辑的图书
let book = this.books.filter((item)=>{return item.id == bookId;});
// 2、把获取到的图书填充到表单中
this.id = book[0].id;
this.name = book[0].name;
}
},
watch:{name(value){
let result = false;
this.books.forEach((item)=>{if (item.name == value){
result = true;
return;
}
})
if (result){console.log("11");
this.flag = true;
}else{this.flag = false;}
}
}
}); </script>
</body>
第八步:图书数据的初始化
mounted(){
// 模仿 ajax 申请获取数据
let result = [{id: 1, name: '天龙八部', pubDate: new Date()},
{id: 2, name: '射雕英雄传', pubDate: new Date()}
];
this.books = result;
},
❤️ 帅气的你又来看了我
如果你感觉这篇内容对你挺有有帮忙的话:
- 点赞反对下吧,让更多的人也能看到这篇内容(珍藏不点赞,都是耍流氓 -_-)
- 欢送在留言区与我分享你的想法,也欢送你在留言区记录你的思考过程。
- 感觉不错的话,也能够关注 编程鹿 的集体公众号看更多文章和解说视频(感激大家的激励与反对????????????)