vue2入门——菜鸟级1篇

  • 1. 安装nodejs
  • 2. 搭建国内的镜像cnpm
  • 3. 搭建demo
    • 3.1 vue2-demo
      • 3.1.1 下载vue.js
      • 3.1.2 创建空项目+安装 live-server
      • 3.1.3 初始化项目 npm init
      • 3.1.4 vue程序demo
    • 3.2 简单指令入门
      • 3.2.1 v-if
      • 3.2.2 v-for
      • 3.2.2 v-for 排序
        • 1. 简单数组排序
        • 2. 简单对象排序
  • 4. 更多学习

1. 安装nodejs

  • 官网下载：https://nodejs/zh-cn/
  • 检查node是否安装成功

2. 搭建国内的镜像cnpm

  • 参考网站：https://npmmirror/

3. 搭建demo

3.1 vue2-demo

3.1.1 下载vue.js

  • 官网下载开发版和生产版
    https://cn.vuejs/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/v2/guide/syntax.html

更多推荐

vue2入门——菜鸟级1篇