vue 的基本语法

Posted 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自定义代码片段11——vue路由的配置

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

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

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