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 axiosaxios利用
办法阐明
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;},❤️ 帅气的你又来看了我
如果你感觉这篇内容对你挺有有帮忙的话：
- 点赞反对下吧，让更多的人也能看到这篇内容（珍藏不点赞，都是耍流氓 -_-）
- 欢送在留言区与我分享你的想法，也欢送你在留言区记录你的思考过程。
- 感觉不错的话，也能够关注 编程鹿 的集体公众号看更多文章和解说视频（感激大家的激励与反对????????????）