見る

VUE：データ指向のプログラミング

JQuery：DOM指向

Jqueryがデータを操作するときは、domを操作する必要があります
Vueは主にデータ操作（JSP）用です

VUEの機能

全体的な構成=テンプレート+データ

テンプレート

<body>
    <!-- 视图 -->
    <div id="div">
        {
     
     {msg}}
    </div>
</body>

データソース

    // 脚本
    new Vue({
      
      
        el:"#div",
        data:{
      
      
            msg:"Hello Vue"
        }
    });

Vueは、ユーザーインターフェイスを構築するためのプログレッシブフロントエンドフレームワークです。

ビューレイヤーのみに焦点を当てると、習得が非常に簡単で、他のライブラリや既存のプロジェクトと簡単に統合できます。

可能な限り単純なAPIを介して、データのバインドと構成に応答するビューコンポーネントを実現します。

特徴

使いやすさ：HTML CSSJavaScriptに基づいてすばやく開始します。

柔軟性：シンプルで小さなコア、進歩的なテクノロジースタックで、あらゆる規模のアプリケーションに対応できます。

パフォーマンス：20kb min + gzipの実行サイズ、超高速の仮想DOM、最も心配のない最適化。

Vueを使い始める

vue.jsファイルをダウンロードしてインポートします。
エントリープログラムを書く。

ビュー：主にHTML + CSSで構成されるページレンダリングを担当します。

スクリプト：ビジネスデータモデル（モデル）とデータ処理ロジックを担当します。

    <title>快速入门</title>
</head>
<body>
    <!-- 模板 -->
    <!-- 视图 -->
    <div id="div">
        {
   
   {msg}}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 脚本
    new Vue({
        el:"#div",
        data:{
            msg:"Hello Vue"
        }
    });
</script>

elオプション：ページ内の要素を受け取るテンプレートの場所を指定します。（一般的に使用されるセレクターに従って取得）。

dataオプション：テンプレートで使用するデータを指定します。現在のVueオブジェクトにデータを保存するために使用されます。ビューで宣言された変数は、ここで割り当てる必要があります。

メソッドオプション：メソッドを定義するために使用されます。この操作はメソッドで使用できます。メソッドはオブジェクト名で直接呼び出すことができ、これは現在のVueオブジェクトを表します。

メソッド通常の形式

        methods:{
    
    
            study:function(){
    
    
                alert(this.name + "正在" + this.classRoom + "好好学习!");
            }
        }

 <title>快速入门升级</title>
</head>
<body>
    <!-- 视图 -->
    <div id="div">
        <div>姓名：{
    
    {
    
    name}}</div>
        <div>班级：{
    
    {
    
    classRoom}}</div>
        <button onclick="hi()">打招呼</button>
        <button onclick="update()">修改班级</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 脚本
    let vm = new Vue({
    
    
        el:"#div",
        data:{
    
    
            name:"张三",
            classRoom:"一班"
        },
        methods:{
    
    
            study(){
    
    
                alert(this.name + "正在" + this.classRoom + "好好学习!");
            }
        }
    });

    //定义打招呼方法
    function hi(){
    
    
        vm.study();
    }

    //定义修改班级
    function update(){
    
    
        vm.classRoom = "二班";
    }
</script>

命令：

使用するテンプレートファイルを作成する

これは接頭辞v-が付いた特別な属性であり、コマンドが異なれば意味も異なります。

例如v-html、v-if、v-for

命令を使用する場合、通常はラベルの属性に書き込まれ、値はJS式を使用できます。
$C：\ Users \ Administrator \ AppData \ Roaming \ Typora \ typora-user-images \ 1593396480984.png$ ）]

テキスト補間

v-html：テキストをHTMLコードに解析します。

ラベルのテキストに変数の内容を入れます

  <title>文本插值</title>
</head>
<body>
    <div id="div">
        <div>{
    
    {
    
    msg}}</div>
        <div v-html="msg"></div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
    
    
        el:"#div",
        data:{
    
    
            msg:"<b>Hello Vue</b>"
        }
    });
</script>

バインディングプロパティ

v-bind：属性値をHTMLタグにバインドします。

操作タグの属性値

    <style>
        .my{
    
    
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="div">
        <a v-bind:href="url">百度一下</a>
        <br>
        <a :href="url">百度一下</a>
        <br>
        <div :class="cls">我是div</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
    
    
        el:"#div",
        data:{
    
    
            url:"https://www.baidu.com",
            cls:"my"
        }
    });
</script>

条件付きレンダリング

v-if：条件付きで要素をレンダリングし、trueと判断された場合はレンダリングし、そうでない場合はレンダリングしません。

v-else：条件付きレンダリング。

v-else-if：条件付きレンダリング。

v-show：条件に従って要素を表示します。違いは、表示属性の値が切り替わることです。

  <title>条件渲染</title>
</head>
<body>
    <div id="div">
        <!-- 判断num的值，对3取余  余数为0显示div1  余数为1显示div2  余数为2显示div3 -->
        <div v-if="num % 3 == 0">div1</div>
        <div v-else-if="num % 3 == 1">div2</div>
        <div v-else="num % 3 == 2">div3</div>

        <div v-show="flag">div4</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
    
    
        el:"#div",
        data:{
    
    
            num:1,
            flag:false
        }
    });
</script>

リストレンダリング

v-for：コンテナの要素またはオブジェクトのプロパティをトラバースするリストレンダリング。

<body>
    <div id="div">
        <ul>
            <li v-for="name in names">
                {
    
    {
    
    name}}
            </li>
            <li v-for="value in student">
                {
    
    {
    
    value}}
            </li>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
    
    
        el:"#div",
        data:{
    
    
            names:["张三","李四","王五"],
            student:{
    
    
                name:"张三",
                age:23
            }
        }
    });
</script>

イベントバインディング

v-on：HTMLタグのバインドイベント。

 <title>事件绑定</title>
</head>
<body>
    <div id="div">
        <div>{
    
    {
    
    name}}</div>
        <button v-on:click="change()">改变div的内容</button>
        <button v-on:dblclick="change()">改变div的内容</button>

        <button @click="change()">改变div的内容</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
    
    
        el:"#div",
        data:{
    
    
            name:"黑马程序员"
        },
        methods:{
    
    
            change(){
    
    
                this.name = "传智播客"
            }
        }
    });
</script>

フォームバインディング

変数と入力ボックスの双方向バインディング。一方のパーティを変更すると、もう一方のパーティも変更されます。

v-model：フォーム要素に双方向のデータバインディングを作成します。

双方向のデータバインディング

データデータを更新すると、ページ内のデータも更新されます。

ページデータを更新します。データデータも更新されます。

 <title>表单绑定</title>
</head>
<body>
    <div id="div">
        <form autocomplete="off">
            姓名：<input type="text" name="username" v-model="username">
            <br>
            年龄：<input type="number" name="age" v-model="age">
        </form>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
    
    
        el:"#div",
        data:{
    
    
            username:"张三",
            age:23
        }
    });
</script>

要素紹介

要素：ウェブサイトの迅速なプロトタイピングツール。

Ele.me.comのフロントエンド開発チームによって提供されるVueベースのWebサイトコンポーネントライブラリのセットですか。

VueはElementを使用するための前提条件です。

コンポーネント：ハイパーリンク、ボタン、画像、表など、Webページを構成するコンポーネント〜

Element公式ウェブサイト：https：//element.eleme.cn/#/zh-CN

Element-UIの基本的な使い方

cssファイルのインポート
最初にVuejsファイルをインポートします
独自のjsをインポートする

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
</head>
<body>
    <button>我是按钮</button>
    <br>
    <div id="div">
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
          </el-row>
    </div>
</body>
<script>
    new Vue({
    
    
        el:"#div"
    });
</script>

VueのクイックスタートとElement-UIの基本的な使用法

見る