1.Vueの紹介
- Vue（ビューと同様に/vjuː/と発音）は、フロントエンドとバックエンドの分離を構築するために使用されるフレームワークのセットです。もともとは国内の優れたプレーヤーであるYouYuxiによって開発され、現在は世界で「最も」人気のあるフロントエンドフレームワークです。vueを使用してWebページを開発するのは非常に簡単で、技術的な生態環境は完璧で、コミュニティは活発です。フロントエンドとバックエンドが仕事を見つけるために必要なスキルです。
2、Vueのインストールと使用
- vueのインストールは大きく3つの方法に分けられます。1つはスクリプトタグを介して参照する方法、2つ目はnpm（ノードパッケージマネージャー）を介してインストールする方法、3つ目はvue-cliコマンドラインを介してインストールする方法です。初心者の方は、最初の方法で直接インストールすることをお勧めします。
# 开发环境
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
# 或者是指定版本号
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
# 或者是下载代码保存到本地(下面是保存在lib目录下，可改为你保存的目录即可)
<script src="lib/vue.js"></script>
# 生产环境，使用压缩后的文件
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
- 注：vue.jsを現在のコードワークスペースのlibディレクトリに保存します
- インストールの詳細については、vueの公式Webサイトを参照してください
3、基本的な使用法
1.vueオブジェクトを作成します
- Vueを使用するには、最初にVueオブジェクトを作成し、このオブジェクトにelパラメーターを渡す必要があります。elパラメーターのフルネームはelementであり、vueレンダリングのルート要素を見つけるために使用されます。
2.パラメーター（変数）を定義します
- データパラメータを渡すことができ、データ内のすべての値は、{ {}}を使用してルート要素の直下で使用できます 。
<div id="app">
<p>{
{
username}}</p>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
"username": "逻辑教育"
}
});
</script>
- データ内のデータは、vueのルート要素の下でのみ使用でき、他の場所のvueによって認識およびレンダリングすることはできません。
<div id="app">
</div>
<!-- 这里渲染不了 -->
<p>{
{
username}}</p>
<script>
let vm = new Vue({
el: "#app",
data: {
"username": "逻辑教育"
}
});
</script>
3.定義方法（機能）
- さらに、vueオブジェクトにメソッドを追加することもできます。この属性は、独自の関数を格納するために使用されます。メソッドの関数はテンプレートでも使用でき、データの値にアクセスするメソッドの関数には、this。属性名を介してのみアクセスでき、アクセスするために追加のthis.data。属性名は必要ありません。
<div id="app">
<p>{
{
greet()}}</p>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
"username": "逻辑教育"
},
methods: {
greet: function(){
return "晚上好！" + this.username
}
}
});
</script>
-
注意：
- クラスを使用する場合、複数のタグがあり、各タグが有効になる可能性があり、コードの制御がより困難になるため、idを使用することをお勧めします
- 複数のvueを定義することはお勧めしません