vue 基础新手快速入门实例

最新推荐文章于 2023-04-14 10:46:45 发布

置顶南京小菜

最新推荐文章于 2023-04-14 10:46:45 发布

阅读量240

点赞数 1

分类专栏： nodejs vue

本文链接：https://blog.csdn.net/shi860715/article/details/106257893

版权

vue 同时被 2 个专栏收录

15 篇文章 2 订阅

订阅专栏

nodejs

13 篇文章 0 订阅

订阅专栏

vue 基础新手快速入门实例

https://cn.vuejs.org/官方网站还有文档

这里安装使用nodejs的方式进行安装。

建议小伙伴不回nodejs 的可以看飞机：进行安装和版本切换

https://blog.csdn.net/shi860715/article/details/106223238

1 镜像切换工具

npm install nrm -g


C:\Users\Administrator>npm install nrm -g
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated mkdirp@0.3.5: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated coffee-script@1.7.1: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:\Program Files\nodejs\nrm -> C:\Program Files\nodejs\node_modules\nrm\cli.js
+ nrm@1.2.1
added 494 packages in 46.845s

C:\Users\Administrator>nrm ls

* npm -------- https://registry.npmjs.org/
  yarn ------- https://registry.yarnpkg.com/
  cnpm ------- http://r.cnpmjs.org/
  taobao ----- https://registry.npm.taobao.org/
  nj --------- https://registry.nodejitsu.com/
  npmMirror -- https://skimdb.npmjs.com/registry/
  edunpm ----- http://registry.enpmjs.org/


C:\Users\Administrator>nrm use taobao


   Registry has been set to: https://registry.npm.taobao.org/


C:\Users\Administrator>nrm test npm

  npm ---- 1794ms


C:\Users\Administrator>nrm test taobao

* taobao - 122ms


C:\Users\Administrator>

nrm ls 查看镜像地址；

nrm test npm 测试速度；

nrm use taobao；

nrm test npm；


C:\Users\Administrator>npm install nrm -g
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated mkdirp@0.3.5: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated coffee-script@1.7.1: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:\Program Files\nodejs\nrm -> C:\Program Files\nodejs\node_modules\nrm\cli.js
+ nrm@1.2.1
added 494 packages in 46.845s

C:\Users\Administrator>nrm ls

* npm -------- https://registry.npmjs.org/
  yarn ------- https://registry.yarnpkg.com/
  cnpm ------- http://r.cnpmjs.org/
  taobao ----- https://registry.npm.taobao.org/
  nj --------- https://registry.nodejitsu.com/
  npmMirror -- https://skimdb.npmjs.com/registry/
  edunpm ----- http://registry.enpmjs.org/


C:\Users\Administrator>nrm use taobao


   Registry has been set to: https://registry.npm.taobao.org/


C:\Users\Administrator>nrm test npm

  npm ---- 1794ms


C:\Users\Administrator>nrm test taobao

* taobao - 122ms


C:\Users\Administrator>

2 创建工程

2.1创建新新工程 --vue

在这里插入图片描述

2.2 创建模块，vue-demo

在这里插入图片描述

2.3 初始化工程

npm init -y

在这里插入图片描述

2.4 安装vue

#npm install vue --save

在这里插入图片描述

2.5 vue页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="app">
    <input type="text" v-model="num"><input type="button" @click="num++" value="+"><br>

    <h1> {{ name }}，你好！小狗子！！</h1>
    <h1> {{ num }}，访问流量！！</h1>
    <button @click="say">唠嗑</button>
</div>
   <script src="node_modules/vue/dist/vue.js"></script>

    <script>
         const app = new Vue({
           el:"#app",
           data:{
               name:"张三",
               num:10
        },
        methods:{
               say(){
                   console.log("bb  哈哈哈");
               }
        }


        });

    </script>
</body>
</html>

运行效果：

2.6 vue 浏览器插件

链接：https://pan.baidu.com/s/10EKpXTgUukUITWHd1eKiCw
提取码：lmhd
复制这段内容后打开百度网盘手机App，操作更方便哦

下载后，解压缩，通过浏览器安装插件。

2.7 运行效果：

在这里插入图片描述

3 指令

3.1 插值表达式

{{}}

3.2 插值闪烁

这种方式在网速不好的情况下，会显示成{{name}}，{{num}}这样给用户的体验很不好，建议少用

3.3 指令替换

v-text: 将数据输出到元素的内部，如果过输出数据有html，会作为普通文本输出；

v-html: 将数据出处到元素内部，如果有html代码，会被渲染；


v-text <span v-text="name"></span>

3.4 v-model 数据的双向绑定

上面改的实例中已经有。略 lessons.join(",");

3.5 v-on

在项目中，我们之前用的@click（事件名）用来绑定事件

3.6 事件修饰符

.stop ：阻止事件冒泡

.prevent: 阻止默认事件发生

.capture ：使用事件捕获模式

.self ：只有元素自身出发事件才执行(冒泡或捕获都不执行)

.once :只执行一次次

3.7 v-for



<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>

</head>
<body>
<div id="app">
   <input type="text" v-model="num"><input type="button" @click="num++" value="+"><br>

   <h1> {{ name }}，你好！小狗子！！</h1>
   <h1> {{ num }}，访问流量！！</h1>
   <button @click="say">唠嗑</button>

   <hr>

       <ul>
           <li v-for=" ( u,i ) in users">
              {{i}} {{ u.name + "," + u.age + ","+ u.male }}

           </li>
       </ul>

   <ul>
       <li v-for=" (v,k) in users[0]">
           {{k}} {{v}}

       </li>
   </ul>
   <ul>
       <li v-for=" (v,k,i) in users[0]">
           {{i}}{{k}} {{v}}

       </li>
   </ul>
   <ul>
       <li v-for=" i in 5">
           {{i}}

       </li>
   </ul>
</div>
  <script src="node_modules/vue/dist/vue.js"></script>





   <script>
        const app = new Vue({
          el:"#app",
          data:{
              name:"张三",
              num:10,
              users:[
                  {name:"二球",age:"10",male:"男"},
                  {name:"张三",age:"10",male:"男"},
                  {name:"李四",age:"10",male:"男"},
                  {name:"王五",age:"10",male:"女"}
              ]


       },
       methods:{
              say(){
                  console.log("bb  哈哈哈");
              }
       }


       });

   </script>
</body>
</html>

3.8 ：key

给循环便利的数据指定一个key，这样就不用全部遍历数据，而是只渲染数据修改项，对应的key，这样可以提高渲染效率

   <ul>
        <li v-for=" (v,k,i) in users[0]" :key=“i”>
            {{i}}{{k}} {{v}}

        </li>
    </ul>

3.9 v-if 和v-show

当结果为true时，所在的元素才会被渲染；

V-if="布尔表达式"

v-show 只是想目标元素样式设置长城display：none，而v-if 会把整个元素移除；

使用场景：在一次性判断的过程中，我们使用v-if 会更好。

而在现实效果中，我们需要频繁的达到隐藏和显示的效果时候，我们用v-show 会更好。

两个元素都没错，只是使用场景不一样；

3.10 v-bind

插值表达式不能够操作元素的属性值，且有些元素的属性是特有的，不属于vue的属性。我们可以通过v-bind来更改，将这个元素的属性转换成一个vue属性：


<div class="">
    
</div>
<div v-bind:class="color">// 这里的color 是vue data中的属性
    
</div>
<div :class="color">// 这里的color 是vue data中的属性
    
</div>

完整示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #mydiv{
            height: 100px;
            width: 100px;
            border: solid 1px red;

        }
        .red{
            background-color: red;

        }
        .blue{
            background-color: blue;

        }

    </style>
</head>
<body>
<div id="app">
    <button @click="isRed=!isRed">点我改变颜色</button>
    <div id="mydiv" :class="{red:isRed,blue:!isRed}">
        div

    </div>

</div>
   <script src="node_modules/vue/dist/vue.js"></script>



    <script>
         const app = new Vue({
           el:"#app",
           data:{
               name:"张三",
               num:10,
               users:[
                   {name:"二球",age:"10",male:"男"},
                   {name:"张三",age:"10",male:"男"},
                   {name:"李四",age:"10",male:"男"},
                   {name:"王五",age:"10",male:"女"}
               ],
               isRed:true


        },
        methods:{
               say(){
                   console.log("bb  哈哈哈");
               }
        }


        });

    </script>
</body>
</html>

3.11 计算属性

计算属性，看起来像方法，但是还是一个属性。在vue插件中，我们看到他就是一个属性。所以在使用过程中，直接使用

您的生日为：

来使用该属性。

计算属性，多次调用，只计算执行一次；

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #mydiv{
            height: 100px;
            width: 100px;
            border: solid 1px red;

        }
        .red{
            background-color: red;

        }
        .blue{
            background-color: blue;

        }

    </style>
</head>
<body>
<div id="app">
    <button @click="isRed=!isRed">点我改变颜色</button>
    <div id="mydiv" :class="{red:isRed,blue:!isRed}">
        div

    </div>
    <hr>
    <h1>您的生日为：<span v-text="brith"></span></h1>

</div>
   <script src="node_modules/vue/dist/vue.js"></script>



    <script>
         const app = new Vue({
           el:"#app",
           data:{
               name:"张三",
               num:10,
               users:[
                   {name:"二球",age:"10",male:"男"},
                   {name:"张三",age:"10",male:"男"},
                   {name:"李四",age:"10",male:"男"},
                   {name:"王五",age:"10",male:"女"}
               ],
               isRed:true,
                brithday:1529032123201


        },
        computed:{
               brith(){
                   const day =new Date(this.brithday);
                   return day.getFullYear() +"年"+day.getMonth() +"月"+day.getDay()+"日";
               }
        }     ,
        methods:{
               say(){
                   console.log("bb  哈哈哈");
               }
        }


        });

    </script>
</body>
</html>

3.12 监控 watch

在watch 监控中，有两点：一个为浅监控，还有一个为深度监控；

注意两点的却别和写的方式。浅监控是根据变量引用地址的改变来实现监控的。

 watch:{
               age(v,oldv){ // 这种方式叫做浅监控，根据值的变化
                 console.log(v,oldv);
               },
                person: {
                   deep:true, // 深度监控，注意些handler 默认的方法
                    handler(val){
                       console.log(val.height);
                    }
                }

             }

完整实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #mydiv{
            height: 100px;
            width: 100px;
            border: solid 1px red;

        }
        .red{
            background-color: red;

        }
        .blue{
            background-color: blue;

        }

    </style>
</head>
<body>
<div id="app">
    <button @click="isRed=!isRed">点我改变颜色</button>
    <div id="mydiv" :class="{red:isRed,blue:!isRed}">
        div

    </div>
    <hr>
    <h1>您的生日为：<span v-text="brith"></span></h1>

    <hr>
    <h1>{{age}}</h1>

</div>
   <script src="node_modules/vue/dist/vue.js"></script>



    <script>
         const app = new Vue({
           el:"#app",
           data:{
               name:"张三",
               num:10,
               users:[
                   {name:"二球",age:"10",male:"男"},
                   {name:"张三",age:"10",male:"男"},
                   {name:"李四",age:"10",male:"男"},
                   {name:"王五",age:"10",male:"女"}
               ],
               isRed:true,
                brithday:1529032123201,
                age:20,
               person:{
                   name:"lisi",
                   height:20
               }


        },
        computed:{
               brith(){
                   const day =new Date(this.brithday);
                   return day.getFullYear() +"年"+day.getMonth() +"月"+day.getDay()+"日";
               }
        }     ,
             watch:{
               age(v,oldv){ // 这种方式叫做浅监控，根据值的变化
                 console.log(v,oldv);
               },
                person: {
                   deep:true, // 深度监控，注意些handler 默认的方法
                    handler(val){
                       console.log(val.height);
                    }
                }

             },
        methods:{
               say(){
                   console.log("bb  哈哈哈");
               }
        }


        });

    </script>
</body>
</html>

3.13 全局组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #mydiv{
            height: 100px;
            width: 100px;
            border: solid 1px red;

        }
        .red{
            background-color: red;

        }
        .blue{
            background-color: blue;

        }

    </style>
</head>
<body>
<div id="app">
 <counter></counter>

</div>
   <script src="node_modules/vue/dist/vue.js"></script>
    <script>
<!--       全局自定义组件-->
        Vue.component("counter",{
            template:'<button @click=\"count++\">您已经点击了我{{count}}次</button>',
            data(){
                return {
                    count:0
                }
            }
        });

         const app = new Vue({
           el:"#app",
           data:{   }


        });

    </script>
</body>
</html>

3.14 局部组件


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #mydiv{
            height: 100px;
            width: 100px;
            border: solid 1px red;

        }
        .red{
            background-color: red;

        }
        .blue{
            background-color: blue;

        }

    </style>
</head>
<body>
<div id="app">
 <counter></counter>
<!--    -->
    <counum></counum>
</div>
   <script src="node_modules/vue/dist/vue.js"></script>
    <script>
<!--       全局自定义组件-->
        Vue.component("counter",{
            template:'<button @click=\"count++\">您已经点击了我{{count}}次</button>',
            data(){
                return {
                    count:0
                }
            }
        });
         // 局部组件, 只能在定义的组件的位置去是哟个该组件
       const  counum = {
           template:'<button @click=\"count++\">您已经点击了我{{count}}次</button>',
           data(){
               return {
                   count:0
               }
           }
       };


         const app = new Vue({
           el:"#app",
           data:{   },
          components:{
              counum
          }

        });

    </script>
</body>
</html>

3.15 父子之间传递消息

props中的值的名字很重要，要和父组件中的v-bind属性要一致

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">


    </style>
</head>
<body>
<div id="app">
       <counum :username="msg"></counum>
      <forcompent :items="lessons"></forcompent>

</div>
   <script src="node_modules/vue/dist/vue.js"></script>
    <script>

         // 局部组件, 只能在定义的组件的位置去是哟个该组件
       const  counum = {
           template:'  <h1>我的名字叫做{{username}}，请大家多多关照</h1>',
           data(){
               return {
                   count:0
               }
           },
           props:['username']
       };
        // 这里定义的是一个复杂点的局部组件，当数据为空的时候，我们自己填充一些初始数据保证网页的稳定
       const  forcompent={
           template:'<ul>\n' +
               '        <li v-for="item in items">{{item}}</li>\n' +
               '    </ul>',
           props:{
               items:{
                   type:Array,
                   default:['java']
               }
           }
       };

         const app = new Vue({
           el:"#app",
           data:{
               msg:"张飞",
               lessons:["java","c++","pyhone"]
           },
          components:{
              counum,forcompent
          }

        });

    </script>
</body>
</html>

3.16 子向父通信

原理就是，儿子不能直接修改父亲的属性。而是通过自定义事件，来出发父亲的方法，来改变父亲的属性；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">


    </style>
</head>
<body>
<div id="app">
    <counter :num="num" @incr="add"  @reduce="reduce"></counter>

</div>
   <script src="node_modules/vue/dist/vue.js"></script>
    <script>

<!--         子父通信-->

           const counter = {
          template:`
             <div>
                 <button @click="handlerAdd">+</button>
                 <button @click="handlerReduce">-</button>
                 <h1> num:{{ num }}</h1>
             </div>

          `,
          props:['num'],
               methods:{
                    handlerAdd(){
                        this.$emit("incr");
                    },
                   handlerReduce(){
                       this.$emit("reduce");
                   }
               }
           };


         const app = new Vue({
           el:"#app",
           data:{
             num:0
           },
          components:{
              counter
          },
             methods: {
               add(){
                   this.num++;
               },
               reduce(){
                   this.num--;
               }
             }

        });

    </script>
</body>
</html>