Vue的模板语法

模板template的三种写法

第一种：Vue完整版，写在HTML中

<div id=app> {{n}}
  <button @click="add">+1</button>
</div> 
<script> 
new Vue({
  el: '#app',
  data:{n:0}, 
  methods:{add(){}} 
})
</script> 

第二种：Vue完整版，写在选项里

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

注意：使用这种写法，原div#app会被替换，在页面中找不到id=app的div标签

第三种：Vue非完整版，配合Demo.vue文件

<template></template>中是XML语法

<script></script>中默认导出一个构造选项options，和实例的构造选项的区别是没有template

<style></style> 中写CSS

使用Vue非完整版，只能使用render: h => h(Demo)

//Demo.vue中的代码
<template>
  <div> 
    {{n}} 
    <button @click="add"> +1 </button>
   </div>
</template>
<script>
  export default {
    data(){ return {n:0} },// data 必须为函数
    methods:{add(){ this.n += 1 }} }
</script>
<style>

</style>

//实例文件
import Demo from './Demo.vue'

new Vue({
  render: h => h(Demo)
}).$mount('#app')

模板里的语法

表达式

• {{ obj.a }} 表达式
• {{ n+1 }} 可以写运算
• {{ fn(n) }} 可以调用函数，fn在methods中找
• <div v-text='表达式'></div>这是另一种写法
• 如果值为undefined或null，就不显示

HTML标签

假设 data.x 的值为 <strong>hello</strong>，想展示HTML标签，而不是文本内容

• <div v-html='x'></div>

展示{{n}}

不会对模板进行编译

• <div v-pre>{{n}}</div>

绑定属性

• 绑定src <img v-bind:src='x' /> 简写为 <img :src='x' />
• 绑定对象 <div :style="{border: '1px solid red', height: 100}"></div>

绑定事件

发现是函数加()调用，否则直接运行代码

• <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">+1</button> 点击后，Vue会运行n+=1
• v-on:click可以缩写成@click，一般都用缩写

这导致一个问题，如果xxx(1)返回一个函数，这个函数不会执行，所以不要这么用！！！

条件判断

<div v-if='x>0'>
  x大于0
<div/>
<div v-else-if='x===0'>
  x等于0
<div/>
<div v-else='x<0'>
  x小于0
<div/>

循环

v-for="(value,key) in Object || Array" :key = 'key'使用v-for必须绑定:key="",这个值是唯一性的值

<ul>
  <li v-for="(u,index) in users" :key="index">
    索引：{{index}} 值：{{u.name}}
  </li>
</ul>

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

显示与隐藏

满足条件展示标签，不满足整个标签不会出现在HTML

• <div v-show='n%2 === 0'>n是偶数</div>

总结

1.使用XML语法
2.使用{{}}插入表达式
3.使用v-html，v-on，v-bind等指令操作DOM
4.使用v-if，v-for等指令实现条件判断和循环