vue基本使用-js教程-PHP中文网

vue基本使用

巴扎黑

发布： 2017-06-26 11:52:13

原创

1128人浏览过

现在vue非常火爆所以今天来小小介绍一下

vue到底是什么呢？

它是以mvvm的框架和angular类似，比较小巧容易上手。

vue官网：

vue手册网址：

如果你会angular那就很好学习vue了。因为说了他们基本类似

立即学习“前端免费学习笔记（深入）”；

vue指令以 v-xxx vue由一片html代码配合上json，new出来一个vue实例 vue是个人开发由个人来维护

　　　vue由于小巧所以他比较适用于移动端，同样他和angular一样不兼容IE低版本

　　　使用的话一样你得先去vue官网下载他的库文件。

vue基本用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="box"> //上面说了我们需要一片html代码来展示数据

　　　　{{msg}} //这样我们就完成了一条数据的基本展示
　　</div> 
　　　

　　<script src="vue.js?1.1.11"></script>
　　<script>
　　　　new Vue({   //new 一个实例来展示一条基本数据
　　　　　　el:"#box", //el意思是element这个是固定的后边的是页面中你要展示数据到那个元素，就类似于anguar的控制器。 只是angular是写在html
　　　　　　　　　　　　　　页面中这个是获取到了元素然后再展示。它里面是选择器class id 标签名都是可以的。
　　　　　　data:{     //data也是定死的
　　　　　　　　msg:"这是一条数据"    //这其中就是数据当然他是个对象你可以写多条数据,还有这里面只可以放数据不可以是函数
　　　　　　}
　　　　})
　　</script>
</body>
</html>

登录后复制

常用指令：

　　 angular有 ng-model 获取表单元素数据 vue获取表单元素数据为 v-model 和angular他也是可以进行双向数据绑定的。

　　 angular中有 ng-repeat 来循环数组json对象 vue就不太一样了它是通过 v-for=' val in arr' 当然只是换了个名称用法还是相同的。

　　vue 循环同样自带{{$index}}每个的下标他还带了一个{{$key}} 它可以显示 json的key名

vue事件：

　　angular拥有事件当然vue也有的这里就有区别了 angular 是 ng-click vue是v-on:click=" fn()"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="box"> //上面说了我们需要一片html代码来展示数据
　　　　　<button v-on:click="fn()"></button>  //v-on:    后面可以跟你任何想跟的事件。
　　　　{{msg}} //这样我们就完成了一条数据的基本展示
　　</div> 
　　　

　　<script src="vue.js?1.1.11"></script>
　　<script>
　　　　new Vue({   
　　　　　　el:"#box",
　　　　　　data:{    
　　　　　　　　msg:"这是一条数据"    //这里只可以是数据
　　　　　　}，
　　　　　　methods:{    //这里写方法
　　　　　　　　fn:function(){ //如果你要使用上边的数据也不太一样angular是 $scope.a
　　　　　　　　　　alert(1);
　　　　　　　　　　alert(this.msg);   //这个this代表new的实例对象所以 this.msg 就调用到上边的数据了
　　　　　　　　}
　　　　　　}
　　　　})
　　</script>

</body>
</html>

登录后复制

v-show：

　　angular 中有ng-show="true/false" vue 相同 v-show=“true/false” 同样true显示 false隐藏

//前边说了需要一片html代码来实现这就是我们那一片代码

登录后复制

以上就是vue基本使用的详细内容，更多请关注php中文网其它相关文章！