官方网址：https://cn.vuejs.org/
第一步，引入Vue
选择文档，点击Vue2文档
然后选择起步，开始准备起飞
进入页面后，选择安装，找到开发版本按钮，点击下载vue.js文件
走一个“Hello World”小Demo：
1<!DOCTYPE html> 2<html> 3<head> 4 <title>vue文件引入</title> 5 <!-- 引入vue --> 6 <script type="text/javascript" src="vue.js"></script> 7</head> 8<body> 9 <!-- 视图 --> 10 <div id="app">{{message}}</div> 11 <!-- 脚本 --> 12 <script type="text/javascript"> 13 var vm = new Vue({ 14 el: '#app', 15 data: {message:'Hello Vue!'} 16 }); 17 </script> 18</body> 19</html>
第二步，数据与方法
1<!DOCTYPE html> 2<html> 3<head> 4 <title>vue文件引入</title> 5 <!-- 引入vue --> 6 <script type="text/javascript" src="vue.js"></script> 7</head> 8<body> 9 <!-- 视图 --> 10 <div id="app">{{message}}</div> 11 <!-- 脚本 --> 12 <script type="text/javascript"> 13 // message: hello world 14 var par = { message: "hello world"}; 15 // Object.freeze(par); // 会阻止修改现有的message的值, 注意程序位置 16 var vm = new Vue({ 17 el: '#app', 18 data: par 19 }); 20 // message: hello Vue 21 par.message = "hello Vue"; 22 console.log(vm.message); // hello Vue, par.message == vm.message 23 // 监控值的变化，watch函数，注意程序位置 24 vm.$watch('message',function(newVal, oldVal){ 25 console.log(newVal, oldVal); // hello 大木木 hello Vue 26 }) 27 // message: hello 大木木 28 vm.message = "hello 大木木"; 29 </script> 30</body> 31</html>
第三步，生命周期
1<!DOCTYPE html> 2<html> 3<head> 4 <title>vue文件引入</title> 5 <!-- 引入vue --> 6 <script type="text/javascript" src="vue.js"></script> 7</head> 8<body> 9 <!-- 视图 --> 10 <div id="app">{{message}}</div> 11 <!-- 脚本 --> 12 <script type="text/javascript"> 13 var vm = new Vue({ 14 el: '#app', 15 data: { 16 message:"Hi, Vue" 17 }, 18 // 生命周期钩子函数，不要使用箭头函数 19 // 实例化之后，数据观察和事件配置之前被调用（页面创建之前） 20 beforeCreate:function(){ 21 console.log('beforeCreate'); 22 }, 23 // 实例创建完成，并已完成相关配置：数据观测、属性和方法运算、事件回调 24 created:function(){ 25 console.log('created'); 26 }, 27 // 挂载开始之前被调用，相关的渲染函数首次被调用 28 beforeMount:function(){ 29 console.log('beforeMount'); 30 }, 31 // 挂载成功之后 32 mounted:function(){ 33 console.log('mounted'); 34 }, 35 // 数据更新 36 // 数据更新时（前）被调用 37 beforeUpdate:function(){ 38 console.log('beforeUpdate'); 39 }, 40 // DOM已经更新完成，组件更新完毕 41 updated:function(){ 42 console.log('updated') 43 } 44 }); 45 </script> 46</body> 47</html>
第四步，模板语法-插值
1<!DOCTYPE html> 2<html> 3<head> 4 <title>vue文件引入</title> 5 <!-- 引入vue --> 6 <script type="text/javascript" src="vue.js"></script> 7 <style type="text/css"> 8 .testWords { 9 color: blue; 10 } 11 </style> 12</head> 13<body> 14 <!-- 视图 --> 15 <!-- v-once指令，执行一次性插值，插值处内容不会更新 --> 16 <div id="app" v-once> 17 <!-- 双大括号{{ }}，文本插值 --> 18 {{message}} 19 <!-- 双大括号会将数据解释为普通文本，而非HTML代码 --> 20 <p>我是一段HTML代码:{{htmlCode}}</p> 21 <!-- so, 使用v-html指令，解决以上问题 --> 22 <p>我是一段HTML代码:<span v-html="htmlCode"></span></p> 23 <!-- v-bind指令，动态的为html标签绑定属性 --> 24 <p v-bind:class="divClass">Test, 动态绑定样式</p> 25 <!-- 支持JavaScript表达式 --> 26 <p>{{number+1}}</p> 27 <p>{{ok ? 'Yes':'No'}}</p> 28 <p>{{msg.split(' ').reverse().join('')}}</p> 29 </div> 30 <!-- 脚本 --> 31 <script type="text/javascript"> 32 var vm = new Vue({ 33 el: '#app', 34 data: { 35 message: "Hi, Vue", 36 htmlCode: '<span style="color:red">this is HTML code!<span>', 37 divClass: 'testWords', 38 number: 1, 39 ok: true, 40 msg:'Hello world' 41 } 42 }); 43 </script> 44</body> 45</html>
第五步，事件
1<!DOCTYPE html> 2<html> 3<head> 4 <title>vue文件引入</title> 5 <!-- 引入vue --> 6 <script type="text/javascript" src="vue.js"></script> 7</head> 8<body> 9 <!-- 视图 --> 10 <div id="app"> 11 <!-- <div @click="click1"> 12 <div @click="click2"> 13 // 此时点击Click Me，会同时输出click2...和click1... 14 Click Me! 15 </div> 16 </div> --> 17 <!-- 使用vue.js修饰符stop 阻止事件冒泡 --> 18 <div @click="click1"> 19 <div @click.stop="click2"> 20 Click Me! 21 </div> 22 </div> 23 </div> 24 <!-- 脚本 --> 25 <script type="text/javascript"> 26 var vm = new Vue({ 27 el: '#app', 28 methods: { 29 click1: function () { 30 console.log('click1...') 31 }, 32 click2: function () { 33 console.log('click2...') 34 }, 35 } 36 }); 37 </script> 38</body> 39</html>