Java学习Day33：HTML 第五章：沙门村（vue）

一. 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

javascript 复制代码

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

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

javascript 复制代码

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

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

javascript 复制代码

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

(三) el: 挂载点

🔰el是用来设置Vue实例挂载（管理）的元素

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

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

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

javascript 复制代码

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

(四) data: 数据对象

🔰Vue中用到的数据定义在data中

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

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

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

javascript 复制代码

<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中

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

javascript 复制代码

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

二. 内置指令

(一) v-text (内容绑定)

🔰作用：设置标签的内容

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

javascript 复制代码

<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

实例：

javascript 复制代码

 <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:属性名

🔰简写的话可以直接省略v- bind，只保留:属性名

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

(六) v-for (列表循环)

🔰作用：根据数据生成列表结构

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

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

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

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

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

javascript 复制代码

<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 (表单元素绑定)

🔰作用：设置和获取表单元素的值（双向数据绑定）

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

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

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

javascript 复制代码

<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中数据

javascript 复制代码

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

事件方法传参

🔰事件绑定的方法写成函数调用的形式，可以传入自定义参数

🔰定义方法时需要定义形参来接收传入的实参

dolt:function(p1, p2) { console.log(p1 + p2); }🔰事件的后面跟上.修饰符可以对事件进行限制

🔰.enter可以限制触发的按键为回车

javascript 复制代码

<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>

事件修饰符

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

stop:阻止事件冒泡 (给孩子添加，阻止冒泡)

prevent:用于阻止标签的默认事件

self:用来针对当前标签的事件触发 (给父亲添加，阻止孩子骚扰)

once:只让事件执行一次

</div>

按键修饰符

回车键修饰符：.enter

tab 键修饰符：.tab

delete 键修饰符：.delete 删除键

esc 键修饰符：.esc 取消键

space 键修饰符：.space 空格键

up 键修饰符：.up 上

down 键修饰符：.down 下

left 键修饰符：.left 左

right 键修饰符：.right 右

.ctrl

.alt

.shift

<div v-on:click.ctrl="doSomething">Do something</div>

自定义按键修饰符：

全局config.keyCodes对象

Vue.config.keyCodes.f1 ==112

(九) 自定义指令

🔰为何需要自定义指令？

内部指令不满足需求

🔰Vue.directive 注册全局指令

全局指令在任何组件中使用

🔰diretives 定义局部指令

局部指令只能在当前页面使用

获取元素焦点

自定义指令的语法规则（获取元素焦点）

Vue.directive('focus',{

inserted.function(el) {

// 获取元素的焦点

el.focus();

}

});

自定义指令用法

改变元素背景颜色

带参数的自定义指令（改变元素背景颜色）

Vue.directive('color',{

inserted.function(el, binding) {

// 获取元素的焦点

el.style.backgroundColor = binding.value.color;

}

});

自定义指令用法

局部指令

directives:{

focus: {

// 指令定义

inserted.function(el) {

el.focus();

三. 内置组件

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

(一) 全局组件

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

Vue.component("login", {....});

🔰组件的配置 template："用于书写我们的html代码"

template: "<h3>泰裤辣</h3>"

运行运行

🔰 需要根据组件名称来使用全局组件

🔰注册组件的时候尽量使用驼峰命名法

javascript 复制代码

<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>