Vue 模板、指令与修饰符

Vue的模版语法

我们把HTMl模版叫做template。

template的3种写法

1’ Vue完整版,写在HTML里

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

new Vue({
    //把html变成DOM节点
  el:'#xxx',
  data:{
   n:0}, //data可以改成函数
  methods:{
   
    add(){
   }
  }
})

2’ Vue完整版,写在选项里

<div id='app'>
</div>

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

注意细节:
(1)div#app会被替代
new Vue({})运行后，template里面的<div>会替换掉页面的<div id='app'>,渲染完后就没有id='app'的<div>了。
(2) el:'#xxx'可以替换成new Vue({}).$mount('#app')

3’ Vue非完整版,配合xxx.vue文件

第1步.写xxx.vue文件
<template>
  <div> //这里一般不需要id,id一般是用来挂载的，这里不需要
    {
   {
   n}}
    <button @click="add">
      +1
    </button>
  </div>
</template>
注意:<template>里面不是HTML而是 XML
<script>
  export default {
    //默认导出一个选项(构造选项)
    data(){
    return {
   n:0} },//data必须为函数，这个函数返回的对象就是我们要用的data
    methods:{
   add(){