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

2022-09-19 08:22:10

差值表达式

数据绑定最常见的形式就是使用“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>

码农公寓

相关文章