前端技术 vue 基础学习(1)

最新推荐文章于 2024-05-17 14:32:46 发布

江君是实在人

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量66

点赞数

分类专栏： vue 文章标签： vue.js 前端学习

本文链接：https://blog.csdn.net/jiangwudidebaba/article/details/125188471

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言:VUE 学习一下

<!DOCTYPE html>
<html lang="zh">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	 <link href="../css/style.css" rel="stylesheet"> </head>
<body>
    <div id="myApp"> {{ message10 }} </div>
	
	
	<div id="test1">
		{{msg}}
	</div>
	
	<div id='forTest'>
		<h1>循环遍历</h1>
		<ol>
			<li  v-for=" game in games">{{game.name}}||{{game.age}}</li>
		</ol>
	</div>
	<div id="dataBind">
		<h1>数据绑定</h1>
		<h3>{{test}}</h3>
		<input v-model="test" />
	</div>
	
	<div id="method">
		<h1>事件</h1>
		<button  v-on:click="clickTest('点击事件')">点击事件</button>
		<button  @click="clickTest('点击事件')">@+事件 触发</button>
		<button  @dblclick="clickTest('点击事件')">双击事件</button>
	</div>
	
	
	<div id="styleBind">
		<h1>绑定样式</h1>
		<div v-bind:class="{active:isActive}">红色文本1</div>
		<div :class="{active:isActive}">红色文本2</div>
		<button @click="btnClick">改变class吧</button>
		
	</div>
	
	<div id="dataJudge">
		<h1>数据判断</h1>
		<input v-model="grade" />
		<h3 v-if="grade > 60&& grade <80 ">及格</h3>
		<h3 v-else-if="grade > 80 && grade < 90">良好</h3>
		<h3 v-else-if="grade > 90 ">优良</h3>
	</div>

    <script>
	
	    // 数据判断
		
		var dataJudge = new Vue({
			
			el:"#dataJudge",
			data:{
				grade:"0"
			}
		})

		// 样式绑定
		var styleBind = new Vue({
		    el: '#styleBind',
		    data: {
		        isActive: true,
		    },
		    methods: {
		        btnClick: function(){
		            this.isActive = !this.isActive;
		        },
		    },
		});
		
		
	
		// 事件
		var method = new Vue({
			el:"#method",
			data:{
				clickData:"触发点击事件"
			},
			methods:{
				clickTest:function(data){
					alert(data);
					//this.clickData = data;
				}
			}
		})
		
	
		// 数据绑定
		var dataBind = new Vue({
			el:"#dataBind",
			data:{
				test:"数据绑定测试"
			}
			
		})
		
		// 循环遍历
		var forTest  = new Vue({
			el:"#forTest",
			data:{
				seen: false,
				games:[
					{name:'jiang',age:'28',job:"java dev"},
					{name:'jiang111',age:'29',job:'test'}
				]
			}
		})
		
		
        var myApp = new Vue({
            el: '#myApp'
            , data: {
                message10: 'Hello Vue.js World!'
            }
        });
		// 简单测试
		var test1 = new Vue({
			el:'#test1',
			data:{
				msg:'test1----'
			}
			
		})
    </script>
</body>

</html>

css

body {
    font-size: 24px;
}

button {
    width: 80px;
    height: 45px;
    font-size: 20px;
}

.active {
    color: red;
}

.big {
    font-weight: bolder;
    font-size: 64px;
}

.border1 {
    border: 1px solid gray;
}