Vue 模板语法

模板语法

Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。

模板 template 的三种写法

1. Vue 完整版，写在 HTML 里

在html里面 {{n}} 会自动被替换，@click 也会自动的被理解并且添加上一个事件监听。

最后我们只需要 new Vue 一下，然后传入一个元素传入一个选择器即可使用。

    {{n}}
    +1



new Vue({
      el: '#xxx',
      data: {n: 0}, // data 可以改函数 
      methods:{add(){}}
})

2. Vue 完整版，写在选项里

这种方法在 HTML 里面只需要写一个 div 和 id 里面的内容留空

然后将内容写在 template 里面即可，注意一个小细节：div#app 会被替换，因为 new Vue 运行完之后会将 HTML 里面的 div 进行替换。

new Vue({
  template: `
    

      {{n}}
       +1
    
`,
  data: {n: 0},  // data 可以改成函数
  methods: {
    add(){this.n += 1}}
}).$mount('#app')

3. Vue 运行时版，配合 xxx.vue 文件

首先在 xxx.vue 文件里面写入