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>hellotitle>
    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

效果如下：

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

方法二：

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

4. 更多学习

更多学习还是要去官网
https://cn.vuejs.org/v2/guide/syntax.html

相关阅读:
C语言——指针进阶（二）
使用ApiFox衔接前后端开发人员，提升沟通效率实践
[附源码]计算机毕业设计小型银行管理系统Springboot程序
Java项目：SSM汽车维修中心管理系统
SpringBoot自定义属性编辑器(2022.11.09)
圆弧插补【C#】
使用vi、vim、sed、echo、cat操作文件
Flask 学习-47.Flask-RESTX 自定义响应内容marshal_with
国外顶级老师给我讲了15种微服务框架，15种啊，同学们快快学起来
【Qt控件之QLabel】用法及技巧

原文地址：https://blog.csdn.net/suixinfeixiangfei/article/details/126147762