Vue的使用

已于 2022-09-06 09:50:45 修改
阅读量448 收藏
点赞数 1
分类专栏： JavaWeb 文章标签： vue.js 前端 javascript
于 2022-07-19 20:58:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57907966/article/details/125880450
版权

Vue

基于MVVM思想，实现数据的双向绑定，将编程的关注点放到数据上

Vue快速入门

1、新建HTML页面，引入Vue.js文件

链接：https://pan.baidu.com/s/1VUxtuGOVUAtKRGQf1JGWAA
提取码：0630

如果是在vscode中则需要
在控制台下载vue

npm install vue@2

找到list下的vue.js

2.在JS代码区域，创建Vue核心对象，进行数据绑定

new Vue({

el:"#app",

data(){

return 

​    username:""

}

})

3.编写视图

<div id="app">
    <input name="username" v-model="username">
    {{username}}
</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <input v-model="username">
    <!--插值表达式-->
    {{username}}

</div>
<script src="js/vue.js"></script>
<script>
    new Vue({

        el:"#app",
        data(){
            return{
                username:""
            }
        }
        // data:function () {
        //     return{
        //         username:""
        //     }
        // }

    })
</script>
</body>
</html>

Vue常用指令：

指令作用
v-bind为HTML标签绑定属性值，如设置href，css样式等
v-model在表单元素上创建双向数据绑定
v-on为HTML标签绑定事件
v-if条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else
v-else-if
v-show根据条件展示某元素，区别在于切换的是display属性的值
v-for列表渲染

v-bind：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    
 <a :href="url">点击一下</a>
<a v-bind:href="url">点击一下</a>

</div>
<script src="js/vue.js"></script>
<script>
    new Vue({

        el:"#app",
        data(){
            return{
                username:"",
                url:"https:\\www.baidu.com"
            }
        }
        // data:function () {
        //     return{
        //         username:""
        //     }
        // }

    })
</script>
</body>
</html>

image-20220713160100359

image-20220713160106311

v-bind对class，style进行绑定

<span style="color: red ; font-size: 70px">你好</span>

在这里插入图片描述

动态绑定它的颜色和字体大小

<body>
<script src="./node_modules/vue/dist/vue.js"></script>

<div id="app">
<span v-bind:style="{color: colors , fontSize: fontSizes}">你好</span>

</div>
    <script>
  
let l=new Vue({

el:"#app",
data: {
    colors:'red',
    fontSizes:'30px'
}

});
    
    </script>
</body>

v-on:

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

<input type="button" value="一个按钮" v-on:click="show()">


</div>
<script src="js/vue.js"></script>
<script>
    new Vue({

        el:"#app",
        data(){
            return{
                username:"",
                url:"https:\\www.baidu.com"
            }
                },
        methods:{
            show(){
                alert("我被点了")
            }
        }
    })
</script>
</body>
</html>

定义了一个这样的页面

在这里插入图片描述

<div id="app">
<div style="border:1px red solid;padding: 20px">大Div


    <div style="border: blue solid;padding: 20px">小Div<br>
        <a href="http://www.baidu.com">去百度</a>

    </div>
</div>


</div>

使用v-on绑定事件

<div id="app">
<div style="border:1px red solid;padding: 20px" v-on:click="hello">大Div


    <div style="border: blue solid;padding: 20px"@click="hello">小Div<br>
        <a href="http://www.baidu.com">去百度</a>

    </div>
</div>


</div>
    <script>
  
let l=new Vue({

el:"#app",
data: { 
    colors:'red',
    fontSizes:'30px'
},
methods: {
    hello(){
        alert("点击了")
    }
},

});
    
    </script>

当我们点击了小div，此时由于冒泡会出现两次弹窗
阻止事件冒泡，可以使用事件修饰符
stop：阻止事件冒泡到父元素
prevent：阻止默认事件的发生
capture：使用事件捕获模式
self：只有元素自身触发事件才执行
once：只执行一次

"@click.stop="hello"

点击去百度后，实现不跳转到百度界面

<a href="http://www.baidu.com" @click.prevent>去百度</a>

当我们点击大Div后，实现再点击就不会弹框

<div style="border:1px red solid;padding: 20px" v-on:click.once="hello">大Div

v-if:

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <div v-if="count==3">div1</div>
    <div v-else-if="count==4">div2</div>
    <div v-else>div3</div>
<input v-model="count">
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({

        el:"#app",
        data(){
            return{
                username:"",
                url:"https:\\www.baidu.com",
                count:3
            }
        }

    })
</script>
</body>
</html>

image-20220713161531739

image-20220713161540430

v-show:

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <div v-if="count==3">div1</div>
    <div v-else-if="count==4">div2</div>
    <div v-else>div3</div>
    <hr>
    <div v-show="count==3">div4</div>
<input v-model="count">
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({

        el:"#app",
        data(){
            return{
                username:"",
                url:"https:\\www.baidu.com",
                count:3
            }
        }

    })
</script>
</body>
</html>

image-20220713161651694

v-for:

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div v-for="addr in addrs">{{addr}}</div>
    <div v-for="(addr,i) in addrs">{{i}}--{{addr}}</div>

</div>
<script src="js/vue.js"></script>
<script>
    new Vue({

        el:"#app",
        data(){
            return{
                username:"",
                url:"https:\\www.baidu.com",
                count:3,
                addrs:["北京","上海","西安"]
            }
        }

    })
</script>
</body>
</html>

image-20220713162412911

按键修饰符

在这里插入图片描述

记住所有的KeyCode比较困难，所以Vue为最常用的案件提供了别名：
enter，tab，delete，esc，space，up，down，left，right

<div id="app">
<div style="border:1px red solid;padding: 20px" v-on:click.once="hello">大Div


    <div style="border: blue solid;padding: 20px"@click.stop="hello">小Div<br>
        <a href="http://www.baidu.com" @click.prevent>去百度</a>

    </div>
</div>
<input type="text" v-model="num" v-on:keyup.up="num++" @keyup.down="num--">
num的值为:{{num}}
</div>
    <script>
  
let l=new Vue({

el:"#app",
data: { 
    num:'1',
    colors:'red',
    fontSizes:'30px'
},
methods: {
    hello(){
        alert("点击了")
    }
},

});

当我们点击了上键num会加1，点击下键num会减1

<input type="text" v-model="num" v-on:keyup.up="num++" @keyup.down="num--" @click.ctrl="num=10">

当我们按住ctrl键点击文本框，num会等于10

计算属性和侦听器

<div id="app">
<ul>
<li>西游记；价格：{{xyjPrice}}，数量：<input type="number" v-model="xyjNum"></li>
<li>水浒传；价格：{{shzPrice}}，数量：<input type="number" v-model="shzNum"></li>
<li>总价:{{totalPrice}}</li>
</ul>



</div>


<script>

let a=new Vue({

el:"#app",
data:{
    xyjPrice:99.0,
    shzPrice:89.9,
    xyjNum:1,
    shzNum:2
},
computed: {
 totalPrice(){
     return this.xyjPrice*this.xyjNum+this.shzNum*this.shzPrice
 }
}


});




</script>

在这里插入图片描述
侦听器:
在vue里面添加监听器

watch: {
 xyjNum:function(newVal,oldVal){
     alert("原来是"+oldVal+"将会变为"+newVal)
 }   
}

监听xjyNum的变化
点击西游记的数量添加后
在这里插入图片描述

过滤器

<div id="app">

    <span v-for="user in users">姓名为:{{user.name}},年龄为:{{user.age}},性别:{{user.sex}}</br></span>

</div>


<script>

let a=new Vue({

el:"#app",
data:{
    users:[
 {id:1,name:"张三",sex:1},
 {id:2,name:"李四",sex:0}

    ]
  
}

});


</script>

在这里插入图片描述

添加过滤器使得性别变为对应的汉字

<div id="app">

    <span v-for="user in users">姓名为:{{user.name}},年龄为:{{user.age}},性别:{{user.sex | sexFilter }}</br></span>

</div>


<script>

let a=new Vue({

el:"#app",
data:{
    users:[
 {id:1,name:"张三",sex:1},
 {id:2,name:"李四",sex:0}

    ]
  
},
filters:{
    sexFilter(sex){
        if(sex==1){
            return "男";
        }
        else{
            return "女";
        }
    }
}



});




</script>

在这里插入图片描述
这样定义的是局部过滤器

下面来定义一个全局过滤器

<div id="app">

    <span v-for="user in users">姓名为:{{user.name}},年龄为:{{user.age}},性别:{{user.sex |globalFilter }}</br></span>

</div>


<script>

//定义一个全局过滤器
Vue.filter("globalFilter",function(sex){
    if(sex==1){
            return "男";
        }
        else{
            return "女";
        }
})

let a=new Vue({

el:"#app",
data:{
    users:[
 {id:1,name:"张三",sex:1},
 {id:2,name:"李四",sex:0}

    ]
  
}


});
</script>

组件化基础

  • 全局声明一个组件

在这里插入图片描述


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

    <div id="app">

            <button v-on:click="count++">我被点击了{{count}} </button>

            <counter></counter>
            <counter></counter>
    </div>


<script>

//全局注册一个组件
    Vue.component("counter",{
        template:'<button v-on:click="count++">我被点击了{{count}}</button>',
        data() {
            return {
                count:1
            }
        }
    });

    new Vue({

el:"#app",
data:{
    count:1
}


    });



</script>

全局定义个组件可以在任何Vue实例都可以使用组件名称来使用组件

data是一个函数

  • 局部声明一个组件
  <div id="app">

            <button v-on:click="count++">我被点击了{{count}} </button>
            
            <button-counter></button-counter>
    </div>


<script>



//局部声明一个组件
var buttonCounter={

template:'<button v-on:click="count++">我被点击了===={{count}}</button>',
data(){
    return {
        count:1
    }
}

};

    new Vue({

el:"#app",
data:{
    count:1
},
components:{
    'button-counter':buttonCounter
}


    });



</script>

Vue生命周期

生命周期的八个阶段

mounted:挂载完成,Vue初始化完成，HTML页面渲染成功

mounted方法自动执行

mouned(){

}

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">


</div>
<script src="js/vue.js"></script>
<script>
    new Vue({

        el:"#app",
        data(){
            return{

            }
        },
        mounted(){
            alert("挂载成功..")
        }

    })
</script>
</body>
</html>

image-20220713162850210

案例：使用Vue简化品牌列表

由于之前采用的是字符串拼接的方式显示数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">


<a href="addBrand.html"><input type="button" value="新增"></a><br>

<hr>
<table id="brandTable" border="1" cellspacing="0" width="100%">

    <tr>
        <th>序号</th>
        <th>品牌名称</th>
        <th>企业名称</th>
        <th>排序</th>
        <th>品牌介绍</th>
        <th>状态</th>
        <th>操作</th>
    </tr>

    <tr v-for="(brand,i) in brands" align="center">
        <td>{{i+1}}}</td>
        <td>{{brand.brandName}}</td>
        <td>{{brand.companyName}}</td>
        <td>{{brand.ordered}}</td>
        <td>{{brand.description}}</td>
        <td>{{brand.status}}</td>
        <td><a href="#">修改</a> <a href="#">删除</a></td>
    </tr>


    </tr>
</table>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                brands:[]
            }

        },
        mounted(){
            //页面加载完成后,发送异步请求发送数据
         var _this=this;
            axios({
                method:"get",
                url:"http://localhost:8080/brand-demo//selectAllServlet"
            }).then(function (resp) {

               _this.brands=resp.data;


            })

        }

    })



</script>
</body>



</html>

image-20220713164633525

新增品牌：

image-20220713170600145

image-20220713170610723

具体实现：

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

<head>
    <meta charset="UTF-8">
    <title>添加品牌</title>
</head>
<body>
<div id="app">

<h3>添加品牌</h3>
<form action="" method="post">
    品牌名称：<input id="brandName" v-model="brand.brandName" name="brandName"><br>
    企业名称：<input id="companyName"  v-model="brand.companyName"  name="companyName"><br>
    排序：<input id="ordered"   v-model="brand.ordered" name="ordered"><br>
    描述信息：<textarea rows="5" cols="20" id="description"  v-model="brand.description" name="description"></textarea><br>
    状态：
    <input type="radio" name="status"  v-model="brand.status" value="0">禁用
    <input type="radio" name="status" v-model="brand.status"  value="1">启用<br>

    <input type="button" id="btn"  @click="submitForm" value="提交">
</form>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script>

    new Vue({
        el:"#app",
        data(){
            return{
                brand:{}
            }
        },
        methods:{
            submitForm(){
                //发送AJAX请求
                var _this=this;
                axios({
           method:"post",
           url:"http://localhost:8080/brand-demo/addServlet",
           data:this.brand

       }).then(function (resp) {
           if (resp.data=="success") {

               //跳转页面
               location.href="http://localhost:8080/brand-demo//brand.html";

           }

       })
   }

            }



    })
    

</script>
</body>
</html>
白小筠
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE 使用 leaflet
11-04
在vue中使用leaflet，底图引入了天地图,高德,Google等，对leafletApi做了简单封装，可以方便的调用相关Api。 封装的常用方法有： 测距、测面、地图切换、画多边形、画矩形、在地图中添加arcgis服务等
Vue的使用方法
qq_50896786的博客
08-07 4616
整个项目中node_modules占用项目的空间99%。因为前端项目也需要依赖一些插件:比如:axios elementui 那么我们可以使用npm下载并安装到当前项目。在子组件中使用（在components下创建Hello.vue子组件，与上边的组件路径一致）根据意思来理解就是说，template模板编译错误，组件模板需要一个根元素而不仅仅是个文本。此处使用别名hello 在子组件中props中定义该名称。npm install -- 安装项目需要的模块。--子组件调用-->//子组件的prop方法。.
两万字Vue基础知识总结，小白零基础入门，跟着路线走，不迷路（建议收藏）
最新发布
2401_84097820的博客
05-07 431
当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能吧不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。
VUE的使用
weixin_45665377的博客
06-27 2779
VUE是一个前端框架。是一个典型的MVVM模式的框架。MVVM：模型、视图、视图模型。通过修改视图模型对象，就可以达到修改视图的目的，同样的，如果用户操作了视图，视图模型中也就自动的收集了操作结果。此框架中Ajax操作部分相对功能较复杂，一般会使用独立的第三方的Ajax框架，例如axios。
VUE的基本使用。
qq_61576523的博客
04-06 8619
要想使用vue，你要先安装一个名字叫：Vscode这个软件，这个软件的安装，在这就不说了。在这里直接进行演示。 1，首先你要先创建一个文件夹， 把vue的jar包和jquery的jar包都放进去，然后再在里面创建一个文件，名字可以自定义，一开始创建好是一个空白，你输入！号后点击回车后会呈现出这个界面。 2.写导入jar包的代码。 我在这里有新建了一个文件夹js放，把这两个jar包都放到了js里面所以他的导入jar包的代码是这样的： <script src="js/vue.js" ty
Vue的基本使用
weixin_44529746的博客
10-31 3145
社区资料：Vue：Vue.js专业中文社区 vue官方手册：API — Vue.js 一、vue的介绍 vue是一套构建用户界面的渐进式框架，Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 vue是基于MVVM（M:model V:view VM:viewmodel）设计模式，支持数据的双向绑定(v-model) 补充： MVC设计模式： M model 数据层 V view 视图层 C control控制层
vue使用原生swiper代码实例
10-15
主要介绍了vue使用原生swiper代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue使用百度离线地图资源
04-25
vue使用百度地图离线资源 该文件内容须放于项目public文件夹下 使用请参考博主博客：vue使用百度地图----离线地图 https://blog.csdn.net/weixin_45660840/article/details/108977917?spm=1001.2014.3001.5502 H.F...
vue使用实例
08-23
vue实例、vue持续更新中、vueDemo 1、vue的基础概念和构建开发环境、 2、数据渲染、事件监听和表单处理， 后续更新待续
VUE 使用中踩过的坑
08-28
Vue 使用中踩过的坑 在 Vue 开发中，有很多潜在的坑需要注意和解决。这篇文章总结了一些常见的 Vue 使用问题，包括路由变化页面数据不刷新、异步回调函数中使用 this、setInterval 路由跳转继续运行、Vue 滚动行为...
Vue.js源码解析——new Vue()做了什么事情
weixin_43311978的博客
06-29 1143
test
vue生命周期四个阶段（created和mount）
coinisi_li的博客
07-12 9368
1）必经阶段2）非必经阶段提示：主动调用函数销毁后，可用将断开的new Vue()和页面重新建立虚拟DOM树，重新绑定起来挂载界面。2.生命周期钩子函数（回调函数）每个阶段前后，各有一对生命周期钩子函数，也就是回调函数。
vue中的mounted组件
热门推荐
a335178388的博客
11-25 1万+
1.钩子函数 钩子函数是Windows消息处理机制的一部分，通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统。（百度百科） 2.相对于前端来讲 对于前端来说，钩子函数就是指再所有函数执行前，我先执行了的函数，即 钩住 我感兴趣的函数，只要它执行，我就先执行。 3.vue中的mounted 在这发起后端请求，拿回数据，配合路由钩子做一些事情 类型：Function 详细： e
【CSDN软件工程师能力认证学习精选】vue.js 三种方式安装(vue-cli)
CSDN高校俱乐部官方博客
02-26 2193
CSDN软件工程师能力认证（以下简称C系列认证）是由中国软件开发者网CSDN制定并推出的一个能力认证标准。C系列认证历经近一年的实际线下调研、考察、迭代、测试，并梳理出软件工程师开发过程中所需的各项技术技能，结合企业招聘需求和人才应聘痛点，基于公开、透明、公正的原则，甑别人才时确保真实业务场景、全部上机实操、所有过程留痕、存档不可篡改。 我们每天将都会精选CSDN站内技术文章供大家学习，帮助大家系统化学习IT技术。 Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web .
vue2.0的new vue（）
weixin_44922480的博客
09-20 1679
vue源码简单分析
Vue源码 new vue 初探
会点php的前端小渣渣
09-08 719
首先说下new一个对象的过程 function Person(name, age) { this.name = name this.age = age } var p1 = new Person('zhen', '22') 创建一个新的对象，this指向这个对象p1，执行上面的代码即对this赋值。 构造函数 此外构造函数就像一个模版。可以new出多个实例，使用instanceof可以判断当前对象属于哪个构造函数。 instanceof的判断逻辑 p1 instanceof Per...
Vue(一)1.基础
qq_42809433的博客
07-31 863
Vue.js 文章目录Vue.jsvue.js渐进式Vue 核心引入组件组件基本分类根组件的创建可复用的功能组件组件内容渲染templateelrender使用 $mount 方法延迟 `Vue` 实例的挂载组件中的数据（状态）datadata 的访问模板语法Mustache（双大括号，大胡子） 语法插值表达式数据到视图的更新检测变化的注意事项扩展使用 Vue.set 方法添加新数据 vue.js [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YXDNylyT-1596187
vue使用DPlayer
10-31
Vue-DPlayer是一个易于使用、高性能的基于Vue.js的视频播放器组件。它可以帮助你在Vue.js应用程序中实现视频播放功能。你可以通过以下四个方面来了解Vue-DPlayer： 1. 安装Vue-DPlayer并简单使用。 2. 如何在Vue-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值