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

時間 2019-11-10

標籤 web 前端 vue.js vue 必備框架欄目 HTML 简体版

原文原文鏈接

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

vue調式工具vue-devtoolshtml

過濾器：vue.js容許你自定義過濾器，可被用做一些常見的文本格式化。前端

mustache插值和v-bind表達式。
vue生命週期，從建立，運行，到銷燬，稱爲生命週期。vue

new Vue() : var vm = new Vue({}) 開始建立一個Vue實例對象

init 表示初始化一個Vue空的實例對象，這時候，這個對象上有一些生命週期和默認時間

ajax, vue-resource實現get,post,jsonpajax

<!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">
        </label>

        <input type="button" value="添加" class="btn btn-primary" @click="add()">

        <label>
          搜索關鍵字：
          <input type="text" class="form-control" v-model="keywords">
        </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 }}</td>
          <td>
            <a href="" @click.prevent="del(item.id)">刪除</a>
          </td>
        </tr>
      </tbody>
    </table>



  </div>

  <script>
    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 c = { id: this.id, name: this.name, ctime: new Date() }
          this.list.push(c)
          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
            }
          })
        }
      }
    });
  </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>
  <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>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <p>{{ msg | msgFormat('a+1', 'abc') | test }}</p>
  </div>

  <script>
    Vue.filter('msgFormat', function (msg, arg, arg2) {
      return msg.replace(/單純/g, arg + arg2)
    })

    Vue.filter('test', function (msg) {
      return msg + 'vvvvvv'
    })

    var vm = new Vue({
      el: '#app',
      data: {
        msg: '我是一個單純的少年'
      },
      methods: {}
    });
  </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>
  <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>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'ok'
      },
      methods: {
        show() {

        }
      },
      beforeCreate() { 
        // data 和 methods 中的 數據尚未初始化
      },
      created() { 
        //  data 和 methods 都已經初始化好了
      },
      beforeMount() { // 模板已經在內存中編輯完成了，但未把 模板渲染到 頁面中
      },
      mounted() { // 內存中的模板已經掛載到了頁面中，用戶能夠看到渲染好的頁面了
      },

      beforeUpdate() { // 表示界面尚未被更新
      },
      updated() {
        // 頁面和 data 數據已經同步了
      }
    });
  </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>
  <script src="./lib/vue-2.4.0.js"></script>
  <!-- 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>
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getInfo() { 
          this.$http.get('http://vue').then(function (result) {
          })
        },
        postInfo() { // application/x-wwww-form-urlencoded
          this.$http.post('http://vue', {}, { emulateJSON: true }).then(result => {
          })
        },
        jsonpInfo() { 
          this.$http.jsonp('http://vue').then(result => {

          })
        }
      }
    });
  </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>