VUEフレームエントリ

VUEとは何ですか

公式サイト（https://cn.vuejs.org/）

Vue.jsフレームは緩やかなビルド・ユーザー・インターフェースです。他のヘビー級のフレームは、Vueのボトムアップ設計インクリメンタル開発異なります。
Vueのコアライブラリビュー層、および学ぶことは非常に簡単で、他のライブラリまたは既存のプロジェクトとの統合が容易なだけに焦点を当てます。
Vueが複雑な単一ページの単一ファイルのアプリケーションコンポーネントとVueのエコシステムサポートライブラリの開発の使用を駆動することが十分に可能です。

VUEの作者

無錫、中国では特に雨の川

いくつかの中国の人々のこのラインの開発、著者の詳細（https://baike.baidu.com/item/%E5%B0%A4%E9%9B%A8%E6%BA%AA/2281470?fr=aladdin）

ライブラリやフレームワークとの違い

図書館（図書館）は、基本的な機能の集まりです。特定の機能を実現する各通話機能は、ユーザに制御を渡します

　　代表：jQueryの
　　コアのjQueryライブラリー：DOM操作、すなわち：パッケージDOM操作、単純化された操作DOM

フレームワーク（枠組み）は、完全なソリューションです、時間のフレームワークを使用して、適切な場所の枠組みの中にあなたのコードを配置する必要があり、フレームワークは、適切なタイミングであなたのコードを呼び出します

　　代表：VUEの
　　フレームワークは、独自のプログラミングを提供し、完全なソリューションである
　　フレームコントロールのすべてでフレームを使用しているとき、我々は唯一の規則に従ってコードを記述する必要があり
　　、侵襲性の高いフレーム（仕上げに開始）

インストールのVue

ダウンロードCDN（ネットワークに接続されます）

<！ -開発環境のバージョンが便利警告コマンドラインを含む- >
<スクリプトSRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </ SCRIPT>
< ！ -生産バージョン、サイズと速度のために最適化された- >
<スクリプトSRC = "https://cdn.jsdelivr.net/npm/vue"> </ SCRIPT>

CNDは何ですか

CDNコンテンツ配信ネットワークは、ネットワークの上に構築されたエッジサーバーの周りに展開頼っ、プラットフォーム、コンテンツ配信、スケジューリングおよび他の機能モジュールの中心を通って負荷分散、
ユーザは最寄りの必要なコンテンツを取得することができ、ネットワークの輻輳を低減し、ユーザのアクセスを向上させます応答速度とヒット率。CDNメインコンテンツストレージと配信技術のキーテクノロジー

CNDの概要

CDNは、コンテンツ配信ネットワーク、すなわち、コンテンツ配信ネットワークの略です。

CNDは、そのようなウェブサイト上の写真をアップロードするなどの静的リソースを、加速する主に加速し、メディア、およびいくつかのJSが、CSSや他の文書を発表しました。

CND上海からのアクセスは、そのような国に分散100台のCDNサーバとして、さまざまなネットワーク・ノードに依存する必要性を加速し、それがコアで最も近いノードからリソースを返します。

キャッシュを通じて引当金を構築したり、アクティブなプライマリサーバのコンテンツをクロールするCNDサーバー

CDNの基本原則

ユーザが便利に所望のコンテンツを取得することができるので、ユーザに最も近いコンテンツ配信ノードにソース局は、応答速度とユーザーアクセスの成功率を向上させます。

VUE例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
        <title>vue的测试</title>
    </head>
    <body>
        <div id="ht">
            {{qd}}  <!--{{}}指的是vue实例所定义的变量取值方式-->
        </div>
    </body>
    <script type="text/javascript">
        //创建实例,一个vue工程,只有一个跟实例
        new Vue({
            el:"#ht",// DOM 元素，挂载视图模型
            // data:(function () {
            //     
            // })()
            // 上下两种函数相等,只是这个用到了Es6语法
            // ES6指的是javascript新规范
            data(){// 定义属性，并设置初始值
                return{
                    qd:'本是青灯不归客' ,//给变量设置值
                };
            }
        });
        
    </script>
</html>

效果：

但是这里一定要注意一点就是既然写了变量就一定要赋值，哪怕是null也行

这是没赋值的错，打开开发者工具查看控制台才能看到

给他赋了个值，null

效果图：就是不显示值但是控制台不报错了

vue-model双向绑定变量指令案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
        <title>vue-model双向绑定变量指令</title>
    </head>
    <body>
        <div id="ht">
            {{qd}}
            <input type="text" v-model="qd"/>
        </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el:'#ht',
            data(){
                return{
                    qd:null
                };
            }
        })
    </script>
</html>

效果图：文本框中输入什么，文本框外面就显示什么

v-on事件案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
        <title>v-on事件</title>
    </head>
    <body>
        <div id="ht">
            <input type="text" v-model="qd"/>
            <button v-on:click="hhh">提交</button>
        </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el:'#ht',
            data(){
                return{
                    qd:null,
                };
            },
            methods:{
                hhh(){
                    console.log(this.qd);
                }
            }
        })
    </script>
</html>

效果图：文本框中输入什么。控制台就显示什么

谢谢观看！！！！