Vue.js快速上手简单的例子

首先到官方网站下载vue.js:
官方下载网：https://vuejs.org/v2/guide/installation.html
而非教程官网：https://cn.vuejs.org/v2/guide/installation.html
Vue.js快速上手简单的例子
下载后直接用html做个简单的测试
将下面的代码copy，修改一下vue.js的路径就可以测试
测试一：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.js" ></script>
	</head>
	<body>
	<!--输入框关联-->
		<div id="app">
			<div>{{ message }}</div>
			<input v-model="message" />
			<div>{{test}}</div>
		</div>
	<!--标签获值方式-->
		<div id="test1">
			<p v-html="test1"></p>
			<p v-text="test2"></p>
			<p>{{test3}}</p>
		</div>
	<!--循环测试-->
		<div id="testFor">
			<ul v-for="obj in arr">
				<li v-text="obj.name"></li>
			</ul>
		</div>
	<!--渲染和隐藏-->
		<div id="testIf">
			<p v-if="isShow">123</p>
			<p v-show="isShow">456</p>
		</div>
	<!--点击事件绑定-->
		<div id="testBtn">
			<button v-on:click="doClick">点击测试一</button>
			<button @click="doClick">点击测试二</button>
		</div>
	<!--属性绑定-->
		<div id="testCla">
			<img v-bind:src="imageSrc" />
			<div :class="cla">测试属性绑定</div>
			<div :class="obj">测试属性绑定2</div>
			<button :disabled="true">测试不可点击</button>
		</div>
	</body>
	<style>
		.bg{background-color: red;}
		.border{}
		.round{border-radius: 8px;}
	</style>
	<script>
		new Vue({
			el:'#testCla',
			data:{
				imageSrc:"",
				cla:["bg","border","round"],
				obj:{
					bg:false,
					border:true,
					round:true
				}
			}
		})
		new Vue({
			el:'#testBtn',
			methods:{
				doClick:function(){
					console.log('点击事件')
				}
			}
		})
		new Vue({
			el:'#testIf',
			data:{
				isShow:false //true 为显示
			}
		})
		new Vue({
			el:'#testFor',
			data:{
				arr:[{name:'张三'},{name:'李四'},{name:'王五'}]
			}
		})
		new Vue({
			el: '#test1',
		   	data: {
		     	test1:'<a style="color:red;">666666</a>',
		     	test2:'内容测试',
		     	test3:'值测试'
		  	}
		})
		var app = new Vue({
		   	el: '#app',
		   	data: {
		     	message: 'Hello Vue!',
		     	test:'测试...'
		  	}
		})
	</script>
</html>

测试二：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<style>
		.cla {
			background: bisque;
			cursor: pointer;
		}
	</style>

	<body>
		<div id="app">
			<h1 v-text="title"></h1>
			<ul v-for="obj in arr">
				<li v-text="obj.name" v-bind:class="{cla:obj.bg}" v-on:click="testClick(obj)"></li>
			</ul>
			背景颜色：
			<input type="radio" v-model="fx" value="true" />有
			<input type="radio" v-model="fx" value="false" />无
			<input v-model="en" v-on:keyup.enter="upEnter" />
			<span>回车（enter）</span>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: {
				title: '测试中...',
				arr: [{
					name: '小明',
					bg: true
				}, {
					name: '小黑',
					bg: false
				}, {
					name: '小白',
					bg: true
				}],
				en: '',
				fx: 'true'
			},
			methods: {
				testClick: function(obj) {
					console.log(obj.name)
				},
				upEnter: function() {
					var fx;
					if(this.fx == 'true'){
						fx = true;
					}else{
						fx = false;
					}
					this.arr.push({
						name: '' + this.en,
						bg: fx
					})
					console.log('回车完成!' + this.en+" "+this.fx);
					this.en = '';
				}
			}
		})
	</script>

</html>

测试完后简单的基础就有个了解了

Vue.js快速上手简单的例子

相关推荐