一、安装
使用cnpm install vue安装，请参考本篇博客详细的vue安装说明>>>>>>
安装完成后，在docs命令窗口输入：vue - V(大写) 查看版本
1、测试，创建第一个版本
docs窗口输入：
vue init webpack demo
运行vue，在docs依次输入以下命令:
// 进入项目 cd vue-project // 安装依赖 cnpm install // 测试环境是否搭建成功 cnpm run dev
二、Vue基础
2.1、vue之实例
vue本质是个类模板，通过传递参数操作实例，语法如下：
var app = new vue({......})
传递的参数包括：el、data、methods....、通过app.$xx来查看
<head> <meta charset="utf-8"> <title></title> <script src="../lib/vue.js"></script> </head> <body> <div id="i1"> <p> {{test}} </p> <p> {{kao}} </p> <p> {{mtd()}} </p> </div> </body> <script> var ap = new Vue({ el:'#i1', //标签id属性 data:{ //渲染属性 test:'shabi', kao:'canima', }, methods:{ mtd:function(){ console.log(521) } } }) </script>
2.2、vue实例之-模板语法
插值（文本、原始html、表达式）
文本：
<body> <div id="i1"> <p>{{cz}}</p> </div> <script> var vu = new Vue({ el:'#i1', data:{ cz:'插值之-文本测试', //value值注意带引号 } }) </script> </body>
html:
<body> <div id="i1"> <p v-html="cz"></p> </div> <script> var vu = new Vue({ el:'#i1', data:{ cz:`<input type='text' value='插值之html' />`, //注意value值的引号是Esc键下的’~‘符 } }) </script> </body>
表达式：
指令（todo-list）