vue初学文档

最新推荐文章于 2024-09-26 23:01:07 发布

孤城冰

最新推荐文章于 2024-09-26 23:01:07 发布

阅读量100

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/woyizhizaizhaoni/article/details/98752288

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title> vuejs learn</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!-- <script src="./script/vue.js"></script> -->
<style>
/*.class1{
  background: #444;
  color: #eee;
}*/
.class1{
    background:#AFEEEE;
    color:#FFC0CB
}
.classBorder{
	padding-left:10px;
}
</style>

</head>
<body>

	<h3>第一个page</h3>
	<div id="msg">
		<!--输出文字 -->
		<!--改变背景色 -->
		 <label for="r1">修改颜色</label>
		 <input type="checkbox" v-model="use" id="r1">
		 <br>
		 <div v-bind:class="{'class1':use}">
		 	class指令
		 </div>
		 <!--超链接 -->
		 <pre>
		 	<!-- <a v-bind:class="{'classBorder':borderCls}" v-bind:href="url">菜鸟教程 vuejs</a> -->
		 	<a :href="url">菜鸟教程 vuejs</a>  <!-- 缩写 -->
		 </pre>
		 	<!--隐藏页面变量不显示-->
		 	<p v-if='seen'>you cannot seem me</p>
	</div>
	<div id='watch-example'>
		<p>
			Ask a yes/no question:
			<input v-model='question'>
		</p>
		<p>{{answer}}</p>
	</div>
	 <div id='login'>
		<!--页面输入框-->
		<p>账号：<input v-model='username' placeholder="账号"></p>
        <p>密码：<input type='password' v-model='password' placeholder="密码"></p>
        
		<!--页面按钮-->
		<!-- <button v-on:click='confirm'>登入</button> -->
		<button @click="confirm">登入</button><br> <!-- 缩写 -->
		<p>{{showMsg}}</p>

	</div>
	<!--<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm loginFrom">
 <h1 style="font-size: 1.5rem;color: #fff;font-weight: bold;padding: 1rem 0;">登陆</h1>
 <el-form-item >
   <el-input placeholder="账号"  v-model="ruleForm.userName"></el-input>
 </el-form-item>
 <el-form-item>
   <el-input  type="password" v-model="ruleForm.password" placeholder="密码"></el-input>
 </el-form-item>
 <div style="padding: 1rem 0 2rem 0;" class="clear">
   <span class="lf" style="color:#0489cc;">帮助</span>
   <div class="rt">
     <el-checkbox v-model="checked" style="color:#a0a0a0;">一周内自动登录</el-checkbox>
     <span @click="clearCookie" style="cursor: pointer;color: #f19149;font-size: 0.75rem;margin-left: 5px;">忘记密码？</span>
   </div>
  </div>
  <el-button type="primary" @click="submitForm('ru
  leForm')" style="width: 100%;">登陆</el-button>
</el-form>-->
	<script>
		new Vue({
			el:"#msg",
			data:{
				message:'Hello vue.js',
				use:false,
				url:'https://www.runoob.com/vue2/vue-tutorial.html',
				borderCls:true,
				seen:true				
			}
		})
		var watchExampleVM=new Vue({
			el:'#watch-example',
			data:{
				question:'',
				answer:'I cannot give you an answer until you ask a question!'
			},
			watch:{
				// 如果 `question` 发生改变，这个函数就会运行
				question:function(newQuestion,oldQuestion){
					this.answer='waiting for you to stop typeing...'
					this.debouncedGetAnswer()
				}
			},
			created:function(){
				// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
    			// 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
    			// AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
    			// `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
    			// 请参考：https://lodash.com/docs#debounce
    			this.debouncedGetAnswer=_.debounce(this.getAnswer,500)
			},
			methods:{
				getAnswer:function(){
					if(this.question.indexOf('?')===-1){
						this.answer='Questions usually contain a question mark. ;-)'
						return;
					}
					this.answer='Thinking...'
					var vm=this
					axios.get('https://yesno.wtf/api').then(function(response){
						vm.answer=_.capitalize(response.data.answer)
					})
					.catch(function (error) {
          			vm.answer = 'Error! Could not reach the API. ' + error
        			})
				}
			}
		})
		var login=new Vue({
			el:'#login',
			data:{
				username:'',
				password:'',
				showMsg:''
			},
			methods:{
				confirm:function(){
                    if(this.username!=""){
                    	this.showMsg=this.username+"登入成功"
                    	return 
                    }
				}
			}
		})
	</script>
	
</body>
</html>