Vue知识入门汇总加全概括分享

最新推荐文章于 2024-10-18 15:58:53 发布

菜鸟小木

最新推荐文章于 2024-10-18 15:58:53 发布

阅读量1.3k

点赞数 35

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

本文链接：https://blog.csdn.net/m0_74167954/article/details/135789796

版权

web 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一：前言部分

今日分享技术网站

介绍 — Vue.js 这个是vue.js的网站官方，大家可以去看看，下面开始讲述

二：vue介绍与安装

介绍

vue是前端的操作dom对象实现数据改变时候的框架

主要的就是对应的mvvm模型，双向绑定（通过dmo来进行数据改变）

而Vue的核心就在于Viemmodel，即使变量像D0M一样直接“显在浏览器里说数据模型是为了让你知道这是MVM中的M，即模型。模型就是变量.vue的核心就是MVVM中的VM，即视图模型，就是让变量能够像D0M一样直接展示

安装

在上述分享那个网站中大家可以看到vue的官网，之后往下翻，找到安装

然后他会跳转到这个页面，之后下翻，选择第一个，然后就是等待下载，下载之后就是一个名称为Vue.js的文件

对的就是这个，之后大家在写项目的时候，把这个复制到你对应的js文件中，就可以正常的调用啦；

然后我们写项目的话，就是创建js文件夹存在js文件

然后一定要在头文件中创建外部js连接

  <script src="./js2/vue.js"></script>

Vue的使用

v-model：进行表单的数据绑定
v-bind：herf：网址连接传递
v-on:click：事件点击
v-for：循环
v-if：条件语句
v-show：输出

ok吧，宝子们我们先来看代码，我们说事件绑定，就是相互影响啦

v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 这里一定要有你对应的vue的连接 -->
    <script src="./js2/vue.js"></script>
</head>
<body>
 <div id="app">
        <input  type="text" v-model="msg">
        <!-- v-model进行的是表单的数据绑定 -->
        {{msg}}
        <!-- 差值表达式 -->
 </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"hello world"
        }
    })
</script>
</html>

在这里呢，你对应的输入前面的数据改变，也会改变后面的数据

v-bind:href

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 这里一定要有你对应的vue的连接 -->
    <script src="./js2/vue.js"></script>
</head>
<body>
 <div id="app">
       <!-- <input type="text" v-model="msg">
       {{msg}} -->

        <a v-bind:href="url">连接1</a>
        <a v-bind:href="url">连接2</a>
        <input type="text" v-model="url">
 </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            // msg: "hello world",
            url:"https://blog.csdn.net/m0_74167954?type=blog"
        }
    })
</script>
</html>

这里生成的是对应的网址链接，那么我们在输入框中自己修改网址链接，那么就会跳转到不同的网页，实现的是动态性修改，类似java中的反射，大家可以后续去尝试

v-on:click

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 这里一定要有你对应的vue的连接 -->
    <script src="./js2/vue.js"></script>
</head>
<body>
 <div id="app">
       <!-- <input type="text" v-model="msg">
       {{msg}} -->

        <!-- <a v-bind:href="url">连接1</a>
        <a v-bind:href="url">连接2</a>
        <input type="text" v-model="url"> -->

        
        <input type="button" value="点击" v-on:click="handle">
        <input type="button" value="点击2" @click="handle()">
 </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            // msg: "hello world",
            // url:"https://blog.csdn.net/m0_74167954?type=blog"
        },
        methods: {
            handle:function()
            {
                alert
                ("惦记我")
            }
        }
    })
</script>
</html>

这里的是单击事件绑定，会出现跟事件点击一样的效果

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 这里一定要有你对应的vue的连接 -->
    <script src="./js2/vue.js"></script>
</head>
<body>
 <div id="app">
       <!-- <input type="text" v-model="msg">
       {{msg}} -->

        <!-- <a v-bind:href="url">连接1</a>
        <a v-bind:href="url">连接2</a>
        <input type="text" v-model="url"> -->

        
        <!-- <input type="button" value="点击" v-on:click="handle">
        <input type="button" value="点击2" @click="handle()"> -->

         <div v-for="(item,index) in addrs">{{index}}:{{item}}</div>
 </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            // msg: "hello world",
            // url:"https://blog.csdn.net/m0_74167954?type=blog",
            addrs:["北京","上海","南京"]
        },
        // methods: {
        //     handle:function()
        //     {
        //         alert
        //         ("惦记我")
        //     }
        // }
    })
</script>
</html>

这个就是我们展示效果

我来说下他的具体分析，他是可以自动生成的，addrs就是数据绑定，毕竟学过java嘛，就是知道in访问其中的数据，之后的item以及index当然代表的是数据以及索引，之后的差值表达式{{***}}呢就是数据输出。

值得注意的是，他传递的item正是对应的数据对象，意思就是在后续的数据绑定中你可以访问他的内部属性，下面后面会给大家代码介绍

v-if以及v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 这里一定要有你对应的vue的连接 -->
    <script src="./js2/vue.js"></script>
</head>
<body>
 <div id="app">
    
        <input type="text" v-model="age">经过判定，为
        <span v-if="age <= 35">年轻人</span>
        <span v-else-if="age>35&&age<60">中年人</span>
        <span v-else>老年人</span>

        <!-- <span v-show="age<=35">年轻人</span>
        <span v-show="age>35&&age<60">中年人</span>
        <span v-show="age>=60">老年人</span> -->
        <!-- 这里就是全部都进行了渲染，通过display来进行的隐藏 -->
 </div>
</body>
<script>
    new Vue({
        el:"#app",
        data :{
            age:20
        }
    })
</script>
</html>

两者其实并没有明显的区别，唯一的区别就是在你运行网页的时候，浏览器内核是否会将代码进行渲染读取。大家可以看下面的分析

大家可以看到，在检查网页源代码的时候，它显示的仅仅是符合条件的

然后我们对比看v-show可以发现，这里的标签是全部进行了渲染的，只不过是利用css样式进行了隐藏而已

案例基础---实现集合数据显示到网页上面

大家见到的前端网页的数据输入，在此对应数据的显示以及写入数据库，前面我们说把一个功能拆开就可以进行对应的功能细分规划，下面的案例就是为了实现对应的数据展示。
同样这里也是对于前面的v-for循环中对应的数据item对象来进行的代码分析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 这里一定要有你对应的vue的连接 -->
    <script src="./js2/vue.js"></script>
</head>
<body>
    <div id="app" style="margin: 0 auto;">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>成绩</td>
                <td>成绩判断</td>
            </tr>
            <tr v-for="(item,index) in users">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>
                    <span v-if="item.gendeer==1">男</span>
                    <span v-if="item.gendeer==2">女</span>
                </td>
                <td>{{users.score}}</td>
                <td>
                    <span v-if="item.score>=90">优秀</span>
                    <span v-if="item.score>=60 && item.score<90">及格</span>
                    <span style="color: rebeccapurple;" v-if="item.score<60">不及格</span>
                </td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data :{
            users:[
                {
                    name:"mzh",
                    age:20,
                    gendeer:1,
                    score:99
                },
                {
                    name:"lcc",
                    age:19,
                    gendeer:1,
                    score:80
                },
                {
                    name:"syx",
                    age:20,
                    gendeer:2,
                    score:55
                }
            ]
        }
    })
</script>
</html>