给昨天的图书案例添加5个特性：
1.过滤器使用（用此特性添加了对日期数据的格式化）
2.自定义指令（用此特性添加了让输入域自动获取焦点的自定义指令）
3.计算属性（用此特性添加了图书数量的计算）
4.侦听器（同此特性添加了对 检验新加图书是否存在 的一个功能）
5生命周期（钩子函数 其实使用场景很多，常见mounted钩子触发时代表模板已经可以使用，然后可以在此钩子里去获取后台数据然后填充模板）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图书管理案例</title> <style> .grid { margin: auto; width: 500px; text-align: center; } .grid table { width: 100%; border-color: collapse; } .grid th, td { padding: 10; border: 1px dashed orange; height: 35px; line-height: 35px; } .grid th { background-color: orange; } .grid .book { padding-bottom: 10px; padding-top: 5px; background-color: #F3DCAB; } </style> </head> <body> <div id="app"> <div class="grid"> <div> <h1>图书管理</h1> <div class="book"> <div> <label for="id"> 编号: </label> <input type="text" id="id" v-model="id" :disabled="flag" v-focus> <label for="name"> 名称: </label> <input type="text" id="name" v-model="name"> <button @click="handle" :disabled="checkNameFlag">提交</button> </div> </div> </div> <div class="total"> <span>图书总数：</span> <span>{{total}}</span> </div> <table> <thead> <tr> <th>编号</th> <th>名称</th> <th>时间</th> <th>操作</th> </tr> </thead> <tbody> <tr :key="item.id" v-for="item,index in books"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.date}}</td> <td> <a href="" @click.prevent @click="change(index)">修改</a> <span>|</span> <a href="" @click.prevent @click="del(index)">删除</a> </td> </tr> </tbody> </table> </div> </div> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var vm = new Vue({ el: "#app", data: { id: "", name: "", flag: false, change_index: 0, checkNameFlag:false, // 检验新添加书名是否已在的标志 books: [ { id: 1, name: "三国演义", date: "" }, { id: 2, name: "水浒传", date: "" }, { id: 3, name: "红楼梦", date: "" }, { id: 4, name: "西游记", date: "" } ] }, methods: { handle: function () { if (this.flag) { // 修改数据 // Vue.set(this.books[this.change_index],this.id,this.name) this.books[this.change_index].name = this.name // 放开标志 this.flag = false } else { // 添加数据 this.books.push( { id: this.id, name: this.name, date: "" } ) } this.id = ""; this.name = ""; }, change: function (index) { // 点击修改按钮 需要做的事情 this.change_index = index this.id = this.books[index].id this.name = this.books[index].name // 禁止修改id this.flag = true }, del: function (index) { this.books.splice(index, 1) // this.books.splice(index) } }, directives: { focus: { // 自定义指令的定义 inserted: function (el) { el.focus() } } }, computed: { // 计算属性 统计图书总数 total: function () { return this.books.length; } }, filter: { handleDate: function (date) { // 过滤器的使用,格式化日期数据 具体代码就不写了 } }, watch: { name: function (val) { // 侦听器的使用,用来检验新添加图书是否为已存在 // name为监听的属性:function为监听方法 // val为新添加图书名 // some是es6里的方法 可以用来检验数组里是否有相同数据 this.checkNameFlag = this.books.some(function (item) { return item.name == val; }) } }, mounted:function(){ // 当mounted钩子函数触发的时候代表模板已经可以使用 // 通常这里可以去获取后台数据,然后填充到模板 } }) // var oop = [{ // id: 4, // name: "西游记", // date: "" // }] // es6里的数组的index及value遍历 // for ([k, v] of oop.entries()) { // console.log(k, v) // } // es6里的方法 判断数组里是否有此数据 // console.log(oop.includes("西游记")) </script> </body> </html>
组件化开发
组件的注册
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <button-count></button-count> <button-counter></button-counter> </div> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> // 全局注册组件 // 组件命名方式可以是x-x也可以是驼峰命命方式 // data和template为固定关键字 data里为函数 定义的数据需要return,也可以定义methods等方法 // template为模板 需要有一个确切的根元素,可以是模板字符串,需要浏览器提供支持(es6语法) // 组件的使用需要在挂载到vue实例下的div下使用 // 组件可以重用 因为data里面是函数 所以重复使用的时候data里面的数据是独立的 Vue.component("button-count", { data: function () { return { count: 0 } }, template: "<button @click='count++'>全局注册点击增加{{count}}</button>" }) // 局部注册组件的方式 // 局部注册的组件只能在注册它的父组件中使用 var button_conunter = { data: function () { return { count: 0 } }, template: "<button @click='count++'>局部注册点击增加{{count}}</button>" } var vm = new Vue({ el: "#app", components: { "button-counter": button_conunter, } }) </script> </body> </html>
Vue的调试工具安装
直接谷歌商店搜索vue找到devtools安装即可。