3.Vue入门到关门之指令系统2024-04-30

4.Vue入门到关门之计算属性与监听属性2024-04-30 5.Vue入门到关门之生命周期钩子2024-04-30 6.Vue入门到关门之组件2024-05-02 7.Vue入门到关门之Vue项目工程化2024-05-02 8.Vue入门到关门之第三方框架elementui2024-05-02 9.Vue入门到关门之Vue2高级用法2024-05-09 10.Vue入门到关门之Vue3项目创建2024-05-09 11.Vue入门到关门之Vue3学习2024-05-09

一、引入

在 Vue.js 中，指令（Directives）是一种特殊的标记，用于向 Vue 实例提供特殊的行为。指令以 v- 开头，例如 v-if、v-for 等。

指令的本质就是语法糖，标志位。在编译阶段 render 函数里，会把指令编译成 JavaScript 代码。
注意：指令都是放在标签上的

二、指令

1、文本指令

（1）v-text

v-text是渲染字符串，会覆盖原先的字符串

（2）v-html

v-html是渲染为html。
但是，不建议使用v-html指令，因为它会导致被恶意者进行XSS攻击的潜在风险。

（3）示例

{{}}双大括号和v-text都是输出为文本。那如果想输出为html。使用v-html,如下例子

 <div id="app">
    <div>{{innerHtml}}</div>
    <div v-text="innerHtml">123</div>
    <div v-html="innerHtml">123</div>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            innerHtml:'<button>一个按钮</button>'
        }
    })
</script>

2、事件指令

（1）v-on

v-on 事件绑定指令，用来辅助程序员为DOM 元素绑定事件监听，并提供处理逻辑。
语法:
- v-on:事件类型="methods中函数名"
- v-on:事件类型="内联语句"
由于v-on 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的@）
常用的事件有：点击事件，双击事件，拖动事件，得到焦点，失去焦点。。。。

例如：

 <body>
    <div id="app">
        <!-- 完整写法 v-on: -->
        // v-on:事件名 = "methods中的函数名"
        <div v-on:click="handleClick">点击事件</div>
        // v-on:事件名 = "内联语句"
        <button v-on:click="count++">按钮</button>
        <!-- 缩写 @ -->
        <div @click="handleClick">点击事件</div>
        <button @click="count++">按钮</button>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
        },
        methods:{
         // 定义一个 点击函数   
            handleClick:function(){
                console.dir('click event')
            }    
        },
    })
</script>

（2）es6的对象写法

 var hobby=['抽烟','烫头']
var obj={
    'name':'lqz',  // 正常写法
    age:19,  // 1、key之可以不用加引号
    hobby,  // 2、数组可以直接写名字，但必须在外面定义好
    showName:function() {  // 3、定义函数
        console.log(this.name)
    },
     showName() {  // 4、函数简写
        console.log(this.name)
    }
}
 
console.log(obj)
obj.showName()  // 外部直接调用内部函数

（3）v-on调用传参

函数有一个参数
- 如果在事件中触发函数，没有传参数，会自动把事件对象传入
- 定义好的参数，传的就是什么参数
- 把事件对象传入（$event）
函数有多个参数
- 少传不加括号，但是js里面的函数需要多个参数，结果是第一个是事件对象，其他为undefined
- 少传加括号，但是js里面的函数需要多个参数，不会把自动把事件对象传入，均为undefined
- 需要3个参数，但是多传了参数，结果是只接受自己的3个参数，多的不要
- 多个参数中，需要传入事件对象，方式为$event

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue/vue.js"></script>
    <style>
        img {
            height: 300px;
            width: 200px;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>事件指令--函数有参数</h1>
    <button @click="handleFunc1">不传参数-函数有参数</button>
    <br>
    <button @click="handleFunc1(isShow)">传参数-函数有参数</button>
    <br>
    <button @click="handleFunc1($event)">传参数-函数有参数-把事件对象传入</button>
    <br>
    <button @click="handleFunc2">多个参数-少传不加括号</button>
    <br>
    <button @click="handleFunc2()">多个参数-少传-加括号event不会自动传入</button>
    <br>
    <button @click="handleFunc2(1,2,3,4,5,6,)">多个参数-多传</button>
    <br>
    <button @click="handleFunc2(1,$event)">多个参数-event作为第二个参数</button>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isShow:true
        },
        methods: {
            handleFunc1(event){
                //1 如果在事件中触发函数，没有传参数，会自动把 事件对象传入
                console.log(event)
            },
            handleFunc2(a,b,c){
                console.log(a)
                console.log(b)
                console.log(c)
            }
        }
    })
</script>
</html>

3、属性指令

（1）v-bind

v-bind 属性绑定指令，用来动态的设置html的标签属性，比如：src、url、title。。。

语法：
- v-bind：属性名="表达式"
- 简写为 :属性名="表达式"

示例：

控制图片轮播

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="toggleAutoChange">{{ isAutoChanging ? '停止' : '开始' }}自动切换美女图片</button>
    <img :src="currentImage" alt="Beautiful Girl">
</div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            isAutoChanging: false,
            images: [
                "http://img.netbian.com/file/2024/0416/004850qAPxg.jpg",
                "http://img.netbian.com/file/2024/0411/0016435MJh0.jpg",
                "http://img.netbian.com/file/2024/0409/002601sxcu4.jpg",
                "http://img.netbian.com/file/2024/0323/001609whWN7.jpg"
            ],
            currentIndex: 0,
            intervalId: null
        },
        computed: {
            currentImage() {
                return this.images[this.currentIndex];
            }
        },
        methods: {
            toggleAutoChange() {
                this.isAutoChanging = !this.isAutoChanging;
                if (this.isAutoChanging) {
                    this.interval = setInterval(() => {
                        this.currentIndex = (this.currentIndex + 1) % this.images.length;
                    }, 1000);
                } else {
                    clearInterval(this.interval);
                }
            }
        },
        destroyed() {
            clearInterval(this.interval);
        }
    })
</script>
</html>

点击按钮随机切换图片

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue/vue.js"></script>
</head>
<body>
<div id="d1">
    <button @click="handleChange">点我换一张</button>
    <br>
    <img :src="img_change" alt="">
</div>
</body>
<script>
    var vm = new Vue({
        el: "#d1",
        data: {
            img_change: './img/1.jpg', // 图片是以数字命名的
        },
        methods: {
            handleChange: function () {
                this.img_change = `./img/${Math.ceil(Math.random() * this.list1.length)}.jpg`
 
            }
        }
    })
</script>
</html>

（2）v-bind 对于样式控制的增强 - 操作class

语法：:class=字符串/数组/对象

class可以绑定的类型有字符串、数组、对象

 var vm = new Vue({
    el: '#app',
    data: {
        // 1、绑定的可以是字符串形式
        str_class: 'background',
        // 2、绑定的也可以是数组形式(常用)
        list_class: ['background'],
        // 3、对象形式
        obj_class: {'background': true, 'fontsize': false},
    }，
    methods: {
    	handleChangeBack1: function () {
    		this.str_class = this.str_class + ' fontsize'
		},
    	handleChangeBack2: function () {
        	// this.list_class.push('fontsize')
        	this.list_class.pop('background')
 
    	},
        handleChangeBack3: function () {
            this.obj_class.fontSize = true
        },
}

（3）v-bind 对于样式控制的增强 - 操作style

 var vm = new Vue({
    el: '#app',
    data: {
        // 1、字符串形式
        str_style: 'background-color: yellow',
        // 2、数组形式
        list_style: [{'background': 'yellow'}],
        // 3、对象形式(更合适),一般用对象是用来修改里面的值会好一点
        // obj_style: {'background-color': 'pink', 'font-size': '50px'},
        // js的key可以去掉'',到那时中间有 - 的要转成驼峰
        obj_style: {backgroundColor: 'pink', fontSize: '50px'},
    }，
    methods: {
    	handleChangeBack4: function () {
    		this.str_style = this.str_style + ';font-size: 60px'
		},
    	handleChangeBack5: function () {
        	// this.list_style.push({'font-size': '60px'})
        	this.list_style.push({'margin': 'auto'})
    	},
        handleChangeBack6: function () {
            // 对象或者数组新增加的属性，vm监控不到就无法实现响应式，于是页面就没有发生变化，但是数据已经变了
            // this.obj_style ['font-size'] = '90px'
            // 但是对象中原来有的属性，修改是能监控得到的
            // this.obj_style ['background-color'] = 'yellowgreen'
            //这么写的话原来对象没有的值，就能监控到了--> 如果改了对象没有影响到页面--> vm没有监控到的话--> 就使用Vue.set
            Vue.set(this.obj_style, 'font-size', '90px')
        }
}

（4）完整示例

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue/vue.js"></script>
    <style>
        .div1 {
            width: 300px;
            height: 300px;
        }
        .div2 {
            background-color: pink;
        }
        .div3 {
            font-size: 60px;
        }
        .div4 {
            margin: auto;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>class属性</h1>
    <!--    <div :class="class_str">我</div>-->
    <!--    <div :class="class_list">我</div>-->
    <div :class="class_obj">我是div</div>
    <button @click="handleChange">点击变化</button>
 
    <h2>style属性</h2>
    <div :style="style_obj">我是div</div>
    <button @click="handleChange2">点击变化</button>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            //1 class 属性可以是字符串，数组，对象
            class_str: 'div1 div2',
            class_list: ['div1', 'div2'],  // 类用它多
            class_obj: {div1: true, div2: true, div3: true, div4: false},  //
 
            //2 style 属性可以是字符串，数组，对象
            style_str: 'background-color: green;height: 300px;width: 300px',
            style_list: [{'background-color': 'green'}, {height: '300px'}, {width: '300px'}],
            style_obj: {backgroundColor: 'green', height: '330px', width: '300px'} // 用的多
        }, methods: {
            handleChange() {
                // 1 字符串形式
                // this.class_str='div1 div2 div3 div4'
                
                // 2 数组形式，用的多，可以追加，可以删除--》样式就变化了
                // this.class_list.push('div3')  // 数组.push()-->返回值是 数组大小
                // this.class_list.pop()
 
                // 3 对象形式
                this.class_obj.div4 = true
            },
            handleChange2() {
                // 1 字符串形式
                // this.style_str = 'background-color: green;height: 300px;width: 300px;margin:auto'
                
                // 2 数组形式
                // this.style_list.push({'margin':'auto'})
 
                // 3 对象形式
                // 换背景色
                // this.style_obj['backgroundColor'] = 'pink'
                // 居中
                // this.style_obj['margin'] = 'auto' // 对象中原来没有，后来加进去，就不会触发响应式
                // 使用set解决
                Vue.set(this.style_obj,'margin','auto')
            }
        }
    })
</script>
</html>

（5）问题补充

如果当你改了对象，或数组，发现页面没有变化，而实际上值真正的被改了，这是为什么呢？
- 这是因为对象或者数组新增加的属性，vm监控不到就无法实现响应式，于是页面就没有发生变化，但是数据已经变了
解决方案：使用Vue.set
Vue.set(object, key, value)
- object: 要向其添加属性的目标对象。
- key: 要添加的属性的键。
- value: 要添加的属性的值

4、条件渲染

（1）v-if v-else-if v-else

v-if指令，控制元素是否加载。
v-esle-if/v-else指令不能单独使用，必须配合v-if一起使用。

示例：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>条件判断</h1>
    <h2>分数是：{{score}}</h2>
    <h3 v-if="score>=90&&score<=100">优秀</h3>
    <h3 v-else-if="score>=80&&score<90">良好</h3>
    <h3 v-else-if="score>=60&&score<80">及格</h3>
    <h3 v-else>不及格</h3>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            score: 80
        }
    })
</script>
</html>

（2）v-show

v-show 指令，控制元素的显示隐藏，元素存在并占据空间。
元素隐藏时，相当于给该元素添加了 CSS 样式：display:none;

 <div v-show="show">hello vue</div>
<button @click="show = !show">changeShow</button>

（3）v-if 和 v-show的区别

v-if和v-show有同样的效果，不同在于v-if是重新渲染，而v-show使用display属性来控制显示隐藏。频繁切换的话使用v-show减少渲染带来的开销。

5、列表渲染

（1）v-for

v-for 列表渲染指令，基于数据循环，多次渲染整个元素---> 数组、对象、数字。。。

语法：

 <div v-for="item in items" :key="item.id">
    {{ item.text }}
</div>

v-for="item in items"：这里 items 是一个数组或者对象，item 是数组中的每个元素，或者对象中的每个属性值，你可以用 item 来引用当前遍历的元素。
:key="item.id"：为了给 Vue 提供一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。

示例：

如果我们有一个存储了用户信息的数组：

 data: {
  users: [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
  ]
}

我们可以使用 v-for 来循环渲染每个用户的名字：

 <div v-for="user in users" :key="user.id">
  {{ user.name }}
</div>

这样就会生成如下 HTML 结构：

 <div>Alice</div>
<div>Bob</div>
<div>Charlie</div>

（2）v-for的key的解释

语法：key属性 = "唯一标识"

作用：给列表项添加的唯一标识，便于Vue进行列表项的正确排序复用。vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，提高数据的刷新速度（虚拟DOM用了diff算法）。[想深入了解的可以点击参考此文](vue 虚拟 DOM_vdom树-CSDN博客)

如果你不给 v-for 渲染的每个项添加 key，Vue 会发出警告，但并不会导致程序崩溃。没有为 v-for 添加 key 会导致 Vue 难以跟踪每个项的变化，可能会影响列表的性能和导致一些意外行为，特别是在涉及列表项的更新、删除和重新排序时。

注意点：

key的值只能是字符串或者数字类型
key的值必须具有唯一性
推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）

（3）v-for可以循环的变量

在 Vue.js 中，v-for 指令可以用于循环遍历多种数据类型，包括：

数组：你可以直接在 v-for 中使用数组，循环渲染数组中的每一项。

 <ul>
  <li v-for="item in names" :key="item.id">{{ item.name }}</li>
</ul>

 data: {
    names: ['张三', '彭于晏', 'quan', 'xiao'],
},

对象：你也可以在 v-for 中使用对象，循环渲染对象的属性值。

 <ul>
  <li v-for="(value, key) in object" :key="key">{{ key }}: {{ value }}</li>
</ul>

 data: {
    userinfo: {name: 'xiao', age: 18, hobby: 'play'},
},

数字：你可以使用整数来指定循环的次数。
```
 <ul>
  <li v-for="n in 10" :key="n">{{ n }}</li>
</ul>
```

字符串：你可以在 v-for 中使用字符串。

 <ul>
    <li v-for="value in s" :key="value">{{value}}</li>
</ul>

 data: {
    s: 'xiao is very handsome'
},

6、数据双向绑定

（1）v-model

作用：针对 input 标签，在页面中输入值，js中有对应变量，双向数据绑定，可以快速获取或设置表单元素内容

语法：v-model="变量"

数据单向绑定：变量变了页面也会变；但是页面变，变量不会变
数据双向绑定：变量变化，页面会自动更新；视图变化，数据也会自动更新

示例:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>数据单向绑定</h1>
    <input type="text" :value="name">
    <h1>数据双向绑定</h1>
    <input type="text" v-model="name2">
 
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'xiao',
            name2:'sss'
        }
    })
</script>
</html>

（2）v-model 应用于其他表单元素

在 Vue.js 中，v-model 指令通常用于在表单元素上创建双向数据绑定。这意味着当表单元素的值发生变化时，与之关联的 Vue 实例的数据也会相应地更新，反之亦然。虽然 v-model 最常用于 <input> 元素，但它也可以应用于其他表单元素，如 <select> 和 <textarea>。

例如，你可以在 <select> 元素上使用 v-model 来创建双向数据绑定，示例如下：

 <select v-model="selectedOption">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

在上面的示例中，selectedOption 是 Vue 实例中的一个数据属性，它将与 <select> 元素的选定选项进行双向绑定。当用户选择不同的选项时，selectedOption 的值将更新，反之亦然。

同样地，你也可以在 <textarea> 元素上使用 v-model 来实现双向数据绑定，例如：

 <textarea v-model="message" placeholder="Enter your message"></textarea>

在这个示例中，message 是 Vue 实例中的一个数据属性，它将与 <textarea> 元素的内容进行双向绑定。当用户在文本区域中输入内容时，message 的值将相应地更新，反之亦然。

总之，v-model 可以应用于不同类型的表单元素，以实现双向数据绑定，使得数据的更新能够与用户界面的交互实时同步。

三、事件处理

1、input 标签的事件处理

事件	说明
input	当输入框进行输入的时候触发的事件
change	当元素的值发生改变时触发的事件
blur	当输入框失去焦点的时候触发的事件
focus	当输入框获取焦点的时候触发的事件

change 和 blur 最本质的区别：

如果输入框为空，失去焦点后，change不会触发，但是blur会触发

示例：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>input事件</h1>
    <input type="text" v-model="name1" @input="handleInput">-->{{name1}}
    <h1>change事件</h1>
    <input type="text" v-model="name2" @change="handleChange">-->{{name2}}
    <h1>blur事件</h1>
    <input type="text" v-model="name3" @blur="handleBlur">-->{{name3}}
    <h1>focus事件</h1>
    <input type="text" v-model="name4" @focus="handleFocus">-->{{name4}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name1:'',
            name2:'',
            name3:'',
            name4:'asdfasd',
        },
        methods:{
            handleInput(event){
                console.log(event.data)
            },
            handleChange(){
                console.log('handleChange')
            },
            handleBlur(){
                console.log('handleBlur')
            },
            handleFocus(){
                console.log('Focus')
                this.name4=''
            }
        }
    })
</script>
</html>

2、过滤案例

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./Vue/vue.js"></script>
 
</head>
<body>
<div id="app">
    <h2>过滤案例</h2>
    <input type="text" v-model="search" @input="handleSearch">
    <ul>
        <li v-for="item in newDataList">{{item}}</li>
    </ul>
 
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            search: '',
            dataList: ['a', 'ac', 'bdsfc', 'ffaw', 'casdad', 'atnefk', 'fwead', 'fewfe'],
            newDataList: ['a', 'ac', 'bdsfc', 'ffaw', 'casdad', 'atnefk', 'fwead', 'fewfe']
        },
        methods: {
            // 1、笨办法
            handleSearch(event) {
                console.log(this)  // 这个this是vue实例
                var _this = this
                // 过滤dataList中每一个是否包含用户输入的 this.search
                this.newDataList = this.dataList.filter(function (item) {
                    console.log(_this)  // this是window的对象,要换成_this
                    return item.indexOf(_this.search) >= 0
                })
            },
            // // 2、箭头函数的写法  把function去掉，在形参括号和函数体大括号之间加个 =>
            //  handleSearch(event) {
            //     this.newDataList = this.dataList.filter(item => item.indexOf(this.search) >= 0)
            // },
        }
    })
</script>
</html>

在我们构造逻辑时存在两个问题

函数里面的this指向的是window对象---> 在外部定义一个_this=this就可以了

改数据是在dataList上改的，回退搜索的关键字时就无法显示了---> 再写一个newDataList，在这上操作就可以了

3、补充数组的过滤和判断子字符串是否在字符串中

 // 补充1 数组的过滤
var dataList = ['a', 'ac', 'bdsfc', 'ffaw', 'casdad', 'atnefk', 'fwead', 'fewfe']
// 1、过滤掉所有
var newDataList = dataList.filter(function (item){
    return true
 
// 2、只保留长度大于2的
var newDataList = dataList.filter(function (item){
    if (item.length > 2){
        return true
    }else{
        return false
    }
})
console.log(newDataList)
 
// 3、只保留包含at的
var search = 'at'
var newDataList = dataList.filter(function (item){
   return item.indexOf(search) >= 0
})
console.log(newDataList)
 
// 补充2 判断子字符串是否在字符串中
var search = 'at'
var s = 'attr'
var res = s.indexOf(search)  // 字符串在字符串的哪个位置
console.log(res)

四、箭头函数

箭头函数（Arrow Functions）是 ES6（ECMAScript 2015）引入的一种新的函数定义方式，它提供了一种更简洁的语法来定义函数。与传统的函数定义方式相比，箭头函数具有以下特点和优势：

简洁的语法：箭头函数可以让你用更短的代码来定义函数，尤其适合于简单的函数表达式。
更简洁的语法：当函数只有一个参数时，你可以省略参数周围的括号。当函数体只有一条语句时，你可以省略花括号和 return 关键字。
绑定 this：箭头函数的 this 值在函数创建时就已经确定，并且在整个函数生命周期内保持不变，它不会被函数的调用方式所影响。这解决了传统函数中 this 值难以理解和控制的问题，特别适合于在回调函数中使用。
不绑定 arguments 对象：箭头函数不绑定 arguments 对象，而是继承父级函数的 arguments 对象。如果你需要访问函数的参数，可以使用 rest 参数或者通过 ...args 来获取所有参数。
不能作为构造函数：箭头函数不能用作构造函数，也就是不能通过 new 关键字来调用，因为它没有自己的 this 值。
没有 arguments 对象：箭头函数没有自己的 arguments 对象，如果需要访问函数的参数，可以使用 rest 参数或者通过 ...args 来获取所有参数。

下面是一些箭头函数的示例：

 // 正常的匿名函数
var f = function (name) {
    console.log(name)
}
f('xiao')
 
// 箭头函数写法 把function去掉，在形参括号和函数体大括号之间加个 =>
// 1、无参数无返回值
var f = () => {
    console.log('fff')
}
f()
 
// 2、有一个参数无返回值
var f = (name) =>{
    console.log(name)
}
f('xiao')
// 如果只有一个参数可以简写成  但是如果有多个那么就必须加在括号里
var f = name =>{
    console.log(name)
}
f('xiao')
 
// 3、有多个参数无返回值（箭头函数的返回值是对象时，需要用括号包裹）
var f2 = (name,age) => {
    console.log(name,age)
}
f2()
 
// 4、有一个参数有一个返回值
var f = name =>{
    return name+'nb'
}
var res = f('xiao')
console.log(res)
// 如果没有其他代码可以简写成
var f = name => name + 'nnb'
var res = f('xiao')
console.log(res)

重点：箭头函数内部，没有自己this，箭头函数内部用this ==> 就是上一个作用域的this

五、指令的修饰符

1、事件修饰符

事件修饰符	释义
.stop	只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡），写在子标签上
.self	只处理自己的事件，子控件冒泡的事件不处理，写在父标签上
.prevent	阻止a链接的跳转
.once	事件只会触发一次（适用于抽奖页面）

使用修饰符时，使用顺序很重要；相应的代码会以同样的顺序产生

用 v-on:click.prevent.self 会阻止所有的点击

而 v-on:click.self.prevent 只会阻止对元素自身的点击

示例：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./Vue/vue.js"></script>
 
</head>
<body>
<div id="app">
    <h1>事件修饰符</h1>
    <h2>.once:只能点击一次</h2>
    <button @click.once="handleClick">点我有惊喜</button>
 
    <h2>.prevent:阻止a的跳转</h2>
    <a href="https://www.baidu.com" @click.prevent="handleA">点我看美女</a>
 
    <h2>.stop:只处理自己的事件，父控件冒泡的事件不处理(阻止事件冒泡)</h2>
    <h3>写在子标签上</h3>
    <ul @click="handleUl">
        <li @click.stop="handleLi">li01</li>
        <li>li02</li>
    </ul>
    <h2>.self:只处理自己的事件，子控件冒泡的事件不处理(阻止事件冒泡)</h2>
    <h3>写在父标签上</h3>
    <ul @click.self="handleUl">
        <li @click="handleLi">li01</li>
        <li>li02</li>
    </ul>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            handleClick() {
                alert('我是弹窗')
            },
            handleA() {
                console.log('点过了')
                location.href = 'https://www.cnblogs.com'
            },
            handleUl() {
                console.log('我是ul')
            },
            handleLi() {
                console.log('我是li')
            },
        }
    })
</script>
</html>

2、按键修饰符

按键修饰符是 Vue.js 中用于监听键盘事件的一种方式。它们可以让你在处理键盘事件时更加灵活和方便。是一些常用的按键修饰符及其作用：

.enter：监听 Enter 键。
.tab：监听 Tab 键。
.delete 或 .backspace：监听删除键。
.esc：监听 Esc 键。
.space：监听空格键。
.up：监听上箭头键。
.down：监听下箭头键。
.left：监听左箭头键。
.right：监听右箭头键。
.ctrl：监听 Ctrl 键。
.alt：监听 Alt 键。
.shift：监听 Shift 键。

这些按键修饰符可以与事件监听指令（如 @keydown、@keyup、@keypress）一起使用，以便在特定的键被按下时触发相应的事件处理函数。例如：

 <input @keydown.enter="submitForm">
<input @keyup.tab="focusNextInput">
<input @keypress.space="playPauseVideo">
<input @keyup.13="focusNextInput"> 
# @keyup.Keycode也能实现

六、表单控制

1、checkbox选中

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>checkbox</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="app">
    <h3>用户登录示例</h3>
    <p>用户名：<input type="text" v-model="username"></p>
    <p>密码：<input type="password" v-model="pwd"></p>
    <p>是否记住密码：<input type="checkbox" v-model="rem"></p>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            pwd: '',
            rem: '',  // 只做选中或者不选中判断，使用布尔
        },
    })
</script>
</html>

2、radio单选

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单选</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>性别：
        <input type="radio" v-model="gender" value="男">男
        <input type="radio" v-model="gender" value="女">女
        <input type="radio" v-model="gender" value="保密">保密
    </p>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
           gender: ''
        },
    })
</script>
</html>

3、checkbox多选

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多选</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="app">
   <p>爱好：
        <input type="checkbox" v-model="hobbys" value="足球">足球
        <input type="checkbox" v-model="hobbys" value="篮球">篮球
        <input type="checkbox" v-model="hobbys" value="乒乓球">乒乓球
   </p>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            hobbys: [],  // 放多个元素需要使用数组
        },
    })
</script>
</html>

4、购物车案例 - 结算

选中商品并自动计算总价数量 * 价格

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./Vue/vue.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1 class="text-center">购物车</h1>
 
            <table class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th scope="col">商品id</th>
                    <th scope="col">商品名字</th>
                    <th scope="col">商品数量</th>
                    <th scope="col">商品价格</th>
                    <th scope="col">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="good in goodsList">
                    <td>{{good.id}}</td>
                    <td>{{good.name}}</td>
                    <td>{{good.count}}</td>
                    <td>{{good.price}}</td>
                    <td><input type="checkbox" v-model="checkGoodList" :value="good"></td>
                </tr>
                </tbody>
            </table>
            <hr>
            <h3>选中的商品：{{checkGoodList}}</h3>
<!--            插值插入的方法的返回值-->
            <h3>总价格：{{getPrice()}}</h3>
        </div>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            goodsList: [
                {id: 1, name: '键盘', count: 2, price: 133},
                {id: 2, name: '鼠标', count: 10, price: 12},
                {id: 3, name: '背包', count: 34, price: 34},
                {id: 4, name: '冲锋衣', count: 3, price: 67},
                {id: 5, name: '显示器', count: 9, price: 89}
            ],
            checkGoodList: []
        },
        methods: {
            getPrice() {
                // 计算选中的总价格
                var total = 0
                // 循环选中的，计算总价格this.checkGoodList
                for (var item of this.checkGoodList) {
                    console.log(item)
                    total += item.price * item.count
                }
                return total
            }
        }
    })
</script>
</html>

5、购物车案例 - 全选/全不选

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./Vue/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1 class="text-center">购物车</h1>
 
            <table class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th scope="col">商品id</th>
                    <th scope="col">商品名字</th>
                    <th scope="col">商品数量</th>
                    <th scope="col">商品价格</th>
                    <th scope="col">全选/全不选 <input type="checkbox" v-model="checkAll" @change="handleCheckAll"></th>
                </tr>
                </thead>
 
                <tbody>
                <tr v-for="good in goodsList">
                    <td>{{good.id}}</td>
                    <td>{{good.name}}</td>
                    <td>{{good.count}}</td>
                    <td>{{good.price}}</td>
                    <td><input type="checkbox" v-model="checkGoodList" :value="good" @change="handleCheckOne"></td>
                </tr>
                </tbody>
            </table>
            <hr>
            <h3>选中的商品：{{checkGoodList}}</h3>
            <h3>是否全选：{{checkAll}}</h3>
            <!--            插值插入的方法的返回值-->
            <h3>总价格：{{getPrice()}}</h3>
        </div>
    </div>
 
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            goodsList: [
                {id: 1, name: '键盘', count: 2, price: 133},
                {id: 2, name: '鼠标', count: 10, price: 12},
                {id: 3, name: '背包', count: 34, price: 34},
                {id: 4, name: '冲锋衣', count: 3, price: 67},
                {id: 5, name: '显示器', count: 9, price: 89}
            ],
            checkGoodList: [],
            checkAll: false,
        },
        methods: {
            getPrice() {
                // 计算选中的总价格
                var total = 0
                // 循环选中的，计算总价格this.checkGoodList
                for (var item of this.checkGoodList) {
                    console.log(item)
                    total += item.price * item.count
                }
                return total
            },
            handleCheckAll() {
                if (this.checkAll) {
                    // 全选了
                    this.checkGoodList = this.goodsList
                } else {
                    // 全不选
                    this.checkGoodList = []
                }
            },
            handleCheckOne() {
                // 如果checkGoodList等于商品总长度，说明权限了，让checkAll等于true
                if (this.checkGoodList.length == this.goodsList.length) {
                    this.checkAll = true
                } else {
                    // 只要长度不等，都是false
                    this.checkAll = false
                }
            },
        }
    })
</script>
</html>

6、购物车案例 - 数量加减

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./Vue/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1 class="text-center">购物车</h1>
            <table class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th scope="col">商品id</th>
                    <th scope="col">商品名字</th>
                    <th scope="col">商品数量</th>
                    <th scope="col">商品价格</th>
                    <th scope="col">全选/全不选 <input type="checkbox" v-model="checkAll" @change="handleCheckAll"></th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="good in goodsList">
                    <td>{{good.id}}</td>
                    <td>{{good.name}}</td>
                    <td><span class="btn" @click="handleAdd(good)">+</span>
                        <input type="text" v-model="good.count">
                        <span class="btn" @click="handleMin(good)">-</span></td>
                    <td>{{good.price}}</td>
                    <td><input type="checkbox" v-model="checkGoodList" :value="good" @change="handleCheckOne"></td>
                </tr>
                </tbody>
            </table>
            <hr>
            <h3>选中的商品：{{checkGoodList}}</h3>
            <h3>是否全选：{{checkAll}}</h3>
            <!--            插值插入的方法的返回值-->
            <h3>总价格：{{getPrice()}}</h3>
        </div>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            goodsList: [
                {id: 1, name: '键盘', count: 2, price: 133},
                {id: 2, name: '鼠标', count: 10, price: 12},
                {id: 3, name: '背包', count: 34, price: 34},
                {id: 4, name: '冲锋衣', count: 3, price: 67},
                {id: 5, name: '显示器', count: 9, price: 89}
            ],
            checkGoodList: [],
            checkAll: false,
        },
        methods: {
            getPrice() {
                // 计算选中的总价格
                var total = 0
                // 循环选中的，计算总价格this.checkGoodList
                for (var item of this.checkGoodList) {
                    console.log(item)
                    total += item.price * item.count
                }
                return total
            },
            handleCheckAll() {
                if (this.checkAll) {
                    // 全选了
                    this.checkGoodList = this.goodsList
                } else {
                    // 全不选
                    this.checkGoodList = []
                }
            },
            handleCheckOne() {
                // 如果checkGoodList等于商品总长度，说明权限了，让checkAll等于true
                if (this.checkGoodList.length == this.goodsList.length) {
                    this.checkAll = true
                } else {
                    // 只要长度不等，都是false
                    this.checkAll = false
                }
            },
            handleAdd(good) {   // 传的是对象  不是数字或者id
                good.count++
            },
            handleMin(good) {
                if (good.count > 1) {
                    good.count--
                } else {
                    alert('不能再减了')
                }
            },
        }
    })
</script>
</html>

七、v-model进阶用法

属性	说明
lazy	等待input框的数据绑定失去焦点之后再变化
number	数字开头，只保留数字，后面的字母不保留；字母开头，都保留
trim	去除首尾的空格

示例：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model 之 lazy、number、trim</title>
    <script src="./Vue/vue.js"></script>
</head>
<body>
<div id="box">
    <input type="text" v-model="myText1" placeholder="normal"> {{myText1}}
    <br>
    <input type="text" v-model.lazy="myText2" placeholder="lazy"> {{myText2}}
    <br>
    <input type="text" v-model.number="myText3" placeholder="number"> {{myText3}}
    <br>
    <input type="text" v-model.trim="myText4" placeholder="trim"> {{myText4}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            myText1: '',
            myText2: '',
            myText3: '',
            myText4: '',
        },
    })
</script>
</html>

八、前后端交互的三种方式

思维逻辑：前后端要打通----> 从前端发送ajax---> 核心：使用js发送http请求，接收返回

1、使用 jQuery 的 Ajax 方法

jQuery 提供了方便的 $.ajax() 方法，封装了原生的 XMLHttpRequest 对象，简化了开发者的操作流程。
它支持跨浏览器兼容性，并提供了丰富的功能选项，如设置请求类型、请求头、处理错误等。
然而，由于现代前端框架（如 Vue.js）一般不推荐使用 jQuery，因此在与这些框架结合使用时可能不太适合。

后端

 # # flask框架构建后端入口
from flask import Flask, jsonify
 
app = Flask(__name__)
 
@app.route('/userinfo', methods=['GET'])
def userinfo():
    res = jsonify({'username': 'xiao', 'age': 13})
    res.headers = {'Access-Control-Allow-Origin':'*'}
    return res
 
if __name__ == '__main__':
    app.run()

前端

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./Vue/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
    <h1>与后端交互</h1>
    <button @click="handleLoad">加载用户信息</button>
    <p>用户名：{{username}}</p>
    <p>年龄：{{age}}</p>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            age: '',
        },
        methods: {
            handleLoad() {
                // 后端发送请求，拿到数据，赋值给username和age 页面就有了
                // 1.发送请求方式1：使用jq的ajax
                $.ajax({
                    url: 'http://127.0.0.1:5000/userinfo',
                    method: 'get',
                    success: data => {
                        // 会导致CORS policy 跨域问题---> 解决方案：在后端响应头里加入：Access-Control-Allow-Origin即可
                        // console.log(data)
                        data = JSON.stringify(data)
                        this.username = data.username
                        this.age = data.age
                    }
                })
            }
        }
    })
</script>
</html>

2、使用原生js的fetch发送ajax请求

这是一种传统的方式，通过使用 JavaScript 的 XMLHttpRequest 对象来发送和接收数据。
开发者需要手动处理请求和响应的各个阶段，包括请求参数的拼装、请求头的设置、监听响应事件等。
尽管这种方法具有灵活性，但是编写和维护复杂度较高，需要考虑不同浏览器的兼容性问题。

 <script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            age: '',
        },
        methods: {
            handleLoad() {
                // 后端发送请求，拿到数据，赋值给username和age 页面就有了
                // 1.发送请求方式2：使用原生js的fetch发送ajax请求
                fetch('http://127.0.0.1:5000/userinfo').then(response => {
                        return response.json();
                    }).then(data => {
                    this.username = data.username
                    this.age = data.age
                });
            }
        }
    })
</script>

3、使用第三方库（如 Axios 或 Fetch）

第三方库如 Axios 和 Fetch 提供更简洁、易用且功能强大的方式来发送 Ajax 请求。它们以 Promise 或 async/await 为基础，使得异步请求代码更加清晰和易于维护。
Axios 是一个流行的第三方库，广泛应用于前端项目中。同时，原生的 Fetch API 也是一种现代的标准方式，但需要注意兼容性问题
axios官网：http://www.axios-js.com/

 <script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            age: '',
        },
        methods: {
            handleLoad() {
                // 后端发送请求，拿到数据，赋值给username和age 页面就有了
                // 1.发送请求方式3：使用axios发送请求
                axios.get('http://127.0.0.1:5000/userinfo')
                    .then(res => {
                        console.log(res.data) //真正的响应体数据是在res.data中
                        this.username = res.data.username
                        this.age = res.data.age
                    })
                    .catch(error => {
                        console.log(error)
                    });
            }
        }
    })
</script>

九、补充

1、JS中的for循环操作

（1）基于索引的循环--> 最基本的

 for (var i = 0; i < 10; i++){
    console.log(i)
}

（2）in 循环

 var names = ['xiao','quan','zha']  // 数组
for (items in names)  // 循环索引
    console.log(items)
console.log(names[items])
}
 
var userinfo = {'name':'xiao','age':13}  // 对象
for (items in userinfo){  // 循环的是key
    console.log(userinfo[items])
}
 
var s = 'xiao'  // 字符串
for(items in s){    // 循环的是索引
    console.log(s[items])
}

（3）of循环

 var names = ['xiao','quan','zha']  // 数组
for (items of names)  // 循环 具体值
    console.log(items)
}
 
var s = 'xiao'  // 字符串
for (items of s) {    // 循环具体值
    console.log(items)
}
 
var userinfo = {'name':'xiao','age':13}  // of不能循环对象
for (items of userinfo){
    console.log(items)
}
 
for (items of 10) {    // of不能循环数字
    console.log(items)
}

（4）数组的forEach方法，实现循环

  var names = ['xiao','quan','zha']
    names.forEach(function (value,index){
        console.log(index)
        console.log(value)
    })

（5）jquery的each循环

 var names = ['xiao','quan','zha'] // 数组
$.each(names,function (value,index){
    console.log(value)
    console.log(index)
})
 
var userinfo = {'name':'xiao','age':13}  // 对象
$.each(userinfo,function (key,value){
    console.log(key)
    console.log(value)
})
 
var  s = 'xiao'   // 字符串不行
$.each(s,function (index,value){
    console.log(index)
    console.log(value)
})

2、vm对象介绍

 <body>
<div id="app">
    <!--插值语法-->
    <h1>{{name}}</h1>
    <br>
    <h2> 方法中的 this 对象 </h2>
    <button @click="handleClick1">点我</button>
</div>
</body>
 
<script>
    <!--  将创建的Vue对象封装到 vm 变量里面。控制台全局可以通过 vm.name 取值  -->
    // 写在 data 或 methods 中的属性或方法，可以从 vm 中直接 通过 vm.属性取值
    // methods的函数中，如果想使用data或methods中的属性，直接this.名字  就可以了
    var vm = new Vue({
        el: "#app",
        data: {
            name: "dream",
        },
        methods: {
            handleClick1() {
                console.log(this) // this 就是当前的 实例的 vm 对象
                // xr {_uid: 0, _isVue: true, __v_skip: true, _scope: t, $options: {…}, …}
            }
        },
    })
</script>

vm是一个Vue实例对象的变量名。

Vue实例对象是Vue.js框架中最核心的概念之一，它扮演着连接数据和视图的桥梁作用。

数据绑定：

通过将vm对象传递给模板语法，可以实现数据的动态渲染。

例如，在模板中使用{{name}}的插值语法，name会被vm对象中的data属性中的name所替换，从而实现了name数据的动态展示。

方法调用：

在vm对象的methods属性中定义的方法，可以通过模板中的事件绑定（如@click="handleClick1"）来进行调用。

在这个例子中，当点击按钮时，会触发handleClick1方法，输出this对象。

在方法中，this指向当前的Vue实例对象vm，通过this可以访问到vm实例中的属性和方法。

总结起来，vm对象是Vue实例对象的引用，通过这个对象可以访问和操作Vue实例的数据和方法。

它的作用是管理数据和行为，实现数据的双向绑定，以及处理用户交互和响应。

在模板中可以通过vm对象来访问数据，并触发相应的方法来实现业务逻辑的处理。

十、小练习

要求：点击按钮，加载最新电影
前端：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <h1>点击按钮，获取数据，显示</h1>
    <button @click="handleLoad">获取电影信息</button>
    <div v-for="item in filmList">
        <p>电影名：{{item.name}}</p>
        <p>介绍：{{item.synopsis}}</p>
        <p>图片： <img :src="item.poster" alt="" height="300px" width="150px"></p>
        <hr>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            filmList: [],
        },
        methods: {
            handleLoad() {
                axios.get('http://127.0.0.1:5000/films')
                    .then(res => {
                        this.filmList=res.data.result
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        }
    })
</script>
</html>

后端：

 # pip install flask
from flask import Flask, jsonify
import json
 
app = Flask(__name__)
 
@app.route('/films')
def films():
    with open('./fiml.json', 'r', encoding='utf-8') as f:
        res_dict = json.load(f)
    res = jsonify(res_dict)
    res.headers['Access-Control-Allow-Origin'] = '*'
    return res
 
if __name__ == '__main__':
    app.run()

posted @ 2024-04-30 22:07 Xiao0101 阅读(59) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue入门到关门之Vue项目工程化

· Vue入门到关门之Vue介绍与使用

· Vue之指令

· 【Vue】Vue常见的6种指令

· Vue_列表渲染 -v-for指令，，显示购物车案例，，v-for可以循环的类型，，js中循环方式，，其他，，）事件处理，，基本使用，，过滤案例，，数组的过滤 filter，，事件修饰符

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构

公告

一个不像技术博客的博客

-------------------------------

时钟canvas

昵称： Xiao0101
园龄： 1年3个月
粉丝： 6
关注： 9

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

阅读排行榜

评论排行榜

1. 爬虫之requests模块请求方式(1)

	<div id="app">
	<div>{{innerHtml}}</div>
	<div v-text="innerHtml">123</div>
	<div v-html="innerHtml">123</div>
	</div>
	<script>
	new Vue({
	el:"#app",
	data:{
	innerHtml:'<button>一个按钮</button>'
	}
	})
	</script>

	<body>
	<div id="app">
	<!-- 完整写法 v-on: -->
	// v-on:事件名 = "methods中的函数名"
	<div v-on:click="handleClick">点击事件</div>
	// v-on:事件名 = "内联语句"
	<button v-on:click="count++">按钮</button>
	<!-- 缩写 @ -->
	<div @click="handleClick">点击事件</div>
	<button @click="count++">按钮</button>
	</div>
	</body>
	<script>
	new Vue({
	el:"#app",
	data:{
	},
	methods:{
	// 定义一个点击函数
	handleClick:function(){
	console.dir('click event')
	}
	},
	})
	</script>

	var hobby=['抽烟','烫头']
	var obj={
	'name':'lqz', // 正常写法
	age:19, // 1、key之可以不用加引号
	hobby, // 2、数组可以直接写名字，但必须在外面定义好
	showName:function() { // 3、定义函数
	console.log(this.name)
	},
	showName() { // 4、函数简写
	console.log(this.name)
	}
	}

	console.log(obj)
	obj.showName() // 外部直接调用内部函数

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="./vue/vue.js"></script>
	<style>
	img {
	height: 300px;
	width: 200px;
	}
	</style>
	</head>
	<body>
	<div id="app">
	<h1>事件指令--函数有参数</h1>
	<button @click="handleFunc1">不传参数-函数有参数</button>
	<br>
	<button @click="handleFunc1(isShow)">传参数-函数有参数</button>
	<br>
	<button @click="handleFunc1($event)">传参数-函数有参数-把事件对象传入</button>
	<br>
	<button @click="handleFunc2">多个参数-少传不加括号</button>
	<br>
	<button @click="handleFunc2()">多个参数-少传-加括号event不会自动传入</button>
	<br>
	<button @click="handleFunc2(1,2,3,4,5,6,)">多个参数-多传</button>
	<br>
	<button @click="handleFunc2(1,$event)">多个参数-event作为第二个参数</button>
	</div>
	</body>
	<script>
	var vm = new Vue({
	el: '#app',
	data: {
	isShow:true
	},
	methods: {
	handleFunc1(event){
	//1 如果在事件中触发函数，没有传参数，会自动把事件对象传入
	console.log(event)
	},
	handleFunc2(a,b,c){
	console.log(a)
	console.log(b)
	console.log(c)
	}
	}
	})
	</script>
	</html>

	<div v-show="show">hello vue</div>
	<button @click="show = !show">changeShow</button>

	<div v-for="item in items" :key="item.id">
	{{ item.text }}
	</div>

	data: {
	users: [
	{ id: 1, name: 'Alice' },
	{ id: 2, name: 'Bob' },
	{ id: 3, name: 'Charlie' }
	]
	}

	<div v-for="user in users" :key="user.id">
	{{ user.name }}
	</div>

	<ul>
	<li v-for="item in names" :key="item.id">{{ item.name }}</li>
	</ul>

	<ul>
	<li v-for="(value, key) in object" :key="key">{{ key }}: {{ value }}</li>
	</ul>

	<select v-model="selectedOption">
	<option value="option1">Option 1</option>
	<option value="option2">Option 2</option>
	<option value="option3">Option 3</option>
	</select>

	// 补充1 数组的过滤
	var dataList = ['a', 'ac', 'bdsfc', 'ffaw', 'casdad', 'atnefk', 'fwead', 'fewfe']
	// 1、过滤掉所有
	var newDataList = dataList.filter(function (item){
	return true

	// 2、只保留长度大于2的
	var newDataList = dataList.filter(function (item){
	if (item.length > 2){
	return true
	}else{
	return false
	}
	})
	console.log(newDataList)

	// 3、只保留包含at的
	var search = 'at'
	var newDataList = dataList.filter(function (item){
	return item.indexOf(search) >= 0
	})
	console.log(newDataList)

	// 补充2 判断子字符串是否在字符串中
	var search = 'at'
	var s = 'attr'
	var res = s.indexOf(search) // 字符串在字符串的哪个位置
	console.log(res)

	// 正常的匿名函数
	var f = function (name) {
	console.log(name)
	}
	f('xiao')

	// 箭头函数写法把function去掉，在形参括号和函数体大括号之间加个 =>
	// 1、无参数无返回值
	var f = () => {
	console.log('fff')
	}
	f()

	// 2、有一个参数无返回值
	var f = (name) =>{
	console.log(name)
	}
	f('xiao')
	// 如果只有一个参数可以简写成但是如果有多个那么就必须加在括号里
	var f = name =>{
	console.log(name)
	}
	f('xiao')

	// 3、有多个参数无返回值（箭头函数的返回值是对象时，需要用括号包裹）
	var f2 = (name,age) => {
	console.log(name,age)
	}
	f2()

	// 4、有一个参数有一个返回值
	var f = name =>{
	return name+'nb'
	}
	var res = f('xiao')
	console.log(res)
	// 如果没有其他代码可以简写成
	var f = name => name + 'nnb'
	var res = f('xiao')
	console.log(res)

	<input @keydown.enter="submitForm">
	<input @keyup.tab="focusNextInput">
	<input @keypress.space="playPauseVideo">
	<input @keyup.13="focusNextInput">
	# @keyup.Keycode也能实现

	# # flask框架构建后端入口
	from flask import Flask, jsonify

	app = Flask(__name__)

	@app.route('/userinfo', methods=['GET'])
	def userinfo():
	res = jsonify({'username': 'xiao', 'age': 13})
	res.headers = {'Access-Control-Allow-Origin':'*'}
	return res

	if __name__ == '__main__':
	app.run()

	var names = ['xiao','quan','zha'] // 数组
	for (items in names) // 循环索引
	console.log(items)
	console.log(names[items])
	}

	var userinfo = {'name':'xiao','age':13} // 对象
	for (items in userinfo){ // 循环的是key
	console.log(userinfo[items])
	}

	var s = 'xiao' // 字符串
	for(items in s){ // 循环的是索引
	console.log(s[items])
	}

	var names = ['xiao','quan','zha'] // 数组
	for (items of names) // 循环具体值
	console.log(items)
	}

	var s = 'xiao' // 字符串
	for (items of s) { // 循环具体值
	console.log(items)
	}

	var userinfo = {'name':'xiao','age':13} // of不能循环对象
	for (items of userinfo){
	console.log(items)
	}

	for (items of 10) { // of不能循环数字
	console.log(items)
	}

	var names = ['xiao','quan','zha']
	names.forEach(function (value,index){
	console.log(index)
	console.log(value)
	})

	var names = ['xiao','quan','zha'] // 数组
	$.each(names,function (value,index){
	console.log(value)
	console.log(index)
	})

	var userinfo = {'name':'xiao','age':13} // 对象
	$.each(userinfo,function (key,value){
	console.log(key)
	console.log(value)
	})

	var s = 'xiao' // 字符串不行
	$.each(s,function (index,value){
	console.log(index)
	console.log(value)
	})

	<body>
	<div id="app">
	<!--插值语法-->
	<h1>{{name}}</h1>
	<br>
	<h2> 方法中的 this 对象 </h2>
	<button @click="handleClick1">点我</button>
	</div>
	</body>

	<script>
	<!-- 将创建的Vue对象封装到 vm 变量里面。控制台全局可以通过 vm.name 取值 -->
	// 写在 data 或 methods 中的属性或方法，可以从 vm 中直接通过 vm.属性取值
	// methods的函数中，如果想使用data或methods中的属性，直接this.名字就可以了
	var vm = new Vue({
	el: "#app",
	data: {
	name: "dream",
	},
	methods: {
	handleClick1() {
	console.log(this) // this 就是当前的实例的 vm 对象
	// xr {_uid: 0, _isVue: true, __v_skip: true, _scope: t, $options: {…}, …}
	}
	},
	})
	</script>

xiao

Vue入门到关门之指令系统

一、引入

二、指令

1、文本指令

（1）v-text

（2）v-html

（3）示例

2、事件指令

（1）v-on

（2）es6的对象写法

（3）v-on调用传参

3、属性指令

（1）v-bind

（2）v-bind 对于样式控制的增强 - 操作class

（3）v-bind 对于样式控制的增强 - 操作style

（4）完整示例

（5）问题补充

4、条件渲染

（1）v-if v-else-if v-else

（2）v-show

（3）v-if 和 v-show的区别

5、列表渲染

（1）v-for

（2）v-for的key的解释

（3）v-for可以循环的变量

6、数据双向绑定

（1）v-model

（2）v-model 应用于其他表单元素

三、事件处理

1、input 标签的事件处理

2、过滤案例

3、补充 数组的过滤和判断子字符串是否在字符串中

四、箭头函数

五、指令的修饰符

1、事件修饰符

2、按键修饰符

六、表单控制

1、checkbox选中

2、radio单选

3、checkbox多选

4、购物车案例 - 结算

5、购物车案例 - 全选/全不选

6、购物车案例 - 数量加减

七、v-model进阶用法

八、前后端交互的三种方式

1、使用 jQuery 的 Ajax 方法

2、使用原生js的fetch发送ajax请求

3、使用第三方库（如 Axios 或 Fetch）

九、补充

1、JS中的for循环操作

（1）基于索引的循环--> 最基本的

（2）in 循环

（3）of循环

（4）数组的forEach方法，实现循环

（5）jquery的each循环

2、vm对象介绍

十、 小练习

公告

搜索

常用链接

合集

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

目录

3、补充数组的过滤和判断子字符串是否在字符串中

十、小练习

	# pip install flask
	from flask import Flask, jsonify
	import json

	app = Flask(__name__)

	@app.route('/films')
	def films():
	with open('./fiml.json', 'r', encoding='utf-8') as f:
	res_dict = json.load(f)
	res = jsonify(res_dict)
	res.headers['Access-Control-Allow-Origin'] = '*'
	return res

	if __name__ == '__main__':
	app.run()