//index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body> <div id="vue-app"> <h1>{{ name }}</h1> <h1>{{ a() }}</h1> <a v-bind:href="web">web开发</a> <input type="text" v-bind:value="name"> <p v-html="website"></p> </div> <script src="app.js"></script> </body>
//app.js
new Vue({
el:"#vue-app",
data:{
name:"001002003",
web:"https://www.baidu.com/",
website:"<a href='https://www.baidu.com/'>百度</a>"
},
methods:{
a:function(){
return "hello world"+this.name;
}
}
});
methods:方法（函数）
每个内容如el，data，methods要用逗号分隔开
如果要调用自身的data，直接this.属性即可
1.v-bind
属性绑定，网址要写全，v-bind
<input type="text" v-bind:value="name">这句话其实就相当于
<input type="text" value="001002003">
2.v-html
利用v-html添加html元素
<p v-html="a"></p>//写在html文件中
a:"<h1>hello</h1>"//写在data中