ホームページ > 記事 > ウェブフロントエンド > vueの基本的な使い方
vueの基本的な使い方
- 巴扎黑オリジナル
- 2017-06-26 11:52:13955ブラウズ
今Vueがとても人気なので、今日は簡単に紹介します
vueとは一体何ですか？
mvvm フレームワークに基づいており、angular に似ており、比較的小さくて使いやすいです。
vue 公式 Web サイト:
vue マニュアル Web サイト:
Angular を知っていれば、vue を学ぶのは簡単です。基本的に似ているからです
vueコマンドはv-xxxを使用します Vueはjsonと結合したhtmlコードで構成され、新しいvueインスタンスが作成されます Vueは個人によって開発され、個人によって維持されます
Vueの方が適しています同様に、angular と同様に、IE の以前のバージョンとは互換性がありません
これを使用するには、まず vue 公式 Web サイトにアクセスしてライブラリ ファイルをダウンロードする必要があります。
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には配列jsonオブジェクトをループするng-repeatがあり、v-for=' val in arr'を使用します。もちろん、名前を変更するだけで使い方は変わりません。
vue ループには、{{$index}} の各添え字も付属しています。
vue イベントのキー名を表示できる {{$key}} も付属しています。
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：
には ng-show="true/false" があります。 angular vue は v- show="true/false" と同じです true、show false、hide
//前边说了需要一片html代码来实现这就是我们那一片代码と同じです
以上がvueの基本的な使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。