zoukankan      html  css  js  c++  java
  • 02.vue-charp-02 数据绑定

    安装vue

    cnpm install vue
    

    数据绑定

    代码清单:charp-02/2.html

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>Vue 示例</title>
    </head>
    
    <body>
        <div id="app">
            <input type="text" v-model="name" placeholder="你的名字"/>
            <h1>你好,{{name}}</h1>
        </div>
        <script src="../node_modules/_vue@2.6.11@vue/dist/vue.min.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    name:''
                }
            })
        </script>
    </body>
    
    </html>
    

    Vue实例和数据

    变量app就代表了这个Vue实例。事实上,几乎所有的代码都是一个对象,写入Vue实例的选项内的。

    首先,必不可少的一个选项就是el。el用于指定一个页面中已存在的DOM元素来挂载Vue实例,它可以是HTMLElement ,也可以是CSS选择器,比如:

    <div id="app"></div>
    
    var app = new Vue({
        el: document.getElementById('app')  //或者是'#app'
    })
    

    挂载成功后,我们可以通过app.$el来访问该元素。

    生命周期

    Vue的生命周期钩子与之类似,比较常用的有:

    • created 实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载,$el还不可用。需要初始化处理一些数据时会比较有用,后面章节将有介绍。

    • mounted el挂载到实例上后调用,一般我们的第一个业务逻辑会在这里开始。-

    • beforeDestroy 实例销毁之前调用。主要解绑一些使用addEventListener监听的事件等。

      这些钩子与el和data类似,也是作为选项写入Vue实例内,并且钩子的this指向的是调用它的Vue实例:

      代码清单:charp-02/2.1.2.html

      <!DOCTYPE html>
      <html>
      
      <head>
          <meta charset="utf-8">
          <title>Vue 示例</title>
      </head>
      
      <body>
          <div id="app">
          </div>
          <script src="../node_modules/_vue@2.6.11@vue/dist/vue.min.js"></script>
          <script>
              new Vue({
                  el: '#app',
                  data: {
                      a: 2
                  },
                  created() {
                      console.log(this.a); //2
                  },
                  mounted() {
                      console.log(this.$el); // <div id="app"></div>
                  }
              })
          </script>
      </body>
      
      </html>
      

      插值表达式 {{}}

    {{}}中可以做简单的计算

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>Vue 插值表达式</title>
    </head>
    
    <body>
      <div id="app">
          <p>
              book: {{book}}
          </p>
          <p>
              date: {{date}}
          </p>
          <p>
              number: {{number/2}}
          </p>
          <p v-html="link"></p>
      </div>
      <script src="../node_modules/_vue@2.6.11@vue/dist/vue.min.js"></script>
      <script>
          new Vue({
              el: '#app',
              data: {
                  book: '《Vue.js》',
                  date: new Date(),
                  number: 1000,
                  link: '<a href="#">v-html输出为html</a>'
                  
              },
              mounted() {
                  let _this = this;
                  this.timer = setInterval(() => {
                      _this.date = new Date();
                  }, 1000);
              }, destroyed() {
                  if (this.timer) {
                      clearInterval(timer);
                  }
              },
          })
      </script>
    </body>
    
    </html>
    

    过滤器

    持在{{ }}插值的尾部添加一个管道符“(|)”对数据进行过滤,经常用于格式化文本,比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的,通过给Vue实例添加选项filters来设置,例如在上一节中实时显示当前时间的示例,可以对时间进行格式化处理:

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>Vue 插值表达式 - 过滤器</title>
    </head>
    
    <body>
        <div id="app">
            <p>
                {{ date|formatDate }}
            </p>
        </div>
        <script src="../node_modules/_vue@2.6.11@vue/dist/vue.min.js"></script>
        <script>
    
            //在月份、日期、小时等小于10时前面补
            var padDate = function (value) {
                return value < 10 ? '0' + value : value;
            };
    
            var app = new Vue({
                el: '#app',
                data: {
                    date: new Date()
                },
                filters: {
                    formatDate: function (value) {
                        debugger
                        var date = new Date(value);
                        var year = date.getFullYear();
                        var month = padDate(date.getMonth() + 1);
                        var day = padDate(date.getDate());
                        var hours = padDate(date.getHours());
                        var minutes = padDate(date.getMinutes());
                        var seconds = padDate(date.getSeconds());
                        //将整理好的数据返回出去
                        return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
                    }
                },
                mounted() {
                    let _this = this;
                    this.timer = setInterval(() => {
                        _this.date = new Date();
                    }, 1000);
                }, destroyed() {
                    if (this.timer) {
                        clearInterval(timer);
                    }
                }
    
            })
        </script>
    </body>
    
    </html>
    

    指令与事件

    指令(Directives)是Vue.js模板中最常用的一项功能,它带有前缀v-,在前文我们已经使用过不少指令了,比如v-if、v-html、v-pre等。

    指令的主要职责就是当其表达式的值改变时,相应地将某些行为应用到DOM上,

    • v-if 是否显示元素
    • v-bind的基本用途是动态更新HTML元素上的属性,语法糖::
    • v-on,它用来绑定事件监听器,语法糖:@
      使用v-on:click给该元素绑定了一个点击事件,在普通元素上,v-on可以监听原生的DOM事件,除了click外,还有dblclick、keyup、mousemove等。表达式可以是一个方法名,这些方法都写在Vue实例的methods属性内,

    this

    函数内的this指向的是当前Vue实例本身,因此可以直接使用this.xxx的形式来访问或修改数据

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>Vue 指令与事件</title>
    </head>
    
    <body>
        <div id="app">
            <a target="_blank" v-bind:href="url">百度一下</a>
            <a target="_blank" :href="url">百度一下(语法糖)</a>
            <h1 v-if="show">你好</h1>
            <button v-on:click="showOrHideClick">{{showText}}</button>
            <button @click="showOrHideClick">{{showText}}((语法糖))</button>
        </div>
        <script src="../node_modules/_vue@2.6.11@vue/dist/vue.min.js"></script>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    show: true,
                    url: 'http://www.baidu.com'
                },
                methods: {
                    showOrHideClick: function () {
                        this.show = !this.show;
                    }
                },
                computed: { //计算属性(有缓存的功能)
                    showText: function () {
                        return this.show ? "隐藏" : "显示";
                    }
                },
            })
        </script>
    </body>
    
    </html>
    
  • 相关阅读:
    494. Target Sum 添加标点符号求和
    636. Exclusive Time of Functions 进程的执行时间
    714. Best Time to Buy and Sell Stock with Transaction Fee有交易费的买卖股票
    377. Combination Sum IV 返回符合目标和的组数
    325. Maximum Size Subarray Sum Equals k 和等于k的最长子数组
    275. H-Index II 递增排序后的论文引用量
    274. H-Index论文引用量
    RabbitMQ学习之HelloWorld(1)
    java之struts2的数据处理
    java之struts2的action的创建方式
  • 原文地址:https://www.cnblogs.com/easy5weikai/p/13191633.html
Copyright © 2011-2022 走看看