VUE 快速複習筆記適合已經大概學習過的同學快速複習

雖然之前在vue官網學習過，但是發現才半年不用，就有點生疏了，所以現在打算記錄一下已備不時之需。

1.el掛載點

<body>
	<div id="app1" class="app1">
	{{ message + '!'}}  {{name}} {{age}}歲
	<h2 v-text="message+'!'"></h2>           //<v-text>替換指定部分
	</div>
	
	<script type="text/javascript">
		var stu = {	
					"message": 'Hello Vue!',
					"name" : "豬豬俠",
					"age" : "10",
				   }
		var myfristapp = new Vue({
			el: '#app1',     //el掛載id用#號，class用.號   *vue不能掛載到body和html標籤上
			data: stu,		//data只生效於掛載後的標籤的作用域
		});
	
		myfristapp.age = 7;
		myfristapp.$watch('age',function(oval,nval){   //添加觀察
			console.log(oval,nval); 
		})
		myfristapp.age = 20;
		
	</script>
</body>

2.vue指令：
2.1
v-text
v-html
v-bind ：設置元素的屬性

<body>
<div id="app">
	{{msg}}
	<p>Using mustaches: {{ rawHtml }}</p>
	<p v-html="rawHtml"></p>
	<div v-bind:class="color">test...</div>    
	<p>{{ number + 1 }}</p>				//number需要在data中聲明
	<p>{{ 1 == 1 ? 'YES' : 'NO' }}</p>
	<p>{{ message.split('').reverse().join('') }}</p>		//js代碼
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		msg : "hi vue",
		rawHtml : '<span style="color:red">this is should be red</span>',
		color:'blue',
		number : 10,
		ok : 1,
		message : "vue"
	}
});
vm.msg = "hi....";
</script>
<style type="text/css">
.red{color:red;}
.blue{color:blue; font-size:100px;}
</style>
</body>

運行結果：

2.2
事件綁定 v-on == @ ,
如 v-on:mousedown=“func1” 相當於 @ mousedown==“fun1”
也可以通過鍵盤事件@keyup.enter=“fun1” 訪問，其中enter表示回車鍵，當然還可以換成其他鍵

VUE有一個類似於jetpack的databinding的特點，底層數據變化會自動改變被掛載的標籤中的響應的數據，如下面的豬，每點擊一次click me，底層數據豬+1，同時視圖中的豬也+1.

<body>
<div id="app">
	<p v-if="seen">現在你看到我了</p>
	<a v-bind:href="url">...</a>
	<div @click.stop="click2">
		click me:
		{{food}}
	</div>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		seen : false,
		food : "豬",
		url : "https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4"
	},
	methods:{
		click2 : function () {
			this.food += "豬";
		}
	}
});
</script>
</body>

效果：

2.3
v-show 根據表達式的真假判斷元素是否隱藏和出現（應用廣泛：廣告、遮罩等等）

  <body>
    <div id="app">
      <input type="button" value="累加年齡" @click="addAge">
      <img v-show="isShow" src="./img/xxx.gif" alt="">
      <img v-show="age>=18" src="./img/xxx.gif" alt="">
    </div>
    <script>
      var app = new Vue({
        el:"#app",
        data:{
          isShow:false,
          age:17
        },
        methods: {
          changeIsShow:function(){
            this.isShow = !this.isShow;
          },
          addAge:function(){
            this.age++;
          }
        },
      })
    </script>
  </body>

2.4
v-if 、v-else-if

<body>
<div id="app">
	<div v-if="type === 'A'">
	  A
	</div>
	<div v-else-if="type === 'B'">
	  B
	</div>
	<div v-else-if="type === 'C'">
	  C
	</div>
	<div v-else>
	  Not A/B/C
	</div>
	<h1 v-show="ok">Hello!</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		type : "B",
		ok : false
	}
});
</script>
</body>

2.5
v-for
循環數組使用：
data：{
    arr:[1,2,3,4,5]
}
v-for=“item in arr”    其中arr是要遍歷的數組名，in是關鍵字，item是你自己定義的，類似於java的foreach方法
v-for=“item，index in arr”    index是數組的下標，也是自己定義的。
下面給一個稍微複雜一點的數組來處理一下

<body>
<div id="app">
	<ul>
		<li v-for="orderitem, key in orderlist">
			{{key}} : 
			<br/>{{ orderitem.orderid }}
			<br/>{{ orderitem.userid }}
			<br/>{{ orderitem.userName }}
			<br/>{{ orderitem.userAddress }}
			<br/>{{ orderitem.userPhone }}
			<ul>
				<li v-for="goods in orderitem.goodsInfo">
					{{ goods.goodsimg }}
					{{ goods.goodscolor}}<br/>
					{{ goods.goodsprice}}<br/>
					{{ goods.goodsid}}<br/>
					{{ goods.goodssum}}<br/>
				</li>
			</ul>
			<br/>{{ orderitem.orderPrice }}
			<br/>{{ orderitem.orderStatus }}
		</li>
	</ul>
	<ul>

	</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		orderlist : [
				{
					"orderid": "t001_2019-12-31-08-46-11",
					"userid": "t001",
					"userName": "殷x偉",
					"userAddress": "xxxxx市",
					"userPhone": "172xxxx3658",
					"goodsInfo": [{
						"goodsimg": "images/goodsImg/x002.jpg",
						"goodscolor": "藍色",
						"goodsprice": "399",
						"goodsid": "x002",
						"goodssum": "1596",
						"goodsname": "宴會高跟鞋",
						"goodssize": "S",
						"goodsnum": "4"
					}],
					"orderPrice": "1596",
					"orderStatus": "未支付"
				}, {
					"orderid": "t001_2019-12-31-08-45-24",
					"userid": "t001",
					"userName": "殷x偉",
					"userAddress": "xxxxx市",
					"userPhone": "172xxxx3658",
					"goodsInfo": [{
						"goodsimg": "images/goodsImg/b006.jpg",
						"goodscolor": "藍色",
						"goodsprice": "499",
						"goodsid": "b006",
						"goodssum": "8483",
						"goodsname": "超迷你鏈條單肩包",
						"goodssize": "S",
						"goodsnum": "17"
					}, {
						"goodsimg": "images/goodsImg/x005.jpg",
						"goodscolor": "紅色",
						"goodsprice": "1099",
						"goodsid": "x005",
						"goodssum": "4396",
						"goodsname": "高跟鞋",
						"goodssize": "M",
						"goodsnum": "4"
					}, {
						"goodsimg": "images/goodsImg/y006.jpg",
						"goodscolor": "黑色",
						"goodsprice": "13999",
						"goodsid": "y006",
						"goodssum": "41997",
						"goodsname": "時尚女子大衣",
						"goodssize": "XL",
						"goodsnum": "3"
					}],
					"orderPrice": "54876",
					"orderStatus": "已收貨"
				}
		],
	}
});
</script>
</body>

結果：

同理v-for可以在對數組進行修改的時候同步對視圖進行修改（響應式的）

<body>
    <div id="app">
        <input type="button" value="添加數據" @click="add">
        <input type="button" value="移除數據" @click="remove">

        <ul>
            <li v-for="(it,index) in arr">
                {{ index+1 }}校區:{{ it }}
            </li>
        </ul>
        <h2 v-for="item in vegetables" v-bind:title="item.name">
            {{ item.name }}
        </h2>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                arr:["北京","上海","廣州","深圳"],
                vegetables:[
                    {name:"西蘭花炒蛋"},
                    {name:"蛋炒西藍花"}
                ]
            },
            methods: {
                add:function(){
                    this.vegetables.push({ name:"花菜炒蛋" });  //向數組添加數據
                },
                remove:function(){
                    this.vegetables.shift();			//移出數組數據
                }
            },
        })
    </script>
</body>

結果：

2.7
v-model數據雙向綁定，即視圖數據的改變會引起vue底層數據的改變，底層數據的改變也會引起視圖數據的改變，這是前後端分離的重要表現，即前端和後端看做兩個互不相干擾的程序，只是需要交互時，才進行交互。


<body>
    <div id="app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{ message }}</h2>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"輸入試試"
            },
            methods: {
                getM:function(){
                    alert(this.message);
                },
                setM:function(){
                    this.message ="小笨豬";
                }
            },
        })
    </script>
</body>

結果：

小節到這裏vue的本地應用複習的查不多了：
看一個綜合實現，實現一個多功能記事本，用VUE的話很簡單
https://www.bilibili.com/video/BV12J411m7MG?p=18
3.0 網絡應用
3.1 axios 網絡請求庫（內部封裝ajax）
用於結合網絡數據開發應用，如接受外部api開發應用等。
先看一下格式：

第一句是引入axios，
第二句是使用get方式獲取數據，括號中的是get參數，then中的第一個function是成功通信的回調函數，第二個function是通信失敗時的回調函數
第三句是使用post方式獲取數據，傳遞參數使用的數對象的形式，其他的都與get一樣
（是不是感覺和jquery的ajax很像…，get方式的參數真的是夠言簡意賅了…）
例：

    <!-- 官網提供的 axios 在線地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        /*
            接口1:隨機笑話
            請求地址:https://autumnfish.cn/api/joke/list
            請求方法:get
            請求參數:num(笑話條數,數字)
            響應內容:隨機笑話
        */
        document.querySelector(".get").onclick = function () {
            axios.get("https://autumnfish.cn/api/joke/list?num=6") //?num=6是參數，代表請求的效果數
            .then(function (response) {
                console.log(response);
              },function(err){
                  console.log(err);
              })
        }
        /*
             接口2:用戶註冊
             請求地址:https://autumnfish.cn/api/user/reg
             請求方法:post
             請求參數:username(用戶名,字符串)
             響應內容:註冊成功或失敗
         */
        document.querySelector(".post").onclick = function () {
			 //{username:"小笨豬"}是參數，代表要接入的用戶 *post方法傳遞的參數必須是對象形式
            axios.post("https://autumnfish.cn/api/user/reg",{username:"小笨豬"})
            .then(function(response){
                console.log(response);
                console.log(this.skill);
            },function (err) {
                console.log(err);
              })
          }

    </script>
</body>

結果：

3.1
在vue中使用axios
首先需要注意幾點：

代碼：

<body>
    <div id="app">
        <input type="button" value="獲取笑話" @click="getJoke">
        <p> {{ joke }}</p>
    </div>
    <!-- 官網提供的 axios 在線地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 開發環境版本，包含了有幫助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        /*
            接口:隨機獲取一條笑話
            請求地址:https://autumnfish.cn/api/joke
            請求方法:get
            請求參數:無
            響應內容:隨機笑話
        */
        var app = new Vue({
            el:"#app",
            data:{
                joke:"很好笑的笑話"
            },
            methods: {
                getJoke:function(){
                    // console.log(this.joke);
					//將外部this佔存爲that
                    var that = this;
                    axios.get("https://autumnfish.cn/api/joke").then(function(response){
                        // console.log(response)
                        console.log(response.data);
                        // console.log(this.joke);
                        that.joke = response.data;
                    },function (err) {  })
                }
            },
        })

    </script>
</body>

結果：

好了，vue複習到這裏就可以了，基本能解決90%的問題了，畢竟vue是個輕量級前端框架，更多的邏輯操作還是要交給後端或者node.js來處理

VUE 快速複習筆記適合已經大概學習過的同學快速複習

【面試準備】又一次失敗的面試經歷，題目離譜～資深軟件測試工程師

dotnet 8 版本與銀河麒麟V10和UOS系統的 glibc 兼容性

Android studio 4.0 .gitignore配置模板

java計算工具類：中綴表達式轉波蘭後綴式並計算出結果

VUE 快速複習筆記適合已經大概學習過的同學快速複習

Jetpack: ViewModle + SharedPreferences實現保存數據的簡單思路

Vue 項目中的ESLint規則模板

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結