Vue入门

什么时候点菜

已于 2023-07-24 19:35:21 修改

阅读量44

点赞数

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

于 2023-07-04 20:02:10 首次发布

本文链接：https://blog.csdn.net/qq_41550996/article/details/131533488

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、第一个Vue程序以及el挂载点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dwosh2</title>
</head>
<body>
    <div id="app">
        {{ message }}
        <h2>{{school.mobile}}</h2>
        <ul>
            <li>{{campus[1]}}</li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        <script>
        var app =new Vue({
            el:".app",
            data:{
                message:"我是!",
                school:{
                    name:"程序员",
                    mobile:"178555",
                },
                campus:["北京","上海"]
            }
        })
    </script>
</body>
</html>

先导入vue.js，之后通过el挂在id，数据在data中定义，在div中可以通过两个大括号的形式来调用。Vue中用到的数据定义在data中，data中可以写复杂类型的数据，渲染复杂类型数据时,遵守js的语法即可。注：不可以挂载在<html>和<body>和单标签。

二、Vue指令

1、vue-text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2 v-text="message">nihao</h2>
        <h2 v-text="message+info">nihao</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app =new Vue({
            el:"#app",
            data:{
                message:"我是!",
                info:"nide",
            }
        })
    </script>
</body>
</html>

v-text指令的作用是:设置标签的内容(textContent) ；默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容；内部支持写表达式。

2、v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2 v-html="message">nihao</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app =new Vue({
            el:"#app",
            data:{
                message:"<a href='#'>我是!"
            }
        })
    </script>
</body>
</html>

v-html指令的作用是:设置元素的innerHTML ；内容中有html结构会被解析为标签；v-text指令无论内容是什么,只会解析为文本；解析文本使用v-text,需要解析html结构使用v-html。

3、v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="button" v-on:click="doIt" value="1"></input>
        <input type="button" @click="doIt" value="3"></input>
        <input type="button" v-on:dblclick="doIt" value="4"></input>
        <h2 @click="changeFood">{{food}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app =new Vue({
            el:"#app",
            data:{
                food:"jidan"
            },
            methods:{
                doIt:function(){
                    alert("做it");
                },
                changeFood:function(){
                    console.log(this.food);
                    this.food+="好吃";
                }
            }
        })
    </script>
</body>
</html>

v-on指令的作用是:为元素绑定事件；事件名不需要写on；指令可以简写为@ ；绑定的方法定义在methods属性中；方法内部通过this关键字可以访问定义在data中数据。

4、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>
</head>
<body>
    <div id="app">
        <img src="./img/monkey.gif" alt="" v-show="isShow">
        <img src="./img/monkey.gif" alt="" v-show="age>18">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:true,
                age:19
            }
        })
    </script>
</body>
</html>

v-show指令的作用是:根据真假切换元素的显示状态；原理是修改元素的display,实现显示隐藏；指令后面的内容,最终都会解析为布尔值；值为true元素显示,值为false元素隐藏；数据改变之后,对应元素的显示状态会同步更新。

5、v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p v-if="isShow">nihaochengxuyuan</p>
        <input type="button" value="qiehuan" @click="toggleIsShow"></input>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:true,
                age:19
            },
            methods:{
                toggleIsShow:function(){
                    this.isShow=!this.isShow;
                }
            }
        })
    </script>
</body>
</html>

v-if指令的作用是:根据表达式的真假切换元素的显示状态；本质是通过操纵dom元素来切换显示状态；表达式的值为true,元素存在于dom树中,为false,从dom树中移除；频繁的切换v-show,反之使用v-if,前者的切换消耗小。使用v-if可以使后台控制台不显示某个标签。

6、v-bind

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bind指令</title>
    <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"http://www.itheima.com/images/logo.png",
                imgTitle:"黑马程序员",
                isActive:false
            },
            methods: {
                toggleActive:function(){
                    this.isActive = !this.isActive;
                }
            },
        })
    </script>
</body>

</html>

v-bind指令的作用是:为元素绑定属性；完整写法是 v-bind:属性名；简写的话可以直接省略v-bind,只保留 :属性名；需要动态的增删class建议使用对象的方式。

7、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>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in arr">{{item}}</li>
            <li v-for="(item,index) in arr">{{index}}{{item}}</li>
            <li v-for="item in obj">{{item.name}}</li>
        </ul>
        <input type="button" @click="add" value="add"></input>
        <input type="button" @click="remove" value="remove"></input>
        <h2 v-for="item in obj">{{item}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app= new Vue({
            el:"#app",
            data:{
                arr:["北京","上海","广州","深圳"],
                obj:[
                    {name:"jack"},
                    {name:"rose"}
                ]
            },
            methods:{
                add:function(){
                    this.obj.push({name:"tom"})
                },
                remove:function(){
                    //删除数组最左侧的
                    this.obj.shift();
                }
            }
        })
    </script>
</body>
</html>

v-for指令的作用是:根据数据生成列表结构；数组经常和v-for结合使用；语法是( item,index ) in 数据； item 和 index 可以结合其他指令一起使用；数组长度的更新会同步到页面上,是响应式的。

8、v-on补充

传递自定义参数，事件修饰符

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-on补充</title>
</head>

<body>
    <div id="app">
        <input type="button" value="点击" @click="doIt(666,'老铁')">
        <input type="text" @keyup.enter="sayHi">
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            methods: {
                doIt:function(p1,p2){
                    console.log("做it");
                    console.log(p1);
                    console.log(p2);
                },
                sayHi:function(){
                    alert("吃了没");
                }
            },
        })
    </script>
</body>

</html>

事件绑定的方法写成函数调用的形式，可以传入自定义参数；定义方法时需要定义形参来接收传入的实参；事件的后面跟上 .修饰符可以对事件进行限制； .enter 可以限制触发的按键为回车；事件修饰符有多。

9、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>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message" @keyup.enter="getMessage"></input>
        <h2>{{message}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"抽刀断水水自流"
            },
            methods:{
                getMessage:function(){
                    alert(this.message);
                }
            }
        })
    </script>
</body>
</html>

v-model指令的作用是便捷的设置和获取表单元素的值；绑定的数据会和表单元素值相关联；绑定的数据←→表单元素的值。

三、Axios与Vue

axios是功能强大的网络请求库；axios必须先导入才可以使用；使用get或post方法即可发送对应的请求；then方法中的回调函数会在请求成功或失败时触发；通过回调函数的形参可以获取响应内容,或错误信息

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    axios.get(地址?key=value&key2=values).then(function(response){},function(err){})                     
    axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})

axios结合vue示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="button" value="get请求" class="get" @click="doGet"></input>
        <h2>{{message}}</h2>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"很好笑的笑话"
            },
            methods:{
                doGet:function(){
                    var that=this;
                    axios.get("https://autumnfish.cn/api/joke").then(
                        function(response){
                            console.log(response.data);
                            that.message=response.data;
                        }
                    )
                }
            }
        })
    </script>
</body>
</html>

axios回调函数中的this已经改变,无法访问到data中数据；把this保存起来,回调函数中直接使用保存的this即可；和本地应用的最大区别就是改变了数据来源。

1、vue生命周期

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染→更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。在 Vue 的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册 JS 方法，可以让我们用自己注册的 JS 方法控制整个大局，在这些事件响应方法中的 this 直接指向的是 Vue 的实例。

2、使用mounted钩子函数

<body>
    <div id="app">
        <div>{{info.name}}</div>
        <div>{{info.address}}</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return{
                    //请求的返回参数格式必须和json字符串一样
                    info:{
                        name:null,
                        address:{
                            street:null,
                            city:null,
                            country:null
                        }
                    }
                }
            },
            mounted(){//钩子函数
                axios
                    .get('data.json')
                    .then(response => (this.info=response.data))
            }
        })
    </script>
</body>

什么时候点菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门

v-if指令的作用是:根据表达式的真假切换元素的显示状态；频繁的切换v-show,反之使用v-if,前者的切换消耗小。Vue中用到的数据定义在data中，data中可以写复杂类型的数据，渲染复杂类型数据时,遵守js的语法即可。v-show指令的作用是:根据真假切换元素的显示状态；v-html指令的作用是:设置元素的innerHTML；v-on指令的作用是:为元素绑定事件；v-bind指令的作用是:为元素绑定属性；v-text指令的作用是:设置标签的内容(textContent)；
复制链接

扫一扫

专栏目录