ホームページ >ウェブフロントエンド >jsチュートリアル >Vue.jsのダウンロード方法を利用したケースを詳しく解説
Vue.jsのダウンロード方法を利用したケースを詳しく解説
- php中世界最好的语言オリジナル
- 2018-05-30 11:42:191640ブラウズ
今回は、Vue.js のダウンロード方法を使用する場合の詳細な説明をお届けします。Vue.js のダウンロード方法を使用する場合の注意事項については、次のとおりです。
vue.jsとは何ですか?
Vue (/vjuː/ と発音、ビューに似ています) は、ユーザー インターフェイスを構築するための進歩的なフレームワークです。手順とダウンロード
Vue.js の使用ドキュメントは非常に完全かつ詳細に書かれており、次のアドレスで参照できます:https://cn.vuejs.org/v2/guide/
vue .js をライブラリとして使用する場合は、次のアドレスからダウンロードできます: https://cn.vuejs.org/v2/guide/installation.html vue.js をダウンロードした後、ページ上の script タグを通じて vue.js を導入する必要があります。開発中は開発版 vue.js を使用し、製品がオンラインになったら vue.min.js に変更することができます。 。script type="text/javascript" src="js/vue.min.js"></script>
Vue コード インスタンス (作成)
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="app">{{ message }}</p>
</body>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
var vm=new Vue({
//el属性对应一个标签 当el对象创建后，这个标签内的区域就被Vue对象接管，
//接下来就可用Vue来做一些为所欲为的事情啦
el:'#app',
data : {message:'好湿呀'}
});
</script>
データとメソッド
Vue インスタンスが作成されると、データ オブジェクトの All プロパティにあるデータが Vue のリアクティブ システムに追加されます。これらのプロパティの値が変更されると、ビューは新しい値を照合することで「応答」します。 Vue インスタンスでメソッドを定義し、そのメソッドを使用してインスタンスのデータ オブジェクトのデータを変更することもできます。データが変更されると、ビュー内のデータも変更されます。 bueインスタンスコード（メソッド）window.onload = function(){
var vm = new Vue({
el:'#app',
data:{message:'hello world!'},
methods:{
fnChangeMsg:function(){
this.message = 'hello Vue.js!';
}
}
});
}
<p id="app">
<p>{{ message }}</p>
<button @click="fnChangeMsg">改变数据和视图</button>
</p>
vus.jsテンプレートsyntaxtemplate構文は、htmldataバインディングにデータを配置する方法を指します
「Mustache」構文 (二重中括弧) 例:{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<a v-bind:href="url" rel="external nofollow" >链接文字
{{ msg }}
ディレクティブには、接頭辞「v -」が付く特別なプロパティが付いています。ディレクティブ属性の値は単一の JavaScript 式であることが想定されており、ディレクティブの役割は、式の値が変更されたときに、それに関連付けられた効果を DOM にリアクティブに適用することです。一般的な命令には、v-bind、v-if、および v-on が含まれます。 <-- 根据ok的布尔值来插入/移除 p元素 -->
<p v-if="ok">是否显示这一段
<-- 监听按钮的click事件来执行fnChangeMsg方法 -->
<button v-on:click="fnChangeMsg">按钮
シンプル: HTML テンプレート + JSON データを使用して、Vue インスタンスを作成するだけです。とても簡単です。
- データ駆動型: 依存するテンプレート式と計算されたプロパティを自動的に追跡します。
- コンポーネント化: 分離された再利用可能なコンポーネントを使用してインターフェースを構築します。
- 軽量: ~24kb min+gzip、依存関係なし。
- 高速: 正確かつ効率的な非同期バッチ DOM 更新。
- モジュールフレンドリー: NPM または Bower 経由でインストールし、ワークフローにシームレスに統合します。
- この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨書籍:
Node.js の操作方法とダイアログ ボックス ngDialog の使用方法
以上がVue.jsのダウンロード方法を利用したケースを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。