1はじめに
2、Vueの紹介
- ①JavaScriptフレームワーク
- ②ドムの簡素化の操作
- ③応答データドライバ
3.ドムは何ですか？
文書ドキュメントオブジェクトモデルオブジェクトモデル、ドム翻訳中国：ドキュメントオブジェクトモデル
DOMは、プログラミング・インタフェースのためのHTMLとXML文書です。特定のエフェクト機能を実現するように何度も私たちはウェブサイト上で動作するジャバスクリプトを使用します。そして、コントロールとjavascriptのコールDOMメソッドの多くは、定義されました。時々、我々は、例えばタグを取る（）の情報は、以下のJavaScriptコードによって使用される。document.getElementsByTagName（「」）ドキュメントインターフェイスはDOM1コア（コアDOM1）仕様で定義された最初のインタフェースは、ドキュメントがありますドキュメントには、ホストオブジェクトのインタフェースを実装しています。すべてのコントロールのドキュメントページ。DocumentインタフェースのDOM1コアはgetElementsByTagNameの（）メソッドを定義します。この方法は、ノード固有のDOMを含む、すなわち配列ノードのリスト（のNodeList）を返し、すべてのラベルは、文書内の出現の順に配置され、一致するパラメータ条件を満たして含有します。だから、anchorTagsは現在、変数ノードリストとなりました。
4、最初のVueプログラム（ハローヴュー）
- Vue.jsの開発バージョンのインポート
- VUEは、オブジェクトのインスタンスを作成し、データプロパティは、ELを提供しました
- ページ上のデータをレンダリングするために、単純なテンプレートの構文を使用します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个Vue程序</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{message}}{{name}}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
message: "Hello Vue !",
name: ' by yangchaoyi'
}
});
</script>
</body>
</html>
- ディスプレイ
5、elはポイントの問題をマウント
- ①それはどのような範囲Vueのインスタンスのですか？
- かどうか②は他のセレクタを使用することができますか？
- ③あなたは他のDOM要素かどうかを設定することができますか？
最初の質問：それはスコープVueのインスタンスは何ですか？
例えば、我々は、外部の要素に書き込む{{メッセージ}}
：結果から
A：子孫要素要素ヴューエル・オプションを管理し、内部を打ちます
2番目の質問：することができます私は、他のセレクタを使うのか？
A：私たちがすることができますもちろん、私たちはクラスを使用することができるなど、他のラベルがありますが、CSS
を開発するとき、クラスとラベルのいくつかは、それが複数の要素、およびIDを打つことができながら、しかし、我々は一般的に、デフォルトのidセレクタを使用します。セレクタは、私たちは、これが唯一のデフォルトであると思わせる、IDセレクタを選択することをお勧めします
次の2つの例は、単純にしてみてください：
①クラスを使用します
- ディスプレイ
唯一、我々はそれをテストすることができますので、②のdiv divタグを使用して
- ディスプレイ
3番目の質問：することができます私は別のDOM要素を設定しますか？
A：あなたが他の二重ラベルを使用することができますが、HTMLとBODYを使用することはできません
図6に示すように、データ：データ・オブジェクト
- データ定義で使用①Vueのデータ
- ②データは、データの複合型に書き込むことができます
- 複雑なデータ型をレンダリングする際に③、あなたは、JSの構文に従うことができます
以下に示したオブジェクトとアレイの使用の簡単な例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个Vue程序</title>
<!-- 开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
<h3>{{school.name}} {{school.phone}}</h3>
<h3>专业：</h3>
<li>{{array[0]}}</li>
<li>{{array[1]}}</li>
<li>{{array[2]}}</li>
<li>{{array[3]}}</li>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
message: "Hello Vue !",
school:{
name:'湖南大学',
phone:'123456'
},
array:['计算机','市场营销','信息管理','医学信息工程']
}
});
</script>
</body>
</html>
- ディスプレイ
学如逆水行舟，不进则退
