<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue入门【uml类图】</title> <!--这个js文件一定要在head标签里面引入--> <script src="vue.js"></script> </head> <body> <!-- 挂载点：相应的vue实例中el中的属性所指向的标签就叫做挂载点 模板：挂载点内部的所有标签代码都叫做模板（挂载点可以写在vue实例中） 实例：vue实例 v-text或者v-html:告诉某一个标签他显示的是由谁来决定的(但是和jquery一样，text只能解析文本，html可以解析标签) v-on:事件='函数'(可以简写成 @事件='函数') 这个是实现绑定一个事件，同时，这个事件绑定的方法存在于vue实例的methods中 --> <div id="foo">{{msg}} <p v-text="num" @click="My2"></p> <p v-html="num" v-on:click="My"></p> </div> <div id="bar"> <h1 v-text="number"></h1> </div> <script> //可以通过jquery或者原生js的效果来引入vue的效果 // 引入类文件就可以实现实例化 // el:表示你要接管页面的哪一个element（元素） // data:数据 new Vue({ el:"#foo", data:{ msg:"Hello Word", num:1 }, methods:{ My:function () { alert('绑定点击事件，即将改变值'); this.num = '你好，通过绑定单击事件这个值已经改变了'; }, My2:function () { this.num = '简写以后也可以实现的'; } } }); //这里展示的是将模板内容写在vue实例中 new Vue({ el:"#bar", template:"<h1>你好,{{username}}</h1>", data:{ username:"张三" } }); </script> </body> </html>