vue2入门——菜鸟级1篇
1. 安装nodejs
- 官网下载:https://nodejs.org/zh-cn/
- 检查node是否安装成功
2. 搭建国内的镜像cnpm
3. 搭建demo
3.1 vue2-demo
3.1.1 下载vue.js
- 官网下载开发版和生产版
https://cn.vuejs.org/v2/guide/installation.html#NPM.
3.1.2 创建空项目+安装 live-server
- ① 安装启动服务live-server:
cnpm install -g live-server
创建项目目录之后,安装启动服务
- ② 使用命令
live-server
打开index.html
3.1.3 初始化项目 npm init
- 使用
npm init
初始化项目,自动生成package.json
3.1.4 vue程序demo
- 很简单,直接看
- 测试效果
- hello.html 代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello</title> <script type="text/javascript" src="../assets/js/vue.js"></script> </head> <body> hello hello <div id="test"> {{message}} </div> <script type="text/javascript"> var app = new Vue( { el:"#test", data:{ message:"hello,my test!" } } ) </script> </body> </html>
3.2 简单指令入门
3.2.1 v-if
- 直接看图:
<body> hello hello <div id="test"> <p v-if="seen">快来看这里</p> <p v-else="seen">快来看这里</p> </div> <script type="text/javascript"> var app = new Vue( { el:"#test", data:{ seen:true } } ) </script> </body>
3.2.2 v-for
- 代码如下:
<body> hello hello <div id="test"> <li v-for="item in items"> {{item}} </li> </div> <script type="text/javascript"> var app=new Vue({ el:'#test', data:{ items:[11,22,33,44,55] } }) </script> </body>
- 效果如下:
3.2.2 v-for 排序
1. 简单数组排序
- 方法一:
<body> hello hello <div id="test"> <li v-for="item in sortItems"> {{item}} </li> </div> <script type="text/javascript"> var app=new Vue({ el:'#test', data:{ items:[11,2,33,4,55] }, computed:{ sortItems:function(){ return this.items.sort((a,b)=>{ return a-b }); } } }) </script> </body>
- 方法二:
<body> hello hello <div id="test"> <li v-for="item in sortItems"> {{item}} </li> </div> <script type="text/javascript"> var app=new Vue({ el:'#test', data:{ items:[11,2,33,4,55] }, computed:{ sortItems:function(){ return this.items.sort(sortNumber); } } }) function sortNumber(a,b){ return a-b } </script> </body>
2. 简单对象排序
- 直接给代码
<body> hello hello <div id="test"> <li v-for="dog in sortDogs"> {{dog.name}}-->{{dog.age}} </li> </div> <script type="text/javascript"> var app=new Vue({ el:'#test', data:{ dogs:[ {name:'麦兜',age:3}, {name:'贝塔',age:2}, {name:'酥妮',age:1}, {name:'老顽童',age:5} ] }, computed:{ sortDogs:function(){ return sortByAge(this.dogs,'age'); } } }) //数组对象方法排序: function sortByAge(array,key){ return array.sort(function(a,b){ var x = a[key]; var y = b[key]; return ((x<y)?-1:((x>y)?1:0)); }); } </script> </body>
4. 更多学习
- 更多学习还是要去官网
https://cn.vuejs.org/v2/guide/syntax.html