Java学习Day33：HTML 第五章：沙门村（vue）-CSDN博客

本文链接：https://blog.csdn.net/weixin_51721783/article/details/141551176

一. Vue 基础

(一) Vue 简介
🔰Vue 是渐进式JavaScript框架。
🔰官网文档：https://v2.cn.vuejs.org/v2/guide/
🔰Vue是基于MVVM模式实现的一套框架（把页面分成Model、View 、ViewModel 三部分）。

🔰MVVM的工作原理：
当数据源发生变化时，会被ViewModel 监听到，VM会根据最新的数据源自动更新页面的结构
当表单元素的值发生变化时，也会被VM监听到，VM会把变化过后最新的值自动同步到Model 数据源中
(二) 第一个Vue程序
导入开发版本的 Vue.js

<!--开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

创建Vue实例对象，设置 el 属性和 data 属性

<script >
    var app = new Vue({
        el:"#apps",
        data:{
            message:"Hello Vue"
        }
    })
</script>

使用简洁的模板语法把数据渲染到页面上

<div id="apps">
	{{ message}}
</div>

(三) el: 挂载点
🔰el是用来设置Vue实例挂载（管理）的元素

🔰Vue会管理el选项命中的元素及其内部的后代元素

🔰可以使用其他的选择器，但是建议使用ID选择器 ( el:"#apps"/ el:".apps"/ el:"div")

🔰可以使用其他的双标签，不能使用HTML和BODY

var app = new Vue({
	el:"#app"
})

(四) data: 数据对象
🔰Vue中用到的数据定义在data中

🔰data中可以写复杂类型的数据

🔰渲染复杂类型数据时，遵守js的语法即可

🔰有多组数据时，用,隔开

<body>
    <div id="app">
        <!-- 字符串 -->
        {{ message}}
        <!-- 对象 -->
        <h2> {{school.name}} {{school.mobile}} </h2>
        <!-- 数组 -->
        <li> {{campus[0]}} </li>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script >
    var app = new Vue({
        el:"#app",
        data:{
            // 字符串
            message:"Hello Vue", 
            // 对象
            school: {
                name:"艾莉",
                mobile:"1234567"
            },
            // 数组
            campus:["北京小区", "上海小区", "新疆小区"]
        }
    })
</script>

使用{{}}获取到 data 内的数据，{{}}可以书写数字，表达式，运算符号。

(五) methods：方法

🔰Vue中用到的方法定义在methods中

🔰有多个方法时，用,隔开

var app = new Vue({
	el:"#app",
	data:{
		content:0
	},
	methods:{
		方法名:function() {
			// 逻辑
		},
		dolt:function() {
			// 逻辑
		}
	}
})

二. 内置指令

(一) v-text (内容绑定)
🔰作用：设置标签的内容

🔰默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容

<h1 v-text="message">{{school.name}},{{school.class[1]}},{{school.class[0]}},{{school.class[2]}}</h1>

(二) v-html (html 结构绑定)
🔰作用：设置元素的 innerHTML

🔰内容中有html元素结构会被解析为标签

🔰v-text指令无论内容是什么，只会解析为文本

🔰解析文本使用v-text，需要解析html结构使用v-html

实例：

 <h1 v-text="message+'!'">{{school.name}},{{school.class[1]}},{{school.class[0]}},{{school.class[2]}}</h1>
    <h1 v-html="school">{{message+'!'}},{{school.name}},{{school.class[1]}},{{school.class[0]}},{{school.class[2]}}</h1>

(三) v-show (显示切换 [修改display属性])
🔰作用：根据表达值的真假，切换元素的显示状态

🔰原理：修改元素的display属性，实现显示隐藏

🔰指令后面的内容，最终都会解析为布尔值

🔰值为true元素显示，值为false元素隐藏

🔰数据改变之后，对应元素的显示状态会同步更新

(四) v-if (显示切换 [操作 dom 元素])
🔰作用：根据表达值的真假，切换元素的显示状态

🔰本质：通过操纵dom元素来切换显示状态

🔰表达式的值为true，元素存在于dom树中；为false，从dom树中移除

实例：根据表达值，移除或保留元素

(五) v-bind (属性绑定)
🔰作用：设置元素的属性（如：src, title, class）

🔰完整写法是v-bind:属性名
<img v-bind:src="imgSrc">

🔰简写的话可以直接省略v- bind，只保留:属性名
<img :src="imgSrc">

🔰需要动态的增删class建议使用对象的方式

(六) v-for (列表循环)
🔰作用：根据数据生成列表结构

🔰数组经常和 v-for 结合使用

🔰语法是(item, index) in 数据

🔰item 和 index 可以结合其他指令一起使用

🔰数组长度的更新会同步到页面上，是响应式的

实例：数组遍历，对象遍历，添加 / 移除对象元素

<body>
    <span id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">

        <ul>
            <li v-for="(item, index) in arr" :key="item.id">
                {{ index +1}} 学习专区 {{ item }}
            </li>
        </ul>

        <span v-for="item in vegetables" :title="item.name">
            {{ item.name }}
        </span>
        <div v-for="index,key,value in user" >
            {{ index }}-- {{key }} -- {{value}}
        </div>
    </span>
</body>

(七) v-model (表单元素绑定)
🔰作用：设置和获取表单元素的值（双向数据绑定）

🔰绑定的数据会和表单元素值相关联

🔰邦定的数据←→表单元素的值

实例：输入内容和下面的内容同步更新

<body>
    <div id="app">
        <input v-model="massage" type="text">
        <h2>{{massage}} </h2>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script >
    var app = new Vue({
        el:"#app",
        data:{
            massage:'艾莉'
        }
    })
</script>

🔰为了方便用户输入的内容进行处理，vue为v-model指令提供了3个修饰符：

修饰符   作用   示例
.number   转换为数值   <input v-model.number='age'/>
.trim   去掉开始和结尾的空格   <input v-model.trim='age'/>
.lazy   将 input 事件切换为 change 事件   <input v-model.lazy='age'/>
(八) v-on (事件绑定)
🔰作用：为元素绑定事件，如 click 等；

🔰事件名不需要写on ；–> v-on: 事件名="方法" v-on: click="dolt"

🔰指令可以简写为@； --> (v-on: click="dolt" --> @click="dolt")

🔰绑定的方法定义在methods属性中；

🔰方法内部通过this关键字可以访问定义在data中数据

<script >
    var app = new Vue({
        el:"#app",
        data:{
            food:"西红柿炒鸡蛋"
        },
        methods:{
            dolt:function() {
                this.food+="好好吃！"
            }
        }
    })
</script>

1. 事件方法传参
🔰事件绑定的方法写成函数调用的形式，可以传入自定义参数
<input type="button" @click="dolt(2, '古力')">

🔰定义方法时需要定义形参来接收传入的实参
dolt:function(p1, p2) { console.log(p1 + p2); }🔰事件的后面跟上.修饰符可以对事件进行限制
🔰.enter可以限制触发的按键为回车

<input type="text" @keyup.enter="sayHi">

<body>
    <div id="app">
        <input type="button" @click="dolt(2, '古力')">
        <input type="text" @keyup.enter="sayHi">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script >
    var app = new Vue({
        el:"#app",
        methods:{
            dolt:function(p1, p2) {
                console.log(p1 + p2);
            },
            sayHi:function() {
                alert('你好')
            }
        }
    })
</script>

2. 事件修饰符
🔰事件修饰符：是和事件连接起来决定事件的触发或者阻止

stop:阻止事件冒泡 (给孩子添加，阻止冒泡)
prevent:用于阻止标签的默认事件
self:用来针对当前标签的事件触发 (给父亲添加，阻止孩子骚扰)
once:只让事件执行一次

<a v-on:click.stop="doThis"></a>

<form v-on:submit.prevent="onSubmit"></form>

<a v-on:click.stop.prevent="doThat"></a>

<form v-on:submit.prevent></form>

<div v-on:click.capture="doThis">...</div>

<div v-on:click.self="doThat">...</div>

<a href="./login.html" @click.prevent="a1">跳转</a>

<button @click.once="stop">点击</button>
</div>
3. 按键修饰符
回车键修饰符：.enter
tab 键修饰符：.tab
delete 键修饰符：.delete 删除键
esc 键修饰符：.esc 取消键
space 键修饰符：.space 空格键
up 键修饰符：.up 上
down 键修饰符：.down 下
left 键修饰符：.left 左
right 键修饰符：.right 右
.ctrl
.alt
.shift

<input type="text" @keyup.enter="clear(1)" name="" id="">

<input type="text" @keyup.tab="clear(2)" name="" id="">

<input v-on:keyup.alt.67="clear">

<div v-on:click.ctrl="doSomething">Do something</div>
自定义按键修饰符：

全局config.keyCodes对象
Vue.config.keyCodes.f1 ==112

(九) 自定义指令
🔰为何需要自定义指令？

内部指令不满足需求
🔰Vue.directive 注册全局指令
全局指令在任何组件中使用

🔰diretives 定义局部指令
局部指令只能在当前页面使用

1. 获取元素焦点
自定义指令的语法规则（获取元素焦点）
Vue.directive('focus',{
   inserted.function(el) {
       // 获取元素的焦点
       el.focus();
   }
});
自定义指令用法
<input type="text" v-focus>
2. 改变元素背景颜色
带参数的自定义指令（改变元素背景颜色）
Vue.directive('color',{
   inserted.function(el, binding) {
       // 获取元素的焦点
       el.style.backgroundColor = binding.value.color;
   }
});
自定义指令用法
<input type="text" v-color="color: 'orange'">
3. 局部指令
directives:{
   focus: {
       // 指令定义
       inserted.function(el) {
           el.focus();

三. 内置组件

🔰组建的作用：根据不同的业务功能把页面分为不同的组件，根据组件来完成布局。

(一) 全局组件
🔰定义全局的组件: Vue.component(组件的名称, 组件的配置)

Vue.component("login", {....});
🔰组件的配置 template：“用于书写我们的html代码”

template: "<h3>泰裤辣</h3>"
运行运行
🔰 需要根据组件名称来使用全局组件
🔰注册组件的时候尽量使用驼峰命名法

<div id="app">
	<!--  3. 调用全局组件 -->
    <login></login>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	// 1. 定义全局组件
    Vue.component("login", {
	    // 2. 组件配置
        template: "<h3>泰裤辣</h3>",
    });
    const app = new Vue({
        el: "#app",
        data: {},
    })
</script>