JavaEE学习笔记 2024-1-25 --VUE的入门使用

最新推荐文章于 2024-09-01 19:57:30 发布

白斑马不是斑马

最新推荐文章于 2024-09-01 19:57:30 发布

阅读量1.9k

点赞数 33

分类专栏： JavaEE 文章标签： java-ee 笔记 vue.js

本文链接：https://blog.csdn.net/CHiN_951/article/details/135919958

版权

JavaEE 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

« 上一篇

个人整理非商业用途，欢迎探讨与指正！！

文章目录

- 14.VUE基础

14.VUE基础

前端框架
UI框架:页面渲染
	Bootstrap,Layui...
JS框架:数据渲染
	JQuery,React,angular,node.js,vue...

14.1VUE的入门使用

引入方式:
	1.引入vue文件
	2.使用脚手架

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 使用vue中的绑定的数据 -->
			{{hello}}
			
			{{emp}}---{{emp.employeeid}}--{{emp.age}}
		</div>
		<!-- 引入vue.js -->
		<script src="js/vue.js"></script>
		<script>
			// 创建vue对象
			let vue = new Vue({
				// 将vue绑定在指定的盒子上
				el:'#app',
				// 使用vue绑定的数据
				data:{
					// 以键值对的形式存在
					hello:"hello vue",
					emp:{
						"employeeid":1,
						"employeename":"tom",
						"age":19
					}
				}
			});
		</script>
	</body>
</html>

14.2条件判断

<body>
    <div id="app">
        <span v-if="gender == 0">男</span>
        <span v-else>女</span>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                gender:0
            }
        });
    </script>
</body>

14.3循环渲染

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{list}} <br>
			{{list[0]}} <br>
			{{list[1]}} <br>
			{{list[2]}} <br>
			<h2>信息</h2>
			<ul>
				<!-- u是负责输出的对象 i是下标 -->
				<li v-for="(u,i) in list">
					{{u}}--{{i}}--{{u.name}}--{{u.age}}
				</li>
			</ul>
		</div>
		<script src="js/vue.js"></script>
		<script>
			new Vue({
				el:"#app",
				data:{
					list:[
						{
							"id":1,
							"name":"zs",
							"age":19
						},
						{
							"id":2,
							"name":"ls",
							"age":19
						},
						{
							"id":3,
							"name":"ww",
							"age":19
						},
					]
				}
			});
		</script>
	</body>
</html>

14.4v-bind绑定标签属性

v-bind:属性 简写为:属性

<body>
    <div id="app">
        <!-- 当前的input标签绑定hello的值 -->
        <input type="text" v-bind:value="hello">
        <input type="text" :value="str">
        <img v-bind:src="img" alt="">
        <img :src="img" alt="">
    </div>
    <!-- 引入vue.js -->
    <script src="js/vue.js"></script>
    <script>
        // 创建vue对象
        let vue = new Vue({
            // 将vue绑定在指定的盒子上
            el:'#app',
            // 使用vue绑定的数据
            data:{
                // 以键值对的形式存在
                hello:"hello vue",
                str:"你好",
                img:"img/3.jpg"
            }
        });
    </script>
</body>

14.5v-model表单标签的双向绑定

全写v-model:value

<body>
    <div id="app">
        {{str}} 	<br>
        <input type="text" v-model:value="str"><br>
        <input type="text" v-model="str"><br>
        <!-- 单向绑定 -->
        <input type="text" :value="str"><br>
    </div>
    <!-- 引入vue.js -->
    <script src="js/vue.js"></script>
    <script>
        // 创建vue对象
        let vue = new Vue({
            // 将vue绑定在指定的盒子上
            el:'#app',
            // 使用vue绑定的数据
            data:{
                str:"大佐和大佑123"
            }
        });
    </script>
</body>

14.6事件处理

v-on:事件
简写为
@事件

<body>
    <div id="app">
        <input type="button" value="添加" v-on:click="insert">
        <input type="button" value="添加" v-on:click="insert()">
        <input type="button" value="删除" @click="del">
        <input type="button" value="修改" @click="update(1,2)">
        <input type="text" @blur="check">
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{

            },
            methods:{
                // 定义方法
                insert:function(){
                    alert('添加');
                },
                // es6写法
                del(){
                    alert('删除');
                },
                update(a,b){
                    alert(a+b);
                },
                check(){
                    alert("用户名不可用")
                }
            }
        });
    </script>
</body>

14.7axios

帮助VUE进行通讯的
VUE本身是不能通讯的,通常需要配合axios进行通讯(封装好的ajax)
get
	axios.get(url).then(fn)
	axios.get(url,{参数}).then(fn)
post:目前不建议使用,post请求会将参数以json的形式发送,目前的技术手段处理起来很麻烦
	axios.get(url,{参数}).then(fn)

白斑马不是斑马

关注

33
点赞
踩
34

收藏

觉得还不错? 一键收藏
1
评论
JavaEE学习笔记 2024-1-25 --VUE的入门使用

/ 将vue绑定在指定的盒子上。// 将vue绑定在指定的盒子上。// 将vue绑定在指定的盒子上。// 使用vue绑定的数据。// 使用vue绑定的数据。// 使用vue绑定的数据。// 以键值对的形式存在。// 以键值对的形式存在。// 创建vue对象。// 创建vue对象。// 创建vue对象。"大佐和大佑123"
复制链接

扫一扫

专栏目录