zoukankan      html  css  js  c++  java
  • (4)打鸡儿教你Vue.js

    模板语法:

    <div id="app">
     <p>{{ message }}</p>
    </div>
    

    html
    使用 v-html 指令用于输出 html 代码

    v-html
    <div id="app">
     <div v-html="message"></div>
    </div>
    
    <script>
    new Vue({
     el: '#app',
     data: {
      message: '<h1>dashu</h1>'
     }
    </script>
    
    <div id="app">
      <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
      <br><br>
      <div v-bind:class="{'class1': use}">
        v-bind:class 指令
      </div>
    </div>
        
    <script>
    new Vue({
        el: '#app',
      data:{
          use: false
      }
    });
    </script>
    
    {{ message.split('').reverse().join('') }}
    
    <div id="app">
     <pre><a v-bind:href="url"></a></pre>
    </div>
    
    <script>
    new Vue({
     el: '#app',
     data: {
      url: ''
     }
    })
    </script>
    

    v-on 指令,它用于监听 DOM 事件:

    <a v-on:click="doSomething">
    

    .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():

    <form v-on:submit.prevent="onSubmit"></form>
    

    实现双向数据绑定:

    <div id="app">
        <p>{{ message }}</p>
        <input v-model="message">
    </div>
        
    <script>
    new Vue({
      el: '#app',
      data: {
        message: 'dashu!'
      }
    })
    </script>
    

    v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定

    v-on 监听事件

    <div id="app">
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">反转字符串</button>
    </div>
        
    <script>
    new Vue({
      el: '#app',
      data: {
        message: 'dashu'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
    })
    </script>
    

    过滤器:

    字符串第一个字母转为大写:
    <div id="app">
      {{ message | capitalize }}
    </div>
        
    <script>
    new Vue({
      el: '#app',
      data: {
        message: 'dashu'
      },
      filters: {
        capitalize: function (value) {
          if (!value) return ''
          value = value.toString()
          return value.charAt(0).toUpperCase() + value.slice(1)
        }
      }
    })
    </script>
    
    <!-- 完整语法 -->
    <a v-bind:href="url"></a>
    <!-- 缩写 -->
    <a :href="url"></a>
    
    <!-- 完整语法 -->
    <a v-on:click="doSomething"></a>
    <!-- 缩写 -->
    <a @click="doSomething"></a>
    

    请点赞!因为你的鼓励是我写作的最大动力!

    官方微信公众号

    吹逼交流群:711613774

    吹逼交流群

  • 相关阅读:
    SpringBoot接口文件findBy方法写错导致抛出IllegalArgumentException
    用tomcat启动spring-boot
    Idea使用tool window中的persistence功能一键生成数据库实体
    Idea 启动 tomcat 报错
    详细梳理ajax跨域4种解决方案
    他们权利意识强,但是也会为生活牺牲很多
    每月碎碎念 | 2019.09
    说好不哭 我不会走
    css实现内容不相同的左右两个div等高
    简单了解css3轮廓outline
  • 原文地址:https://www.cnblogs.com/dashucoding/p/11140200.html
Copyright © 2011-2022 走看看