Vuejs

最新推荐文章于 2019-08-24 12:51:09 发布

xiaomu_a

最新推荐文章于 2019-08-24 12:51:09 发布

阅读量518

点赞数 2

分类专栏： JavaWeb 文章标签： Vuejs

本文链接：https://blog.csdn.net/RookiexiaoMu_a/article/details/94025535

版权

JavaWeb 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1. 入门案例

创建vuejs-demo.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>快速入门</title>
	
</head>
<body>
	<!-- 第三步：定义视图，确定渲染的开始位置  -->
    <div id="app">
    	<!-- 第四步：查看数据是否渲染成功 -->
    </div>
    
    <!-- 第一步：引入vue.js库-->
    <script>
   		<!-- 第二步：初始化vuejs对象 -->
    </script>
</body>
</html>

引入vue.js文件

<script src="js/vuejs-2.5.16.js"></script>

定义Vuejs对象和数据

var app = new Vue({
    el:'#app', //表示当前vue对象接管了div区域
    data:{
    	message:'hello world' //注意不要写分号结尾
    }
});

定义视图渲染数据

<div id="app">
     {{message}}
 </div>

2. 插值表达式

语法(双大括号) ：{{}}
作用：数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。
支持+，-，*，/，%，等相关算数运算符
{{ number + 1 }}
{{ ok ? ‘YES’ : ‘NO’ }}
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

{{ var a = 1 }}

{{ if (ok) { return message } }}

注：{{}} 插值表达式是不能直接作用在属性上的。需要使用v-bind进行数据绑定

3. Vuejs中常用的内置指令(重点)

指令名称	描述	用法
v-on	事件绑定	v-on:事件 = “事件名” 缩写：@事件 = “事件名” 点击事件：click,dblclick,change,blur 键盘事件：keydown/keyupkeypress 鼠标事件：mousedown,mouseover,mousemove,mouseout
v-text/v-html	文本取值	<span v-text=“title”> 或者 <span v-html=“title”> 两者的区别是：v-text不支持标签解析，v-html支持标签解析。
v-bind	属性取值	v-bind:属性 = “属性值” 缩写：:属性 = “属性值” 解决在标签的属性上如何获取动态的数据值的问题。比如：<span v-bind:title=“title”> 或者<span :title=“title”>
v-model	获取form控件值	用于form表单控制元素值的相关获取和同步。
v-for	循环迭代	一般用于循环数组，对象和对象数组。
v-show/v-if/v-else	隐藏/显示	v-show：是控制元素display:none/block的切换。v-if：是逻辑判断，控制元素的存在与不存在。
v-pre	原样输出不解析	如果你不想解析插值表达式，原样输入可以使用v-pre
v-once	渲染一次	如果你想渲染一次，后面改变数据不会影响视图的变化，可以使用v-once。
v-cloak	解决网络延迟	往往在真实的场景中，插值表达式渲染会很慢，而造成插件表达式的外漏，可以借助v-cloak和[v-cloak]{display:none;}来解决这个问题

注：v-model 取值是双向的，即v-model的值发生改变，data中的数据也会发生改变,data中的数据发生改变，则v-model的值也会发生改变，而v-bind 属性取值是单向的，即v-bind的值发生改变，data中的数据不会发生改变

4. v-pre

如果不想渲染任何动态的部分或者插值部分，可以使用v-pre指令：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>v-if与v-show</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="flag">
    <span v-pre>
        <span v-if="flag < 1">我是大帅哥1</span>
        <span v-else-if="flag >= 1 && flag < 4">我是大帅哥2</span>
        <span v-else-if="flag >= 4 && flag <10">我是大帅哥3</span>
        <span v-else>我是普通人</span>
        {{flag}}
    </span>
</div>
<script>
    new Vue({
        el : '#app', //表示当前vue对象接管了div区域
        data : {
            flag : 1
        }
    });
</script>
</body>
</html>

效果：在这里插入图片描述

5. v-once

只渲染元素和组件一次。随后的重新渲染或者数据改变都不会在渲染和发生改变。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>v-if与v-show</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="flag">
    <span v-once>
        <span v-if="flag < 1">我是大帅哥1</span>
        <span v-else-if="flag >= 1 && flag < 4">我是大帅哥2</span>
        <span v-else-if="flag >= 4 && flag <10">我是大帅哥3</span>
        <span v-else>我是普通人</span>
        {{flag}}
    </span>
</div>
<script>


    var app = new Vue({
        el : '#app', //表示当前vue对象接管了div区域
        data : {
            flag : 1
        }
    });
</script>
</body>
</html>

6. Vuejs操作样式和class

实际开发中，对元素操作和控制样式或者class也是非常频繁的操作。vue对齐样式和class操作是通过v-bind来完成的。

class操作如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07-vue-class-style.html</title>
    <style>
        .ctitle{color:red;}
        .active{background:#eee;padding:20px;margin-top:10px;}
        .text-danger{font-weight: bold}
    </style>
</head>
<body>

    <!--定义vuejs管理渲染的范围-->
    <div id="app">

        <!-- 字符串的方式 -->
        <div class="ctitle" v-bind:class="'active'">{{title}}</div>
        <!-- 对象的方式 -->
        <div class="ctitle" v-bind:class="{'active':isActive}">{{title}}</div>
        <!-- 多个值和对象方式 -->
        <div class="ctitle" v-bind:class="{'active':isActive,'text-danger': hasError}">{{title}}</div>

        <!-- 数组的方式 -->
        <div class="ctitle" v-bind:class="[activeClass,errorClass]">{{title}}</div>
        <!-- 支持三目运算-->
        <div class="ctitle" v-bind:class="[isActive?activeClass:'',errorClass]">{{title}}</div>
    </div>

    <!-- 第二步：导入vue.js文件 -->
    <script src="js/vuejs-2.5.16.js"></script>
    <script>

          // 第三步：定义vuejs对象，开始进行视图和数据的渲染
          var app = new Vue({
              el:"#app",
              data:{
                  title:"Hello world!",
                  activeClass: 'active',
                  errorClass: 'text-danger',
                  hasError:true,
                  isActive:true  //我来控制样式是否加或者不加
              }
          }) ;

    </script>
</body>
</html>

style操作如下

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>07-vue-class-style.html</title>
    <style>
        .ctitle{background:#eee;
            padding: 20px;}
    </style>
</head>
<body>

    <!--定义vuejs管理渲染的范围-->
    <div id="app">
        <!-- 对象的方式 -->
        <div class="ctitle" v-bind:style="{'color':activeColor,'fontSize':fontSize+'px'}">{{title}}</div>
        <!-- 数组的方式 -->
        <div v-bind:style="[baseStyles, overridingStyles]">{{title}}</div>
    </div>

    <!-- 第二步：导入vue.js文件 -->
    <script src="js/vuejs-2.5.16.js"></script>
    <script>

          // 第三步：定义vuejs对象，开始进行视图和数据的渲染
          var app = new Vue({
              el:"#app",
              data:{
                  baseStyles:{
                    fontSize:"30px",
                    color:"green"
                  },
                  overridingStyles:{
                    background:"#eee",
                    marginTop:"10px",
                    padding:"20px"
                  },
                  title:"Hello world!",
                  activeColor: 'red',
                  fontSize: 30
              }
          }) ;

    </script>
</body>
</html>

7. Vuejs的生命周期(了解)

vue在生命周期中有这些状态：

beforeCreate,
created,
beforeMount,
mounted,
beforeUpdate,
updated,
beforeDestroy,
destroyed。

Vue在实例化的过程中，会调用这些生命周期的钩子，给我们提供了执行自定义逻辑的机会。那么，在这些vue钩子中，vue实例到底执行了那些操作。

例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>生命周期</title>
</head>
<body>
<div id="app">{{message}}</div>
<script src="js/vuejs-2.5.16.js"></script>
<script>
    var vm = new Vue({
        el : "#app",
        data : {
            message : 'hello world'
        },
        beforeCreate : function() {
            console.log(this);
            showData('创建vue实例前-beforeCreate', this);
        },
        created : function() {
            showData('创建vue实例后-created', this);
        },
        beforeMount : function() {
            showData('挂载到dom前-beforeMount', this);
        },
        mounted : function() {
            showData('挂载到dom后-mounted', this);
        },
        beforeUpdate : function() {
            showData('数据变化更新前-beforeUpdate', this);
        },
        updated : function() {
            showData('数据变化更新后-updated', this);
        },
        beforeDestroy : function() {
            vm.test = "3333";
            showData('vue实例销毁前-beforeDestroy', this);
        },
        destroyed : function() {
            showData('vue实例销毁后-destroyed', this);
        }
    });

    function realDom() {
        console.log('真实dom结构：' + document.getElementById('app').innerHTML);
    }

    function showData(process, obj) {
        console.log(process);
        console.log('data 数据：' + obj.message)
        console.log('挂载的对象：')
        console.log(obj.$el)
        realDom();
        console.log('------------------')
        console.log('------------------')
    }

    vm.message = "good...";
    vm.$destroy();
</script>
</body>
</html>

8. Vuejs中通过Axios完成异步请求

导入axios.js文件

<script src="/js/pagination.js"></script>

创建vue对象

// 创建vue对象
    var vue = new Vue({
        el: "#app",
        data: {
            ids: [],
            entity: {},
            searchEntity: {}
        }

axios.get请求传入一个json数据：
格式：url，{params: this.searchEntity}

// 分页查询全部品牌
search: function (page) {
    axios.get("/brand/findByPage?page=" + page, {params: this.searchEntity}).then(function (res) {
        console.log(res.data)
    }).catch(function (err) {
        console.log(err.data)
    });
}

post请求传入一个json
用法：url，this.entity

axios.post("/brand/" + url, this.entity).then(function (res) {
     if (res.data) {
            vue.search(1);
        } else {
            alert("操作失败!");
        }
    });

get请求传入一个数组
用法：url + this.ids

axios.get("/brand/del?ids=" + this.ids).then(function (res) {
	if (res.data) {
	        var page = vue.checked ? vue.page - 1 : vue.page;
	        if (page < 1) {
	            page = 1;
	        }
	        // 删除成功
	        vue.search(page);
	    }
	}).catch(function (err) {
	    alert("操作失败!")
	})

注意：
如果前端的content-type请求头使用application/json或者是application/xml,不加@RequestBody就无法映射到对应的bean中，默认的application/x-www-form-urlcoded就没有问题.
axios.post请求默认使用的Content-Type请求头是: application/json;charset=UTF-8（是一个json字符串）类型；
axios.get使用的是默认的Content-Type请求头是：application/x-www-form-urlcoded（也就是对象）；

9. vue自定义标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">
			
			<h1>
				{{date}}
			</h1>
			
			{{date | formatDate('yyyy-MM-dd')}}
			{{date | formatDate('yyyy/MM/dd')}}
			{{date | formatDate('MM-yyyy-dd')}}
			
			<span :title="date | formatDate('MM-yyyy-dd')"></span>
			
		</div>
		
		<script type="text/javascript" src="js/vuejs-2.5.16.js"></script>
		<script>
			
			Vue.filter("formatDate",function(value,fmt){
				return  formatDate(value,fmt);
			});
			
			Vue.filter("formatDate",function(value,fmt){
				return  formatDate(value,fmt);
			});
			
			Vue.filter("formatDate",function(value,fmt){
				return  formatDate(value,fmt);
			});
		
			
			var vue = new Vue({
				el:"#app",
				data:{date:"2100-12-12 12:12:12"},
				mounted:function(){
					
					
				}
			})
			
			function formatDate(date,fmt){
				var date = new Date(date.replace(/-/g,"/"));
				var o = {
				"M+": date.getMonth() + 1, //月份 
				"d+": date.getDate(), //日 
				"H+": date.getHours(), //小时 
				"m+": date.getMinutes(), //分 
				"s+": date.getSeconds(), //秒 
				"q+": Math.floor((date.getMonth() + 3) / 3), //季度 
				"S": date.getMilliseconds() //毫秒 
				};
				if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
				for (var k in o)
				if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
				return fmt;
			}
			
			console.log(formatDate("2100-12-12 12:12:12","yyyy-MM-dd"))
			console.log(formatDate("2100-12-12 12:12:12","MM/yyyy/dd"))
			console.log(formatDate("2100-12-12 12:12:12","MM/yyyy/dd HH:mm"))
			
		</script>
	</body>
</html>