Vue学习分享1（条件与循环v-if/v-for）

1. 基础

• 引入vue

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

• if条件判断v-if

<div id="app1">
	<p v-if="seen">hello</p>
</div>

var app1=new Vue({
	el:app1,
	data:{
		seen:true
}
})

此时hello是现实的，在控制台输入app1.seen=false时消息回隐藏

• for循环v-for

<div id="app" >
					<ol>
						<li v-for="todo in todos">
							{{todo.text}}
						</li>
					</ol>
</div>

var app = new Vue({
			el: '#app',
			data: {
			todos: [
				{text:'aaa'},
				{text:'bbb'},
				{text:'ccc'},
			]
			}
			})

运行结果

• 监听事件v-on。。。。。。。。（v-once）

<div id="qwe">
			asdasd
		</div>
		<div id="app-5">
			<p>{{ message }}</p>//此处如果添加v-once，message只能被复制一次，此后message将不会生效
			<button v-on:click="res">逆转消息</button>
		</div>

var app5 = new Vue({
				el: '#app-5',
				data: {
					message: 'Hello Vue.js!'
				},
				methods: {
					res: function () {
						document.getElementById("qwe").style.backgroundColor="red"
					}
				}
			})

运行结果

• v-model
• <div id="app"> <p>{{message}}</p> <input v-model="aas"/> </div>

var app = new Vue({
				el:'#app',
				data:{
					message:'666',
					aas:'333'
				}
			})

运行结果

• 自定义组件（v-bind/Vue.component）

<div id="app">
			<ol>
				<zmz v-for="item in list"
					 v-bind:todo = "item">
					 
				</zmz>
			</ol>
		</div>

Vue.component("zmz",{
				props:['todo'],
				template:'<li>{{todo.text}}</li>'}
				);
			var app = new Vue({
				el:'#app',
				data:{
					list:[
						{id:0,text:'我'},
						{id:1,text:'很'},
						{id:2,text:'鸡冻'}
					]
				}
			})

运行结果：

2. 实例

• 数据与方法

var vm = new Vue({
				el:'qwe',
				data:data
			})
			vm.$data===data//true
			vm.$el===document.getElementById("qwe")//true