Vue.js学习笔记二

无敌幸运星
259 阅读11分钟

品牌管理案例

添加新品牌

代码实例

add () {
                    //分析：
                    //1. 获取 id 和 name ,直接从data上获取
                    //2. 组织出一个对象
                    //3. 把这个对象，调用数组的相关方法，添加到当前的data上的list中去
                    //4. 注意：在Vue中，已经实现了数据的双休绑定，每当我们修改了data中的数据，
                    //   Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上
                    //5. 当我们意识到上面的第四步的时候，就证明大家已经入门Vue了，我们更多的是在进行VM中的Model数据的操作，
                    //   同时，在操作Model数据的时候，指定的业务逻辑操作
                    var car = {id:this.id, name:this.name, ctime:new Date()}
                    this.list.push(car)
                    this.id = this.name = ''
                }

删除品牌

代码实例

del (id) {//根据id删除数据
                    //分析：
                    //1. 如何根据id找到要删除对象的索引
                    //2. 如果找到了索引，直接调用数组的splice方法

                    //方法1
                    // this.list.some((item, i)=>{
                    //     if(item.id == id){
                    //         this.list.splice(i, 1)
                    //         //在数组的some方法中，如果return true，就会立即终止这个数组的后续循环
                    //         return true;
                    //     }
                    // })

                    //方法2
                    var index = this.list.findIndex(item => {
                        if(item.id == id){
                            this.list.splice(index, 1)
                            return true
                        }
                    })
                }

根据条件筛选品牌

1. 1.x版本中的[fiterBy指令](https://cn.vuejs.org/api/#fiterBy)，在2.x中已经被废除
2. 在2.x版本中[手动实现筛选的方式](https://cn.vuejs.org/v2/guide/list.html#显示过滤-排序结果)

过滤器

概念：Vue.js允许你自定义过滤器，可被用做一些常见的文本格式化。过滤器可以用在两个地方：mustache插值器和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由"管道"符知识；

私有过滤器

  1. HTML元素
<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
  1. 私有filters定义方式

代码实例

//自定义一个私有的过滤器
        var vm2 = new Vue({
            el: '#app2',
            data () {
                return {
                    dt: new Date()
                }
            },
            filters:{//定义私有过滤器   过滤器有两个条件 【过滤器名称和处理函数】
            //过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候，优先调用私有过滤器
                dateFormat:function(dateStr, pattern = ""){
                    //根据给定的时间字符串，得到特定的时间
                    var dt = new Date(dateStr)

                    // yyyy-mm-dd
                    var y = dt.getFullYear()
                    var m = (dt.getMonth() + 1).toString().padStart(2, '0')
                    var d = (dt.getDate()).toString().padStart(2, '0')
                    // return y + '-' + m + '-' + d

                    if(pattern.toLowerCase() == 'yyyy-mm-dd'){
                        return `${y}-${m}-${d}`
                    }else{
                        var hh = dt.getHours()
                        var mm = (dt.getMinutes()).toString().padStart(2, '0')
                        var ss = (dt.getSeconds()).toString().padStart(2, '0')


                        return `${y}-${m}-${d} ${hh}:${mm}:${ss}~~~~`
                    }
                }
            }
        })

使用ES6中的字符串新方法String.prototype.padStart(maxLength, fillString = ' ')或String.prototype.padEnd(maxLength, fillString = ' ')来填充字符串；

全局过滤器(代码实例)

//全局的过滤器，进行时间的格式化
        //所谓的全局过滤器，就是所有的VM实例都共享
        Vue.filter('dateFormat', function(dataStr, pattern = ""){
            //根据给定的时间字符串，得到特定的时间
            var dt = new Date(dataStr)

            // yyyy-mm-dd
            var y = dt.getFullYear()
            var m = dt.getMonth() + 1
            var d = dt.getDate()
            // return y + '-' + m + '-' + d
            

            if(pattern.toLowerCase() == 'yyyy-mm-dd'){
                return `${y}-${m}-${d}`
            }else{
                var hh = dt.getHours()
                var mm = dt.getMinutes()
                var ss = dt.getSeconds()


                return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
            }
        })

注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则来进行调用，即：局部过滤器优先于全局过滤器被调用

按键修饰符以及自定义键盘修饰符

  1. x中自定义键盘修饰符【了解即可】
Vue.directive('on').keyCode.f2 = 113;
  1. x中自定义键盘修饰符
  • 通过Vue.config.keyCodes.名称 = 按键值来自定义按键修饰符的别名：
       Vue.config.keyCodes.f2 = 113;
  • 使用自定义的按键修饰符:
       <input type = "text" v-model = "name" @keyup.f2 = "add">

自定义指令

全局自定义指令

  • 使用 Vue.directive() 定义全局的指令
  • 参数1: 指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v- 前缀但是，在调用的时候必须在指令名称前加上 v- 前缀
  • 参数2：是一个对象，这个对象身上，有一些自定相关的函数，这些函数可以在特定的阶段，执行相关的操作

代码实例

<input type="text" class="form-control" v-model="keywords" v-focus v-color="'blue'">

        Vue.directive('focus', {
            bind: function (el) {//每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
                //注意：在每个函数中,第一个参数，永远是el， 表示被绑定了指令的那个元素，这个el参数，是原生的JS对象
                //在元素刚绑定了指令的时候，还没有插入到DOM中去，这时候，调用focus方法没有作用
                //因为，一个元素，只有插入了DOM之后，才能获取焦点
                // el.focus()
            },
            inserted: function (el) {//inserted表示元素 插入到DOM中的时候，会执行inserted 函数，只执行一次
                el.focus()
                //和JS行为有关的操作，最好在 inserted 中去执行，防止 JS行为不生效 
            },
            updated: function (el) { //当Vnode更新的时候，会执行 updated ，可能会触发多次
            
            }
        })

自定义私有指令

语法结构和自定义私有过滤器类似

directives:{//自定义私有指令
               'fontweight':{//设置字体粗细的
                   bind: function(el, binding){
                       el.style.fontWeight = binding.value
                   }
               },
               //下面这个是简写
               'fontsize': function(el, binding){//注意：这个function等同于把代码写到了bind和update中去
                   el.style.fontSize = parseInt(binding.value) + 'px'
               }
           }

品牌管理案例全部代码实例

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
   <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>
   <div id="app">


       <div class="panel panel-primary">
           <div class="panel-heading">
               <h3 class="panel-title">添加品牌</h3>
           </div>
           <div class="panel-body form-inline">
               <label>
                   Id:
                   <input type="text" class="form-control" v-model="id">
               </label>

               <label>
                   Name:
                   <input type="text" class="form-control" v-model="name" @keyup.enter="add">
               </label>

               <!-- 在Vue中，使用事件绑定机制， 为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了-->
               <input type="button" value="添加" class="btn btn-primary" @click="add()">

               <label>
                   搜索名称关键字:
                   <!-- 注意：Vue中所有的指令，再调用的时候，都以 v- 开头 -->
                   <input type="text" class="form-control" v-model="keywords" v-focus v-color="'blue'">
               </label>
           </div>
       </div>


       <table class="table table-bordered table-hover table-striped">
           <thead>
               <tr>
                   <th>Id</th>
                   <th>Name</th>
                   <th>Ctime</th>
                   <th>Operation</th>
               </tr>
           </thead>
           <tbody>
               <!-- 之前， v-for中的数据，都是直接从data上的list中直接渲染过来的 -->
               <!-- 现在，我们自定义了一个search方法，同时，把所有的关键字，通过传参的形式，传递给了search方法 -->
               <!-- 在search方法内部，通过执行for循环，把所有符合搜索关键字的数据，保存到一个新数组中，返回 -->
               <tr v-for="item in search(keywords)" :key="item.id">
                   <td>{{item.id}}</td>
                   <td v-text="item.name"></td>
                   <td>{{item.ctime | dateFormat()}}</td>
                   <td><a href="" @click.prevent="del(item.id)">删除</td>
               </tr>
           </tbody>
       </table>
   </div>

   <div id="app2">
       <h3 v-color = "'pink'" v-fontweight = "900" v-fontsize = "50">{{dt | dateFormat}}</h3>
   </div>
   <script>
       //全局的过滤器，进行时间的格式化
       //所谓的全局过滤器，就是所有的VM实例都共享
       Vue.filter('dateFormat', function (dataStr, pattern = "") {
           //根据给定的时间字符串，得到特定的时间
           var dt = new Date(dataStr)

           // yyyy-mm-dd
           var y = dt.getFullYear()
           var m = dt.getMonth() + 1
           var d = dt.getDate()
           // return y + '-' + m + '-' + d


           if (pattern.toLowerCase() == 'yyyy-mm-dd') {
               return `${y}-${m}-${d}`
           } else {
               var hh = dt.getHours()
               var mm = dt.getMinutes()
               var ss = dt.getSeconds()


               return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
           }
       })

       //自定义全局按键修饰符
       Vue.config.keyCodes.f2 = 113

       //使用 Vue.directive() 定义全局的指令
       //其中：参数1 ： 指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v- 前缀
       //但是，在调用的时候必须在指令名称前加上 v- 前缀
       //参数2：是一个对象，这个对象身上，有一些自定相关的函数，这些函数可以在特定的阶段，执行相关的操作
       Vue.directive('focus', {
           bind: function (el) {//每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
               //注意：在每个函数中,第一个参数，永远是el， 表示被绑定了指令的那个元素，这个el参数，是原生的JS对象
               //在元素刚绑定了指令的时候，还没有插入到DOM中去，这时候，调用focus方法没有作用
               //因为，一个元素，只有插入了DOM之后，才能获取焦点
               // el.focus()
           },
           inserted: function (el) {//inserted表示元素 插入到DOM中的时候，会执行inserted 函数，只执行一次
               el.focus()
               //和JS行为有关的操作，最好在 inserted 中去执行，防止 JS行为不生效 
           },
           updated: function (el) { //当Vnode更新的时候，会执行 updated ，可能会触发多次

           }
       })


       //自定义一个设置字体颜色的指令
       Vue.directive('color', {
           //样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
           //将来元素肯定会显示到页面中去，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
           bind: function(el, binding){
               el.style.color = binding.value
               //和样式相关的操作，一般都可以在bind执行
           }
       })

       var vm = new Vue({
           el: '#app',
           data() {
               return {
                   list: [
                       { id: 1, name: '奔驰', ctime: new Date() },
                       { id: 2, name: '宝马', ctime: new Date() },
                   ],
                   id: '',
                   name: '',
                   keywords: ''
               }
           },
           methods: {
               add() {
                   //分析：
                   //1. 获取 id 和 name ,直接从data上获取
                   //2. 组织出一个对象
                   //3. 把这个对象，调用数组的相关方法，添加到当前的data上的list中去
                   //4. 注意：在Vue中，已经实现了数据的双休绑定，每当我们修改了data中的数据，
                   //   Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上
                   //5. 当我们意识到上面的第四步的时候，就证明大家已经入门Vue了，我们更多的是在进行VM中的Model数据的操作，
                   //   同时，在操作Model数据的时候，指定的业务逻辑操作
                   var car = { id: this.id, name: this.name, ctime: new Date() }
                   this.list.push(car)
                   this.id = this.name = ''
               },
               del(id) {//根据id删除数据
                   //分析：
                   //1. 如何根据id找到要删除对象的索引
                   //2. 如果找到了索引，直接调用数组的splice方法

                   //方法1
                   // this.list.some((item, i)=>{
                   //     if(item.id == id){
                   //         this.list.splice(i, 1)
                   //         //在数组的some方法中，如果return true，就会立即终止这个数组的后续循环
                   //         return true;
                   //     }
                   // })

                   //方法2
                   var index = this.list.findIndex(item => {
                       if (item.id == id) {
                           this.list.splice(index, 1)
                           return true
                       }
                   })
               },
               search(keywords) {//根据关键字进行数据的搜索
                   // var newList = []
                   // this.list.forEach(item => {
                   //     if(item.name.indexOf(keywords) != -1){
                   //         newList.push(item)
                   //     }
                   // });
                   // return newList

                   //注意：forEach some filter findIndex   这些都属于数组的新方法
                   //都会对数组中的每一项进行遍历，执行相关操作
                   return this.list.filter(item => {
                       //注意： ES6中，为字符串提供了一个新方法，叫做String.prototype.includes('要包含的字符串')
                       //如果包含，则返回true， 否则返回false
                       if (item.name.includes(keywords)) {
                           return item
                       }
                   })
                   // return newList
               }
           }
       });

       //如何自定义一个私有的过滤器()
       var vm2 = new Vue({
           el: '#app2',
           data() {
               return {
                   dt: new Date()
               }
           },
           filters: {//定义私有过滤器   过滤器有两个条件 【过滤器名称和处理函数】
               //过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候，优先调用私有过滤器
               dateFormat: function (dateStr, pattern = "") {
                   //根据给定的时间字符串，得到特定的时间
                   var dt = new Date(dateStr)

                   // yyyy-mm-dd
                   var y = dt.getFullYear()
                   var m = (dt.getMonth() + 1).toString().padStart(2, '0')
                   var d = (dt.getDate()).toString().padStart(2, '0')
                   // return y + '-' + m + '-' + d

                   if (pattern.toLowerCase() == 'yyyy-mm-dd') {
                       return `${y}-${m}-${d}`
                   } else {
                       var hh = dt.getHours()
                       var mm = (dt.getMinutes()).toString().padStart(2, '0')
                       var ss = (dt.getSeconds()).toString().padStart(2, '0')


                       return `${y}-${m}-${d} ${hh}:${mm}:${ss}~~~~`
                   }
               }
           },
           directives:{//自定义私有指令
               'fontweight':{//设置字体粗细的
                   bind: function(el, binding){
                       el.style.fontWeight = binding.value
                   }
               },
               'fontsize': function(el, binding){//注意：这个function等同于把代码写到了bind和update中去
                   el.style.fontSize = parseInt(binding.value) + 'px'
               }
           }
       })
   </script>
</body>

</html>

Vue实例的生命周期

  • 什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
  • 生命周期钩子：就是生命周期事件的别名而已；
  • 生命周期钩子 = 生命周期函数 = 生命周期事件
  • 主要的生命周期函数分类：
    • 创建期间的生命周期函数：
      • beforeCreate：实例刚在内存中创建出来，此时，还没有初始化好data和methods属性
      • created：实例已经在内存中创建好，此时data和methods已经创建好，此时还没有开始编译模板
      • beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
      • mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
    • 运行期间的生命周期函数：
      • beforeUpdate：状态更新之前执行此函数，此时data中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
      • updated：实例更新完毕之后调用此函数，此时data中的状态值和界面上显示的数据都已经完成了更新，界面已经被重新渲染好了
    • 销毁期间的生命周期函数
      • beforeDestroy：实例销毁之前调用，在这一步，实例仍然完全可用
      • destoryed：Vue实例销毁后调用，调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例 也会被销毁。

实例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
</head>

<body>
    <div id="app">
        <input type="button" value="修改msg" @click="msg = 'No'">
        <h3 id = "h3">{{msg}}</h3>
    </div>

    <script>
        var vm=new Vue({
            el:'#app',
            data () {
                return{
                    msg: 'ok'
                }
            },
            methods:{
                show () {
                    console.log('执行了show方法')
                }
            },
            beforeCreate() {//这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
                // console.log(this.msg)
                // this.show()
                //注意：在beforeCreate 生命周期函数执行的时候，data和methods中的数据都还没有被初始化
            },
            created() {//这是遇到的第二个生命周期函数
                // console.log(this.msg)
                // this.show()
                //在created中，data和methods都已经被初始化好了
                //如果要调用methods中的方法，或者操作data中的数据，最早只能在created中操作
            },
            beforeMount() {//这是遇到的第三个生命周期函数，表示模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中
                // console.log(document.getElementById('h3').innerText)
                //在beforeMount执行的时候，页面中的元素还没有被真正替换过来，只是之前写的一些模板字符串
            },
            mounted() {//这是遇到的第四个生命周期函数，表示内存中的模板已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
                // console.log(document.getElementById('h3').innerText)
                //注意：mounted是实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例已经被完成创建好了，
                //此时，如果没有其他操作的话，这个实例就静静的躺在我们内存中，一动不动
            },

            //接下来是运行中的两个事件
            beforeUpdate() {//这时候，表示我们的界面还没有被更新【数据被更新了吗？ 数据肯定被更新了】
                // console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
                // console.log('data 中的msg数据是：' + this.msg)
                //得出结论：当执行beforeUpdate的时候，页面中显示的数据，还是旧的，此时data数据是最新的，页面和最新的数据还未保持同步
            },
            updated() {
                console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
                console.log('data 中的msg数据是：' + this.msg)
                //updated事件执行的时候，页面和data数据已经保持同步了，都是最新的
            },
        });
    </script>
</body>

</html>

Vue-resource实现get,post,jsonp请求

除了Vue-resource之外，还可以使用axios的第三方包实现数据的请求

  1. 之前的学习中，如何发情数据请求？
  2. 常见的数据请求类型？get post jsonp
  3. 测试的URL请求资源地址：
  4. JSONP的实现原理
    • 由于浏览器的安全性限制，不允许AJAX访问协议不同、域名不同、端口号不同的数据接口，浏览器认为这种访问不安全；
    • 可以通过动态创建script标签的形式，把script标签的属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP(注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求)
    • 具体实现过程：
      • 现在客户端定义一个回调方法，预定义对数据的操作；
      • 再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口
      • 服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接处一个调用这个方法的字符串，发送给客户端去解析执行；
      • 客户端拿到服务器返回的字符串之后，当做script脚本去解析执行，这样就能够拿到JSONP的数据了

代码实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
    <!-- 注意：vue-resource依赖于 Vue ，所以先后顺序要注意 -->
    <!-- this.$http -->
    <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script> -->
</head>

<body>
    <div id="app">
        <input type="button" value="get请求" @click="getInfo">
        <input type="button" value="post请求" @click="postInfo">
        <input type="button" value="jsonp请求" @click="jsonpInfo">
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data() {
                return {

                }
            },
            methods: {
                getInfo() {//发请get请求
                    //当发起get请求之后，通过.then来设置成功的回调函数
                    this.$http.get('http://www.liulongbin.top:3005/api/getprodlist').then(response => {
                        console.log(response)
                        //通过result.body拿到服务器返回的请求数据
                    })
                },
                postInfo() {//发起post请求 application/x-wwww-form-urlencoded
                    //手动发起的post请求默认没有表单格式，所以，有的服务器处理不了
                    //通过post方法的第三个参数，{emulateJSON ： true}设置提交的内容类型为普通表单数据格式 
                    this.$http.post('http://www.liulongbin.top:3005/api/addproduct', {}, { emulateJSON: true }).then(result => {
                        console.log(result.body)
                    })
                },
                jsonpInfo(){//发起jsonp请求
                    this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
                        console.log(result.body)
                    })
                }
            }
        });
    </script>
</body>

</html>
avatar
文章
阅读
粉丝