当前位置： 首页 > article >正文

Javaweb基础-vue

article 2024/10/20 0:53:04

Vue.js

Vue是一套用于构建用户界面的渐进式框架。

起步

引入vue

<head>
    <script src="static/js/vue@2.6.12.min.js"></script>
</head>

创建vue应用

<body>
<div id="index">
    <p>{{message}}</p>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            message: "消息"
        }
    });
</script>
</body>

模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

插值

文本

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值

<body>
<div id="index">
    <p>{{message}}</p>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            message: "消息"
        }
    });
</script>
</body>

HTML

使用 v-html 指令用于输出 HTML代码

<body>
<div id="index">
    <div v-html="html"></div>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            html:"<p>一个p标签</p>"
        }
    });
</script>
</body>

属性

HTML 属性中的值应使用 v-bind 指令。

<body>
<div id="index">
    <input type="checkbox" v-model="used"><!--被选中时 used=true -->
    <div v-bind:class="{'class1':used}">属性</div><!-- used=true时，class=class1 -->
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            used:false
        }
    });
</script>
</body>
<style>
    .class1{
     background-color: red;
    }
</style>

表达式
<body>
<div id="index">
    <p>{{1+1}}</p>
    <p>{{ok?"OK":"NO"}}</p>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            ok:true
        }
    });
</script>
</body>

指令

指令是带有 v- 前缀的特殊属性。指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

<div v-html=""></div>
<div v-bind:class="">属性</div>
...
参数

参数在指令后以冒号指明。

<div v-bind:class="">属性</div> <a v-bind:href="">链接</a> ...
修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

<button @click.native="">按钮</button>

条件语句

v-if

<body>
<div id="index">
    <div v-if="ok">{{ok}}</div><!--ok=true时显示true，否则不展示 -->
    <div v-if="!ok">{{ok}}</div><!--ok=false时，显示false-->
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            ok:false
        }
    });
</script>
</body>

v-else

<body>
<div id="index">
    <div v-if="ok">{{ok}}</div><!--ok=true时显示true-->
    <div v-else>{{ok}}</div><!--否则显示false-->
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            ok:false}
        }
    });
</script>
</body>

v-else-if

<body>
<div id="index">
    <div v-if="ok==='A'">A</div>
    <div v-else-if="ok==='B'">B</div>
    <div v-else-if="ok==='C'">C</div>
    <div v-else>OTHER</div>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            ok:'X'
        }
    });
</script>
</body>

v-show

与v-if作用类似

<body>
<div id="index">
    <div v-show="ok">A</div>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            ok:true
        }
    });
</script>
</body>

循环语句

循环使用 v-for 指令。

迭代数组

<body>
<div id="index">
    <ol>
        <li v-for="item in list">{{item.key}}:{{item.value}}</li>
    </ol>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            list: [
                {key: "key1", value: "value1"},
                {key: "key2", value: "value2"},
                {key: "key3", value: "value3"}
            ]
        }
    });
</script>
</body>

迭代对象

<body>
<div id="index">
    <ol>
        <li v-for="(value,key) in obj">{{key}}:{{value}}</li>
    </ol>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            obj:{
                name:"aji",
                sex:"male",
                age:"24"
            }
        }
    });
</script>
</body>

迭代整数

<body>
<div id="index">
    <ol>
        <li v-for="n in 10">{{n}}</li>
    </ol>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
        }
    });
</script>
</body>

 

计算属性

计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。

computed

<body>
<div id="index">
    <span>{{str}}</span>
    <div v-for="item in str.split('')">{{item}}</div><!--功能与下一行一样-->
    <div v-for="item in strSplit">{{item}}</div>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            str:"abcd"
        },
        computed:{
            strSplit:function (){
                return this.str.split('')
            }
        }
    });
</script>
</body>

methods

可以使用 methods 来替代 computed，效果上两个都是一样的

<body>
<div id="index">
    <span>{{str}}</span>
    <div v-for="item in str.split('')">{{item}}</div><!--功能与下一行一样-->
    <div v-for="item in strSplit2()">{{item}}</div>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            str:"abcd"
        },
        methods:{
            strSplit2:function (){
                return this.str.split('')
            }
        }
    });
</script>
</body>

样式绑定

class

可以在对象中传入多属性用来动态切换多个 class

<body>
<div id="index">
    <span>红色背景<input type="checkbox" v-model="red"></span>
    <span>大字体<input type="checkbox" v-model="big"></span>
    <div v-bind:class="{'class1':red,'class2':big}">样式绑定class</div>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            red:false,
            big:false,
        }
    });
</script>
</body>
<style>
    .class1 {
        background-color: red;
    }
    .class2 {
        font-size: 40px;
    }
</style>

style

可以在 v-bind:style 直接设置样式

<body>
<div id="index">
    <button v-on:click="add()">{{fontSize}}+4</button><!--点击时触发add()方法，fontSize+4-->
    <div v-bind:style="{fontSize:fontSize+'px'}">样式绑定class</div>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            fontSize: 12,
        },
        methods: {
            add: function () {
                this.fontSize += 4
            }
        }
    });
</script>
</body>

事件处理器

事件监听可以使用 v-on 指令

<body>
<div id="index">
    <button v-on:click="{fontSize++}">{{fontSize}}</button>
    <button v-on:mousedown="color('yellow')" 
            v-on:mouseup="color('pink')" 
            v-bind:style="{backgroundColor:fontColor}">{{fontColor}}</button>
    <button v-on:mouseover="color('yellow')" 
            v-on:mouseout="color('pink')" 
            v-bind:style="{color:fontColor}">{{fontColor}}</button>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            fontSize: 12,
            fontColor: "pink"
        },
        methods: {
            color: function (param) {
                this.fontColor = param
            }
        }
    });
</script>
</body>

 

表单

可以用 v-model 指令在表单控件元素上创建双向数据绑定

输入框

<body>
<div id="index">
    <div>
        <input type="text" v-model="str">
        <p>{{str}}</p>
    </div>
    <div>
        <textarea type="text" v-model="text"></textarea>
        <p>{{text}}</p>
    </div>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            str: '',
            text: ''
        }
    });
</script>
</body>

复选框

复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组。

<body>
<div id="index">
    <div>
        <span>逻辑值<input type="checkbox" v-model="bool"></span>
        <p>{{bool}}</p>
    </div>
    <div>
        <span>数组<input type="checkbox" v-model="arr" value="A">
            <input type="checkbox" v-model="arr" value="B">
            <input type="checkbox" v-model="arr" value="C"></span>
        <p>{{arr}}</p>
    </div>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            bool: false,
            arr: [],
        }
    });
</script>
</body>

单选按钮

<body>
<div id="index">
    <div>
        <span>A<input type="radio" v-model="single" value="A"></span>
        <span>B<input type="radio" v-model="single" value="B"></span>
        <span>C<input type="radio" v-model="single" value="C"></span>
        <p>{{single}}</p>
    </div>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            single:'',
        }
    });
</script>
</body>

select列表

<body>
<div id="index">
    <select v-model="select">
        <option value="">请选择</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
    <p>{{select}}</p>
</div>

<script>
    const index = new Vue({
        el: "#index",
        data: {
            select: '',
        }
    });
</script>
</body>

组件

组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用。

全局组件

<body>
<div id="index">
    <aji></aji><!--使用全局组件-->
</div>

<script>
    Vue.component('aji',{
        template:'<div>自定义组件aji</div>'
    }) //注册全局组件
    const index = new Vue({
        el: "#index",
        data: {
        }
    });
</script>
</body>

局部组件

<body>
<div id="index">
    <aji></aji><!--使用全局组件-->
</div>

<script>
    const index = new Vue({
        el: "#index",
        components: {
            'aji': {
                template: '<div>自定义组件aji</div>'
            }
        },
        data: {}
    });
</script>
</body>

Prop

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"

<body>
<div id="index">
    <aji msg="prop传参"></aji><!--全局组件中使用prop-->
</div>

<script>
    Vue.component('aji', {
        props: ['msg'],
        template: '<div>自定义组件aji,传参为:{{msg}}</div>'
    })
    const index = new Vue({
        el: "#index",
        data: {}
    });
</script>
</body>

动态 Prop

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件。

<body>
<div id="index">
    <input type="text" v-model="msg">
    <aji v-bind:msg="msg"></aji>
</div>

<script>
    Vue.component('aji', {
        props: ['msg'],
        template: '<div>自定义组件aji,传参为:{{msg}}</div>'
    })
    const index = new Vue({
        el: "#index",
        data: {
            msg:''
        }
    });
</script>
</body>

组件-自定义事件

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！


http://www.kler.cn/news/356585.html

相关文章：

  • QT开发：深入掌握 QtGui 和 QtWidgets 布局管理：QVBoxLayout、QHBoxLayout 和 QGridLayout 的高级应用
  • list和vector的区别
  • 【2024最新版】网络安全学习路线-适合入门小白
  • python 作业1
  • PyTorch 的 DataLoader 类介绍
  • freertos的任务管理
  • python将视频转为gif
  • MySQL 9从入门到性能优化-二进制日志
  • 字节跳动实习生投毒自家大模型细节曝光 影响到底有多大？
  • 《京东金融APP的鸿蒙之旅系列专题》新特性篇：意图框架接入
  • php之is_null、empty 、isset 的区别
  • 即时通讯未读消息计数
  • 计算机网络基础进阶
  • git基础操作步骤
  • 【Linux系列】在 Linux 中使用 `watch` 命令监控 Docker 容器状态
  • 从0-1实战演练后台管理系统 （2）从零开始：Pure Admin 环境搭建完全指南，小白也能轻松掌握！
  • 前端vue-登录页面中密码登录和验证码登录的实现步骤
  • C#中 is 和 as 运算符使用与区别
  • Scrapy | Scrapy框架中管道的使用
  • 计算机挑战赛6