Web前端-Vue.js必备框架（二）

妖狐艹你老母 2022-01-20 11:09 253阅读 0赞

> Web前端-Vue.js必备框架（二）

`vue`调式工具`vue-devtools`

过滤器：`vue.js`允许你自定义过滤器，可被用作一些常见的文本格式化。

`mustache`插值和`v-bind`表达式。 vue生命周期，从创建，运行，到销毁，称为生命周期。

new Vue() : var vm = new Vue({}) 开始创建一个Vue实例对象
    复制代码

init 表示初始化一个Vue空的实例对象，这时候，这个对象上有一些生命周期和默认时间
    复制代码

`ajax`, `vue-resource`实现`get,post,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>dashu</title>
      <script src="./lib/vue-2.4.0.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>
              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>
    
            <input type="button" value="添加" class="btn btn-primary" @click="add()">
    
            <label>
    
              <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>
     
            <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>
    
        Vue.filter('dateFormat', function (dateStr, pattern = "") {
    
          var dt = new Date(dateStr)
          var y = dt.getFullYear()
          var m = dt.getMonth() + 1
          var d = dt.getDate()
    
          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('focus', {
          bind: function (el) { 
          },
          inserted: function (el) {  
            el.focus()
    
          },
          updated: function (el) {  
    
          }
        })
    
        Vue.directive('color', {
    
          bind: function (el, binding) {
    
            el.style.color = binding.value
          }
        })
    
        var vm = new Vue({
          el: '#app',
          data: {
            id: '',
            name: '',
            keywords: '', 
            list: [
              { id: 1, name: 'a', ctime: new Date() },
              { id: 2, name: 'b', ctime: new Date() }
            ]
          },
          methods: {
            add() { 
    
              var car = { id: this.id, name: this.name, ctime: new Date() }
              this.list.push(car)
              this.id = this.name = ''
            },
            del(id) { 
    
              var index = this.list.findIndex(item => {
                if (item.id == id) {
                  return true;
                }
              })
    
              this.list.splice(index, 1)
            },
            search(keywords) { 
              return this.list.filter(item => {
     
                if (item.name.includes(keywords)) {
                  return item
                }
              })
    
            }
          }
        });
    
        var vm2 = new Vue({
          el: '#app2',
          data: {
            dt: new Date()
          },
          methods: {},
          filters: { 
            dateFormat: function (dateStr, pattern = '') {
              var dt = new Date(dateStr)
    
              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) { 
              el.style.fontSize = parseInt(binding.value) + 'px'
            }
          }
        })
    
    
      </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>dashu</title>
    </head>
    
    <body>
      <script>
        function showInfo123(data) {
          console.log(data)
        }
      </script>
    
    
    <script src="http://##?callback=showInfo123"></script>
    
    </body>
    
    </html>
    复制代码

## 结言 ##

好了，欢迎在留言区留言，与大家分享你的经验和心得。

感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

**作者简介**

**达叔**，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。