Home > Article > Web Front-end > Basic use of vue

Basic use of vue

巴扎黑Original: 2017-06-26 11:52:131018browse

Vue is very popular now, so today I will give you a brief introduction

What is vue?

It is based on the mvvm framework and is similar to angular. It is relatively small and easy to use.

vue official website:

vue manual website:

If you can angular, it’s great It’s easy to learn vue. Because they are basically similar

The vue command is v-xxx. Vue is composed of a piece of html code combined with json, and a new vue instance is created. Vue is developed by individuals and maintained by individuals.

vue Because of its small size, it is more suitable for mobile terminals. It is also not compatible with lower versions of IE like angular

. To use it, you must first go to the vue official website to download its library file.

Basic usage of 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>

Common instructions:

Angular has ng-model to get form element data vue gets form element data as v-model It can also perform two-way data binding with Angular.

There is ng-repeat in angular to loop the array json object. Vue is different. It uses v-for=' val in arr'. Of course, the usage is still the same just by changing the name.

The vue loop also comes with each subscript of {{$index}}. It also brings a {{$key}} which can display the key name of json

vue event:

Angular has events, of course Vue also has them. There is a difference here. Angular is ng-click. Vue is 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:

There is ng-show="true/false" in angular vue is the same as v-show="true/false" Same true shows false hide

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

The above is the detailed content of Basic use of vue. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：An easy introduction to object-oriented JavaScriptNext article：An easy introduction to object-oriented JavaScript

See more

Basic use of vue

Vue is very popular now, so today I will give you a brief introduction

Related articles