Vue.js---相关语法介绍第一部分

Posted IT特工

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.js---相关语法介绍第一部分相关的知识,希望对你有一定的参考价值。

  1. 差值表达式

    数据绑定最常见的形式就是使用“Mustache”语法(双大括号)的文本差值,Mustache标签将会被代替为对应数据对象属性上的值。无论何时,绑定的数据对象上属性发生了改变,差值处的内容都会更新。

    vue.js提供了完全的javascript表达式支持

    注意:差值表达式不支持变量的申明、if循环等

  2. v-on系统指令

    可以使用v-on指令监听DOM事件,并在触发时运行一些javaScript代码,以绑定点击事件为例

    • click鼠标点击时间

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>v-on:click</title>
    <script type="text/javascript" src="js/Vue.js"></script>
    </head>
    <body>
    <div id="app">
    {{message}}
    <button v-on:click="fun1(‘123‘)">vue的OnClick</button>
    </div>
    </body>
    <script>
    new Vue({
    el:‘#app‘,
    data:{
    message:‘hello vue‘
    },
    methods:{
    fun1:function(msg){
    alert("hello");
    this.message=msg;
    }
    }
    })
    </script>
    </html>
    ?
    • keydown 键盘按下事件

      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>键盘按下</title>
      <script type="text/javascript" src="js/Vue.js"></script>
      </head>
      <body>
      <div id="app">
      传统js:<input type="text" onkeydown="showKeyCode()" /><hr />
      VUE: <input type="text" v-on:keydown="fun1($event)" />

      </div>
      </body>
      <script>
      //传统js的键盘按下事件
      function showKeyCode(){
      //event和document和window对象是一样的,可以不用定义直接使用
      var keyCode=event.keyCode;
      if(keyCode<48 || keyCode>57){
      event.preventDefault();
      }
      }
      new Vue({
      el:‘#app‘,
      methods:{
      //$event是VUE中的事件对象和传统的event对象是一样的
      fun1:function(event){
      var keyCode=event.keyCode;
      if(keyCode<48 || keyCode>57){
      event.preventDefault();
      }
      }
      }
      });
      </script>

      </html>
      ?
    • 鼠标移动事件和阻止事件传播

      注意:停止传播的方法是event.stopPropagation();

      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>鼠标移动事件和阻止事件传播</title>
      <script type="text/javascript" src="js/Vue.js"></script>
      <style>
      #div{
      background-color: red;
      width: 300px;
      height: 300px;
      }
      </style>
      </head>
      <body>
      <div id="app">
      <div id="div" @mouseover="fun1">
      <textarea @mouseover="fun2($event)">这会一个文件域</textarea>
      </div>
      <!-- <div id="div" onmouseover="divmouseover()">
      <textarea onmouseover="textareamouseover()">这会一个文件域</textarea>
      </div> -->
      </div>
      </body>
      <script>
      //Vue
      //@事件名称------>v-on:事件名称的简写方式
      new Vue({
      el:‘#app‘,
      methods:{
      fun1:function(){
      alert("鼠标移动到div上了");
      },
      fun2:function(event){
      alert("鼠标移动到textarea上了");
      event.stopPropagation();
      }
      }
      });
      //传统的js方式
      /* function divmouseover(){
      alert("鼠标移动到div上了");
      }
      function textareamouseover(){
      alert("鼠标移动到textarea上了");
      event.stopPropagation();
      } */
      </script>
      </html>
    • 事件修饰符(通过.stop和.prevent实现事件的传播)

      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>v-on:事件修饰符</title>
      <script type="text/javascript" src="js/Vue.js"></script>
      <style>
      #div{
      background-color: red;
      width: 300px;
      height: 300px;
      }
      </style>
      </head>
      <body>
      <div id="app">
      <form  @submit.prevent action="https://www.baidu.com/more/index.html" method="post">
      <input type="submit" value="提交" />
      </form>
      <!-- <form action="https://www.baidu.com/more/index.html" method="post" onsubmit=" return checkForm()" >
      <input type="submit" value="提交" />
      </form> -->
      <hr />
      <div id="div" @mouseover="fun1">
      <textarea @mouseover.stop="fun2($event)">这会一个文件域</textarea>
      </div>
      </div>
      </body>
      <script>
      //vue
      new Vue({
      el:‘#app‘,
      methods:{
      fun1:function(){
      alert("鼠标移动到div上了");
      },
      fun2:function(event){
      alert("鼠标移动到textarea上了");

      }
      }
      });
      //传统js方式
      /* function checkForm(){
      //不想进行表单验证该怎么办?就需要表单必须有明确的boolean类型的返回值
      //在应用验证方法时必须加上return 方法名称
      return fasle;
      } */
      </script>
      </html>
      ?

       


      ?

以上四种只是简单应用,详细了解请参考w3cschool教程。

以上是关于Vue.js---相关语法介绍第一部分的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js 源码目录设计

Vue.js 中的片段

使用带有渲染功能的 Vue.js 3 片段

Vue 基础语法入门(转载)

vue介绍——模板语法

vue源码分析之目录架构