浅学vue

最新推荐文章于 2024-01-14 12:27:45 发布

Abdullahi_kanye

最新推荐文章于 2024-01-14 12:27:45 发布

阅读量678

点赞数 8

分类专栏：前端框架

本文链接：https://blog.csdn.net/Abdullahi_kanye/article/details/88952531

版权

前端框架专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、vue介绍

vue的概念：
一个渐进式的js前端框架。Vue是一个js库。(jquery也是一个js库)
vue的表达式：
{{}}
vue的其他注意点：

Vue只关注视图层。
Vue通过新的属性（自定义）和{{表达式}}扩展了 HTML。
Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue学习起来非常简单。
vue的官网:https://cn.vuejs.org/

vue的特性

轻量级的
数据绑定
指令
插件化
组件化

二、Vue的安装

官方提供两个版本
官方链接
在这里插入图片描述

三、vue入门

步骤：

在新创建的web项目的HTML中引入vue的文件
准备一个被挂载元素
创建Vue对象，并挂载相应的元素

简单的一个实例挂载el的标签。
该标签可以通过id、class、标签挂载，建议使用id挂载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.引入vue的js文件-->
    <script src="vuejs/vue.js"></script>
</head>
<body>
<!-- 一、使用id做被挂载元素。推荐使用id作为被挂载元素-->
    <!--&lt;!&ndash;2.被挂载元素-->
    <div id="app">
        {{message}}
    </div>

    <!--3.创建vue对象，并挂载相应元素-->
    <script>
        new Vue({
            el:"#app",
            data:{
                message:"三炮"
            }
        })
    </script>-->

<!-- 二、使用class作为被挂载元素-->
   <!-- <div class="app">
        {{message}}
    </div>

    <script>
        new Vue({
            el:".app",
            data:{
                message:"三炮"
            }
        })
    </script>-->

<!-- 三、使用标签作为被挂载元素,不能同时存在多个div相同的标签元素-->
    <!--<div>-->
        <!--{{message}}-->
    <!--</div>-->
    <!--<script>-->
        <!--new Vue({-->
            <!--el:"div",-->
            <!--data:{-->
                <!--message:"三炮"-->
            <!--}-->
        <!--})-->
    <!--</script>-->

</body>
</html>

Vue中的数据(data)详解

Vue实例的数据保存在配置属性data中, data自身也是一个对象.
通过Vue实例直接访问和修改data对象中的数据,及时同步的页面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--先引入vue的js文件-->
    <script src="vuejs/vue.js"></script>
</head>
<body>
    <!--被挂载元素-->
     <div id="app">
         {{message}} <hr/>
         {{user}} <hr/>
         {{user.name}} <hr/>
         {{hobbys}} <hr/>
         {{hobbys[0]}}
     </div>
    <!--创建vue对象，挂载相应元素-->
    <script>
        //也可以获取到vue对象。也可以直接new Vue({})
        var app=new Vue({
            el:"#app",
            data:{
                message:"张三炮",
                /*对象数据*/
                 user:{
                     name:"李四",
                     age:18
                 },
                //数组数据
                hobbys:["张三","李四","王五"]
            }
        })
        // 通过Vue实例直接修改data对象中的数据,及时同步的页面上--由当初的张三炮改为李三炮
        app.message="李三炮"
    </script>
</body>
</html>

在这里插入图片描述
4. Vue中的methods方法详解

Vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 该对象中值都是方法体
方法都是被Vue对象调用,所以方法中的this代表Vue对象
使用方式：直接字HTML模板标签中调用方法 {{方法名()}}；
js中通过Vue对象实例调用方法，vue对象.方法名字();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue的js文件-->
    <script src="vuejs/vue.js"></script>
</head>
<body>
    <div id="app">
        {{username}}<hr/>
        {{age}}<hr/>
        {{say("我爱游泳")}}
    </div>

    <script>
        //获得vue对象
        var app=new Vue({
            el:"#app",
            data:{
                username:"张三",
                age:18
            },
            //methods：对应的事件方法
            methods:{
                say(msg){
                    //this指向当前对象，就是当前app对象
                    return this.username+"说:"+msg;
                }
            }
        })
        //js中调用方法
        // app.say();
    </script>
</body>
</html>

在这里插入图片描述
5. vue数据双向绑定体验

监听input中值的改变同步到data中的message上，将app对象中的message值绑定到input中，同时输入input值后，也作用于app的message值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--
            双向绑定。只能用在表单元素上（文本框、密码框、多选、单选、下拉、文本域）：input、select、textare
             v-model就直接和vue对象中的username的值绑定上
             当input标签输入框中的v-model="username"值改变时<h1>{{username}}</h1>>也会跟着改变
        -->
        <input type="text" v-model="username">
        <!-- 显示app对象的message的值 -->
        <h1>{{username}}</h1>>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                username:"张三"
            }
        })
    </script>
</body>
</html>

在这里插入图片描述
说明：MVVM模式。Model View ViewModel
ViewModel中的DOM Listeners工具会帮助我们监听页面上DOM元素的变化，一旦发生变化，Model中的数据也会发生改变；
对于Model而言，当我们添加或修改Model中的数据时，ViewModel中的Data Bindings工具会帮助我们更改View中的DOM元素。从而实现View和Model的分离，达到对前端逻辑MVVM的分层架构。
在这里插入图片描述

四、vue的表达式

简单的表达式（加减乘除）、字符串的加法，就是拼接、三目运算、字符串操作、对象操作、数组操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script>
</head>
<body>
    <div id="app">
        {{1+1}}<hr/>
        <!--表达式中可以写加减乘除-->
        {{num1+num2}} ==== {{num1-num2}} === {{num1*num2}} === {{num1/num2}}<hr/>
        <!--如果有字符串,加法会拼接-->
        {{num2+num3}}<hr/>
        <!--三目运算-->
        {{sex?"男":"女"}}<hr/>
        <!--字符串（对象）中的所有方法,在表达式中都可以调用。substr(4)：截取从第四位开始   toUpperCase():大写-->
        {{username}} === {{username.length}} === {{username.substr(4)}} === {{username.toUpperCase()}}<hr/>
        <!--对象的操作，可以拿属性，也能调用方法-->
        {{user}} === {{user.username}} === {{user.eat()}}<hr/>
        <!--数组操作-->
        {{hobbys}} === {{hobbys[0]}} === {{hobbys.length}}

    </div>
    <script>
        //假设为后台值
        var user={
            username:"张三",
            age:18,
            eat(){
                return "吃饭"
            }
        }
        new Vue({
            el:"#app",
            data:{
                user:user,
                num1:1,
                num2:2,
                //字符串
                num3:"3",
                sex:false,
                username:"zhangsanlisi",
                hobbys:["钓鱼","游泳","打球"]
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

五、vue的指令

v-text和v-html指令：
两者的区别：
两者都是用于显示标签中的数据，标签中原来的数据会被覆盖住。但是v-text是文本显示，它不会去解析标签，所以数据会原封不动的展示，而 v-html是HTML显示，会去解析标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script>
</head>
<body>
    <!--
        v-text:用于显示标签中的数据，标签中原来的数据会被覆盖住
        v-html:用于显示标签中的数据，标签中原来的数据会被覆盖住
        两者的区别：
            v-text是文本显示，它不会去解析标签，所以数据会原封不动的展示
            v-html是HTML显示，会去解析标签。
    -->
    <div id="app">
        <span v-text="message">原来张三在玩蛇</span><hr/>
        <span v-html="message">原来张三在玩蛇</span>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                message:"<h1>张三现在在踢足球</h1>>"
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

v-for指令：
可以遍历的有：数组、对象、数字、字符串…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script>
</head>
<body>
    <!--
        v-for:循环(Array | Object | number | string)
            v in 数组 :v代表每一个值
            (v,i) in 数组 :v代表每一个值 i：代表下标
     -->
    <div id="app">
        <!--遍历数组：v表示值，i是索引-->
        <ul>
            <li v-for="v in hobbys">{{v}}</li><hr/>
            <li v-for="(v,i) in hobbys">{{i}} - {{v}}</li><hr/>
        </ul>
        <!--遍历对象:i表示下标 k表示属性名 v表示值  k和i的名字随意。也可以不获取，根据实际需求-->
        <ul>
            <li v-for="(v,k,i) in user">{{i}} - {{k}} - {{v}} </li><hr/>
        </ul>
        <!--遍历数字-->
        <ul>
            <li v-for="v in num"> {{v}}</li><hr/>
        </ul>
        <!--遍历字符串-->
        <ul>
            <li v-for="v in name">{{v}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                //数组
                hobbys:["张三","李四","王五"],
                //对象
                user:{
                    username:"田七",
                    age:23,
                    sex:true
                },
                //数字
                num:6,
                //字符串string
                name:"zhang"
            }
        })
    </script>
</body>
</html>

在这里插入图片描述
3. v-for指令的案列：
用v-for写一个学生列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script>
</head>
<body>
<!--使用v-for写一个学生列表-->
    <div id="app">
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>部门</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="v in user">
                    <td>{{v.id}}</td>
                    <td>{{v.name}}</td>
                    <td>{{v.sex?"男":"女"}}</td>
                    <td>{{v.age}}</td>
                    <td>{{v.dept?v.dept.name:""}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        //假设是从后台拿到的数据
        new Vue({
            el:"#app",
            data:{
                user:[
                    {id:1,name:"张三",sex:true,age:18,dept:{name:"销售部"}},
                    {id:2,name:"李四",sex:true,age:34},
                    {id:3,name:"王五",sex:false,age:23,dept:{name:"人事部"}},
                ]
            }
        })
    </script>
</body>
</html>

在这里插入图片描述
4. v-show指令：
是否显示数据，（为false时，数据还在，只是看不见而已）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script>
</head>
<body>
<!--
    show：是否显示这个数据(只是看不到，它其它还在)
        <div style="display: none;">张三游泳</div>
 -->
    <div id="app">
        <div v-show="myShow"> 张三游泳</div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                myShow:false
            }
        })
    </script>
</body>
</html>

v-if指令
v-else-if 和v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script>
</head>
<body>
    <!--if条件不满足的话，这个元素不会出现-->
    <div id="app">
        <div v-if="age<20"> 年轻</div>
        <div v-else-if="age>=20 && age<50">中年</div>
        <div v-else>长命百岁</div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                age:23
            }
        })
    </script>

</body>
</html>

v-bind指令
绑定指令。将data中的数据绑定到标签上,作为标签的属性
标准写法：
v-bind:src=“src” -> 为标签中的src属性绑定的值
简便写法：打个冒号
:src=“src” -> 为标签中的src属性绑定的值

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script>
</head>
<body>
    <!--
        bind:绑定的意思
        标准写法：
            v-bind:src="src" -> 为标签中的src属性绑定的值
        简便写法：
           :src="src" -> 为标签中的src属性绑定的值
    -->
    <div id="app">
        <img v-bind:src="src" v-bind:alt="alt" v-bind:width="width"/><hr/>
        <img :src="src" :alt="alt" :width="width"/><hr/>
        <!--将一个对象键和值  作为标签的属性的名字和值时,  在v-bind后不需要指定属性的名字-->
        <img v-bind="img">
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                src:"img/1.jpg",
                alt:"没有图片",
                width:120,
                //指图片的所有属性
                img:{
                    src:"img/1.jpg",
                    alt:"没有图片",
                    width:120,
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述
7. v-bind指令的案列
使用v-for指令和v-bind指令联合起来做一个下拉框。并还要拿到下拉框的id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script>
</head>
<body>
    <!--使用v-for指令和v-bind指令联合起来做一个下拉框。拿到下拉框的id-->
    <div id="app">
        <select>
            <option v-for="v in department" :value="v.id">{{v.name}}</option>
        </select>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                department:[
                    {id:1,name:"销售部"},
                    {id:2,name:"IT部"},
                    {id:3,name:"总经办"},
                    {id:4,name:"人事部"}
                ]
            }
        })
    </script>
</body>
</html>

在这里插入图片描述
8. v-model指令
上面有将这个双向绑定，就不多做解释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script>
</head>
<body>
    <!--
        v-model:主要用来完成双向绑定
            只能用到表单元素上(input,select,textarea)
            表单元素(文本框,密码框,多选,单选,下拉,文本域)
    -->
    <div id="app">
        <!--表单元素：文本框-->
        <input type="text" v-model="inputVal"> {{inputVal}}<hr/>
        <!--表单元素：单选框-->
        性别：
            <input type="radio" name="sex" v-model="sexVal" value="true"/>男
            <input type="radio" name="sex" v-model="sexVal" value="false"/>女
        {{sexVal}}<hr/>
        <!--表单元素：多选框-->
        爱好:
        <input name="hobby" v-model="hobbyVal" value="1" type="checkbox" /> 打篮球
        <input name="hobby" v-model="hobbyVal" value="2" type="checkbox" /> 游泳
        <input name="hobby" v-model="hobbyVal" value="3" type="checkbox" /> 踢足球
        <input name="hobby" v-model="hobbyVal" value="4" type="checkbox" /> 打羽毛球
        {{hobbyVal}}
        <hr/>
        <!--表单元素：下拉框-->
        四川省:
        <select v-model="selectVal">
            <option value="chendu">成都</option>
            <option value="meishan">眉山</option>
            <option value="leshan">乐山</option>
            <option value="nanchong">南充</option>
        </select>
        {{selectVal}}
        <hr/>
        <!--表单元素：文本域-->
        <textarea v-model="textareaVal"></textarea> {{textareaVal}}
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                inputVal:"张三打篮球",
                sexVal:false,
                hobbyVal:[1,4],
                selectVal:"wang",
                textareaVal:"李四游泳"
            }
        })
    </script>
</body>
</html>

在这里插入图片描述
9. v-on指令
事件的绑定。
标准形式： v-on:事件类型=“方法名()”
简便形式：@事件类型=“方法名()”

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script>
</head>
<body>
        <!--
        v-on:事件的绑定
            标准形式:
                v-on:事件类型="方法名()"
            简写形式:
                @事件类型="方法名()"
         -->
    <div id="app">
        <!--标准写法-->
        <input type="button" value="点我" v-on:click="say" /><hr/>
        <!--简单写法-->
        <input type="button" value="点我" @click="say" /><hr/>
        <!--传个参数给方法-->
        <input type="button" value="点我" @click="eat('鱼')" />
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{},
            //方法
            methods:{
                say(){
                    alert("张三")
                },
                eat(food){
                    alert(food+"很美味")
                }
            }
        })
    </script>
</body>
</html>

六、组件：分为全局组件和局部组件

全局组件
定义在vue对象外面，在挂载了vue对象上的html标签中,都可以使用:

一定要先定义组件,再进行vue的挂载
模板中必需有一个根标签，否则没有效果
取名的问题：如果使用驼峰命名法 myTag ->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script>
</head>
<body>
	<!--
        全局组件：
            在挂载了vue对象上的html标签中,都可以使用:
     -->
    <div id="app">
        <mytag></mytag>
        <mytag></mytag>
    </div>
        <!--没有在div标签中，没有效果，不会打印-->
        <mytag></mytag>
    <!--再定义一个div-->
    <div id="app1">
        <mytag></mytag>
    </div>
    <!--
        注意事项：
             1.一定要先定义组件,再进行vue的挂载
             2.模板中必需有一个根标签，比如<h1>
             3.取名的问题：如果使用驼峰命名法 myTag -> <my-tag>，尽量不同驼峰命名
        自定义一个全局组件。将相同的代码弄成一个组件，以后方便调用
        全局组件：被vue挂载到的地方都可以直接使用
        定义一个组件：
            第一个参数：组件的名字
            第二个参数：模块
    -->
    <script>
        Vue.component("mytag",{
            //组件的模板。必须要有根标签，否则没有效果
            template:"<h1>比如有一万句html</h1>"
        })
        new Vue({
            el:"#app"
        })
        //给另一个div创建一个vue对象
        new Vue({
            el:"#app1"
        })
    </script>
</body>
</html>

在这里插入图片描述
2. 局部组件
定义在vue对象中，只能在挂载的html标签中使用;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script>
</head>
<body>
    <!--
        局部组件：
            只能在挂载的html标签中使用;
    -->
    <div id="app">
        <mytag></mytag>
    </div>
    <div id="app2">
        <mytag></mytag>
    </div>
    <script>
        new Vue({
            el: "#app",
            //组件(多个)
            components: {
                mytag: {
                    template: "<h2>我是局部组件，在vue对象里面定义</h2>"
                }
            }
        })
</script>
</body>
</html>

在这里插入图片描述
3. 全局组件和局部组件的区别
全局组件可以作用于全局的挂载对象;
局部组件:只能作用于挂载的当前对象;

结语：vue加强篇点击进入

Abdullahi_kanye

关注

8
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
浅学vue

一、vue介绍vue的概念：一个渐进式的js前端框架。Vue是一个js库。(jquery也是一个js库)vue的表达式：{{}}vue的其他注意点：Vue只关注视图层。Vue通过新的属性（自定义）和{{表达式}}扩展了 HTML。Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue学习起来非常简单。vue的官网:https://cn.vuej...
复制链接

扫一扫