vue xml转字符串_Vue当中的模板、指令与修饰符

模板 template的三种写法

• 第一种、Vue完整版，写在HTML里面

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

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

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

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

• 第二种、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")

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

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