Vue基本语法和指令

一.模版语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

二.语法

2.1） 插值表达式

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值

<script>
			new Vue({
				el:"#app",//用class也行。
				data:{
					test:"hello"
				}
			})
		</script>

注意：{{}}里面接受的值如果加了""或者'',Vue会认为这是一个字符串,那么就会原样输出.

2.2）JavaScript 表达式

{{}}可以接受表达式形式的值,表达式是各种数值,变量，运算符的综合体.简单的表达式可以是常量或者变量名称，其次,还支持简单逻辑运算和算术运算,表达式的值是其运算结果。

                {{ number + 1}}
		{{ ok ? 'YES' : 'NO' }}

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

                <!--这是语句,不是表达式 -->
		
		{{var a = 1 }}
		
		<!--流控制也不会生效，请使用三元表达式 -->
		
		{{ if (ok) { return message} }}

三.Vue中的指令

指令是带有v-前缀的特殊特性,其值限定为绑定表达式,也就是Javascript表达式。指令的作用是当表达式的值发生变化时,将这个变化也反映到DOM上。

3.1 v-if

v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果,v-if表达式赋值为false,那么对应的元素就会从DOM中移除,否则，对应元素的一个克隆将重新插入DOM中(项目中更加倾向)

3.2   v-show

v-show指令时候根据表达式的值来显示或者隐藏HTML元素。当v-show赋值为false时,元素将被隐藏。查看DOM时,会发现元素上多了一个内联样式style="display:none"

在切换v-if模块时,vue.js有一个局部编译/卸载的过程,因为v-if中的模板可能包括数据绑定或子组件。v-if是真实的条件渲染,因为它会确保条件块在切换时合适地销毁与重建条件块内的事件监听器和子组件。

v-if是惰性的-----如果初始渲染是条件为假,则什么都不做,在第一次为真时才开始局部编译(编译会缓存起来)。

相比之下,v-show简单得多------元素始终被编译并保留下来.只是简单的css切换。

一般来说,v-if有着更高的消耗,而v-show有更高的初始渲染消耗。因此,如果需要频繁的切换,则使用v-show。如果运行的条件不大可能改变,则使用v-if。

3.3   v-else

顾名思义,v-else就是JavaScript中else的意思,它必须跟着v-if,充当else功能。注意我们在使用v-else的时候,不可以v-if和v-else之间不可以有其它元素分隔。

 

3.4   v-for

我们可以使用v-for指令基于源数据重复渲染元素。v-for指令需要使用 item in items 形式的特殊语法, items是源数据数组并且item是数组迭代的别名。

有些时候我们需要获取元素的下标,则需写成 (item,index) in items

3.6   v-on

v-on指令用于绑定事件监听器。事件参数是原生JS事件名称,例如：

v-on:click           //点击事件

v-on:mouseover                //移入事件

使用在普通元素上时,只能监听原生DOM事件;使用在自定义元素组件上时,也可以监听子组件触发的自定义事件。通常情况下我们会使用v-on的简写方式@修饰符。

//完整语法
            
            <a v-on:click="doSomething">...</a>
            
            //缩写
            
            <a @click="doSomething">...</a>

注意:如果我们需要用到vue里面的事件或者自定义法必须要在,vue实例中添加methods选项。

当我们学习知识点的同时，可以通过小练习来巩固自己所所学习的知识。

练习1:文字走马灯效果

效果图：

代码：

3.7   v-bind

在vue中v-bind主要用来绑定于元素的属性。其中，v-bind可以简写成:的形式。

练习2:选项卡切换

练习3：图片的切换

效果图：

代码：

样式就自己完成吧

选项卡：

图片轮播的HTML代码：

<div class="wrap">
			<img :src="message" />
			<ul>
				<li v-for="(item,index) in item"></li> <!--后面的item是你定义的数组-->
			</ul>
			<ul class="list">
				<li v-for="(item,i) in item"
				:class="{active:i==index}"
				@click="move(i)"
					></li>
				
			</ul>
			<button class="prev" @click="prev">上一张</button>
			<button class="next" @click="next">下一张</button>
		</div>

JS：

<script>
			new Vue({
				el:".wrap",
				data:{
					message:"img/snowynight6.jpg",
					index:0,
					item:[
						 {item:"img/snowynight1.jpg",active:true},
						 {item:"img/snowynight2.jpg",active:false},
						 {item:"img/snowynight3.jpg",active:false},
						 {item:"img/snowynight4.jpg",active:false},
						 {item:"img/snowynight6.jpg",active:false}
				]
				},
				methods:{
					next(){
						this.message=this.item[this.index++].item
						console.log(this.index)
						if (this.index>this.item.length-1) {
							this.index=0
						}
					},
					prev(){
						this.message=this.item[this.index--].item
						console.log(this.index)
						if (this.index<0) {
							this.index=this.item.length-1
						}
					},
					move(index){
						this.message=this.item[index].item
						this.index=index
					}
				}
			})
		</script>

注意：在完成小黑点的时候要注意把小黑点的下标和li的下标关联起来。

3.8   v-model

vue中的v-model指令主要用于在表单元素中，例如，<input>,<textarea>以及<select>上创建数据的双向绑定。它会根据控件类型自动选取正确的方法来更新元素，它负责用来监听用户的输入事件以及更新数据。

注意：在vue中，它的主要核心是数据驱动，所以我们在定义value,checked,select特性的初始值时，应在vue实例中data选项声明初始值。

练习3:学生信息登记表

练习4:商品购物车

效果图：

学生信息管理系统

HTML：

<div class="container" id="app">
			<div class="panel">
				<div class="panel-default">
					<div class="panel-heading text-center">
						<span>学生管理系统</span>
					</div>
					<div class="panel-body">
						<table class="table table-bordered table-hover text-center">
							<tr>
								<td>学号</td>
								<td>姓名</td>
								<td>性别</td>
								<td>操作</td>
							</tr>
							<tr v-for="(item,index) in items">
								<td>{{item.id}}</td>
								<td>{{item.name}}</td>
								<td>{{item.sex}}</td>
								<td>
									<button @click="cancel(index)" class="btn btn-danger">删除</button>
								    <button @click="revise(index)" class="btn btn-success" data-toggle="modal" data-target="#myModal">修改</button>
								</td>
							</tr>
							
						</table>
					</div>
				</div>
			</div>
			<div class="panel" v-if="isShow">
				<div class="panel-default">
					<div class="panel-heading">
						<h4>登记信息</h4>
					</div>
					<div class="panel-body">
						<div class="form-group">
							<input type="text" class="form-control" placeholder="请输入编号" v-model="id"/>
						</div>
						<div class="form-group">
							<input type="text" class="form-control" placeholder="请输入姓名" v-model="name"/>
						</div>
						<div class="form-group">
							<input type="text" class="form-control" placeholder="请输入性别" v-model="sex"/>
						</div>
						<div class="btn-group">
							<button @click="addInfo" class="btn btn-primary">确定</button>
						</div>
					</div>
				</div>
			</div>
			
			<div class="panel" v-else>
				<div class="panel-default">
					<div class="panel-heading">
						<h4>修改信息</h4>
					</div>
					<div class="panel-body">
						<div class="form-group">
							<input type="text" class="form-control" placeholder="请输入编号" v-model="iD"/>
						</div>
						<div class="form-group">
							<input type="text" class="form-control" placeholder="请输入姓名" v-model="Name"/>
						</div>
						<div class="form-group">
							<input type="text" class="form-control" placeholder="请输入性别" v-model="Sex"/>
						</div>
						<div class="btn-group">
							<button @click="confirm" class="btn btn-primary" >确定</button>
						</div>
					</div>
				</div>
			</div>
			
		</div>

JS：

<script>
			new Vue({
				el:"#app",
				data:{
					items:[
						{id:"1",name:"小明",sex:"男"},
						{id:"2",name:"小红",sex:"女"},
						{id:"3",name:"小亮",sex:"女"}
					],
					id:"",
					name:"",
					sex:"",
					isShow:true,
					iD:"",
					Name:"",
					Sex:"",
					num:0
				},
				methods:{
					revise(index){
						this.isShow=false
						this.num=index
//						console.log(this.items[index].id)
                        var obj={
                        	id:this.items[index].id,
                        	name:this.items[index].name,
                        	sex:this.items[index].sex
                        }
//						console.log(obj)
                        this.iD=obj.id
                        this.Name=obj.name
                        this.Sex=obj.sex
					},
					confirm(index){
						this.isShow=true
//						console.log(this._this)
						this.items[this.num].id=this.iD
						this.items[this.num].name=this.Name
						this.items[this.num].sex=this.Sex
						this.iD=""
						this.Name=""
						this.Sex=""
					},
					cancel(index){
						this.items.splice(index,1)
                     //console.log(index)
					},
					addInfo(){
						var obj={
							id:this.id,
							name:this.name,
							sex:this.sex
						}
						for (var i=0;i<this.items.length;i++) {
							if (this.items[i].id==obj.id) {
								alert("重复了")
								return
							}
						}
						this.items.push(obj)
//						console.log(obj)
						this.id=""
						this.name=""
						this.sex=""
					}
				}
			})
		</script>

购物车

HTML：

<div class="app">
			<div class="container">
				<div class="panel">
					<div class="panel-default">
						<div class="panel-body">
							<table class="table table-bordered table-hover text-center">
								<tr>
									<td>商品名称</td>
									<td>商品价格</td>
									<td>商品数量</td>
									<td>商品总额</td>
									<td>操作</td>
								</tr>
								<tr v-for="(item,index) in items">
									<td>{{item.name}}</td>
									<td>{{item.price}}</td>
									<td>
										<button class="btn btn-default" @click="reduce(index)">-</button>
										<input type="text" v-model="item.amount" />
										<button class="btn btn-default" @click="add(index)">+</button>
									</td>
									<td>{{item.price*item.amount}}</td>
									<td><button type="button" class="btn btn-danger" @click="del(index)">删除</button></td>
								</tr>
							</table>
							<p class="text-right">金额总计：{{sum}}</p>
							<p class="text-right">商品数量总计：{{count}}</p>
						</div>
					</div>
				</div>
				<hr />
				<div class="form">
					<div class="form-group">
						<input class="form-control" placeholder="商品名称" v-model="shopName" />
					</div>
					<div class="form-group">
						<input class="form-control" placeholder="商品价格" v-model = "shopPrice"/>
					</div>
					<div class="form-group">
						<button class="btn btn-primary" type="button" @click="addInfo">增加</button>
					</div>
				</div>
			</div>
		</div>

JS：

<script>
			new Vue({
				el:".app",
				data:{
					items:[
					{id:"1",name:"苹果手机",price:1000,amount:0},
					{id:"2",name:"男装",price:500,amount:0},
					{id:"3",name:"女装",price:400,amount:0},
					{id:"4",name:"男鞋",price:300,amount:0},
					{id:"5",name:"女鞋",price:200,amount:0}
					],
					sum:0,
					count:0,
					shopName:"",
					shopPrice:"",
				},
				methods:{
					add(index){
//						console.log(1)
                       this.items[index].amount++
                       this.sum=0
                       this.count=0
                       for (var i=0;i<this.items.length;i++) {
                       this.sum+=parseFloat(this.items[i].price)*parseFloat(this.items[i].amount)
                       this.count+=parseInt(this.items[i].amount)
                       }
					},
					reduce(index){
						if (this.items[index].amount<=0) {
							this.items[index].amount=0
						}else{
							this.items[index].amount--
						}
//						console.log(1)
                       this.sum=0 //清除上一次的总金额
                       this.count=0
                       for (var i=0;i<this.items.length;i++) {
                       this.sum+=parseFloat(this.items[i].price)*parseFloat(this.items[i].amount)
                       this.count+=parseInt(this.items[i].amount)
                       }
					},
					addInfo(){
						var obj={
							id:this.items.length+1,
							name:this.shopName,
							price:this.shopPrice,
							amount:0
						}
						console.log(obj)
						this.items.push(obj)
					},
					del(index){
						this.items.splice(index,1)
					}
				}
			})
		</script>