vue.js语法总结
vue.js的指令都是以v-前缀开头的，而且必须写在开始标签中，作为标签的属性
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
指定的语法：
v-<name>[:param][.sync][=value]
name:代表指令的名称
sync:代表的是系统修饰符
value:代表的是数据的值
- v-if
- v-show
- v-else
- v-else-if
- v-for
- v-bind
- v-on
- v-on和v-bind的缩写
- v-text和v-html插值操作
- v-model
v-if指令
v-if是条件渲染的指令,它根据表达式的真假来删除和插入元素。
eg:
<div>
<p v-if="yes">hello world<p>
// v-if 指令将根据表达式yes的值的真假来添加或移除p元素
</div>
v-show指令
v-show也是条件渲染指令，作用和v-if一样都可以控制dom元素的隐藏和现实，但是和v-if指令不同的是，
使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性，即为该元素添加一个样式display:none;
而元素的还在，而当元素本身就有display:none时，此时v-show将不会起作用，通俗的说当某个元素本来就隐藏的话，
即使他JavaScript表达式为true时他也不会显示出来，原因就是v-show生成的style属性不会覆盖之前的也不会修改元素本身自带的。
v-else指令
v-else指令通常和v-if、v-else-if一起使用的,它用来表示"else"部分
eg:
<div>
<p v-if="Math.random()>0.5">今天天气真不错</p>
<p v-else>今天天气真糟糕</p>
</div>
v-else-if指令
v-else-if指令通常和v-if、v-else一起使用,它用来表示"else if"部分
eg:
<div>
<p v-if="score>90">优秀</p>
<p v-else-if="score>80">良好</p>
<p v-else-if="score>60">及格</p>
<p v-else>不及格</p>
</div>
v-for指令
v-for指令基于一个数组渲染一个列表。v-for指令通常需要(item,index) in items这种语法，用来遍历出数组中的每一个元素，items为源数组，item为遍历出数组元素的统称
eg:
<div id="app">
<p v-for="(x,index) in 9">
{
{x}}
</p>
</div>
注意: x 默认从1开始的,而每个元素的索引则是从0开始的
js部分
eg:
<script type="text/javascript">
new Vue({
el:'#app',
})
</script>
v-bind指令
操作元素的class列表或者内联样式
eg:
<div>
<p v-bind:class="{
{open:is_open}}"></p>
</div>
data:{
is_blue:true
}
v-on指令
用来监听DOM事件，触发时运行一些JavaScript代码。如果事件的逻辑复杂时，通常把JavaScript代码写一个函数里，v-on接收需要调用函数的名称。v-on简写 v-on:click <==> @click
eg:
<div id="app">
<button v-on:click="count++">
您点击了{
{count}}
</button>
</div>
js部分
new Vue({
el:'#app',
data:{
count:0
}
})
v-bind和v-on的缩写
v-bind通常缩写为 :+class名(style名)
eg:
<div>
<p v-bind:class="{
{open:is_open}}"></p>
</div>
// v-bind缩写
<div>
<p :class="{
{open:is_open}}"></p>
</div>
//v-on 缩写
<div>
<p @click="count++"></p>
</div>
v-on通常缩写为 @+事件名
v-text和v-html
- v-text 和 {
{}} 渲染出来内容
v-text用于渲染普通文本
1.在元素开始标签上面添加v-text,如果标签体里面有内容的话则会覆盖掉标签体原本的内容,只显示v-text渲染的文本
eg:
<div id="app">
<span v-text="msg"></span>
<span>{
{msg}}</span>
</div>
js部分
<script>
new Vue({
el:'#app',
data:{
mesg:'hello'
}
})
</script>
注意:如果标签体内本来就有内容的话 v-text渲染的内容则会覆盖原来标签体内的内容
- v-html
v-html会将元素当成HTML标签解析出来后再输出，如果标签体里面有内容的话则会覆盖掉标签体原本的内容
eg:
<div id="app">
<p v-text="msg"></p>
<p>{
{msg}}</p>
</div>
js部分
<script>
new Vue({
el:'#app',
data:{
mesg:'<span>hello</span>'
}
})
</script>
两者的区别:v-text和{ {}} 表达式渲染数据,不会解析标签 v-html不仅可以渲染数据，而且可以解析标签
v-model
- v-model实现标签数据的双向绑定的，通常使用到表单元素，如。v-bind只能进行单向绑定
v-model="text" 等价于 v-bind:value="text", v-on:input="text=$event.target.value"
v-bind:value="text" 简写 :value
v-on:input="text=$event.target.value" 简写 @input="text=$event.target.value"
eg:
<div id="app">
<input type="text" v-model="text">
<span>{
{text}}</span>
</div>
js部分
<script type="text/javascript">
new Vue({
el:'#app',
data:{
text:'',
}
})
</script>