Vue模板语法
文本插值
文本差值最基本的形式一般有三种方式
一是使用两个花括号{{}}，二是使用v-once指令，三是使用v-text指令，下面用代码演示
body
divid="app"
p
inputtype="text"v-model="msg"/
/p
p{{msg}}/p
!--仅一次--
pv-once{{msg}}/p
pv-text="msg"/p
/div
scriptsrc="js/Vue.js"/script
script
newVue({
el:"#app",
data:{
msg:""
}
})
/script
/body
三种方式均可实现文本插值。
2，表达式
文本插值也支持表达式形式的值，用于数值运算，三目判断以及筛选，下面用一个计算工资的例子演示。
body
fieldsetid="app"
legend工资计算器/legend
p当月收入：inputtype="text"v-model="gongzi"/p
p奖金：inputtype="text"v-model="jiangjin"name=""id=""/p
p养老保险：{{(parseFloat(gongzi)+parseFloat(jiangjin))*0.}}/p
p医疗保险：{{(parseFloat(gongzi)+parseFloat(jiangjin))*0.}}/p
p失业保险：{{(parseFloat(gongzi)+parseFloat(jiangjin))*0.}}/p
p公积金：{{(parseFloat(gongzi)+parseFloat(jiangjin))*0.}}/p
p到手薪资：{{(parseFloat(gongzi)+parseFloat(jiangjin))*(1-0.-0.-0.-0.)}}/p
p年薪：{{((parseFloat(gongzi)+parseFloat(jiangjin))*(1-0.-0.-0.-0.))*12}}/p
/fieldset
scriptsrc="js/Vue.js"/script
script
newVue({
el:"#app",
data:{
gongzi:0,
jiangjin:0
}
})
/script
/body
————————————————
以上代码实现了工资的基本计算，由上可以看出，文本插值也支持数值运算。
3，指令
指令是Vue中一个重要的特性，主要提供了一种机制将数据的变化映射为DOM行为，指令的特殊属性便是带有“v-”前缀。
例：av-bind:href="url"/a
Vue绑定类样式和内联样式
在Vue中对属性的绑定一般使用v-bind指令（可缩写为“：”），而操作元素的class列表和内联样式是数据绑定的一个常见需求。
1，类样式
语法：divv-bind:class="{类样式名:数据,...}"/div
例：使用绑定类样式方式实现样式的绑定
body
style
.base{
width:px;
height:px;
}
.border{
border:2pxsolidblack;
transition:all3s;
}
.box{
box-shadow:15px5px15px5pxgray;
transition:all3s;
}
.bgcolor{
background-color:aqua;
transition:all3s;
}
.donghua:hover{
border-radius:50%;
transition:all3s;
}
/style
divid="app"
inputtype="checkbox"v-model="border"name="check1"id=""边框
inputtype="checkbox"v-model="box"name="check1"id=""阴影
inputtype="checkbox"v-model="bgcolor"name="check1"id=""背景
inputtype="checkbox"v-model="donghua"name="check1"id=""动画
hr/
divclass="base"v-bind:class="{border:border,box:box,bgcolor:bgcolor,donghua:donghua}"/div
/div
scriptsrc="js/Vue.js"/script
script
newVue({
el:"#app",
data:{
border:false,
box:false,
bgcolor:false,
donghua:false
}
})
/script
/body
效果：
通过绑定类样式实现了效果。
2，内联样式
语法：divv-bind:style="{样式属性:数据,...}"/div
例：使用绑定内联样式实现效果
body
divid="app"style="width:%;text-align:center;"
imgsrc="img/1.JPG"alt=""v-bind:style="allstyle"
/div
scriptsrc="js/Vue.js"/script
script
newVue({
el:"#app",
data:{
allstyle:{
"border":"2pxsolidblack",
"border-radius":"10%",
"width":"50%"
}
}
})
/script
/body
条件渲染指令
Vue中提供v-if，v-else和v-show的条件渲染指令，这些条件指令可以根据表达式的值在DOM中选择渲染元素和组件。
v-if和v-else
语法：divv-if="bool"
/divdivv-else/div
例：使用条件渲染实现登录页面和注册界面的切换
body
divid="app"
inputtype="checkbox"v-model="isf"name=""id=""登录
divv-if="isf"
fieldset
legend登录界面/legend
inputtype="text"placeholder="请输入账号"name=""id=""br/
inputtype="text"placeholder="请输入密码"name=""id=""
pbutton登录/button/p
/fieldset
/div
divv-else
fieldset
legend注册界面/legend
inputtype="text"placeholder="请输入账号"name=""id=""br/
inputtype="text"placeholder="请输入密码"name=""id=""br/
inputtype="text"placeholder="请再次输入密码"name=""id=""
pbutton注册/button/p
/fieldset
/div
/div
scriptsrc="js/Vue.js"/script
script
newVue({
el:"#app",
data:{
isf:true
}
})
/script
/body
效果：
v-show指令
v-show的用法与v-if类似，不同的地方在于v-show指令只是实现切换css的display，同时也不支持template元素和v-else指令。
事件绑定
在vue中一般使用v-on来进行事件的绑定，实现监听DOM事件。
语法：buttonv-on:click="方法"按钮/button
例：实现简单四则远算。
body
divid="app"
px值：inputtype="text"v-model="x"/p
py值：inputtype="text"v-model="y"/p
p
buttonv-on:click="add()"+/button
buttonv-on:click="sub()"-/button
buttonv-on:click="mlt()"*/button
buttonv-on:click="div()"//button
/p
p结果：{{result}}/p
/div
scriptsrc="js/Vue.js"/script
script
newVue({
el:"#app",
data:{
x:0,
y:0,
result:0
},
methods:{
add:function(){
this.result=parseFloat(this.x)+parseFloat(this.y);
},
sub:function(){
this.result=parseFloat(this.x)-parseFloat(this.y);
},
mlt:function(){
this.result=parseFloat(this.x)*parseFloat(this.y);
},
div:function(){
this.result=parseFloat(this.x)/parseFloat(this.y);
}
}
})
/script
/body
效果：
以及事件绑定时需要用到的修饰符：
.stop：相当于event.stopProagation()方法
.prevent：相当于event.preventDefault()方法
.capture：使用capture模式添加事件监听器
.self：只有事件在监听本身元素时才会触发回调
.once：点击事件仅触发一次