尚医通学习笔记 Day4--前端Vue相关笔记v-bind/model/on/if/for指令

Vue的核心

Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统。
核心思想就是没有繁琐的DOM操作，例如在JQ中我们需要先找到div节点获取到DOM对象，然后进行一系列的节点操作

基本语法

1. 单项绑定（v-bind）

<div id="app">

	<div v-bind:style="msg">单项绑定</div>
	//也可以直接简写成:
	<div :style="msg">单项绑定</div>
  
  </div>
</div>
    
<script>
new Vue({
	el:'#app',
	data:{
		msg:'color:green'
	}
})
</script>

2. 双向绑定（v-model）
   指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

<div id="app">

	{{keyword}}
	<input type="text" :value="keyword">
	<input type="text" v-model="keyword">
	//输出结果都为keyword的值，但是当改变
  
  </div>
</div>
    
<script>
new Vue({
	el:'#app',
	data:{
		keyword:'测试'
	}
})
</script>

3. 绑定事件（v-on）

 <div id="app">

	
	<button v-on:onclick="show()">事件绑定</button>
	//也可以简写成 @
	<button @onclick="show()">事件绑定</button>
	//输出结果都为keyword的值，但是当改变
  
  </div>
</div>
    
<script>
new Vue({
	el:'#app',
	data:{
		keyword:'测试'
	},
	method:{
		show(){
		console.log("事件绑定内容")
		}
	}
})
</script>

4. 条件指令(v-if 和v-else搭配着用)

  <div id="app">
	<div v-if="ok">选中了</div>
	//也可以直接简写成:
	<div v-else>没有选中</div>
  </div>
</div>
    
<script>
new Vue({
	el:'#app',
	data:{
		ok:false
	
	}
})
</script>

5. 循环指令v-for

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

  <div id="app">
	<div v-for="user in userList">
	{{user.name}--{user.age}}
	</div>
	//也可以拿索引
	{{index}--{user.name}--{user.age}}
	
  </div>
</div>
    
<script>
new Vue({
	el:'#app',
	data:{
	userList:[
	{"name":"lucy","age":20},
	{"name":"lucy2","age":30},
	{"name":"lucy3","age":40},
	{"name":"lucy4","age":50},
	
	
	]
		
	
	}
})
</script>