https://cn.vuejs.org/v2/guide/installation.html
选择开发版本下载
直接用 <script> 引入，直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。
<script src="js/vue.js"></script>
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Vue入门程序 </title> <script src="js/vue.js"></script> </head> <body> <!--div标签就是挂载点，挂载点内部都是模板内容--> <div id="root"> <!--v-on:click和@click效果一样，为简写形式--> <div @click="welcome">{{msg}}</div> <!--使用v-text直接输出转义后文本--> <div v-text="content"></div> <!--显示未转义文本--> <div v-html="content"></div> </div> </div> <script> var root; // vue实例 root=new Vue({ el:"#root", //模拟内容 // template:‘<h1>helllow {{msg}}</h1>‘, data:{ msg:" world", content:"<h1>111111</h1>" }, //methods中定义事件及函数方法 methods:{ welcome:function () { this.msg="hellow world!" } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Vue中的属性绑定和双向数据绑定</title> <script src="js/vue.js"></script> </head> <body> <!--div标签就是挂载点，挂载点内部都是模板内容--> <div id="root"> <!--使用v-bind做属性绑定，其中title是vue实例中的变量对象 可简写为:title即：冒号+属性名称，:+title --> <div :title="‘hey ‘+title"> hellow world !</div> <input v-model="content"/> <div>{{content}}</div> <!--属性绑定语法：使用:+属性名称--> <!--双向数据绑定语法：使用v-model="vue中的变量对象名称"--> </div> <script> var root; // vue实例 root=new Vue({ el:"#root", data:{ title:"hellow world !", content:"this is content!" } }) </script> </body> </html>
使用v-bind做属性绑定，其中title是vue实例中的变量对象
可简写为:title即：冒号+属性名称，如：:+title
属性绑定语法：使用:+属性名称
双向数据绑定语法：使用v-model="vue中的变量对象名称"
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Vue中的计算属性和侦听器</title> <script src="js/vue.js"></script> </head> <body> <div id="root"> 姓<input v-model="firstName"/> 名<input v-model="lastName"/> <div>{{fullName}}</div> <div>{{count}}</div> 侦听器值得是监听某个数据的变化，一旦变化就可以在监听方法了，做业务逻辑 计算属性computed，指的是他是有其他属性经过运算而来，即新的结果 </div> <script> var root; root=new Vue({ el:"#root", data:{ firstName:"", lastName:"", count:0 }, computed:{ fullName:function () { return this.firstName+" "+this.lastName } }, watch:{ fullName:function () { this.count++; } } }) </script> </body> </html>
侦听器值得是监听某个数据的变化，一旦变化就可以在监听方法了，做业务逻辑
计算属性computed，指的是他是有其他属性经过运算而来，即新的结果
原文：https://www.cnblogs.com/longronglang/p/12045522.html