Vue入门

vue

简介：Vue.js 是什么 作者：尤雨溪

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动

1.入门

//向页面展示vue.js中的值data是数据
//页面获取值是用{{counter}}

<div id="box">
  Counter: {{ counter }}
</div>

var v=new Vue({
			el:"#box",
			data:{
				counter:"劳保"
			}
		});

基本语法

1. 在页面中获取文本元素的值 语法：{{变量名 }}

    {{ msg }}
   

2. 在vue.js中设置值语法

   var v=new Vue({
   el:"#box",
   data:{
   	msg:"劳保"，
   	texts:"666"
   }
   
   })
   

   3.设置属性值

   var v=new Vue({
   el:"#box",
   data:{
   		p:'img/s.png',
   		h:'200px',
   		flag:true
   }
   
   })
   

   4.使用属性值 语法： v-bind:height=“h”

   	<div id="app">
   			<!--准备一张图片,需要属性src,高度height,所以要用到绑定属性,-->
   			<img v-bind:src="p" v-bind:height="h" />
   			<p v-if="flag">原来可以看见的html</p>//如果falg为true才显示出来
           	<p v-show="flag">原来可以看见的html</p>//v-show:"block" 是改变display的属性  true , false
   		</div>
   

   5.vue.js中获得json的值

   //data中的语法是：名称  ：[{"属性名1"："属性值1"},{"属性名2"："属性值2"},{"属性名3"："属性值3"}]
   var v3=new Vue({
   			el:"#box3",
   			data:{
   				users:[
   					{
   						"userid":"劳保",
   						"username":"666"
   					},
   					{
   						"userid":"劳保1",
   						"username":"6661"
   					}
   				]
   			}
   		});
   

   6.页面中遍历json数据 语法： v-for=“变量名 in 要遍历的对象” 取值{{变量名.属性名}}

   <div id="box3">
   			<ul>
   				<li v-for="user in users">
   					昵称：{{user.userid}}
   					称呼：{{user.username}}
   				</li>
   			</ul>
   		</div>
   

   7.vue中定义方法 methods:{ 方法名：funcation(){ } }调用本作用域里面的变量直接用this就行了

   var v4=new Vue({
   			el:"#box4",
   			data:{
   				msg:"劳保666"
   			},
   			methods:{
   				laobao:function(){
   					this.msg="劳保555"
   				}
   			}
   		})
   

   8.调用方法 语法：@click=“方法名()”

   <div id="box4">
   	{{msg}}
   	<button @click="laobao()">点击我</button>
   </div>
   

   9.表单值的双向绑定

   var v5=new Vue({
   			el:"#box6",
   			data:{
   				a:"",
   				b:"",
   				c:""
   			},
   			methods:{
   				xyu:function(){
   					this.c=parseFloat(this.a)+parseFloat(this.b)
   				}
   			}
   		})
   		
   	案例：计算器
   	<div id="box6">
   		<input type="text" v-model="a" />
   		+
   		<input type="text" v-model="b" />
   		<button @click="xyu" >=</button>
   		<input type="text" v-model="c" />
   	</div>
   

   10.表格数据的处理

   			var v = new Vue({
   				el:'#app',
   				data:{
   					users:[
   						{userid:'101',username:'张三',pwd:'123',status:'vip'},
   						{userid:'102',username:'张四',pwd:'223',status:'svip'},
   						{userid:'103',username:'张五',pwd:'323',status:'ssvip'}
   					]
   				},
   				methods:{
   					add:function(){
   						this.users.push({userid:'104',username:'张六',pwd:'423',status:'sssvip'});
   					},
   					del:function(userid){
   						console.log(userid);
   					}
   				}
   			});
   
   		使用表格数据：
   		<table cellpadding="1" cellspacing="1" width="60%" align="center">
   				<tr>
   					<td>帐号</td>
   					<td>昵称</td>
   					<td>密码</td>
   					<td>身份</td>
   					<td>操作</td>
   				</tr>
   				<!--key提取出对象里面的某个key变量,这样下面del方法就可以取出这个参数值-->
   				<tr :key="user.userid" v-for="user in users">
                      //如果要添加索引值，可变换为： <tr :key="user.userid" v-for="（user，index） in users">
               		<tr>{{index+1}}</tr>
   					<td>{{user.userid}}</td>
   					<td>{{user.username}}</td>
   					<td>{{user.pwd}}</td>
   					<td>{{user.status}}</td>
   					<td>
   						<a v-on:click.stop="del(user.userid)">删除</a>
                           // v-on:click.stop取消a标签的刷新特性,并绑定一个时间，传递单前循环的参数user.userid，来传递值
   					</td>
   				</tr>
   				
   			</table>