vue生成java代码

转载

mob64ca13fbd761 2024-07-22 12:15:21

文章标签 vue生成java代码 vue.js css javascript html 文章分类 Java 后端开发

1.基本应用

案例；给a连接动态绑定地址，基础示例：属性值动态，更高级案例：点击按钮切换链接地址

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基本应用</title>
  <script type="text/javascript" src="/js/vue.global.prod.js"></script>
</head>
<body>
  <div id="app">
    <a v-bind:href="link" target="_blank">大力出奇迹</a>
  </div>
</body>
</html>
<script type="text/javascript">
    <!--    声明组合式api-->
    const {createApp, reactive, toRefs} = Vue
    //  创建一个vue应用
    createApp({
        //    定义数据，方法等都写在setup函数中
        setup(){
            //定义的数据
            const data = reactive({
             link:
             'https://www.baidu.com'
            })
            //定义的数据和方法都需要return返回
            return {...toRefs(data)}
        }
    }).mount('#app')
</script>

运行结果：

vue生成java代码_html

vue生成java代码_vue.js_02

2.语法糖

语法糖就是vue提供的简化写法，对于v-bind可以直接：属性即可

<a v-bind:href="link" target="_blank">大力出奇迹</a>

3.绑定class类

实际变成中也会出现很多使用脚本操作标css类，类似之前大家学习jQuery中的.addclass(,Vue中同样有类操作
案例: 通过v-bind绑定的单个css类、多个css类

4.绑定style样式

我们也可以使用v-bind: style来绑定一些css内联样
式，对象形式语法 : styler{属性名: 属性值，属性
名: 属性值}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>绑定class类</title>
  <style>
      .xx {
          width: 100px;
          height: 100px;
          background-color: darkcyan;
      }

      .ww {
          border-radius: 10px;
      }
  </style>
</head>
<body>
<div id="app">
  <!--   单个css-->
  <div :class="xxclass"></div>
  <div :class="{xx:true}"></div>
  <!--    多个-->
  <div :class="{xx:true,ww:true}"></div>
  <!--    定义成方法-->
  <div :class="classMethodTest()"></div>
</div>
</body>
</html>
<script type="text/javascript" src="/js/vue.global.prod.js"></script>
<script type="text/javascript">
  <!--    声明组合式api-->
  const {createApp, reactive, toRefs} = Vue
  //  创建一个vue应用
  createApp({
    //    定义数据，方法等都写在setup函数中
    setup() {
      //定义的数据
      const data = reactive({
        xxclass: 'xx',
        wwclass: 'ww'
      })
      const classMethodTest = () =>{
        return {xx:true,ww:true}
      }
        //定义的数据和方法都需要return返回
        return {...toRefs(data).classMethodTest}
      }
    }).mount('#app')
</script>

5.计算属性

1.什么是计算属性
计算属性：可以理解为能够在里面写一些计算逻辑的属性。
作用：1.减少模板中的计算逻辑。
2.数据缓存。当我们的数据没有变化时，不再执行计算过程。
3.依赖固定的数据类型（响应式数据），不能是普通的传入的一个全局的数据
2.计算属性和方法
值不是直接渲染到页面，也是通过计算后在苏安然到页面，可以使用计算属性computed
1.methods中的方法在模板中被调用，如果这个方法依赖data，data的值发生了变化，这个方法就会重新执行；计算属性也具备这个特性。保证data中数据与页面中显示的数据保持一致！
2.计算属性计算出来的结果会被缓存起来，下次无需计算直接显示，而方法不是，每次调用都会重新执行。
3.修改计算属性的值
直接修改计算属性的值报错，Computed property “num2” was assigned to but it has no setter.在computed中定义get和set方法，在修改计算属性中的值
4.计算属性的配置
1.get()：必须要写，该函数不接受参数
2.get()什么时候被调用?：当初次读取计算属性或者计算属性所依赖的数据发生变化时被调用，getter函数有一个返回值，该返回值就是计算属性的值
3.set()：可选项，接受一个可选参数（计算属性被修改之后的值）
4.set()什么时候被调用?：当计算属性被修改时被调用
5.get()和 set()中出现的this执向vm

<template>
    <div class="compute">        
        <p>修改计算属性的值</p>
        <h4>num: <span v-text="num"></span></h4>
        <h4>计算属性num2: <span v-text="num2"></span> </h4>
        <button class="btn" @click="change">改变计算属性的值</button>
    </div>
</template>
<script>
export default {
    name:'compute',
    data(){
        return{           
            num:100
        }
    },
    computed:{
        // num2不是函数
        num2:{
            // 当计算属性要修改时先触发set方法
            // 读取当前计算属性的值，get方法可以隐藏，默认进入的是get方法
            get:function(){
                return this.num*2-10
            },
            set:function(val){
                this.num = val;
                console.log('val',val)
            }
        }
    },
    methods:{       
        change(){
            // 直接修改计算属性的值报错，Computed property "num2" was assigned to but it has no setter.
            this.num2=60;
        }
    }
}
</script>
<style lang="less" scoped>
.compute{
    .btn{
        width: 130px;
        height: 37px;
        background: #fff;
        border-style: none;
        border: 1px solid #333;
        border-radius: 4px;

        &:hover{
            background: #42c5e6;
            color: #fff;
        }
    }
}
</style>

vue生成java代码_vue.js_03

计算属性

<!-- <ul>
		<li v-for="item in users.filter(u=>u.gender=='male')">
			{{item}}
		</li>
	</ul> -->
	
	<button @click="gender='male'">男生</button>
	<button @click="gender='female'">女生</button>
	<ul>
		<li v-for="item in userFilter">
			{{item}}
		</li>
	</ul>


</div>
<script>
	new Vue({
		el:"#app",
		data:{
			message:"hello world",
			users:[
				{id:1,name:"terry",gender:"male"},
				{id:2,name:"larry",gender:"male"},
				{id:3,name:"vicky",gender:"female"},
				{id:4,name:"lucy",gender:"female"},
				{id:5,name:"tom",gender:"male"},
			],
			//默认值，默认情况显示男生
			gender:"male"
		},
		//computed是一个计算属性，调用里面的方法不用加过好，直接用reverseMessage
		computed:{
			reverseMessage(){
				console.log("computed-reverseMessage"+Math.random())
				return this.message.split("").reverse().join("")
			},
			//过滤
			//u=>u.gender===this.gender  箭头函数
			userFilter(){
			//当this.users以及this.gender发生变化的时候，计算属性会重新执行计算出新的结果然后渲染到页面中。
				return this.users.filter(u=>u.gender===this.gender)
			}
		},
		created(){
			setTimeout(()=>{
				this.message += "hello world"
			},2000)
		},
		methods:{
			reverseMsg(){
				console.log("methods-reverseMsg"+Math.random())
				return this.message.split("").reverse().join("")
			}
		}
	})
</script>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性</title>
  <script type="text/javascript" src="/js/vue.global.prod.js"></script>
</head>
<body>
  <div id="app">
    {{chineseName.length > 0 ? "有中文名":"没有"}}
  </div>
</body>
</html>
<script type="text/javascript">
    <!--    声明组合式api-->
    const {createApp, reactive, toRefs} = Vue
    //  创建一个vue应用
    createApp({
        //    定义数据，方法等都写在setup函数中
        setup(){
            //定义的数据
            const data = reactive({
              chineseName:["李小屁","小鬼"]
            })
            //定义的数据和方法都需要return返回
            return {...toRefs(data)}
        }
    }).mount('#app')
</script>

实例截图：

vue生成java代码_html_04

但是如果在模板中写的太多逻辑，会让模板变得臃肿，难以维护，因此我们可以使用计算属性conputed（）方法来描述依赖响应式状态的复杂逻辑

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性</title>
  <script type="text/javascript" src="/js/vue.global.prod.js"></script>
</head>
<body>
<div id="app">
  {{c}}
</div>
</body>
</html>
<script type="text/javascript">
  <!--    声明组合式api-->
  const {createApp, reactive, toRefs,computed} = Vue
  //  创建一个vue应用
  createApp({
    //    定义数据，方法等都写在setup函数中
    setup() {
      //定义的数据
      const data = reactive({
        chineseName: ["李小屁", "小鬼"]
      })
      const c = computed(() =>
        data.chineseName.length > 0 ? '有名字' : '没名字');
        //定义的数据和方法都需要return返回
        return {...toRefs(data), c}
      }
    }).mount('#app');
</script>

示例：

vue生成java代码_css_05

那么往往在书写的时候大部分开发者更熟悉方法的熟书写，那么方法的书写和计算属性的区别到底是什么？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性</title>
  <script type="text/javascript" src="/js/vue.global.prod.js"></script>
</head>
<body>
<div id="app">
  {{c}}
  {{m()}}
</div>
</body>
</html>
<script type="text/javascript">
  <!--    声明组合式api-->
  const {createApp, reactive, toRefs,computed} = Vue
  //  创建一个vue应用
  createApp({
    //    定义数据，方法等都写在setup函数中
    setup() {
      //定义的数据
      const data = reactive({
        chineseName: ["李小屁", "小鬼"]
      })
      const c = computed(() =>
        data.chineseName.length > 0 ? '有名字' : '没名字');
        //普通方法
      const m = () => {
        return  data.chineseName.length > 0 ?'有名字':'没名字'
      }
        //定义的数据和方法都需要return返回
        return {...toRefs(data), c,m}
      }
    }).mount('#app');
</script>

计算属性和方法的区别
1，计算属性本质上是包含getter和setter的方法。
当获取计算属性时，实际上是在调用计算属性的getter方法，vue会收集计算属性的依赖，并缓存计算属性的返回结果，只有当依赖变化后才会进行重新计算。
2，方法没有缓存，每次调用方法都会导致重新执行。
3，计算属性的getter和setter参数固定，getter没有参数，setter只有一个参数，而方法的参数不限。
4，由于有以上的这些区别，因此计算属性通常是根据已有数据得到其他数据，并在得到数据的过程中不建议使用异步、当前时间，随机数等副作用操作。
5，实际上，他们最重要的区别是含义上的区别，计算属性含义上也是一个数据，可以读取也可以赋值，方法含义上是一个操作，用于处理一些事情

6.v-on的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-on的使用</title>
</head>
<script type="text/javascript" src="/js/vue.global.prod.js"></script>
<body>
<div id="app">
  <button v-on:click="sub">-</button>
  {{i}}
  <button v-on:click="add">+</button>
</div>
</body>
</html>
<script type="text/javascript">
  <!--    声明组合式api-->
  const {createApp, reactive, toRefs, computed} = Vue
  //  创建一个vue应用
  createApp({
    //    定义数据，方法等都写在setup函数中
    setup() {
      //定义的数据
      const data = reactive({
        i:0
      })
      const add = () => {
        data.i++
      }
      const sub = () => {
        data.i--
      }
      //定义的数据和方法都需要return返回
      return {...toRefs(data),add,sub}
    }
  }).mount('#app')
</script>

示例：

vue生成java代码_html_06

7.参数传递

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>参数传递</title>
</head>
<script type="text/javascript" src="/js/vue.global.prod.js"></script>
<body>
<div id="app">
  <button v-on:click="sub(10)">-</button>
  {{i}}
  <button v-on:click="add(10,$event)">+</button>
</div>
</body>
</html>
<script type="text/javascript">
  <!--    声明组合式api-->
  const {createApp, reactive, toRefs, computed} = Vue
  //  创建一个vue应用
  createApp({
    //    定义数据，方法等都写在setup函数中
    setup() {
      //定义的数据
      const data = reactive({
        i:0
      })
      const add = (num,e) => {
        console.log(e)
        data.i += num
      }
      const sub = (num) => {
        data.i -= num
      }
      //定义的数据和方法都需要return返回
      return {...toRefs(data),add,sub}
    }
  }).mount('#app')
</script>

示例：

vue生成java代码_html_07

8.v-if的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-if的使用</title>
</head>
<script type="text/javascript" src="/js/vue.global.prod.js"></script>
<body>
<div id="app">
  <div>
    <h2 v-if="score>90">优秀</h2>
    <h2 v-else-if="score>70">及格</h2>
    <h2 v-else>不及格</h2>
  </div>
</div>
</body>
</html>
<script type="text/javascript">
  <!--    声明组合式api-->
  const {createApp, reactive, toRefs, computed} = Vue
  //  创建一个vue应用
  createApp({
    //    定义数据，方法等都写在setup函数中
    setup() {
      //定义的数据
      const data = reactive({
        score: 91
      })
      //定义的数据和方法都需要return返回
      return {...toRefs(data)}
    }
  }).mount('#app')
</script>

示例：

vue生成java代码_vue生成java代码_08

10.v-show

v-show也同样具有判断的功能，只不过v-if属于真正意义的判断，如果条件失败，在渲染的时候不显示标签，v-show判断的是通过样式来决定是否显示，如果判断失败，会在标签上添加css display：none

<h2 v-show="score>80">{{message}}</h2>

11.v-for的使用

遍历对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-if的使用</title>
</head>
<script type="text/javascript" src="/js/vue.global.prod.js"></script>
<body>
<div id="app">
<!--  普通获取-->
  <span>{{student.name}}</span>
<!--  循环-->
  <span v-for="(item,key) in student">{{key}}-{{item}}</span><br>
</div>
</body>
</html>
<script type="text/javascript">
  <!--    声明组合式api-->
  const {createApp, reactive, toRefs, computed} = Vue
  //  创建一个vue应用
  createApp({
    //    定义数据，方法等都写在setup函数中
    setup() {
      //定义的数据
      const data = reactive({
        student:{
          name:'张三',
          age: 23,
          hobbies:'抽烟喝酒烫头'
        }
      })
      //定义的数据和方法都需要return返回
      return {...toRefs(data)}
    }
  }).mount('#app')
</script>

示例：

vue生成java代码_javascript_09

遍历对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-for遍历数组</title>
</head>
<script type="text/javascript" src="/js/vue.global.prod.js"></script>
<body>
<div id="app">
<!--  循环-->
  <span v-for="(item,key) in student">{{key}}-{{item}}</span><br>
</div>
</body>
</html>
<script type="text/javascript">
  <!--    声明组合式api-->
  const {createApp, reactive, toRefs, computed} = Vue
  //  创建一个vue应用
  createApp({
    //    定义数据，方法等都写在setup函数中
    setup() {
      //定义的数据
      const data = reactive({
        student:['jack','tom','李小屁']
      })
      //定义的数据和方法都需要return返回
      return {...toRefs(data)}
    }
  }).mount('#app')
</script>

示例：

vue生成java代码_html_10

12 v-bind示例

v-bind的作用就是用于绑定数据和元素属性的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind示例</title>
  <style>
      .checkDiv {
          width: 50px;
          height: 50px;
          border-radius: 50px;
          background-color: aqua;
      }
  </style>
</head>
<script type="text/javascript" src="/js/vue.global.js"></script>
<body>
<div id="app">
<div class="checkDiv" v-bind:style="{width:w+'px',height:h+'px'}" v-on:click="checkDiv()"></div>
</div>
</body>
</html>
<script>
  <!--    声明组合式api-->
  const {createApp, reactive, toRefs} = Vue
  //  创建一个vue应用
  createApp({
    //    定义数据，方法等都写在setup函数中
    setup() {
      //定义的数据
      const data = reactive({
        w: 50,
        h: 50
      })
      //方法
      const checkDiv = () => {
        data.w += 10,
        data.h += 10
      }

      const getStyle = () => {
          return{width:data.w+'px',height:data.h+'px'}
      }
      //定义的数据和方法都需要return返回
      return {...toRefs(data),checkDiv,getStyle}
    }
  }).mount('#app')
</script>

注意：
v-bind后面是：属性名=，我的理解是表示绑定这个属性，绑定之后，对应的值要去vue的数据里面找,当然也可以等于一个常数，这样就不用去data里找了。
当我们在控制台改变url时，对应也会变化。
相同的，我们还可以绑定图片src属性、超链接的class

var app = new Vue({
    el:'.app',
    data:{
        url:"https://www.baidu.com",
        imgsrc:"https://cn.vuejs.org/images/logo.png",
        class:"btn btn-default"
    }
});
<div class="app">
    <a v-bind:href="url" v-bind:class="klass">click me</a>
    <img v-bind:src="imgsrc">
</div>

13 单选框 radio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>radio</title>
</head>
<script type="text/javascript" src="/js/vue.global.js"></script>
<body>
<div id="app">
<!--    男<input name="sex" type="radio" value="男" checked="sex=='男">-->
<!--    女<input name="sex" type="radio" value="女" checked="sex=='女">-->

<!--    男<input name="sex" type="radio" value="男" v-model="sex">-->
<!--    女<input name="sex" type="radio" value="女" v-model="sex">-->

    男<input name="sex" type="radio" value="0" v-model="sex">
    女<input name="sex" type="radio" value="1" v-model="sex">
</div>
</body>
</html>
<script>
<!--    声明组合式api-->
   const {createApp, reactive, toRefs} = Vue
  //  创建一个vue应用
  createApp({
   //    定义数据，方法等都写在setup函数中
       setup(){
           //定义的数据
           const data = reactive({
               sex:1
           })
           //定义的数据和方法都需要return返回
           return {...toRefs(data)}
       }
   }).mount('#app')
</script>

14 复选框样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src="/js/vue.global.js"></script>
<body>
<div id="app">
<!--    单选框-->
    <lable for="argee">
        <input type="checkbox" id="agree" v-model="isAgree">同意协议
    </lable>
    <button :disabled="!isAgree">下一步</button>
    <br>
<!--    复选框-->
    <input name="hobbies" type="checkbox" value="抽烟" v-model="hobbies">抽烟
    <input name="hobbies" type="checkbox" value="喝酒" v-model="hobbies">喝酒
    <input name="hobbies" type="checkbox" value="烫头" v-model="hobbies">烫头
</div>
</body>
</html>
<script>
<!--    声明组合式api-->
   const {createApp, reactive, toRefs} = Vue
  //  创建一个vue应用
  createApp({
   //    定义数据，方法等都写在setup函数中
       setup(){
           //定义的数据
           const data = reactive({
               isAgree : false,
               hobbies: ['抽烟','烫头']
           })
           //定义的数据和方法都需要return返回
           return {...toRefs(data)}
       }
   }).mount('#app')
</script>

15 下拉列表

下拉列表：select标签

使用场景：在页面中，如果有多个选项让用户选择，使用select标签定义的下拉列表可以很有效的节约空间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src="/js/vue.global.js"></script>
<body>
<div id="app">
    <select name="f" v-model="fruit" multiple="multiple">
        <option value="苹果">苹果</option>
        <option value="哈密瓜">哈密瓜</option>
        <option value="草莓">草莓</option>
        <option value="车厘子">车厘子</option>
        <option value="榴莲">榴莲</option>
    </select>
</div>
</body>
</html>
<script>
<!--    声明组合式api-->
   const {createApp, reactive, toRefs} = Vue
  //  创建一个vue应用
  createApp({
   //    定义数据，方法等都写在setup函数中
       setup(){
           //定义的数据
           const data = reactive({
              fruit:['车厘子']
           })
           //定义的数据和方法都需要return返回
           return {...toRefs(data)}
       }
   }).mount('#app')
</script>

示例：

vue生成java代码_javascript_11

16 多选下拉列表

一、多选下拉列表
1、框架： ?
2、multiple="multiple"是用来：支持多选
size是用来：设置条目数量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src="/js/vue.global.js"></script>
<body>
<div id="app">
   <span v-for="(item,index) in allFruits">
       {{item}}<input type="checkbox" :value="item" v-model="selectFruit">
   </span>
</div>
</body>
</html>
<script>
<!--    声明组合式api-->
   const {createApp, reactive, toRefs} = Vue
  //  创建一个vue应用
  createApp({
   //    定义数据，方法等都写在setup函数中
       setup(){
           //定义的数据
           const data = reactive({
                allFruits:['香蕉','车厘子','榴莲','芒果','黄桃','荔枝'],
               selectFruit:['榴莲','车厘子']
           })
           //定义的数据和方法都需要return返回
           return {...toRefs(data)}
       }
   }).mount('#app')
</script>

示例：

vue生成java代码_vue生成java代码_12

控件

1、file控件：文件上传专用
2、hidden控件：隐藏域，网页上看不到，但是表单提交的时候数据会自动提交给服务器
3、readonly与disabled：
（1）相同点：两者都是只读不能修改
（2）不同点：readonly数据可以提交给服务器，disabled数据不会提交，即使有name属性也不会提交
4、input控件的maxlength：设置文本框中可输入的字符数量

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：embedding推荐的预训练模型

下一篇：分布式dubbo 事务回滚

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯