Web Python

# 01.MVVM框架[toc]{type: "ol", level: [3,4]}### 框架分类- MVC框架> **View**{style="color:brown"} -> **Control**{style="color:goldenrod"} -> **Model**{style="color:green"} ->> 三角形环状结构> 适用于逻辑驱动的项目- MVP框架 **使用较少**{style="color:grey"}&gt...

版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究...

版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究...

版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究...

​​​​​​​版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究 版权所有 盗版必究版权所有 盗版必究版权所有 盗版必究版权所有 盗版必究版权所有 盗版必究版权所有 盗版必究版权所有 盗版必究版权所有 盗版必究版权所有 盗版必究版权所有 盗版必究版权所有 盗版必究版权所有 盗版必究版权所有 盗版必...

# 04.v-html[toc]{type: "ol", level: [3,4]}### v-html#### js结构```jsconst app = Vue.createApp({ data() { return { site: '<a href="https://www.apple.com">Apple</a>', intro:'<button>点我</button&...

# 05.v-pre[toc]{type: "ol", level: [3,4]}### js结构```jsconst app = Vue.createApp({ data() { return { msg:'Apple' } }}).mount('#app');```### v-pre> 不产生编译 类似于转义字符```html<h3>{{ msg }}</h3>&lt...

# 06.v-cloak[toc]{type: "ol", level: [3,4]}### 基础结构```js // 模拟2秒加载时间 setTimeout(()=>{ const app = Vue.createApp({ data() { return { msg:'Apple' } } ...

# 07.v-if&v-show[toc]{type: "ol", level: [3,4]}### js结构```jsconst app = Vue.createApp({ data() { return { // flag: true flag: false } }}).mount('#app');```### v-if> DOM层面> 条件渲染 通过条件控...

# 08.v-if&v-show案例[toc]{type: "ol", level: [3,4]}### js结构```jsconst app = Vue.createApp({ data() { return { // 手机/邮箱登录 loginType: 'phone' // email } }, methods: { change() { ...

# 01.v-bind基础[toc]{type: "ol", level: [3,4]}### v-bind#### js结构```js const app = Vue.createApp({ data() { return { msg:'', imgUrl: '../img/01.jpeg', alt: '风景如画', ...

# 02.v-bind-绑定class[toc]{type: "ol", level: [3,4]}### 基础结构```css.brown { color: brown;}.f30 { font-size: 30px;}``````jsconst app = Vue.createApp({ data() { return { msg:'pear', arg1:'brown', ...

# 03.v-bind-绑定style[toc]{type: "ol", level: [3,4,5]}### js结构```jsconst app = Vue.createApp({ data() { return { msg: 'Pear', f30: '30px', backColor: 'green', } }, methods: { ...

# 01.v-on-基础[toc]{type: "ol", level: [3,4]}### v-on#### js结构```jsconst app = Vue.createApp({ data() { return { count: 0 } }, methods: { add() { this.count++; }, sub() { ...

# 02.v-on-参数传递[toc]{type: "ol", level: [3,4]}### 参数传递#### js结构```jsconst app = Vue.createApp({ data() { return { msg: 'Apple' } }, methods: { // js中可以不传递参数 undefined btn1Click(args) { ...

# 03.v-on-常用修饰符[toc]{type: "ol", level: [3,4]}### 鼠标事件#### 阻止事件冒泡- @click.stop- 常规方式阻止事件冒泡> event.stopPropagation()> return false```jsboxClick() { console.log('点击了盒子')},btnClick(event) { console.log('点击了按钮')},``````css...

# 01.计算属性-基础使用[toc]{type: "ol", level: [3,4]}### 基础使用#### js结构```jsconst app = Vue.createApp({ data() { return { // 属性 firstName: '乔治', lastName: '希尔', } }, methods: { // ...

# 02.计算属性-深入使用[toc]{type: "ol", level: [3,4]}### 深入使用#### js结构```jsconst app = Vue.createApp({ data() { return { members: [ {id: '001', name: '张三', score: 1314}, {id: '002', name: '李四', s...

# 03.计算属性-内部实现md[toc]{type: "ol", level: [3,4]}### 内部实现#### js结构```jsconst app = Vue.createApp({ data() { return { firstName: '乔治', lastName: '希尔', } }, computed: { // 计算属性中有get与set方法 [简...

# 04.计算属性与函数[toc]{type: "ol", level: [3,4]}### 计算属性与函数> 计算属性的值会存储到缓存中> 即使多次调用，也只打印一次#### js结构```jsconst app = Vue.createApp({ data() { return { firstName: '乔治', lastName: '希尔', } }, comp...

# 05.计算属性-watch侦听器[toc]{type: "ol", level: [3,4]}### watch侦听器#### js结构- 计算属性> 适合做筛选，**不可异步操作**{style="color:brown"}- 侦听器> 适合做执行，**可异步操作**{style="color:green"}```jsconst app = Vue.createApp({ // app.price = 60 data() { re...

# 01.v-for基础[toc]{type: "ol", level: [3,4]}### js结构```jsconst app = Vue.createApp({ data() { return { personArr: ['lili', 20, '人狠话不多'], personObj: {name: 'lisa', age:24, info: '话多人不狠'}, persons: [ ...

# 02.v-for案例[toc]{type: "ol", level: [3,4]}### v-for案例#### css结构```cssbody { text-align: center;}ul li { /*去掉圆点*/ list-style: none; line-height: 30px;}```#### js结构-```jsconst app = Vue.createApp({ data() { ret...

# 01.v-model基础使用[toc]{type: "ol", level: [3,4]}### js结构```jsconst app = Vue.createApp({data() { return { msg:'Love', info: 'Apple', }},methods: { valueChange(event) { this.info = event.target.value }}}).mount('#...

# 02.v-model表单操作[toc]{type: "ol", level: [3,4]}### js结构```jsconst app = Vue.createApp({ data() { return { sex: '', isAgree: false, hobbies: [], stars: ['范冰冰', '李冰冰', '刘亦菲'], l...

# 03.v-model修饰符[toc]{type: "ol", level: [3,4]}### js结构```jsconst app = Vue.createApp({ data() { return { msg:'', age: 0, name: '', } }}).mount('#app');```### 懒加载- lazy> **输入回车**...

# 01.全局组件[toc]{type: "ol", level: [3,4]}### 组件样式```html<div class="component" style="background: goldenrod; width: 180px; margin-bottom: 20px"> <p>==================</p> <header>组件 头部</header> <header&g...

# 02.局部组件[toc]{type: "ol", level: [3,4]}### 局部组件#### 创建局部组件```jsconst Counter = { data() { return { count: 0 } }, template: ` <button @click="count++">点击了{{ count }}次</button> `}``...

# 03.组件标签化[toc]{type: "ol", level: [3,4]}### 组件标签化#### js结构```js// 创建组件const Counter = { data() { return { count: 0 } }, // 注意此处使用的符号 // 将组件内容单独分离 template: `#app-count`,}// 创建实例const app = Vue...

# 04.组件-data[toc]{type: "ol", level: [3,4]}### 组件-data> 组件之间的data选项，其数据不共享```js<script> let obj1 = {}; let obj2 = {}; console.log(obj1 === obj2) // false let obj = {name: 'Apple'}; // 同一内存地址，可以同时被多个变量引用 let p...

# 01.props-形参[toc]{type: "ol", level: [3,4]}### 组件通信原则- 不要在子组件中直接修改父组件的数据- 数据和处理数据的函数应该在同一组件内- 子组件修改父组件的数据，要调用父组件中用于处理数据的函数### 组件通信方式- props> 父组件 --> 子组件- 自定义事件> 子组件 --> 父组件- 消息订阅与发布> 非父子组件- vuex> 常用数据### 创建子组件- ...

# 02.props-实参[toc]{type: "ol", level: [3,4]}### 组件创建```js// 创建子组件const Box = { props: { brand: {type: String, required:true, default: 'Web'}, colleges: {type: Array, required: false}, }, template: `#box`,};// 创建父...

# 03.自定义事件[toc]{type: "ol", level: [3,4]}### 创建子组件- 发射自定义事件> 最好命名为box-click，因为监听时不支持驼峰命名法> this.$emit('boxClick', '聪明绝顶') 不推荐```jsconst Box = { methods: { btnClick() { alert('点击') const data = { ...

# 04.父子组件相互访问[toc]{type: "ol", level: [3,4]}### 创建子组件> 子组件访问父组件：`$`parent 不推荐```jsconst Box = { data() { return { msg: 'Apple' } }, methods: { btnClick() { alert('父组件调用了子组件的方法') ...

# 05.非父子组件通信[toc]{type: "ol", level: [3,4]}### 创建孙组件- inject> 接收父组件发射的数据```jsconst lkGrandson = { setup() { const {inject} = Vue const gBrand = inject('brand', '默认值') const gCollege = inject('college') c...

# 01.插槽基本使用[toc]{type: "ol", level: [3,4]}### 创建组件```jsconst appBox = {template: `#box`,}```- 预留插槽```html<template id="box"> <div style="background-color: gold; width: 600px; height: 200px; margin: 20px"> <h3>Apple&lt...

# 02.具名插槽[toc]{type: "ol", level: [3,4]}### 创建组件```jsconst Box = { template: `#box`};```- 创建具名插槽```html<template id="box"> <div> <header> <!--头部内容--> <slot name="header">&l...

# 03.渲染作用域[toc]{type: "ol", level: [3,4]}### 创建子组件-局部组件```jsconst Box = { data() { return { isShow: false, } }, template: `#box`}``````html<template id="box"> <div style="background-color: g...

# 04.作用域插槽[toc]{type: "ol", level: [3,4]}### 创建组件```jsconst Box = { data() { return { nameArr: ['张三', '李四', '王五', '赵六'], } }, template: `#box`};``````html<template id="box"> <div style="back...

# 01.动态组件[toc]{type: "ol", level: [3,4]}### 创建父组件```js// 实例 父组件const app = Vue.createApp({ data() { return { cItem: 'lk-btn' } }, methods: { // 切换cItem的值 change() { if (this.cIte...