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 快速复习笔记适合已经大概学习过的同学快速复习

Spring Cloud 部署时如何使用 Kubernetes 作为注册中心和配置中心

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以太網驅動總結