VUE学习基础入门

最新推荐文章于 2024-11-08 11:26:10 发布

未来.

最新推荐文章于 2024-11-08 11:26:10 发布

阅读量143

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/m0_58016905/article/details/118370390

版权

VUE学习

简介

Vue.js (中文官网)

VUE 是一套用户构建用户界面的渐进式JavaScript框架，主要是来更方便的构建用户界面，只关心视图层(view)，比较容易上手并且可以与很多其他第三方框架结合。

JavaScript与Jquery的区别：

jQuery可以让我们更加方便的去操控DOM$ 而veu是说前端程序员不在直接操作DOM元素了所有针对DOM的操作由vue对象来自动完成程序员只需要操控vue对象即可
当我们引入vue.js的时候会在全局声明一个vue对象

初始VUE标签

在官网下载vue.js并引入html页面中去

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

在页面的script标签中定义new 一个VUE对象

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<body>
    <div id="app">
     	 {{message}}这种取值方式不会覆盖原本存在的值
    </div>
    
    <script>
        var v = new Vue({
            el: "#app",      // 表示这个vue对象操控的dom范围 此范围为id 为 app 的div
            data: {          // 表示这个vue对象里面的数据,可以在vue操控的dom范围中使用{{key}}取出对应数据。
                message:'Hello VUE !'
            }
        })
    </script>
</body>

页面

Hello VUE !这种取值方式不会覆盖原本存在的值

这种取值方式不会覆盖原来的存在p标签原来的值

v-text 标签

通过v-text标签从vue的属性中取值,取出的值会覆盖掉标签本身的值

<p v-text="msg">会覆盖原来的值</p>
<h1 v-text="msg">vue标签不仅仅只能用于p标签</h1>

页面

Hello VUE !

v-html标签

上面两种取值方式都不会解析数据中的标签内容,如果想解析标签,需要使用v-html

<div id="app">
   <h1 v-html="msg">会将msg中的内容解析成标签,取出的值会覆盖掉标签本身的值</h1>
</div>
---------------------------------------------------
<script>
        var v = new Vue({
            el: "#app",      
            data: {          
                msg: "<i>hello  java!!!!!</i>"
            }
        }）
</script>

页面

[hello java!!!](hello java!!!)

v-bind标签

以上标签都无法给输入框赋值,想给输入框的value属性赋值需要使用 v-bind标签

<div id="app">
   <input type="text" v-bind:value="msg">
</div>
---------------------------------------------------
<script>
        var v = new Vue({
            el: "#app",      
            data: {          
                msg: "给表单的value赋值"
            }
        }）
</script>

v-bind 可以简写为 “:” (冒号) 作用是一摸一样的

<div id="app">
   <input type="text" :value="msg" :name="n">
</div>
---------------------------------------------------
<script>
    var v = new Vue({
        el: "#app",
        data: {
            msg: "value",
            n: "username"
        }
    })
</script>

v-bind 里面的内容可以使用字符串拼接,但是需要注意被拼接的字符串需要使用 ’ ’ 引起来

<div id="app">
	<button :title="m+'hanahan'">{{msg}}</button>
</div>
------------------------------------------------------
<script>
    var v = new Vue({
        el: "#app",
        data: {
            msg: "value",
            m: "这是个悬浮"
        }
    })
</script>

使用v-bind 给class赋值,里面可以使用三目运算符

<h1 :class="['red',5>8?'in':'']">这是一个段落</h1>

red 是一个class 样式名称 f是vue中定义的一个属性,如果属性返回true则使用red样式,否则不显示

<style>
    [v-v-cloak] {
        /* 用来解决vue初始化慢的时候,页面会显示{{}}表达式的问题,当vue对象初始化完成后,这个css会被自动移除*/
        display: none;
    }
    
    .red {
        color: rebeccapurple;
    }
    .in {
        font-size: 20px;
    }
    .on {
        font-size: 10px;
    }
</style>


<div id="app">
	<h1 class="red in">这是一个段落</h1>
    <h1 :class="[{'red':f}]">这是一个段落</h1>
    <!-- 在class中使用vue对象中的data里面obj的值,然后在obj中对上面定义的样式进行引用 -->
    <h1 :class="obj">这是一个段落</h1>
</div>

<script>
        var v = new Vue({
            el: "#app",     
            data: {
                obj: {   //样式有多个key value
                    red: true,        //引用上面定义好的red样式
                    on: true          //引用上面定义好的on样式
                }
            }
        })
</script>

使用v-:bind给style属性赋值,可以使用[]赋值多个行内样式对象


<div id="app">
	<p :style="[sty,sty2]">这也是一个段落</p>
</div>
-----------------------------------------------------------
<script>
        var v = new Vue({
            el: "#app",     
            data: { 
                sty: {
                    color: 'red'
                },
                sty2:{
                    fontSize: "50px"
                }
            }
        })
</script>

v-model

以上所有的赋值都是单向数据绑定,也就是指将vue中的数据绑定到标签中,如果想将标签中的数据传递到vue中我们需要使用v-model来实现双向绑定

(需要注意的是v-model只能用于表单标签 )

v-model: 修饰符

.lazy 当输入框失去焦点的时候,才将值同步到vue对象中
.number 输入的值自动变成数字类型,并且只能输入数字类型。
.trim 主要用于过滤用户输入的首位空格

账号:<input type="text" v-model="name"> <i>{{name}}</i><br>
密码:<input type="text" v-model.lazy="ps"><i>{{ps}}</i><br>
账号:<input type="text" v-model.number="name"> <i>{{name}}</i><br>
密码:<input type="text" v-model.trim="ps"><i>{{ps}}</i><br>
-----------------------------------------------------------
<script>
        var v = new Vue({
            el: "#app",     
            data: {
                name:"",
                ps:""
            }
        })
</script>

VUE事件

v-on

封装了js事件可以将v-on: 简化成 “@” 效果一样

<div id="app">
    <button v-on:click="show">非简化写法</button>
    <button @click="show">简化写法</button>
</div>
-----------------------------------------------------------
<script>
    var v = new Vue({
        el: "#app",      // 表示这个vue对象操控的dom范围
        methods: {       //  在vue的methods属性中对方法进行实现
            show: function () {
                alert(123);
            }
        })
</script>

事件修饰符


                           <!--  ******************事件修饰符**************************** -->
<div id="app">
    <!--  js中如果父子标签都有函数的话,默认点击子标签会先执行子标签的函数,然后执行父标签的函数,可以使用
capture事件修饰符,指定当点击子标签的时候先执行父标签的函数,由于capture是写在父标签上的,所以作用域
是所有子标签,需要注意的是当使用capture后子标签的stop修饰符会没有任何意义 -->
    <div @click.capture="dshow" id="d">
        <!-- 当父子标签都有点击事件的时候,我们点击子标签执行完子标签的函数后浏览器会自动执行父标签的函数,这个机制
在js中叫做冒泡机制,如果我们不想出现这种冒泡机制的话,可以在子标签使用stop事件修饰符。 -->
        <button @click.stop="show">按钮一</button>
        <!-- prevent事件修饰符： 可以阻止标签的默认行为,例如A标签默认点击的时候会跳转连接,我们可以使用事件
修饰符阻止a标签跳转。 -->
        <a href="http://www.baidu.com" @click.prevent="show">百度一下 你就知道！</a>
        <button @click="show">按钮二</button>
    </div>
    <!-- 虽然使用stop修饰符可以阻止子标签后的父标签函数调用,但是如果子标签非常多的情况下,每一个子标签都需要写stop修饰符很烦人,所以可以在父标签中使用self修饰符来指定只有点击自身标签的时候才执行对应的函数。  -->
    <div @click.self="dshow" id="d2">
        <button @click="show">按钮三</button>
        <!-- once： 修饰符,指定事件只执行一次-->
        <a href="http://www.baidu.com" @click.prevent.once="show">百度一下 你就知道！</a>
        <button @click.once="show">按钮四</button>
    </div>
</div>

<script>
    var v = new Vue({
        el: "#app",    
        methods: {
            show: function () {
                alert("啦啦啦啦");
            },
            test: function () {
                alert(888);
            }，
            dshow: function () {
                alert("div 的方法");
            }

        }


    })
</script>

VUE Filter

主要用于对文本进行格式化

调用过滤器的时候 " | " 前面是从data中取得值 " | " 后面是过滤器的名称,在调用过滤器的时候可以传递一些数据

<div id="app">
    <p>{{name | myFilte}}</p>
    <p>{{name | myFilter("又被过滤了","heihei") |myFilter2}}</p>
    <p>{{name |privateFilter()}}</p>
    <p>{{date |fomatDate }}</p>
</div>

<div id="app2">
    <!-- 调用过滤器的时候  |前面是从data中取得值  |后面是过滤器的名称,在调用过滤器的时候可以传递一些数据 -->
    <p>{{name | myFilter("被过滤了","haha") |myFilter2}}</p>
    <p>{{name | myFilter("又被过滤了","heihei") |myFilter2}}</p>
    <p>{{name |privateFilter()}}</p>
</div>
<script>
    // 定义过滤器的时候,第一个参数是过滤器的名称,第二个参数是过滤器函数  函数中的第一个参数是需要被过滤的值,函数中后面的参数是调用过滤器时候传递的值。
     Vue.filter('myFilter', function (data, data2, data3) {
         return data +"啦啦啦啦";
     })
     Vue.filter('myFilter2', function (data) {
         return data.replaceAll("吼吼", "嘻嘻🤭");
     })
    var v = new Vue({
        el: "#app",
        data: {
            name: "焦宣",
            date: new Date()
        },
        filters: {   //定义局部过滤器,只对当前el域有效
            privateFilter: function (data) {
                return data + "这是私有过滤器";
            },
            fomatDate:function(){
                var d = new Date();
                var y =d.getFullYear();
                var m=d.getMonth()+1;
                var day=d.getDate();
                return `${y}-${m}-${day}`;
            }
        }
    })

    var v2 = new Vue({
        el: "#app2",
        data: {
            name: "憨憨😋"
        }
    })
</script>

VUE 流程控制

普通for循环遍历数字 1~10

<p v-for="i in 3">{{i}} </p>

v-for

普通for循环遍历数字 1~10

<p v-for="i in 3">{{i}} </p>

i 是变量名, name是需要遍历的集合,通过in来将变量指向集合,循环过程中会自动将集合中的值取出来付给i变量

如果需要集合的下标,可以通过小括号定义两个变量,第一个变量代表的是集合中的值,第二个变量代表的是值对应的下标

<div id="app">
    <p v-for="(i,j) in name">{{j+1}}----{{i}} </p>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            name: ["嘿嘿🤭", "嘻嘻😁", "哈哈😆", "吼吼😋"]
        }
    })
</script>

遍历对象

遍历单个对象 i 代表的是对象的key j代表的是对象的value k是索引

<div id="app">
    <p v-for="(i,j) in name">{{j+1}}----{{i}} </p>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            name: ["嘿嘿🤭", "嘻嘻😁", "哈哈😆", "吼吼😋"]
        }
    })
</script>

遍历数组

遍历对象数组 i 是变量名, list是需要遍历的集合,通过in来将变量指向集合,循环过程中会自动将集合中的值取出来付给i变量,然后变量i可以通过.属性名取值

<div id="app">
    <p v-for="(i,j) in list">{{j+1}}----{{i.id}}----{{i.name}} </p>
</div>
<script>
    var v = new Vue({
        el: "#app",
        list: [
            { id: 1, name: "嘿嘿🤭" },
            { id: 2, name: "嘻嘻😁" },
            { id: 3, name: "哈哈😆" },
            { id: 4, name: "吼吼😋" },
            { id: 5, name: "嘎嘎🙃" }
        ]
    })
</script>

v-if

if 属性里如果返回true则显示标签内的内容,如果false则不显示标签,多个if可以使用else if进行连接

<div id="app">
	<p v-if="age<20"> 小女孩 </p>
    <p v-else-if="age<30"> 姐姐 </p>
    <p v-else-if="age<50"> 阿姨 </p>
    <p v-else="age<80"> 奶奶 </p>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            age:20
        }
    })
</script>

v-show

<div id="app">
	<p v-show="age<20"> 少女 </p>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            age:20
        }
    })
</script>

if与show的区别：

1： if是组合属性可以配合else if else一起使用,而show只能自己
2： if是不符合条件则没有标签,而show是不符合条件也有标签只是不显示而已(因为添加了样式 style=‘dispaly:none’)

VUE 请求方式

get post请求

then 里面可以放一个或两个方法,如果只放了一个方法就代表是成功时候调用的方法,如果放了俩函数,则前面的是成功时候调用的后面的是失败时候调用的函数

 <div id="app">
     <button @click="getM">get</button>
     <button @click="postM">post</button>
     <button @click="jsonpM">jsonp</button>
     <button @click="deleteM">delete</button>
     <button @click="putM">put</button>
</div>
<script>
    //  Vue.http.options.xhr={withCredentials:true};
    var v = new Vue({
        el: "#app",
        methods: {
            getM() {
                this.$http.get("127.0.0.1:8080").then(function (data) {
                    alert("当成功的时候执行");
                }, function () {
                    alert("失败的时候执行");
                })
            },
            postM() {
                this.$http.post("http://www.baidu.com", { id: 5, name: '张三' }, { emulateJSON: true }).then(function (data) {
                    alert("当成功的时候执行");
                }, function () {
                    alert("失败的时候执行");
                })
            }
        }
    })
</script>

jsonp请求

ajax 默认是不允许跨域的,如果我们想跨域请求数据使用ajax是无法实现的,如果想实现跨域可以使用jsonP来实现
jsonP的原理因为html中script标签可以跨域请求js,所以将ajax请求封装成了一个 script标签,将请求的url当成script标签中的 src地址,这样就能通过ajax请求到跨域的服务器了,而服务器则需要返回对应的js代码。
客户端在通过jsonP请求服务器的时候需要顺带发送一个callbac,服务器端接收到这个请求之后,将数据封装到callbac之中返回给客户端,客户端就可以直接执行这个回调函数了。

<div id="app">
    <button @click="jsonpM">jsonp</button>
</div>
<script>
    //  Vue.http.options.xhr={withCredentials:true};
    var v = new Vue({
        el: "#app",
        methods: {
            jsonpM() {
                // then 里面可以放一个或两个方法,如果只放了一个方法就代表是成功时候调用的方法,如果放了俩函数,
                //则前面的是成功时候调用的后面的是失败时候调用的函数
                this.$http.jsonp("http://www.baidu.com").then(function (data) {
                    alert("当成功的时候执行");
                }, function () {
                    alert("失败的时候执行");
                })
            }
        }
    })
</script>

ajax请求

<div id="app">
    <button @click="getM2">get</button>
    <button @click="postM2">post</button>
</div>
<script>
    //  Vue.http.options.xhr={withCredentials:true};
    var v = new Vue({
        el: "#app",
        methods: {
            getM2(){
                axios({
                    url:"http://www.baidu.com",
                    method:"get",
                    data:{
                        id:6
                    }
                }).then(function (data) {   
                    alert("当成功的时候执行");
                }, function () {
                    alert("失败的时候执行");
                })
            },
            postM2(){
                axios({
                    url:"http://www.baidu.com",
                    method:"post",
                    data:{
                        id:6
                    }
                }).then(function (data) {   
                    alert("当成功的时候执行");
                }, function () {
                    alert("失败的时候执行");
                })
            }
        }
    })
</script>

VUE组件

组件：实际上所谓的组件就是自定义的HTML元素,组件可以扩展html元素,用来封装可复用的代码。
组件的注册一定要在初始化实例之前,否则组件是不起作用滴！
组件分为全局组件以及局部组件

<div id="app">
    <t-button> </t-button>
    <t-button> </t-button>
    <t-button> </t-button>
    <my-h2 idd="2" name=老马 sex=女></my-h2>
    <my-h2 v-for="user in users" v-bind:id="user.id" :name="user.name" :sex="user.sex" :money="user.money" :user=user></my-h2>
</div>
<script>
    // 注册组件的时候,第一个参数是组件的名称,名称要求最好由多个单词组成,多个单词之间使用-分割(为了避免以后HTML新增标签冲突)。
    Vue.component(
        "t-button",
        {
            data: function () {
                return {
                    count: 0
                }
            },
            template: '<button @click="count++">这是个按钮被点击了{{count}}次</button>'
        }
    )
    //  使用prop将数据封装到组件之中
    Vue.component("my-h2", {
        props: ['user'],
        template: '<div><h2>{{user.name}} </h2></div>'
    })

    var v = new Vue({
        el: "#app",
        data: {
            users: [
                {id: 1, name: "憨憨🏆", sex: "女",money:1},
                {id: 2, name: "VUE🥇", sex: "男",money:80}
            ]
        }
    })
</script>