vue2入门——菜鸟级1篇

@素素~

已于 2022-08-04 12:39:20 修改

阅读量1.8k

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2022-08-04 08:43:36 首次发布

本文链接：https://blog.csdn.net/suixinfeixiangfei/article/details/126147762

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

vue2入门——菜鸟级1篇

1. 安装nodejs
2. 搭建国内的镜像cnpm
3. 搭建demo
4. 更多学习

1. 安装nodejs

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

2. 搭建国内的镜像cnpm

参考网站：https://npmmirror.com/

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

@素素~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue2入门——菜鸟级1篇

vue2入门——菜鸟级1篇1. 安装nodejs2. 搭建国内的镜像cnpm3. 搭建demo3.1 vue2-demo3.1.1 下载vue.js3.1.2 创建空项目+安装 live-server3.1.3 初始化项目 npm init3.1.4 vue程序demo3.2 简单指令入门3.2.1 v-if3.2.2 v-for4. 更多学习......
复制链接

扫一扫