Vue.jsのクイックスタート、こちらをご覧ください！

1. Vue.jsとは何ですか？

Vue（ビューと同様に/vjuː/と発音）は、ユーザーインターフェイスを構築するための進歩的なフレームワークです。他の大規模なフレームワークとは異なり、Vueは下から上にレイヤーごとに適用されるように設計されています。
Vueのコアライブラリはビューレイヤーのみに焦点を当てています。ビューレイヤーは使いやすいだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も簡単です。一方、最新のツールチェーンやさまざまなサポートライブラリと組み合わせると、Vueは複雑なシングルページアプリケーション用のドライバーを完全に提供することもできます。
下から上へのレイヤーごとのアプリケーション：プログレッシブフレームワークとして、達成される目標は、プロジェクトの増分開発（プラグアンドプレイ）を容易にすることです。

公式ウェブサイト：https：//cn.vuejs.org/v2/guide/著者YouYuxiは中国人です。

2.なぜVueを使用するのですか？

宣言型レンダリング：フロントエンドとバックエンドの分離は将来のトレンドです
プログレッシブフレームワーク：さまざまなビジネスニーズに適しています
シンプルで習得が容易：中国語、中国語の文書で開発され、言語の壁がなく、理解と学習が容易

3、Vue.jsの紹介

スクリプトを使用して、使用するhtmlページにvue.jsライブラリを導入します。

<!-- 方式1：引用远程 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
   
<!-- 方式2：引用本地 -->
<script src="./vue包的存放目录/vue.min.js"></script>

Vue-CLIスキャフォールディング：vue.jsが提供するCLIスクリプトフレームワークを使用して、vue.jsプロジェクトのプロトタイプを作成すると非常に便利です。

第三に、エントリープログラム

1.環境への設置

開発ソフトウェア：Visual Studio Code。
便宜上、CSDNリソースにアップロードし、クリックしてダウンロードできます：VSCodeSetup-x64-1.29.1.exe
ここに画像の説明を挿入
開発ソフトウェアをダウンロードした後、対応するプラグインをインストールする必要があります。
VS codeソフトウェアを開き、左側の最後のアイコン（拡張機能）をクリックして、モールで次のプラグインを検索し、[インストール]をクリックします。
ここに画像の説明を挿入
例：

2.コードの記述

次に、エントリアプレットの
作成を開始します。vue_textディレクトリを作成し、そのディレクトリに01_vueエントリprogram.htmlファイルを作成します。
ここに画像の説明を挿入

ヒント：01_vueエントリprogram.htmlファイルで、最初の行に英語の感嘆符を入力してください。、
次に[Enter]をクリックして、次のように初期htmlコードを自動的に生成します。

コード作成手順：

HTMLを定義し、vue.jsを導入します
「app」divを定義します。この領域はvueに引き継がれます
Vueインスタンスを定義し、アプリ領域を引き継ぎます
モデルの定義（データオブジェクト）
「アプリ」にデータを表示

上記の手順に基づいて、次のコード例を比較してください。

<!DOCTYPE html> 
<html lang="en"> 
<head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Vue入门</title> 

    <!-- 1.创建HTML文件， 引入vue.js 有两种方式-->

    <!-- 第一种 引入 vue.js的CDN地址 --> 
    <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"> </script> --> 
        
    <!-- 第二种 本地导入 --> 
    <script src="./js/vue.min.js"></script> 

</head> 

<body><!-- 2. 定义app div，此区域作为vue的接管区域 --> 
    <div id="app"> 
        <!-- {
    
    {}} 双括号是VUE中的差值表达式,将表达式的值输出到HTML页面 --> 
        <h2> {
   
   {name}} </h2>
    </div> 
</body> 

<script> 
    //3. 创建vue实例 
    var VM = new Vue({
     
      
        //定义 Vue实例挂载的元素节点,表示vue接管该div 
        el:'#app', 
        //4.定义model模型数据对象 
        data:{
     
     
            name:"格子衫" 
        } 
    }); 
</script>

</html>

3.運用結果

htmlファイルで、「ライブサーバーで開く」を右クリックして実行します。
ここに画像の説明を挿入
ブラウザに表示されます。

4.説明

Vueプログラムは基本的に上記のテンプレートに従って記述され、divでデータを取得するために補間し、jsでelマウントポイントを定義し、データデータオブジェクトを定義します
1）{ {}}：補間式

補間式の役割は何ですか？

 通常用来获取Vue实例中定义的数据(data)
 属性节点中 不能够使用插值表达式

2）el：マウントポイント

エルの役割は？

 定义 Vue实例挂载的元素节点,表示vue接管该区域

Vueの範囲は何ですか？

 Vue会管理el选项命中的元素,及其内部元素

elマウントポイントを選択するときに他のセレクターを使用することは可能ですか？
```
 可以,但是建议使用 ID选择器
```
他のDOM要素を関連付けに設定することは可能ですか？
```
 可以,但是建议选择DIV, 不能使用HTML和Body标签
```

3）データ：データオブジェクト

Vueで使用されるデータはデータで定義されています
複合型はデータに書き込むことができます
複雑なデータをレンダリングするときは、js構文に従ってください。
データに複雑なデータを書き込む例を次に示します。

<!DOCTYPE html> 
<html lang="en"> 
<head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Vue中data写复杂类型</title> 

    <!-- 1.创建HTML文件， 引入vue.js 有两种方式-->

    <!-- 第一种 引入 vue.js的CDN地址 --> 
    <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"> </script> --> 
        
    <!-- 第二种 本地导入 --> 
    <script src="./js/vue.min.js"></script> 

</head> 

<body><!-- 2. 定义app div，此区域作为vue的接管区域 --> 
    <!-- 此区域作为vue的接管区域 --> 
    <div id="app"> 
            {
   
   {name}} <br> 
            {
   
   {school.name}} {
   
   {school.mobile}}<br> 
            <ul>
                <li>{
   
   {names[0]}}</li> 
                <li>{
   
   {names[1]}}</li> 
                <li>{
   
   {names[2]}}</li> 
            </ul> 
    </div> 
</body> 

<script> 
    //3. 创建vue实例 
    var VM = new Vue({
     
      
        //定义 Vue实例挂载的元素节点,表示vue接管该div 
        el:'#app', 
        //4.定义model模型数据对象 
        data:{
     
     
            name:"格子衫", 
            //对象类型数据 
            school:{
     
      
                name:"xx教育", 
                mobile:"1001001" 
            },
            //数组类型 
            names:["小斌","张百万","刘能"]  
        } 
    }); 
</script>

</html>

演算結果：
ここに画像の説明を挿入

第四に、宣言型レンダリングの利点

この記事の内容の2番目のポイント「Vueを使用する理由」で宣言型レンダリングが言及されていることに気づきましたか？
では、宣言型レンダリングとは何ですか？

Vue中的声明式渲染，简单理解就是我们声明数据，Vue帮我们将数据渲染到HTML.

jQueryとVueを使用してhtmlデータをレンダリングする違いの例を見てみましょう。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8" /> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
        <title>Document</title> 
    </head> 
    <body> 
        <div id="app"> 
            <h2>{
   
   {name}}</h2> 
        </div>
    </body>

    <!--
    jQuery中，如果 DOM 发生变化, js代码也需要做相应的改变，高耦合 . 
    <script src="./js/jquery-1.8.3.min.js"></script> 
    <script> 
        $(document).ready(function () { 
            $("#app").append("<h2>Hello Word! !</h2>");
         }); 
    </script>  -->

    <!-- 在用 Vue中，只需要定义好展示数据，并把它放在 DOM 合适的位置就可以. -->
    <script src="js/vue.min.js"></script> 
    <script> 
        var VM = new Vue({
     
      
            el: "#app", //挂载点 
            data: {
     
      name: "Hello Word! !", }, 
        }); 
    </script>
    
</html>

ご覧のとおり、ネイティブjQueryでは、htmlデータをレンダリングする場合、JSコードでdomオブジェクトを取得してからデータを追加する必要があり、場合によってはhtmlタグを埋め込む必要があります。これはコードを読むのに面倒で不便ではありませんか？さらに、dom操作はパフォーマンスを低下させ、ユーザーエクスペリエンスに影響を与えます。
Vueメソッドでは、最初にVueを介してJSでデータを定義し、次にhtmlを書き込むときに、割り当てるタグに変数名を直接書き込むことができ、両側は属性名によって動的にバインドされます。これは明確です。一目で！

O、上記はVue.jsの紹介です、簡単ですか〜

ヒント：詳細については、公式Webサイトにアクセスしてください。リンクは記事
の冒頭にあります。同時に、Vueの各ナレッジポイントのデモもリソースにアップロードしました。コメント非常に詳細です。それが必要な友達はクリックしてダウンロードできます：フロントエンドVueサンプルコード