Vue指令，生命周期，resource

最新推荐文章于 2023-12-22 21:43:05 发布
duanyuehuan
最新推荐文章于 2023-12-22 21:43:05 发布
阅读量400
点赞数
本文链接：https://blog.csdn.net/weixin_44380707/article/details/91391121
版权
        一 Vu
    
        e指令
             1.Vue 是一套构建用户界面的框架，只关注视图层，容易上手，还便于与第三方库或既有项目整合（Vue有配套的第三方类库，可以整合起来做大型项目的开发）
            Why
             - 提高开发效率的发展历程：原生JS ->Jquery 之类的类库->前端模板引擎->angular.js/vue.js 
             - 在Vue中，一个核心的概念让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑
             2.框架和库的区别
             框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新结构整个项目
             node中的express
             库；提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求
             **Vue基本代码和MVVM之间的对应**
             **V-cloak v-text v-html v-bind v-on**
             **事件修饰符**
             .stop    阻止冒泡
             .prevent   阻止默认事件
             .capture 添加事件侦听时使用事件捕获模式
             .self 只当事件在该本身（比如不是子元素）触发时触发回调
             .once 事件只触发一次
             V-model 表单数据的双向绑定
             **样式*
             直接传递数据
            <h1 :class=['red','thid'] > </h1>
            三元表达式
            <h1 :class=['red','thid'，flag?'active':' '] > </h1>
            对象
            <h1 :class=['red','thid'，{'active':flag}] > </h1>
            直接使用对象
            <h1 :class="{red :ture,thin:true }"> </h1>
             内联
             ：style="{color:'red'}"
             : style="h1styleobj1"
             :style="[h1styleobj1,h1styleobj2]"
             data:{
             h1styleobj1:{},
             h1styleobj2:{}
             }
          
         品牌列表
          
        
              <!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="./lib/vue-2.4.0.js"></script>
              <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
              <!-- 需要用到Jquery吗？？？ -->
            </head>
            
            <body>
              <div id="app">
                <!-- {{1+1}} -->
            
            
                <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.f2="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" id="search" v-focus v-color="'green'">
                    </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)">删除</a>
                      </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 (dateStr, pattern = "") {
                  // 根据给定的时间字符串，得到特定的时间
                  var dt = new Date(dateStr)
            
                  //   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() 定义全局的指令  v-focus
                // 其中：参数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 函数【触发1次】
                    el.focus()
                    // 和JS行为有关的操作，最好在 inserted 中去执行，放置 JS行为不生效
                  },
                  updated: function (el) {  // 当VNode更新的时候，会执行 updated， 可能会触发多次
            
                  }
                })
            
                // 自定义一个 设置字体颜色的 指令
                Vue.directive('color', {
                  // 样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
                  // 将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
                  bind: function (el, binding) {
                    // el.style.color = 'red'
                    // console.log(binding.name)
                    // 和样式相关的操作，一般都可以在 bind 执行
            
                    // console.log(binding.value)
                    // console.log(binding.expression)
            
                    el.style.color = binding.value
                  }
                })
            
            
                // 创建 Vue 实例，得到 ViewModel
                var vm = new Vue({
                  el: '#app',
                  data: {
                    id: '',
                    name: '',
                    keywords: '', // 搜索的关键字
                    list: [
                      { id: 1, name: '奔驰', ctime: new Date() },
                      { id: 2, name: '宝马', ctime: new Date() }
                    ]
                  },
                  methods: {
                    add() { // 添加的方法
                      // console.log('ok')
                      // 分析：
                      // 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 方法
            
                      /* this.list.some((item, i) => {
                        if (item.id == id) {
                          this.list.splice(i, 1)
                          // 在 数组的 some 方法中，如果 return true，就会立即终止这个数组的后续循环
                          return true;
                        }
                      }) */
            
            
                      var index = this.list.findIndex(item => {
                        if (item.id == id) {
                          return true;
                        }
                      })
            
                      // console.log(index)
                      this.list.splice(index, 1)
                    },
                    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 => {
                        // if(item.name.indexOf(keywords) != -1)
            
                        // 注意 ： ES6中，为字符串提供了一个新方法，叫做  String.prototype.includes('要包含的字符串')
                        //  如果包含，则返回 true ，否则返回 false
                        //  contain
                        if (item.name.includes(keywords)) {
                          return item
                        }
                      })
            
                      // return newList
                    }
                  }
                });
            
            
                // 如何自定义一个私有的过滤器（局部）
                var vm2 = new Vue({
                  el: '#app2',
                  data: {
                    dt: new Date()
                  },
                  methods: {},
                  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')
            
                      if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                        return `${y}-${m}-${d}`
                      } else {
                        var hh = dt.getHours().toString().padStart(2, '0')
                        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'
                    }
                  }
                })
            
            
                // 过滤器的定义语法
                // Vue.filter('过滤器的名称', function(){})
            
                // 过滤器中的 function ，第一个参数，已经被规定死了，永远都是 过滤器 管道符前面 传递过来的数据
                /* Vue.filter('过滤器的名称', function (data) {
                  return data + '123'
                }) */
            
            
            
                // document.getElementById('search').focus()
            
              </script>
            </body>
            
            </html>
         
        
        生命周期
        <!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="./lib/vue-2.4.0.js"></script>
        </head>
        
        <body>
          <div id="app">
            <input type="button" value="修改msg" @click="msg='No'">
            <h3 id="h3">{{ msg }}</h3>
          </div>
        
          <script>
            // 创建 Vue 实例，得到 ViewModel
            var vm = new Vue({
              el: '#app',
              data: {
                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() { // 这是遇到的第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中
                // console.log(document.getElementById('h3').innerText)
                // 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
              },
              mounted() { // 这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
                // 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-resouce
        <!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="./lib/vue-2.4.0.js"></script>
      <!-- 注意：vue-resource 依赖于 Vue，所以先后顺序要注意  -->
      <!-- this.$http.jsonp -->
      <script src="./lib/vue-resource-1.3.4.js"></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>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {},
          methods: {
            getInfo() { // 发起get请求
              //  当发起get请求之后， 通过 .then 来设置成功的回调函数
              this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
                // 通过 result.body 拿到服务器返回的成功的数据
                // console.log(result.body)
              })
            },
            postInfo() { // 发起 post 请求   application/x-wwww-form-urlencoded
              //  手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了
              //  通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
              this.$http.post('http://vue.studyit.io/api/post', {}, { 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>

vue -resouce 改造品牌列表案例

 <!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="./lib/vue-2.4.0.js"></script>
  <script src="./lib/vue-resource-1.3.4.js"></script>
  <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</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>
          Name:
          <input type="text" v-model="name" class="form-control">
        </label>

        <input type="button" value="添加" @click="add" class="btn btn-primary">
      </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>
        <tr v-for="item in list" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.ctime}}</td>
          <td>
            <a href="" @click.prevent="del(item.id)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>


  </div>

  <script>
    // 如果我们通过全局配置了，请求的数据接口 根域名，则 ，在每次单独发起 http 请求的时候，请求的 url 路径，应该以相对路径开头，前面不能带 /  ，否则 不会启用根路径做拼接；
    Vue.http.options.root = 'http://vue.studyit.io/';
    // 全局启用 emulateJSON 选项
    Vue.http.options.emulateJSON = true;

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        name: '',
        list: [ // 存放所有品牌列表的数组
        ]
      },
      created() { // 当 vm 实例 的 data 和 methods 初始化完毕后，vm实例会自动执行created 这个生命周期函数
        this.getAllList()
      },
      methods: {
        getAllList() { // 获取所有的品牌列表 
          // 分析：
          // 1. 由于已经导入了 Vue-resource这个包，所以 ，可以直接通过  this.$http 来发起数据请求
          // 2. 根据接口API文档，知道，获取列表的时候，应该发起一个 get 请求
          // 3. this.$http.get('url').then(function(result){})
          // 4. 当通过 then 指定回调函数之后，在回调函数中，可以拿到数据服务器返回的 result
          // 5. 先判断 result.status 是否等于0，如果等于0，就成功了，可以 把 result.message 赋值给 this.list ; 如果不等于0，可以弹框提醒，获取数据失败！

          this.$http.get('api/getprodlist').then(result => {
            // 注意： 通过 $http 获取到的数据，都在 result.body 中放着
            var result = result.body
            if (result.status === 0) {
              // 成功了
              this.list = result.message
            } else {
              // 失败了
              alert('获取数据失败！')
            }
          })
        },
        add() {  // 添加品牌列表到后台服务器
          // 分析：
          // 1. 听过查看 数据API接口，发现，要发送一个 Post 请求，  this.$http.post
          // 2. this.$http.post() 中接收三个参数：
          //   2.1 第一个参数： 要请求的URL地址
          //   2.2 第二个参数： 要提交给服务器的数据 ，要以对象形式提交给服务器 { name: this.name }
          //   3.3 第三个参数： 是一个配置对象，要以哪种表单数据类型提交过去， { emulateJSON: true }, 以普通表单格式，将数据提交给服务器 application/x-www-form-urlencoded
          // 3. 在 post 方法中，使用 .then 来设置成功的回调函数，如果想要拿到成功的结果，需要 result.body

          /* this.$http.post('api/addproduct', { name: this.name }, { emulateJSON: true }).then(result => {
            if (result.body.status === 0) {
              // 成功了！
              // 添加完成后，只需要手动，再调用一下 getAllList 就能刷新品牌列表了
              this.getAllList()
              // 清空 name 
              this.name = ''
            } else {
              // 失败了
              alert('添加失败！')
            }
          }) */

          this.$http.post('api/addproduct', { name: this.name }).then(result => {
            if (result.body.status === 0) {
              // 成功了！
              // 添加完成后，只需要手动，再调用一下 getAllList 就能刷新品牌列表了
              this.getAllList()
              // 清空 name 
              this.name = ''
            } else {
              // 失败了
              alert('添加失败！')
            }
          })
        },
        del(id) { // 删除品牌
          this.$http.get('api/delproduct/' + id).then(result => {
            if (result.body.status === 0) {
              // 删除成功
              this.getAllList()
            } else {
              alert('删除失败！')
            }
          })
        }
      }
    });
  </script>
</body>

</html>