Vue 模板

Seeyousoon
404 阅读3分钟

模板 templat

用来表示HTML结构的一段字符串

写法1:Vue完整版，写在HTML里

<div id=xxx>
  {{n}}
  <button @click="add">+1</button>
</div>

new Vue({
  el:'xxx',
  data:{n:0},
  methods:{add(){}}
})

写法2:Vue完整版，写在选项里

<div id=app>
</div>

new Vue({
  template:`
    <div>
      {{n}}
      <button @click="add">+1</button>
    </div>`,
  data:{n:0},
  methods:{add(){this.n += 1}}
}).$mount('#app')

写法3:Vue非完整版，配合xxx.vue文件

<template>
  <div>
    {{n}}
    <button @click="add">+1</button>
  </div>
</template>

<script>
exprot default{
  data(){
    return {n:0}
  },
  methods:{add(){this.n +=1}
  }
}
</script>
<style>这里是CSS代码</style>

然后在另一个地方写下面代码
import xxx from './xxx.vue'
new Vue({
  render: h => h(xxx)
}).$mount('#app')

template标签里是XML语法，不是HTML

<input name="frank">    HTML
<div></div>

<input name="frank" />   XML
<div />

展示内容

表达式
{{object.a}}  表达式，把构造选项data里面的object.a，显示到html里
{{n+1}}       可以写任何运算,只支持运算，不支持if else
{{fn(n)}}     调用函数,在methds里找函数,没有就报错,值为undefined或null就不显示
<div v-text="表达式"></div>

HTML内容
data.x 值为<strong>hi</strong>
<div v-html="x"></div>
v-html指令支持内容里有html标签，可以显示副文本

<div v-pre>{{n}}</div>
v-pre指令不会对模板进行编译，输入什么显示什么

绑定属性

绑定src
<img v-bind:src="x" />      如果x是一个url，src就等于这个url
<img :src="x" />            简写，把x的值求出来，赋值给src

绑定对象
<div :style="{border:'1px solid red', height:100}"></div>
在div上写CSS的内联样式

绑定事件

v-on:事件名
<button v-on:click="add">+1</button      点击之后Vue会运行add()，自动添加了()
<button v-on:click="xxx(1)">xxx</button> 点击之后Vue会运行xxx(1)
<button v-on:click="n+=1">xxx</button>   点击之后Vue会运行n+=1

vue发现函数之后就加括号调用，否则就直接运行代码 
 
缩写
<button @click="add">+1</button>

条件判断 （if else）

<div v-if="x>0">
x大于0
</div>
<div v-else-if="x===0">
x为0
</div>
<div v-else>
x小于0
</div>

循环

for(value,key)in对象或数组
<ul>
  <li v-for="(u,index) in user" :key="index">
    索引:{{index}} 值:{{u.name}}                                    
  </li>
</ul>

<ul>
  <li v-for="(value,name) in obj" :key="name">
    属性名:{{name}}, 属性值:{{name}}
  </li>
</ul>

使用v-for，必须在后面绑定一个变量key,key必须使用不会重复的值，
一个对象的key是不会重合的，value可能会重合

显示，隐藏

v-show
<div v-show="n%2===0">n是偶数</div>
v-show后面接表达式，表达式为真就会显示div，表达式为假不显示

近似等于下面写法
<div :style="{display:n%2===0?'block' : 'none'}">n是偶数</div>

指令 Directive

语法
v-指令名:参数=值   v-on:click=add
如果值没有特殊字符,可以不用加引号
有些指令没有参数和值  v-pre
有些指令没有值        v-on:click.prevent

@click.prevent      阻止默认事件
@click.prevent="x"  阻止默认事件，并允许x
input @input        输入事件，鼠标键盘输入事件
e.target.value      得到用户输入的值
@keypress           键盘按下事件
@keypress.13        键盘按下回车事件

修饰符

@click.stop="add"          阻止事件传播/冒泡
@click.prevent="add"       阻止默认动作
@click.stop.prevent="add"  包含上面2种

.sync修饰符

:money.sync="total"     等价于
:money="total" v-on:update:money="total=$event"

详细资料点击：Vue 模板

avatar
文章
阅读
粉丝