vue 的基本语法

Posted 2020-09-27 User猿

tags:

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

作为国内目前最火的框架，功能强大，语法简单，基于Angular 基础上，比angular 更轻量，更适配于移动端

先引入vue文件。。

<script src="js/Vue.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
            window.onload=function(){
                new Vue({       
                    el:".oDiv",      //el  是固定的语法 必须这么写
                    data:{　　　　　　//data 也是固定的语法 
                        a:"welcome to vue" 
                    }
                })
            };
        </script>

和angular 一样绑定数据到元素

<div class="div">
     <p>{{a}}</p>
</div>

是不是很简单。

new Vue 里面可以随便写 array、json 、string 都可以

循环遍历和angular 一样但是不再是 ng-repeat 而是 v-for="item in arr"

还有好多angular 的指令和vue的差不多

比如：v-model

　　 v-if

　　　v-else

　　　v-show

　　　v-bind等等

vue 的事件比angular 也简单很多比如 ng-click="get()"

在 vue 里是 v-click="get()" 可以简写为 @click="get()"

这些事件的方法写在实例化vue对象里面

<script type="text/javascript">
            window.onload=function(){
                new Vue({       
                    el:".oDiv",      //el  是固定的语法 必须这么写
                    data:{　　　　　　//data 也是固定的语法 
                        a:"welcome to vue" 
                    },
                    methods:{　　　　// methods  也是固定的语法
                         get:function(){
                               alert(‘welcome to vue‘)
                         }
                    }
                })
            };
</script>

<input type="button" value="按钮" @click="get()" />

如果不需要传参后面的括号也不用写。但是为了写法规范带上比较好。

附上小的练习留言板

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/Vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            window.onload=function(){
                new Vue({
                    el:".div",
                    data:{
                        a:"",
                        arr:[]
                    },
                    methods:{
                     // 这里的this 指的是 vue 对象
                        add:function(){
                            if(this.a!=""){
                                this.arr.unshift(this.a);
                                this.a="";
                            }
                        },
                        remove:function(index){
                            this.arr.splice(index,1);
                        }
                    }
                })
            };
        </script>
    </head>
    <body>
        <div class="div">
            <input type="text" v-model="a" @keyup.13="add()" />
            <input type="button" value="按钮" @click="add()" />
            <p v-if="this.arr.length==0">暂无留言</p>
            <ul>
                <li v-for="item in arr">{{item}}
                    <a href="javascript:;" @click="remove($index)">删除</a>
                </li>
            </ul>
        </div>
    </body>
</html>

vue 其实和面向对象的构造函数差不多

@keyup.13="add()" keyup是键盘事件 13是回车的键位码

@keyup.enter 也可以写成英文的方便记忆

类推下去还有很多比如

　　.up .down .left .right 键盘上的上下左右键

下次会分享一些vue 其他的比如过滤器指令路由等等

谢谢~~

以上是关于vue 的基本语法的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段1——vue主模板

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段2——.vue文件的模板

VSCode自定义代码片段(vue主模板)