Vue菜鸟教程

全栈程序员站长

发布于 2022-07-25 11:09:43

2K0

发布于 2022-07-25 11:09:43

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

Vue框架快速入门

1.Vue的认识

1.1 什么是Vue？

Vue是一个开源的javascript框架，并且Vue支持mvc和mvvm两种模式。 Vue是一个构建数据驱动的 web 界面的渐进式框架。采用自底向上增量开发的设计。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，是又一个js库。 MVC：Model(模型),View(视图),Controller(控制器)

1.2 MVVM：

1.3 vue的特性：

1.轻量：Vue.js库的体积非常小的，并且不依赖其他基础库。 2.数据绑定：对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。 3.指令：内置指令统一为(v-指令)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。 4.插件化：Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。 5.组件化：组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用

2.vue的资源安装

2.1 直接下载vue的就是文件，然后直接拷贝到项目中，即下载vue.js文件到你的项目中。 2.2 CDN：直接在文件上使用script标签引入js文件，这个直接使用vue官网提供的路径，只要你电脑有网就可以用，即在直接使用script标签引入：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

2.3 NPM：这个需要安装软件，在构建大型应用时使用在下面的案例中我统一使用第一种方式

3.vue的使用

简单使用vue的三部曲： 3.1 引入vue的js文件 3.2 准备一个元素，可以使用任意标签，一般使用div 3.3 写js代码将上面的元素挂载起来

<body>
    <!--vue使用的步骤：①先导入js的文件-->
    <script src="vue/vue.min.js"></script>
    <!--②创建一个div,准备和vue的关系-->
    <div id="app">
        { 
   { 
   msg}}
    </div>

    <!--③写js代码：然后与上面的div创建关系-->
    <script>
        //注意：下面的Vue的写法,写成vue就出不来
        new Vue({ 
   
            el:"#app",
            data:{ 
   
                msg:"hello vue",
            }
        })
    </script>
</body>

4.Vue的重要元素

4.1 el

el的功能是完成元素的挂载 , 可以使用id选择器，class选择器，标签选择器，但是挂载只对第一个符合条件的元素起作用，所以vue推荐使用id选择器，id的值是唯一的

<body>
	<!--①导入js文件-->
    <script src="vue/vue.min.js"></script>
    <!--②准备一个元素，用来绑定下面的vue-->
    <div id="app" class="appClass">
        { 
   { 
   msg}}
    </div>
    <div class="appClass">
        { 
   { 
   msg}}
    </div>
    <!--③写js代码，将上面的元素挂载 -->
    <script>
        new Vue({ 
   
            // el:"#app", //使用的是id选择器，id唯一，只对对应的div有作用
            // el:".appClass", //使用的是类选择器，只能显示一个，第二个没有效果
            el:"div",  //标签也是，上面两个div，网页只能显示一个有效果
            data:{ 
   
                msg:"hello vue...."
            }
        })
    </script>
</body>

4.2 data

data是数据元，主要用来准备数据的，在被挂载的元素里面可以通过vue的表达式直接取到data中的数据，可以是普通类型的数据，也可以是数组，对象，而且通过vue对象改变里面数据的值，在元素中取到的值也会跟着改变。格式： ① data:{ } 里面可以写json格式的数据 ② data(){ return { } } 这里将data当成函数，以返回值的形式返回数据，在return里面直接写json格式的数据

<body>
	<!--1.导入js文件-->
    <script src="vue/vue.min.js"></script>
    <!--2.准备一个元素-->
    <div id="app">
        { 
   { 
   msg}} ----- { 
   { 
   sex}} <br/>
        { 
   { 
   hobbies}} --- { 
   { 
   hobbies[0]}}<br>
        { 
   { 
   employee}} ---- { 
   { 
   employee.name}} --- { 
   { 
   employee.age}}
    </div>
    <!--3.写js代码，完成上面元素的挂载 -->
    <script>
        var vue = new Vue({ 
   
            el:"#app",
            /*data:{ msg:"今晚月色真美", sex:true, hobbies:["唱","rap","篮球"], employee:{ name:"张三", age:68, } },*/
            data(){ 
   
                return { 
   
                    msg:"今晚月色真美",
                    sex:true,
                    hobbies:["唱","rap","篮球"],
                    employee:{ 
   
                        name:"张三",
                        age:68,
                    }
                }
            }
        })
        alert(0);
        vue.msg = "还好吧。。。";
    </script>
</body>

4.3 methods

methods：就是方法，在里面可以定义多个方法，这个方法的调用有两种方式： 1）通过Vue对象调用这个方法 2）在被挂载元素中通过表达式调用这个方法

<script src="vue/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!--直接在挂载元素中使用表达式调用方法-->
        { 
   { 
   msg}}  { 
   { 
   name}}   { 
   { 
   say()}}  { 
   { 
   hello("真优秀")}}
    </div>
    <script>
        var vue = new Vue({ 
   
            el:"#app",
            data:{ 
   
                msg:"对不起，生而为人",
                name:"太宰治",
                age:35
            },
            methods:{ 
   
                say(){ 
   
                    alert("王权富贵");
                },
                hello(msg){ 
   
                    alert(this.name+msg);
                    //在这里改变name的值，上面的name值也会被改变
                    this.name = "王富贵";
                }
            }
        })
        //可以直接通vue对象调用这个方法
        // vue.say();
    </script>
</body>

4.4 Vue表达式

**{ { }}**是Vue的表达式，里面代码的写法和js一样，是用来取值的在表达式中可以进行四则运算，三目运算，数组，对象，字符串都可以直接操作

<body>
	<script src="vue/vue.min.js"></script>
    <div id="app">
        <!--首先通过表达式可以直接取值-->
        { 
   { 
   msg}}  <br>
        <!--表达式里面可以直接进行四则运算-->
        { 
   { 
   4+2}}
        { 
   { 
   4+"2"}}   <!--如果+两边有字符串就是字符串的拼接-->
        { 
   { 
   4-2}}
        { 
   { 
   4*2}}
        { 
   { 
   4/2}}
        { 
   { 
   num1/num2}}
        <br>
        <!--表达式中可以进行三目运算-->
        { 
   { 
   sex?"男":"女"}} <br>
        <!--通过表达式操作字符串-->
        { 
   { 
   name}} --- { 
   { 
   name.substr(1,3)}} --- { 
   { 
   name.substring(1,3)}}
          ----{ 
   { 
   name.substring(1,3).toUpperCase()}} <br>
        <!--通过表达式操作数组-->
        { 
   { 
   hobbies}} --- { 
   { 
   hobbies[0]}} ---- { 
   { 
   hobbies.length}}
        <br>
        <!--通过表达式操作对象-->
        { 
   { 
   employee}}  { 
   { 
   employee.name}}
        { 
   { 
   employee.say()}}
    </div>
    <script>
        var vue = new Vue({ 
   
            el:"#app",
            data:{ 
   
                msg : "以后不说脏话",
                num1:4,
                num2:4,
                sex:true,
                name:"dafsfegeg",
                hobbies:["唱跳","rap","篮球"],
                employee:{ 
   
                    name:"王五",
                    age: 18,
                    say(){ 
   
                        return "我是"+this.name;
                    }
                }
            },
        })
    </script>
</body>

5.vue的常用指令

指令名称	指令作用	备注
v-html	显示与解析HTML代码	等效与JS的innerHTML
v-text	原封不动的展示	等效与JS的innerText
v-for	遍历与循环功能	遍历数字，字符串,对象,数组
v-bind	绑定属性	简单形式 :属性名=“值”
v-model	双向绑定	只支持input,select,textarea
v-show	显示与隐藏	隐藏只是样式:style=“display=none”
v-if	判断	v-if/v-else-if/v-else是一组
v-on	绑定事件	简写形式 @事件名=方法名()

5.1 v-html与v-text

1)、直接使用{ {}}表达式取值，会将内容原样输出 2)、v-html指令：可以解析里面的HTML标签，和innerHTML的用法一样 3)、v-text指令：只能将文本原样输出，和innerText的用法一样

<body>
	<script src="vue/vue.min.js"></script>
    <div id="app">
        <span id="span"></span> <br>
        <span>{ 
   { 
   msg}}</span><br>
        <span v-html="msg"></span>
        <span v-text="msg"></span>
    </div>
    <script>
        //使用原生js的方式对span插入值
        document.getElementById("span").innerHTML = "<h3>我是一个div</h3>";
        new Vue({ 
   
            el:"#app",
            data:{ 
   
                msg:"<h1>我想带一人回云深不知处，带回去，藏起来</h1>"
            },
            methods:{ 
   }
        })
    </script>

5.2 v-for

v-for循环遍历，可以用来遍历Array、Object 、number 、string、Iterable。语法：v in Object v是自定义的变量，Object是我们需要遍历的对象 1）遍历number数字：就是普通的循环：for(var i=1;i<=数字;i++) 2）遍历String就是将字符串中的每一个字母都拿出来 3）遍历Object对象，v-for=”(v,k,i) in 对象” v:代表对象的属性值 k:代表对象的属性名 i:代表索引 4）遍历Array数组，v-for=”(v,i) in 数组” v:代表对象的属性值 i:代表索引

<body>
     <script src="vue/vue.min.js"></script>
    <div id="app">
        <!--遍历数字：下面的v in num等效于 for(var i=1;i<=num;i++){ 
   }-->
        <ul>
            <li v-for="v in num">{ 
   { 
   v}}</li>
        </ul>
        <!--遍历字符串：会将字符串中的字母一个个遍历出来-->
        <ul>
            <li v-for="v in name">{ 
   { 
   v}}</li>
        </ul>
        <!--遍历数组：会将字符串中的字母一个个遍历出来
            v,i  第一个参数v是具体的值，第二个参数i是该值对应的索引  -->
        <ul>
            <li v-for="(v,i) in hobbies">{ 
   { 
   v}}--{ 
   { 
   i}}</li>
        </ul>

        <!--遍历对象：v,k,i 第一个参数v是具体的值，第二个参数k是这个只对应的key，i是索引-->
        <ul>
            <li v-for="(v,k,i) in employee">{ 
   { 
   k}} -- { 
   { 
   v}}--{ 
   { 
   i}}</li>
        </ul>
    </div>
    <script>
        new Vue({ 
   
            el:"#app",
            data:{ 
   
                num:5,
                name:"liqiao",
                hobbies:["唱跳","rap","篮球"],
                employee:{ 
   
                    name:"张三丰",
                    age:18,
                },
            },
        })
    </script>

5.3 v-bind

v-bind是给被挂载的元素绑定属性，当是一个元素对象的时候，也可以直接绑定语法： v-bind:属性名=“值” ，值是定义的Vue中的data的数据还有可以使用简写形式–> :属性名=“值”

<body>
	<script src="vue/vue.min.js"></script>
    <div id="app">
        <img v-bind:src="srcVal" v-bind:height="heigth"/>
        <img :src="srcVal" :height="heigth">
        <!--绑定一个对象:v-bind="值"，注意img中的数据src和会height会被绑定到属性上，所以必须和img的属性名一致-->
        <img v-bind="img"/>
    </div>
    <script>
        new Vue({ 
   
            el:"#app",
            data:{ 
   
                srcVal:"timg.jpg",
                heigth:400,
                img:{ 
   
                    src:"timg.jpg",
                    height:200,
                }
            },
        })
    </script>
</body>

5.4 v-model

v-model：用于双向的数据绑定，只能用在input/select/textarea这三个标签上

<body>
	<script src="vue/vue.min.js"></script>
    <div id="app">
        <input type="text" v-model="inputVal"/>
        { 
   { 
   inputVal}}
        <hr>
        爱好：<input type="checkbox" value="1" v-model="checkboxVal" />看电影
              <input type="checkbox" value="2" v-model="checkboxVal" />打篮球
              <input type="checkbox" value="3" v-model="checkboxVal" />唱歌
              <input type="checkbox" value="4" v-model="checkboxVal" />看小说
        <br>
        { 
   { 
   checkboxVal}}
        <hr>
        性别：<input value="1" v-model="radioVal" type="radio" />男
             <input value="2" v-model="radioVal" type="radio" />女
            <br/>
        { 
   { 
   radioVal}}
        <hr>
        <select v-model="selectVal">
            <option value="1">中国</option>
            <option value="2">日本</option>
            <option value="3">美国</option>
        </select><br>
        { 
   { 
   selectVal}}
        <hr>
        <textarea v-model="textareaVal"></textarea><br>
        { 
   { 
   textareaVal}}
    </div>
    <script>
        new Vue({ 
   
            el: "#app",
            data:{ 
   
                inputVal:"人间失格",
                checkboxVal:["1","3"],
                radioVal:2,
                selectVal:2,
                textareaVal:"fhsaofhpweg"
            }
        })
    </script>
</body>

5.5 v-on

v-on：事件绑定，给被挂载的元素绑定事件语法：<标签名 v-on:事件名=方法名()> 简写形式：<标签名 @事件名=方法名() >

<body>
	<script src="vue/vue.min.js"></script>
    <div id="app">
        <button v-on:click="say()">点我啊</button>
        <button v-on:click="hello('是个渣男')">你在点我啊</button>
        <button v-on:click="age++">{ 
   { 
   age}}</button>
    </div>
    <script>
        var vue = new Vue({ 
   
            el:"#app",
            data:{ 
   
                name:"张无忌",
                age:22,
            },
            methods:{ 
   
                say(){ 
   
                    alert("点啊，你个瓜娃子");
                },
                hello(msg){ 
   
                    alert(this.name+msg);
                }
            }
        })
    </script>
</body>

6.vue的组件（自定义标签）

6.1 组件的注意事项

1）先创建组件再进行挂载 2）组件的template有且只有一个外部标签 3）组件取名如果是驼峰命名,使用-表示例: MyTagHaha ->

6.2 全局组件

语法：Vue.component(‘组件名’,{ template:” 里面写模板代码 “, }) 通过Vue定义的组件，就是一个全局的组件，在所有被挂载的元素里面都可以使用注意：下面的组件名是myTag，然后在使用时候必须写才能识别

<body>
   <script src="vue/vue.min.js"></script>
   <div id="app">
       <my-tag></my-tag>
   </div>
   <div id="app2">
       <my-tag></my-tag>
   </div>
   <script>
       Vue.component('myTag',{ 
   
           template:"<div><h1>你今天开心吗？</h1><h3>开心啊</h3></div>",
       })
       new Vue({ 
   
           el:"#app2",
           data:{ 
   }
       })
       new Vue({ 
   
           el:"#app",
           data:{ 
   }
       })
   </script>
</body>

6.3 局部组件

局部组件是在定义的一个Vue对象里面定义的组件，在一个Vue对象中可以定义多个组件，所以使用的关键字是components 语法：new Vue({ el:”#app”, components:{ “组件名”:{ template:” 在里面写模板代码 “ } } })

<body>
    <script src="vue/vue.min.js"></script>
   <div id="app">
       <mytag></mytag>
   </div>
   <script>
       new Vue({ 
   
           el:"#app",
           data:{ 
   },
           components:{ 
   
               "mytag":{ 
   
                   template:"<h1>我很爱国</h1>"
               }
           }
       })
   </script>
</body>

6.4 组件的细节

vue的组件的使用，像下面这样使用template在里面写HTML代码不方便，如果代码量太多就不好写，所以有两种方式可以解决这个问题： 1）直接使用template标签，将模板中的代码直接写在template标签里面 2）使用script标签，设置type=“text/template”，然后在标签里面写模板中的代码

使用template标签的代码：注意：如果template标签直接写在挂载元素里面，是可以直接显示模板代码效果的，但是不要这样做

</head>
<body>
   <script src="vue/vue.min.js"></script>
   <div id="app">
       <mytag></mytag>
   </div>
   <template id="form">
       <form>
           姓名：<input type="text" placeholder="用户名" /><br>
           密码：<input type="password" placeholder="密码" /><br>
           <button type="button" @click="say()">{ 
   { 
   msg}}</button>
       </form>
   </template>
   <script>
       Vue.component('mytag',{ 
   
           // template:"<div>我想去南极</div>>",
           template:"#form",
           data(){ 
   
               return { 
   
                   msg:"点我啊"
               }
           },
           methods:{ 
   
               say(){ 
   
                   alert("你好啊");
               }
           }
       })
       new Vue({ 
   
           el:"#app",
           data:{ 
   }
       })
   </script>
</body>

使用script标签的代码：

<body>
	<script src="vue/vue.min.js"></script>
    <div id="app">
        <mytag></mytag>
    </div>
    <script type="text/template" id="myjstemp">
        <form action="" method="post">
            名称：<input type="text" name="username"/><br>
            密码：<input type="password" name="pwd"/><br>
            <button type="button">登录</button><br>
        </form>
    </script>
    <script>
        Vue.component('mytag',{ 
   
            template:"#myjstemp",
        })
        new Vue({ 
   
            el:"#app",
            data:{ 
   }
        })
    </script>
</body>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/127188.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年4月9，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js