Vue (获取 .env.development的值)

<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body><div id="qyc">{{message}}</div></body><!-- import Vue be

Turing·

6681人浏览 · 2020-06-30 19:10:11

Turing· · 2020-06-30 19:10:11 发布

取值：在vue的data里获取

api: process.env.VUE_APP_BASE_API

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
</head>
<body>

  
  <div id="qyc">
	  {{message}}
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> -->
  <!-- 简单实例 -->
  <script>
	  new Vue({
	  	el:"#qyc",
		data:{
			message:'你好强月城'
		}
	  })
	  
  </script>
</html>

单向绑定双向绑定

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
</head>
<body>

  <div id="qyc">
	  <input type="text" v-bind:value="searchMap.keyWord"/>
	  <input type="text" v-model="searchMap.keyWord" />
	  <p>{{searchMap.keyWord}}</p>
  </div>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> -->

  <script>
	  new Vue({
	  	el:"#qyc",
		data:{
			searchMap:{
				keyWord:'强月城'
			}
		}
	  })
  </script>
  </body>
</html>

绑定事件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
</head>
<body>

  <div id="qyc">
	  <input type="text" v-model="result" />
	  <button v-on:click="showDate()">显示时间</button>
	  <!-- <button @click="showDate()">显示时间</button> -->
	  <p>{{message}}</p>
	  <p>{{result}}</p>
  </div>
  <!-- import Vue before Element -->
  <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

  <script>
	  new Vue({
	  	el:"#qyc",
		data:{
			message: '时间s',
			result: {}
		},
		methods:{
			showDate(){
				console.log("输出")
				this.result = this.message
			}
		}
	  })
  </script>
  </body>
</html>

提交submit

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
</head>
<body>

  <div id="qyc">
	  <form action="" v-on:submit.prevent="sub()">
		  <input type="text" id="name" v-model="user.username" />
		  <button type="submit" >提交</button>
	  </form>
  </div>
  <!-- import Vue before Element -->
  <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>


  <script>
	  new Vue({
	  	el:"#qyc",
		data:{
			user:{
				username:'强月城'
			}
		},
		methods:{
			sub(){
				if(this.user.username){
					console.log('提交')
				} else{
					alert('不能为空')
			}
		}
		}
	  })
  </script>
  </body>
</html>

判断

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
</head>
<body>

  <div id="qyc">
	 <input type="checkbox" v-model="ok"/>是否同意
	 <p v-if="ok">同意</p>
	 <p v-else>不同意</p>
  </div>
  <!-- import Vue before Element -->
  <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>


  <script>
	  new Vue({
	  	el:"#qyc",
		data:{
			ok:false
		}
	  })
  </script>
  </body>
</html>

循环

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
</head>
<body>

  <div id="qyc">
	 <table>
		<tr v-for="user in userList">
			<td>{{user.id}}</td>
			<td>{{user.name}}</td>
			<td>{{user.age}}</td>
		</tr>
	 </table>
  </div>
  <!-- import Vue before Element -->
  <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>


  <script>
	  new Vue({
	  	el:"#qyc",
		data:{
			userList:[
				{id:1,name:'a',age:11},
				{id:2,name:'b',age:22},
				{id:3,name:'c',age:33}
			]
		}
	  })
  </script>
  </body>
</html>

组件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
</head>
<body>

  <div id="qyc">
	<zuj></zuj>
  </div>
  <!-- import Vue before Element -->
  <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>


  <script>
	  new Vue({
	  	el:"#qyc",

		components:{
			'zuj':{
				template:'<ul><li>首页</li><li>管理</li></ul>'
			}
		}
	  })
  </script>
  </body>
</html>

全局

Vue.component('zuj',{
	template:'<ul><li>首页</li><li>管理</li></ul>'
})

axios

{
			"userList":[
				{"id":1,"name":"a","age":11},
				{"id":2,"name":"b","age":22},
				{"id":3,"name":"c","age":33}
			]
		}

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
</head>
<body>

  <div id="qyc">
	 <table>
		<tr v-for="user in userList">
			<td>{{user.id}}</td>
			<td>{{user.name}}</td>
			<td>{{user.age}}</td>
		</tr>
	 </table>
  </div>
  <!-- import Vue before Element -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  <script>
	  new Vue({
	  	el:"#qyc",
		data:{
			userList:[]
		},
		created() {  //页面渲染前执行
			this.getUserList()
		},
		methods:{
			getUserList(){
				axios.get("userJson.json").then(response =>{
					console.log("读取成功"+response.data)
					this.userList = response.data.userList
				}).cache(error =>{
					alert("失败")
				})
			}
		}
	  })
  </script>
  </body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^