jsp页面使用引入Vue语法

jsp页面使用引入Vue语法

1. 在你的jsp 或者html页面引入 vue

	<script type="text/javascript" src="${resource_path}/resource/js/axios.min.js"></script>   
   <script type="text/javascript" src="${resource_path}/resource/js/vue.min.js"></script>

2. 在需要引入使用vue的 div引入 id

<div id="apps" class="menu-item" style=" padding-top: 0;"> 
			 				<div id="videoCloudMeeting" @click="setUpMeetingRoom" class="menu-item icon-account bg-light-red">视频云会议</div>
</div>

注意 这个id js页面会用到

1. 在项目 里编写对应的js文件

以下面代码为例 el ：后面的 #apps 就是上面的 div后面的id 文件名：firstjs.js

new Vue({
	el:"#apps",
	data(){
		return {
			 appId: "beb7da4ced7c42a085c3c99697f9aa42",
		        secretKey: "beb7da4ced7c42a085c3c99697f9aa42",
		        uid: "",
		        userInfo: {},
		        meetingUserData: {},
		        meetingRoomData: {},
		        http:axios
		}
	},
	mounted(){
		// console.log('mounted=======================================================')
	},
	 methods: {
	     async getAccountData(){
	    	 this.userInfo={
	  	           account:window.username,
	  	           pwd:window.password
	  	         }
	      },
	      // 登录视频功能
	      async loginVideo () {
	        if (Object.keys(this.userInfo).length < 1) {
	          await  this.getAccountData();
	        }
	        await  this.http.get('http:/xxxxxxxx/api/v3/user/login',
	          {
	            params: {
	              appId:this.appId,
	              secretKey:this.secretKey,
	              type:1,
	              ...(this.userInfo)
	            }
	          }

	           ).then(res=>{

	          console.log("xxxx");
	        }).catch(err=>{
	        })


	      },
	      // 创建会议室
	      async setUpMeetingRoom () {
	       
	        if (Object.keys(this.meetingUserData).length < 1) {
	          await  this.loginVideo();
	        }
	        this.http.get("http://xxxxxxxx/api/v3/conference/create",
	          {
	            params:{
	              xxx: this.appId
	            }
	          }
	          ).then(res=>{
			 this.invitationMeetingRoom();
	        });
	      },
	      //   注意下面的  反引号 如果改单引号  会导致数据获取不到  --同事改了 发现的问题
	      invitationMeetingRoom () {
	    	  let openUrl=`www.baidu.com?access_token=${this.xxx.xx}&xx=${this.xx}&xx=paassdkdemopc1&xx=xxx&xx=0&xxx=0&xxx=${this.xx.xx}`
	    	  console.log(openUrl)
	    		  window.open(openUrl)
	      }
	    }
})

4. 最后记得 在jsp最后引入 js文件

<script type="text/javascript" src="${resource_path}/resource/js/firstjs.js"></script>