Vue 2 快速上手

最新推荐文章于 2023-10-02 21:01:12 发布

小丫头爱打盹

最新推荐文章于 2023-10-02 21:01:12 发布

阅读量198

点赞数 1

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

本文链接：https://blog.csdn.net/Liu_wen_wen/article/details/127047241

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Vue 2 快速上手

Vue官网：

Vue.js
https://v2.cn.vuejs.org/

在这里插入图片描述

代码：

声明式渲染:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="mydiv">
        {{info}}
    </div>

    <!--
    <script>
        //mydiv.innerHTML="这是一个div内容";
        //获取元素
        var d = document.getElementById("mydiv");
        //设置元素内容
        d.innerHTML="这是一个内容";
    </script>
    -->
    
    <!--引入vue.js-->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>  
    <!--定义内部js代码-->
    <script>
        // vue会自动监听数据和视图的变化，实现自动更新。是一种响应式编程的方式。
        var xxx = new Vue({
            el:"#mydiv" , //el:设置当前的vue组件，与那个页面元素关联
            data:{   // data:当前元素要使用的数据对象
                info:"这是vue显示出来的信息"
            }
        })
    </script>
    

</body>
</html>

条件与循环:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div class="div1">
        <!--v-bind:用于vue绑定元素属性。该关键字可以省略-->
        <span v-bind:title="biaoti">
            这是一个span的内容...
        </span>
        <a v-bind:href="site">网站</a>
    </div>

    <hr/>
    <div class="div2">
        <h1>这是一个标题</h1>
        <!-- v-if:控制元素是否显示 if条件为true元素显示，否则元素不显示-->
        <p v-if="isShow">这是一个段落</p>
    </div>
    <hr/>
    <ul id="myul">
        <!-- v-for:循环遍历数组-->
        <li v-for="s in stus">
            学号:{{s.id}} 姓名:{{s.name}}
        </li>
    </ul>

    
    <!--引入vue.js-->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>  
    <!--定义内部js代码-->
    <script>

        var vue3 = new Vue({
            el:"#myul", 
            data:{
                stus:[
                    {id:1001,name:"张三"},
                    {id:1002,name:"李四"},
                    {id:1003,name:"王五"},
                ]
            }

        })

        //定义另外一个vue组件
        var vue2 = new Vue({
                    el:".div2",
                    data:{
                        isShow:true
                 }
        })

        // vue会自动监听数据和视图的变化，实现自动更新。是一种响应式编程的方式。
        var vue = new Vue({
            el:".div1" , //绑定元素
            data:{
                biaoti:"这是vue定义的标题信息:"+new Date().toLocaleDateString(),
                site:"http://www.jd.com"
            }
        })

        
    </script>
    

</body>
</html>

处理用户输入:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="mydiv">
        <p>{{msg}}</p>
        <!--v-on:绑定vue的单击事件。v-on可以简写为@click-->
        <input type="button" value="点击反转" v-on:click="fanzhuan"/>
    </div>

    <hr/>

    <div id="mydiv2">
        <p>{{msg}}</p>
        <!-- v-model:实现属性的双向绑定-->
        <input type="text" v-model="msg"/>
    </div>
    

    <!--引入vue.js-->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>  
    <!--定义内部js代码-->
    <script>

        //测试v-model双向绑定
        var vue2 = new Vue({
            el:"#mydiv2",
            data:{
                msg:"初始内容"
            }
        })

        var vue = new Vue({
            el:"#mydiv",
            data:{
                msg:"这是一个信息内容"
            },
            methods:{ //用于定义vue组件特定的方法
                fanzhuan:function(){
                    alert(123);
                    //反转信息，并重新设置值
                    this.msg=this.msg.split("").reverse().join("");
                }
            }
        })

        /*
        var s = "abc";
        var s1 = s.split("");//拆分字符串，返回字符数组
        s1.reverse();//反转数组内容
        s1 = s1.join('');//将数组元素拼接起来
        alert(s1);
        */
        
    </script>
    

</body>
</html>

组件化应用构建:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- <div id="app">
        <yzh7-zj></yzh7-zj>
        <yzh7-zj></yzh7-zj>
        <yzh7-zj></yzh7-zj>
        <yzh7-zj></yzh7-zj>
        <yzh7-zj></yzh7-zj>
        <yzh7-zj></yzh7-zj>
    </div> -->

    <div id="app">
        <!-- <stu-info v-bind:stu='{"id":1001,"name":"张三"}'></stu-info> -->
        <!--
            v-bind:stu 设置组件需要的对象属性
            v-bind:key 通过key让vue区分清楚每个组件，作为组件标识
        -->
        <stu-info v-for="s in stus" v-bind:stu="s" v-bind:key="s.id"></stu-info>

    </div>
    

    <!--引入vue.js-->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>  
    <!--定义内部js代码-->
    <script>

        Vue.component("stu-info",{
            props:["stu"],  //通过props可以接收外部传入组件的对象数据
            template:"<p><span>学号:{{stu.id}}</span><span>姓名:{{stu.name}}</span></p>"
        })

        var vue = new Vue({
            el:"#app",
            data:{
                stus:[
                    {id:1001,name:"张三"},
                    {id:1002,name:"李四"},
                    {id:1003,name:"王五"}
                ]
            },
            methods:{ //普通方法
                mytest:function(){

                }
            },
            beforeCreate:function(){ //生命周期函数
                console.log("调用了---beforeCreate方法---")
                console.log(this)
                console.log(this.stus)
            },
            created:function(){ //生命周期函数
                console.log("调用了---created---")
                console.log(this)
                console.log(this.stus)
            },
            beforeMount:function(){
                console.log("调用了---beforeMount---")
                console.log(this)
                console.log(this.stus)
            },
            mounted:function(){
                console.log("调用了---mounted---")
                console.log(this)
                console.log(this.stus)
            }
        })

        /*
        //创建vue组件
        Vue.component("yzh7-zj",{
            template:"<p>这是一个yzh7组件呈现的内容</p>"
        })

        var vue = new Vue({
            el:"#app"
        })
        */
        
        
    </script>
    

</body>
</html>

组件化应用案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- <div id="app">
        <yzh7-zj></yzh7-zj>
        <yzh7-zj></yzh7-zj>
        <yzh7-zj></yzh7-zj>
        <yzh7-zj></yzh7-zj>
        <yzh7-zj></yzh7-zj>
        <yzh7-zj></yzh7-zj>
    </div> -->

    <div id="app">
       
        <p v-for="e in emps">{{e.empId}}</p>

    </div>
    

    <!--引入vue.js-->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>  
    <!--引入axios用于发送ajax请求-->
    <script src="./axios.min-0.19.js"></script>
    <!--定义内部js代码-->
    <script>

        //axios 的使用:用来发起ajax请求，获取后台数据，或者向后台提交数据
        axios.get("http://localhost:8080/lesson0829_HRProj_war_exploded/emp/list?page=1&limit=5").then(resp=>{
            console.log(resp.data.data);
        })

        var vue = new Vue({
            el:"#app",
            data:{
                emps:[]
            },
            created:function(){
                 //axios 的使用:用来发起ajax请求，获取后台数据，或者向后台提交数据
                axios.get("http://localhost:8080/lesson0829_HRProj_war_exploded/emp/list?page=1&limit=5").then(resp=>{
                    //console.log(resp.data.data);
                    this.emps=resp.data.data;
                })
            }
        })
        
    </script>
    

</body>
</html>