1. Vueの概要

Vue は、ユーザーインターフェイスを構築するための進歩的なフレームワークです。他の大規模なフレームワークとは異なり、Vue はボトムアップでレイヤーごとに適用されるように設計されています。Vue のコアライブラリは、使いやすいだけでなく、サードパーティのライブラリや既存のプロジェクトと簡単に統合できるビューレイヤーにのみ焦点を当てています。一方、最新のツールチェーンやさまざまなサポートライブラリと組み合わせると、Vue は複雑な単一ページアプリケーションを完全に強化することもできます。これは単一ページのアプリケーションに使用され、vue プラグインルーティングはページジャンプに使用されてジャンプを実現します。

Vue公式サイト： https: //cn.vuejs.org/

vue の公式 Web サイトは vue3 に更新されましたが、引き続き vue2 から開始します。

vue を使用する前に、まず vue フレームワークを紹介し、公式 Web サイトに直接アクセスして script タグをコピーする必要があります。

学習 -> チュートリアル -> インストール:

Vue の基本的な使用方法:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<!-- 引入vue框架 -->
	<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
	<!-- 模板 根组件只有一个模板-->
	<div  id="app">
		<!-- 文本插值 -->
		{
   
   {msg}}
		<br>----------------------------
		<my-info></my-info>
		<my-info></my-info>
		<my-info></my-info>
		{
   
   {qq}}
		<!-- 事件绑定 使用v-on:事件类型='函数名' -->
		<!-- @事件类型 绑定事件 -->
		<!-- <button v-on:click="handler">获取qq</button> -->
		<button @click="qq='111222333'">获取qq</button>
		{
   
   {time}}
	</div>
	<script>
		// 自己定义组件实例
		let Info={
			template:`
				<div>{
   
   {msg}}</div>
			`,
			// data:{
			// 	msg:"hello world"
			// }
			data(){
				return {
					msg:"hello world"
				}
			}
		};
		// 创建vue实例 Vue构造函数方式
		let vm=new Vue({
			// 局部注册组件实例
			components:{
				'my-info':Info
			},
			// 将模板与实例进行绑定
			el:"#app",
			// 数据模型 存放vue变量
			data:{
				msg:'hello Vue2',
				qq:'获取qq',
				time:new Date()
			},
			// 声明函数 
			methods:{
				handler(){
					this.qq='111222333'
				}
			}
		});
		setInterval(()=>{
			vm.time=new Date()
		},1000);
	</script>
</body>
</html>

2.MVVMモデル

MVVMモデル:

M : モデルデータ内のデータに対応するモデル
V : ビュービュー、vue のテンプレートに対応
VM : ビューモデル ViewModel、Vue インスタンスオブジェクトに対応

上の図のとは、双方向のデータバインディングを実現するための鍵となる 2 つのツールと考えるDOM Listeners(dom监听器)ことができます。Data Bindings(数据绑定)

ビュー側から見ると、ViewModel のツールはDOM Listenersページ上の DOM 要素の変更を監視するのに役立ち、変更がある場合はモデル内のデータを変更します。
モデル側から見ると、モデル内のデータを更新すると、Data Bindingsツールはページ内の DOM 要素を更新するのに役立ちます。

簡単に言うと、ViewModel はビューとデータモデルの間のリンクです。データモデルが変更されると、vm はビューに変更を通知し、ビューが変更されると、vm はデータモデルに対応する変更を行うように通知します。

Vue は MVVM モデルを使用します。

3. テンプレート構文

Vue は HTML ベースのテンプレート構文を使用して、開発者が DOM を基礎となる Vue インスタンスのデータに宣言的にバインドできるようにします。すべての Vue テンプレートは有効な HTML であるため、仕様に準拠したブラウザーと HTML パーサーで解析できます。基礎となる実装では、Vue はテンプレートを仮想 DOM レンダリング関数にコンパイルします。レスポンシブシステムと組み合わせることで、Vue は少なくとも再レンダリングが必要なコンポーネントの数をインテリジェントに計算し、DOM 操作の数を最小限に抑えることができます。

1. 補間構文 { {}}

Vue インスタンスが作成されると、データオブジェクトのすべてのプロパティが Vue のリアクティブシステムに追加されます。これらのプロパティの値が変更されると、ビューは「応答」します。つまり、マッチングは新しい値で更新されます。

レンダリングの最も一般的な形式は、"Mustache" 構文 (二重中かっこ) を使用したテキスト補間です。
任意の js 式を二重中括弧内に記述できます
v-once コマンドを使用して、1 回の補間を実行します。データが変更されると、補間時の内容は更新されません。

<body>
  <div id="app">
    <!-- 1.文本插值 mustache语法 {
   
   {}} -->
    {
   
   {msg}}
    <!-- 2.{
   
   {使用js表达式}} -->
	{
   
   {count * 100}}
	{
   
   {Number(msg)}}
	{
   
   {Boolean(msg)}}
    <!-- 3. v-once 使用v-once指令,执行一次性的插值，当数据发生改变，插值处的内容不会更新 -->
    <div v-once>{
   
   {msg}}</div>
  </div>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello Vue',
        count: 10
      }
    });
    //设置两秒后修改msg的值，使用v-once后插值处内容不会改变
    setTimeout(()=>{
			vm.msg='我被修改了'
		},2000)
  </script>
</body>

2. v-html コマンド

バックグラウンドで要求するデータが HTML コードの場合、 { {}} を介して直接出力すると、HTML コードも一緒に出力されます。二重中括弧は、データを HTML コードではなくプレーンテキストとして解析します。しかし、HTML 形式に従って解析し、対応するコンテンツを表示することが必要な場合があります。HTML 表示を解析したい場合は、v-html コマンドを使用できます。このコマンドの後には、多くの場合、文字列の HTML を解析してレンダリングする文字列型が続きます。

<body>
  <div id="app">
    <!-- 使用插值语法无法解析html代码片段 -->
    {
   
   {p}}
    <!-- 使用v-html指令可以解析代码片段 -->
    <div v-html="p"></div>
  </div>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        p:'<a href="https://www.baidu.com">百度一下</a>'
      }
    });
  </script>
</body>

結果は次のとおりです。

3. v-bind コマンド

要素の属性に二重中括弧構文を適用することはできません. この場合、v-bind コマンドを使用する必要があります.

v-bind ディレクティブは、コロンとして省略できます。

<body>
  <div id="app">
    <!-- 绑定变量 v-bind 或者 简写成: -->
    <div v-bind:title="title">hello vue</div>
    <div :title="title">hello world</div>
  </div>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        title: "我是一个标题"
      }
    });
  </script>
</body>

4. v-on コマンド

v-on を使用してイベントを現在の要素にバインドするか、短い形式の @ を使用できます。

<body>
  <div id="app">
    {
   
   {msg}}
    <!-- 绑定事件 v-on:事件名称="函数名(或者直接写js代码)"-->
    <button v-on:click="update">点击我</button>
    <!-- 简写 @ -->
    <button @click="msg='我又被修改了'">点击我</button>
  </div>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        msg: "hello vue"
      },
      methods:{
        update(){
          this.msg = '我被修改了'
        }
      }
    });
  </script>
</body>

5. 条件付きレンダリング

v-if (単独で使用可能)、式が true の場合、v-if 属性を使用して要素をレンダリングし、それ以外の場合は v-else を使用してレンダリングします。

v-show (css スタイルで表示属性を切り替える)、頻繁に css スタイルを切り替える、v-show を使用します。

v-if と v-for を一緒に使用することはお勧めしません。v-if と v-for を併用すると、v-for が v-if よりも優先されます。

v-if と v-show の違い:

v-ifは遅延 dom オーバーヘッドです. dom ノードは条件が満たされた場合にのみロードされ、条件が満たされない場合は dom 要素は直接レンダリングされません. 使用シナリオ: dom オーバーヘッドが少ない場合に使用されます。

v-show は、条件が満たされたときに要素を表示し、条件が満たされていないときに display:none を呼び出して要素を非表示にしますが、条件が満たされているかどうかに関係なく dom 要素を読み込みます。使用シナリオ: CSS スタイルを頻繁に切り替える必要がある場合に使用します。

<body>
  <div id="app">
    <!-- 条件渲染 v-if v-else-if v-else v-show-->
    <div v-if="type==='email'">
      <form>
        <input type="text" placeholder="请输入邮箱">
      </form>
    </div>
    <div v-else-if="type==='telephone'">
      <form>
        <input type="text" placeholder="请输入电话">
      </form>
    </div>
    <div v-else>错误</div>
    <div v-show="isShow">我是一个div</div>
  </div>
  <script>
    new Vue({
      el: "#app",
      data: {
        type: "telephone",
        isShow: false
      }
    })
  </script>
</body>

6. リストレンダリング v-for

v-for は、リストデータをレンダリングするために使用されます。v-for ディレクティブには、items 内のフォーム item の特別な構文が必要です。ここで、items はソースデータ配列であり、item は反復される配列要素のエイリアスです。

キー属性

v-for を使用する場合、対応する要素またはコンポーネントに :key 属性を追加する必要があります。

なぜこのキー属性が必要なのですか?

これは、実際には Vue の仮想 DOM の Diff アルゴリズムに関連しています。

レイヤー内に同じノード、つまりリストノードが多数ある場合、新しいノードを挿入したい

B と C の間に F を追加できるといいのですが、Diff アルゴリズムはデフォルトでこのように実行されます。
つまり、C を F に、D を C に、E を D に更新し、最後に E を挿入するというのは、非常に非効率的ではないでしょうか。

したがって、キーを使用して各ノードを一意に識別する必要があります

Diff アルゴリズムはこのノードを正しく識別できます
新しいノードを挿入する正しいロケーションエリアを見つけます。

つまり、キーの機能は主に仮想 DOM を効率的に更新することです。

<body>
  <div id="app">
    <!-- 列表渲染数组 -->
    <ul>
      <li v-for="(item,index) in animal" :key="item">{
   
   {item}}--{
   
   {index}}</li>
    </ul>
    <!--列表渲染对象 -->
    <ul>
      <li v-for="(key,value,index) in obj" :key="index">{
   
   {key}}--{
   
   {value}}--{
   
   {index}}</li>
    </ul>
  </div>
  <script>
    new Vue({
      el: "#app",
      data: {
        animal: ['老虎', '猴子', '狮子'],
        obj: {
          name: 'zhangsan',
          age: 18
        }
      }
    })
  </script>
</body>

7. スタイルバインディングとクラスバインディング

要素のクラスリストとインラインスタイルを操作することは、データバインディングの一般的な要件です。これらはすべて属性であるため、v-bind を使用してそれらを処理できます。式から文字列の結果を計算するだけです。ただし、文字列の連結は面倒で、エラーが発生しやすくなります。そのため、Vue はクラスとスタイルに v-bind を使用する際に特別な拡張を行いました。式の結果の型は、文字列に加えて、オブジェクトまたは配列にすることができます。

<style>
	.red{
		color:red;
	}
	.color{
		font-size: 18px;
		background-color: pink;
	}
</style>
<body>
	<div id="app">
        <!-- 动态绑定style -->
		<div :style="{color:currentColor}">我是一个div</div>
		<div :style="styleObj1">我是第二个div</div>
		<div :style="[styleObj1,styleObj2]"> 我是第三个div</div>
		<!-- 动态绑定类名 -->
		<div :class="{red:true}">我是第四个div</div>
		<div :class="{red:false,color:true}">我是第五个div</div>
		<div :class="[{red:true},{color:false}]">我是第六个div</div>
	</div>
	<script>
		new Vue({
			el:"#app",
			data:{
				currentColor:'red',
				styleObj1:{
					fontSize:'18px',
					backgroundColor:'blue'
				},
				styleObj2:{
					backgroundColor:'red'
				}
			}
		})
	</script>
</body>

Vue に基づくテンプレート構文の紹介