# 【vue.js】vue起步练习

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hhhh</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app_1">
<h3>example 1</h3>
<p>{{message}}</p>
</div>


<div id="app_2">
<h3>example 2</h3>
<span v-bind:title="message">鼠标悬停查看动态绑定信息</span>
</div>


<div id="app_3">
<h3>example 3</h3>
<p v-if="message">条件语句(控制台输入app_3.message=false,则message内容消失)</p>
</div>


<div id="app_4">
<h3>example 4</h3>
<p>在控制台输入app_4.select.push({ text: 'coffee' }),添加选项</p>
<ol>
<li v-for="num in select">{{num.text}}</li>
</ol>
</div>


<div id="app_5">
<h3>example 5</h3>
<p>{{message}}</p>
<button v-on:click="reverseMessage">逆转</button>
</div>


<div id="app_6">
<h3>example 6</h3>
<p>{{message}}</p>
<input v-model="message">
</div>


<div id="app_7">
<h3>example 7</h3>


</div>


<script type="text/javascript">
var app_1 = new Vue({
	el:'#app_1',
    data:{
	message:'hello vue.js'
}
})
var app_2 = new Vue({
	el: '#app_2',
	data:{
		message:'页面加载时间:'+ new Date().toLocaleString()
	}
})


var app_3 = new Vue({
	el:'#app_3',
	data:{
		message:true
	}
})


var app_4= new Vue({
	el:'#app_4',
	data:{
		select:[
         {text:'apple'},
         {text:'banana'},
         {text:'orange'}
		]
	}
})


var app_5 = new Vue({
	el:'#app_5',
	data:{
		message:'hello'
	},
methods:{
	reverseMessage:function(){
		this.message=this.message.split('').reverse('').join('')
	}
}
})


var app_6 = new Vue({
	el:'#app_6',
    data:{
    	message:'hello vue.js'
    }
})


</script>
</body>
</html>

效果：

# 【vue.js】vue起步练习

after:

# 【vue.js】vue起步练习

---------------------------------------------------------------------------------------------------------------------------

PS: 以上案例均是来自vue.js官网，

小白日常小练习==