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

Posted 2020-12-17 IT特工

tags:

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

差值表达式

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

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

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

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源码分析之目录架构