VUE の入門、基本的な使用法、および基本的な文法

必須vue-devtools

vueを表示するために使用されます

vscodeプラグイン

vue コード強調表示プラグインをインストールできます

1.@vue/cli のインストール

• グローバルインストールコマンド

yran global add @vue/cli
# OR
npm install -g @vue/cli

注: 長時間動きがない場合 (ケースの 95% はネットワーク速度の問題によるものです)、Ctrl C

1. 停止して最初からやり直す
2. ネットワークを変更してやり直してください

• vue スキャフォールディング バージョンを表示する

vue -V

2. @vue/cli はサービスを開始するプロジェクトを作成します

1.プロジェクトの作成

# vue和create是命令，vuecli-demo是文件名
vue create vuecli-demo

2. テンプレートを選択します
上下の矢印を使用して選択できます。間違った場合は、Ctrl+C を押してもう一度やり直してください。

スキャフォールディング プロジェクト パッケージに必要な依存関係をダウンロードする方法を選択します

3. Enter キーを押して、プロジェクト フォルダー + ファイルが生成されるまで待ち、必要なサードパーティ パッケージをダウンロードします。

4. スキャフォールディング プロジェクトに入り、組み込みのホット アップデート ローカル サーバーを起動します。

cd vuecli-demo

npm run serve
# 或
yarn serve

緑色を確認してください - ああ、成功しました (基礎となるノード + Webpack ホット アップデート サービス)

ブラウザを開いて上記のアドレスを入力してください

2.1@vue/cli カスタム構成

@vue/cli が vue.config.js を使用しているため、プロジェクトに webpack.config.js ファイルがありません
src と並行して新しい vue.config.js を作成します

/* 覆盖webpack的配置 */
module.exports = {
  devServer: { // 自定义服务配置
    open: true, // 自动打开浏览器
    port: 3000
  }
}

2.2 eslintの理解

は、エラーを報告するためのリマインダーとして使用されます。変数が宣言されているが使用されていない場合、リマインダーが表示されます。
解決策
方法 1: エラーを手動で解決します。将来のプロジェクトで自動的に解決する方法について説明します。
方法 2 : eslint チェックを一時的に閉じ、vue.config.js での設定後にサービスを再起動します

2.3vue/cli 単一 vue ファイルの説明

Vue では、プロジェクトの開発に .vue ファイルを使用することを推奨します
テンプレートにはルート タグを 1 つだけ含めることができます。
Vue ファイルに依存しないモジュール スコープは次のとおりです。相互に排他的ではありません。 影響
スタイルはスコープ付き属性と連携して、スタイルが現在のテンプレート内のタグに対してのみ有効になるようにします。
Vue ファイルは webpack と連携します。それらをパッケージ化して、index.html に挿入します

<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template>
  <div>欢迎使用vue</div>
</template>

<!-- js相关 -->
<script>
export default {
  name: 'App'
}
</script>

<!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style scoped>
</style>

2.4vue/cli ウェルカムインターフェイスのクリーニング

• src/App.vue にはデフォルトで多くのコンテンツが含まれていますが、それらをすべて削除してボックスをそのままにすることができます
• アセットおよびコンポーネントフォルダーの下にあるものをすべて削除します (デフォルトのウェルカムページではありません)。

3vueの命令

3.1 Vue の基本、補間式

別名: 宣言的レンダリング/テキスト補間
構文: { { 式 }}

<template>
  <div>
    <h1>{
   
   { msg }}</h1>
    <h2>{
   
   { obj.name }}</h2>
    <h3>{
   
   { obj.age > 18 ? '成年' : '未成年' }}</h3>
  </div>
</template>

<script>
export default {
  data() { // 格式固定, 定义vue数据之处
    return {  // key相当于变量名
      msg: "hello, vue",
      obj: {
        name: "小vue",
        age: 5
      }
    }
  }
}
</script>

<style>
</style>

概要: DOM で補間式を代入するには、vue 変数をデータ内で宣言する必要があります

3.2vue の基本 - MVVM 設計パターン

• ソフトウェア アーキテクチャ モデルである MVVM は、コード作成のアイデアとレベルを決定します

  • M: モデル データ モデル (データで定義)
  • V: ビュービュー (HTML ページ)
  • VM: ViewModel ビュー モデル (vue.js ソース コード)

• MVVM を使用すると、双方向データ バインディングを通じてデータを双方向で自動的に同期できるため、DOM を操作する必要がなくなります。

  • V (ビューの変更) -> M (自動データ同期)
  • M (データの変更) -> V (ビューの自動同期)
    

1. vue では、DOM を手動で直接操作することはお勧めできません。 ！ ！

2. Vue では、データ駆動型ビューを通じて、DOM の操作方法を考えるのではなく、データの操作方法を考えます。 ！ (イデオロギーの変更)
   
   概要: MVVM 設計パターンが vue ソース コードに採用され、DOM 操作が大幅に削減され、開発効率が大幅に向上します。

3.3 vue コマンド -v-bind

label 属性の vue 変数の値を設定する
vue コマンドは、基本的に特別な HTML タグ属性です。特徴: 各コマンドには固有の効果があります

• 構文: v-bind:property name="vue 変数"
  -省略形: :property name="vue 変数"

<!-- vue指令-v-bind属性动态赋值 -->
<a v-bind:href="url">我是a标签</a>
<img :src="imgSrc">

3.4vue コマンド-v-on

3.4.1 イベントをタグにバインドする

• 文法
  • v-on: イベント名 = 「実行される少量のコード」
  • v-on: イベント名 = "メソッド内の関数"
  • v-on: イベント名 = "メソッド内の関数 (実パラメータ)"
• 略語: @イベント名="メソッド内の関数"

<!-- vue指令:   v-on事件绑定-->
<p>你要买商品的数量: {
   
   {count}}</p>
<button v-on:click="count = count + 1">增加1</button>
<button v-on:click="addFn">增加1个</button>
<button v-on:click="addCountFn(5)">一次加5件</button>

<button @click="subFn">减少</button>

<script>
    export default {
        // ...其他省略
        methods: {
            addFn(){ // this代表export default后面的组件对象(下属有data里return出来的属性)
                this.count++
            },
            addCountFn(num){
                this.count += num
            },
            subFn(){
                this.count--
            }
        }
    }
</script>

概要: 共通の @ イベント名、イベントを dom タグにバインドする、および右側の = イベント処理関数

3.4.2 vueイベント処理関数でイベントオブジェクトを取得する

文法：

• パラメータは渡されず、仮パラメータを通じて直接受信されました
• パラメーターを渡し、$even を渡してイベント オブジェクトを参照し、それをイベント処理関数に渡します。

<template>
  <div>
    <a @click="one" href="http://www.baidu.com">阻止百度</a>
    <hr>
    <a @click="two(10, $event)" href="http://www.baidu.com">阻止去百度</a>
  </div>
</template>

<script>
export default {
  methods: {
    one(e){
      e.preventDefault()
    },
    two(num, e){
      e.preventDefault()
    }
  }
}
</script>

3.5 vue ディレクティブ-v-on 修飾子

文法：

• @イベント名.Modifier = "メソッド内の関数"
  • .stop - イベントのバブルアップを停止します。
  • .prevent - デフォルトの動作を防止します
  • .once - プログラムの実行中に、イベント処理関数は 1 回だけトリガーされます

<template>
  <div @click="fatherFn">
    <!-- vue对事件进行了修饰符设置, 在事件后面.修饰符名即可使用更多的功能 -->
    <button @click.stop="btn">.stop阻止事件冒泡</button>
    <a href="http://www.baidu.com" @click.prevent="btn">.prevent阻止默认行为</a>
    <button @click.once="btn">.once程序运行期间, 只触发一次事件处理函数</button>
  </div>
</template>

<script>
export default {
  methods: {
    fatherFn(){
      console.log("father被触发");
    },
    btn(){
      console.log(1);
    }
  }
}
</script>

概要: 修飾子は追加機能をイベントに拡張します

3.6 vue command-v-on キー修飾子

目標: キーボード イベントにモディファイアを追加し、機能を強化します。

• 文法：
  • @keyup.enter - Enter キーを監視する
  • @keyup.esc - リターンキーストロークを監視する

<template>
  <div>
    <input type="text" @keydown.enter="enterFn">
    <hr>
    <input type="text" @keydown.esc="escFn">
  </div>
</template>

<script>
export default {
 methods: {
   enterFn(){
     console.log("enter回车按键了");
   },
   escFn(){
     console.log("esc按键了");
   }
 }
}
</script>

概要: より多くのイベント修飾子を使用すると、開発効率が向上し、自分でプロセスを判断する必要性が減ります。

3.7 vue ディレクティブ v-model

value 属性と vue データ変数を双方向でバインドします。

• 構文: v-model="vue データ変数"
• 双方向のデータバインディング
  • データの変更 -> 自動同期の表示
  • 変更の表示 -> 自動データ同期

<template>
  <div>
    <!-- 
    	v-model:是实现vuejs变量和表单标签value属性, 双向绑定的指令
    -->
    <div>
      <span>用户名:</span>
      <input type="text" v-model="username" />
    </div>
    <div>
      <span>密码:</span>
      <input type="password" v-model="pass" />
    </div>
    <div>
      <span>来自于: </span>
      <!-- 下拉菜单要绑定在select上 -->
      <select v-model="from">
        <option value="北京市">北京</option>
        <option value="南京市">南京</option>
        <option value="天津市">天津</option>
      </select>
    </div>
    <div>
      <!-- (重要)
      遇到复选框, v-model的变量值
      非数组 - 关联的是复选框的checked属性
      数组   - 关联的是复选框的value属性
       -->
      <span>爱好: </span>
      <input type="checkbox" v-model="hobby" value="抽烟">抽烟
      <input type="checkbox" v-model="hobby" value="喝酒">喝酒
      <input type="checkbox" v-model="hobby" value="写代码">写代码
    </div>
    <div>
      <span>性别: </span>
      <input type="radio" value="男" name="sex" v-model="gender">男
      <input type="radio" value="女" name="sex" v-model="gender">女
    </div>
    <div>
      <span>自我介绍</span>
      <textarea v-model="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      pass: "",
      from: "",
      hobby: [], 
      sex: "",
      intro: "",
    };
    // 总结:
    // 特别注意: v-model, 在input[checkbox]的多选框状态
    // 变量为非数组, 则绑定的是checked的属性(true/false) - 常用于: 单个绑定使用
    // 变量为数组, 则绑定的是他们的value属性里的值 - 常用于: 收集勾选了哪些值
  }
};
</script>

3.8vue ディレクティブ v-model 修飾子

目標: v-model にさらに強力な機能を持たせる

• 文法：
  • v-model.modifier="vue データ変数"
    • .nu​​mber は parseFloat を使用して数値型に変換されます
    • .trim は先頭と末尾の空白文字を削除します
    • .lazy は inupt ではなく変更時にトリガーされます

<template>
  <div>
    <div>
      <span>年龄:</span>
      <input type="text" v-model.number="age">
    </div>
    <div>
      <span>人生格言:</span>
      <input type="text" v-model.trim="motto">
    </div>
    <div>
      <span>自我介绍:</span>
      <textarea v-model.lazy="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: "",
      motto: "",
      intro: ""
    }
  }
}
</script>

概要: v-model 修飾子は値を前処理でき、非常に効率的で使いやすいです。

vue ディレクティブ v-text および v-html

目的: DOM オブジェクトの innerText/innerHTML を更新します。

• 文法：
  • v-text="vue データ変数"
  • v-html="vue データ変数"
• 注: 補間式は上書きされます。

<template>
  <div>
    <p v-text="str"></p>
    <p v-html="str"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: "<span>我是一个span标签</span>"
    }
  }
}
</script>

概要: v-text は値を通常の文字列として表示し、v-html は値を html として解析します

3.10vue 命令 v-show および v-if

目標: ラベルの非表示または表示を制御する

• 文法：
  • v-show=“vue变量”
  • v-if="vue 変数"
• 原理
  • v-show は、display:none を使用して非表示にします (頻繁な切り替えに使用されます)。
  • v-if は DOM ツリーから直接削除します
• 高度な
  • v-それ以外の場合は使用します

<template>
  <div>
    <h1 v-show="isOk">v-show的盒子</h1>
    <h1 v-if="isOk">v-if的盒子</h1>

    <div>
      <p v-if="age > 18">我成年了</p>
      <p v-else>还得多吃饭</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOk: true,
      age: 15
    }
  }
}
</script

概要: v-show、v-if、v-else 命令を使用して、変数を通じてラベルのセットの表示/非表示を簡単に制御します

3.11vue コマンド対

目標: ループ内で生成されるデータの数に応じてタグ構造が配置されるリストのレンダリング

• 文法
  • v-for="ターゲット構造内の(値, インデックス)"
  • v-for="ターゲット構造体の値"
• ターゲット構造:
  • 配列/オブジェクト/数値/文字列を走査可能 (走査可能な構造)
• 注:
  v-for の一時変数名は v-for の範囲外では使用できません

<template>
  <div id="app">
    <div id="app">
      <!-- v-for 把一组数据, 渲染成一组DOM -->
      <!-- 口诀: 让谁循环生成, v-for就写谁身上 -->
      <p>学生姓名</p>
      <ul>
        <li v-for="(item, index) in arr" :key="item">
          {
   
   { index }} - {
   
   { item }}
        </li>
      </ul>

      <p>学生详细信息</p>
      <ul>
        <li v-for="obj in stuArr" :key="obj.id">
          <span>{
   
   { obj.name }}</span>
          <span>{
   
   { obj.sex }}</span>
          <span>{
   
   { obj.hobby }}</span>
        </li>
      </ul>

      <!-- v-for遍历对象(了解) -->
      <p>老师信息</p>
      <div v-for="(value, key) in tObj" :key="value">
        {
   
   { key }} -- {
   
   { value }}
      </div>

      <!-- v-for遍历整数(了解) - 从1开始 -->
      <p>序号</p>
      <div v-for="i in count" :key="i">{
   
   { i }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["小明", "小欢欢", "大黄"],
      stuArr: [
        {
          id: 1001,
          name: "孙悟空",
          sex: "男",
          hobby: "吃桃子",
        },
        {
          id: 1002,
          name: "猪八戒",
          sex: "男",
          hobby: "背媳妇",
        },
      ],
      tObj: {
        name: "小黑",
        age: 18,
        class: "1期",
      },
      count: 10,
    };
  },
};
</script>