关于前端:编程鹿学Vuejs这一篇就够了万字学会通俗易懂下篇

8次阅读

共计 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> 
    用 &ensp; 户 &ensp; 名：<input type="text"><br/>
    密 &emsp;&emsp; 码：<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;
},

❤️ 帅气的你又来看了我

如果你感觉这篇内容对你挺有有帮忙的话：

  1. 点赞反对下吧，让更多的人也能看到这篇内容（珍藏不点赞，都是耍流氓 -_-）
  2. 欢送在留言区与我分享你的想法，也欢送你在留言区记录你的思考过程。
  3. 感觉不错的话，也能够关注 编程鹿 的集体公众号看更多文章和解说视频（感激大家的激励与反对????????????）

正文完
前端
发表至： 前端
2020-11-20
 0
关于前端:vue-修饰符sync深入解析
关于前端:uniapp01
关于前端:Vue-文本框含有多个换行的文本去重
关于前端:HTTP-协议

站内搜索

-「」