vue json對象轉數組_年薪百萬之路--第六十七天 Vue入門

1.1 vue.js庫的下載下傳

vue.js是目前前端web開發最流行的工具庫，由尤雨溪在2014年2月釋出的。

另外幾個常見的工具庫：react.js /angular.js/jQuery

官方網站：

中文：Vue.js

英文：Vue.js

官方文檔：https://cn.vuejs.org/v2/guide/

vue.js目前有1.x、2.x和3.x 版本，我們學習2.x版本的。

1.2 vue.js庫的基本使用

1. vue的使用要從建立Vue對象開始
   var vm = new Vue();
   
2. 建立vue對象的時候，需要傳遞參數，是json對象，json對象對象必須至少有兩個屬性成員
   var vm = new Vue({
         el:"#app",
	 	 data: {
             資料變量:"變量值",
             資料變量:"變量值",
             資料變量:"變量值",
     	 },
   });
   
   el:設定vue可以操作的html内容範圍，值一般就是css的id選擇器。
   data: 儲存vue.js中要顯示到html頁面的資料。
   
3. vue.js要控制器的内容範圍，必須先通過id來設定。
  <div id="app">
      <h1>{{message}}</h1>
      <p>{{message}}</p>
  </div>

1.3 vue.js的M-V-VM思想

MVVM 是Model-View-ViewModel 的縮寫，它是一種基于前端開發的架構模式。

`Model` 指代的就是vue對象的data屬性裡面的資料。這裡的資料要顯示到頁面中。

`View` 指代的就是vue中資料要顯示的HTML頁面，在vue中，也稱之為“視圖模闆” 。

`ViewModel ` 指代的是vue.js中我們編寫代碼時的vm對象了，它是vue.js的核心，負責連接配接 View 和 Model，保證視圖和資料的一緻性，是以前面代碼中，data裡面的資料被顯示中p标簽中就是vm對象自動完成的。

在浏覽器中可以在 console.log通過 vm對象可以直接通路el和data屬性,甚至可以通路data裡面的資料

console.log(vm.$el)     # #box  vm對象可以控制的範圍
console.log(vm.$data);  # vm對象要顯示到頁面中的資料
console.log(vm.$data.message);  # 通路data裡面的資料
console.log(vm.message);# 這個 message就是data裡面聲明的資料,也可以使用 vm.變量名顯示其他資料,message隻是舉例.

1.4 顯示資料

1. 如果要輸出data裡面的資料作為普通标簽的内容，需要使用{{  }}
   用法：
      vue對象的data屬性：
          data:{
            name:"小明",
          }
      标簽元素：
      		<h1>{{ name }}</h1>
雙花括号僅用輸出文本内容,如果要輸出html代碼,則不能使用這個.要使用v-html來輸出.

v-html必須在html标簽裡面作為屬性寫出來.
________________________
<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div class="app">
        <h1>{{title}}</h1>
        <h3>{{url1}}</h3>
        {{img}}<br>
        <span v-html="img"></span>
    </div>
    <script>
        let vm = new Vue({
            el:".app",
            data:{
                title:"我的vue",
                url1:"我的收獲位址",
                img:'<img src="images/shendan.png">',
            }
        })
    </script>
</body>
</html>
__________________
2. 如果要輸出data裡面的資料作為表單元素的值，需要使用vue.js提供的元素屬性v-model
   用法：
      vue對象的data屬性：
          data:{
            name:"小明",
          }
      表單元素：
      		<input v-model="name">
      
   使用v-model把data裡面的資料顯示到表單元素以後，一旦使用者修改表單元素的值，則data裡面對應資料的值也會随之發生改變，甚至，頁面中凡是使用了這個資料都會發生變化。

v-model或者v-html等vue提供的屬性，或者 {{}} 都支援js代碼。

支援js的運算符-->
    <h1>{{num1+3}}</h1>
三元運算符的文法:
         判斷條件 ? 條件為true : 條件為false的結果

        python 三元表達式[三目運算符]的文法:
        a if 條件 else b
     -->
    <h1>num1和num2之間進行比較,最大值:{{ num2>num1?num2:num1 }}</h1>

常用指令

指令 (Directives) 是帶有“v-”字首的特殊屬性。每一個指令在vue中都有固定的作用。

在vue中，提供了很多指令，常用的有：v-if、v-model、v-for等等。

指令會在vm對象的data屬性的資料發生變化時，會同時改變元素中的其控制的内容或屬性。

因為vue的曆史版本原因，是以有一部分指令都有兩種寫法：


vue1.x寫法             vue2.x的寫法
v-html         ---->   v-html
{{ 普通文本 }}          {{普通文本}}
v-bind:屬性名   ---->   :屬性
v-on:事件名     ---->   @事件名

2.1 操作屬性

<标簽名 :标簽屬性="data屬性"></标簽名>

密碼顯隐

<div id="box">
    <a :href="url" target="_blank" rel="external nofollow" >百度</a>
   密碼:<input :type="type" v-model="password"><button @click="change">顯示密碼</button>
</div>

<script>
    var vm =new Vue({
        el: "#box",
        data:{
            url:"http://www.baidu.com",
            type:"password",
            password:""
        },
        methods:{
            change(){
                if(this.type=="password"){
                    this.type='text';
                }else{
                    this.type='password'
                }
            }
        }
    })

操作樣式

操作樣式，本質就是屬性操作，使用冒号：

<h1 :class="值">元素</h1>  值可以是字元串、對象、對象名、數組

标簽style樣式

格式1：值是json對象，對象寫在元素的:style屬性中
	 标簽元素：
		     <div :style="{color: activeColor, fontSize: fontSize + 'px' }"></div>
	 data資料如下：
         data: {
             activeColor: 'red',
             fontSize: 30
         }
格式2：值是對象變量名，對象在data中進行聲明
   标簽元素：
   			<div v-bind:style="styleObject"></div>
   data資料如下：
         data: {
            	styleObject: {
             		color: 'red',
             		fontSize: '13px'
			  			}
				 }

格式3：值是數組
  标簽元素：
				<div v-bind:style="[style1, style2]"></div>
	data資料如下：
				data: {
                     style1:{
                       color:"red"
                     },
                     style2:{
                       background:"yellow",
                       fontSize: "21px"
                     }
				}

2.2 事件綁定

1. 使用@事件名來進行事件的綁定
   文法：
      <h1 @click="num++">{{num}}</h1>

2. 綁定的事件的事件名，全部都是js的事件名：
   @submit   --->  onsubmit
   @focus    --->  onfocus
   @blur     --->  onblur
   @click    --->  onclick

2.3 條件渲染指令

vue中提供了兩個指令可以用于判斷是否要顯示元素，分别是v-if和v-show。

v-if

标簽元素：
      <!-- vue對象最終會把條件的結果變成布爾值 -->
			<h1 v-if="ok">Yes</h1>
  data資料：
  		data:{
      		ok:false    // true則是顯示，false是隐藏
      }

v-else

v-else指令來表示 v-if 的“else 塊”，v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面，否則它将不會被識别。

标簽元素：
			<h1 v-if="ok">Yes</h1>
			<h1 v-else>No</h1>
  data資料：
  		data:{
      		ok:false    // true則是顯示，false是隐藏
      }

v-else-if

可以出現多個v-else-if語句，但是v-else-if之前必須有一個v-if開頭。後面可以跟着v-else，也可以沒有。

标簽元素：
			<h1 v-if="num==1">num的值為1</h1>
			<h1 v-else-if="num==2">num的值為2</h1>
		  <h1 v-else>num的值是{{num}}</h1>
  data資料：
  		data:{
      		num:2
      }

v-show

用法和v-if大緻一樣，差別在于2點：

1. v-show後面不能v-else或者v-else-if

2. v-show隐藏元素時，使用的是display:none來隐藏的，而v-if是直接從HTML文檔中移除元素[ DOM操作中的remove ]

标簽元素：
			<h1 v-show="ok">Hello!</h1>
  data資料：
  		data:{
      		ok:false    // true則是顯示，false是隐藏
      }

清單渲染指令

在vue中，可以通過v-for指令可以将一組資料渲染到頁面中，資料可以是數組或者對象。

資料是數組：        
        <ul>
            <!--i是清單的每一個元素-->
            <li v-for="book in book_list">{{book.title}}</li>
        </ul>

        <ul>
            <!--i是清單的每一個元素，j是每個元素的下标-->
            <li v-for="(book, index) in book_list">第{{ index+1}}本圖書：{{book.title}}</li>
        </ul>


        <script> 
            var vm1 = new Vue({
                el:"#app",
                data:{
                    book_list:[
                        {"id":1,"title":"圖書名稱1","price":200},
                        {"id":2,"title":"圖書名稱2","price":200},
                        {"id":3,"title":"圖書名稱3","price":200},
                        {"id":4,"title":"圖書名稱4","price":200},
                    ]
                }
            })
        </script>

資料是對象：
        <ul>
            <!--i是每一個value值-->
            <li v-for="value in book">{{value}}</li>
        </ul>
        <ul>
            <!--i是每一個value值,j是每一個鍵名-->
            <li v-for="attr, value in book">{{attr}}:{{value}}</li>
        </ul>
        <script>
            var vm1 = new Vue({
                el:"#app",
                data:{
                    book: {
                        // "attr":"value"
                        "id":11,
                        "title":"圖書名稱1",
                        "price":200
                    },
                },
            })
        </script>

vue json對象轉數組_年薪百萬之路--第六十七天 Vue入門

繼續閱讀

vue json對象轉數組_分享：vue使用技巧和項目中遇到的問題

vue Mutation 必須是同步函數為什麼_為什麼vue元件中data必須用函數表達？

mobx中跟新了資料視圖沒變化_vue視圖不更新情況

vue delete删除json數組_複習之基于Vue響應式的更新資料的方法

vue 資料更新不及時_那些Vue開發遇到的坑---響應式系統 VUE·響應式原理那些VUE開發遇到的坑響應式系統

cad2020列印樣式放在哪個檔案夾_vue中引入elementUI,關于修改預設樣式的幾點總結...

vue 判斷同一數組内的值是否一直_分享一波最新的Vue實戰技巧

vue 判斷同一數組内的值是否一直_很多人不知道的 Vue 元件的隐藏知識點{{ title }}{{ title }}{{ title }}

vue json對象轉數組_vue元件間通信六種方式（完整版）"changeTitle">{{title}}

vue 往對象中添加鍵值對_淺談vue模闆文法與指令

qiankun 微前端_微前端方案 qiankun（實踐及總結）