<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./vue.js"></script> <script> window.onload = function(){ //创建一个vue对象 var vm = new Vue({ el:'.box', data:{ content:'this is first', linkName:'百度链接', buttonName:'操作方法', linkUrl:'http://www.baidu.com', message:'listen to me' }, //方法要单独写在一个字典中 methods:{ fnClick:function(){ alert('hello world!') } } }) } </script> </head> <body> <div class="box">{{content}} <p>{{message}}</p> <!-- 对标签的属性值进行操作要用v-bind: --> <a v-bind:href="linkUrl">{{linkName}}</a> <!-- 对点击事件方法的使用要用v-on: --> <button v-on:click="fnClick">{{buttonName}}</button> </div> </body> </html>
vue的入门2
猜你喜欢
转载自blog.csdn.net/owc1874/article/details/80784115
今日推荐
周排行