购物车案例回顾:
-v -for循环商品
-checkbox多选: 数组,input---> checkbox--->value 对象 [在input中 只能使用 v-model]
getprice()---->方法------> 变量发生变化,这个会重新运算
加全选 与全不选
-chekbox --->单独的------>布尔类型
-checkbox的change事件 ----> 判断 是否被选中
-给每一个 checkbox绑定一个事件
数量加减
-在 数量显示前后 加span标签,绑定点击事件
-扩展功能:点击属性--> 变成input,失去焦点,再变回span标签
v-model修饰符
lazy
number
trim
与后端交互----》后端:跨域问题(后续会详细讲)--》在响应头中加入 某些东西即可
-js的json序列化和反序列化
-JSON.parse(字符串) python :json.loads
-JSON.stringify(数组/对象/布尔) python :json.dumps
- 方式一: jquery的ajax方法 -基于原生 js的ajax请求封装的 -方式二:原生js--》新的方法--》fetch fetch('http://127.0.0.1:5000/userinfo') .then(response => { return response.json(); }).then(data => { this.username = data.username this.age = data.age }) -方式三:第三方 axios -引入:cdn -axios.get(地址).then(res=>{res.data})
今日内容:
小电影案例
后端:
from flask import Flask, jsonify import json app = Flask(__name__) @app.route('/film', methods=['GET']) def film(): with open('./film.json', 'rt', encoding='utf-8') as f: res = json.load(f) res=jsonify(res) 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="./js/vue.js"></script> <script src="./js/axios.js"></script> </head> <body> <div id="app"> <h1>点击显示小电影案例</h1> <button @click="handleLoad">加载</button> <div v-for="film in filmList"> <img :src="film.poster" alt="" height="200px" width="150px"> <div> <h3>{{film.name}}</h3> <p>主演: <span v-for="item in film.actors"> {{item.name}} </span> </p> <p>{{film.nation}}|{{film.runtime}}</p> </div> </div> </div> </body> <script> var vm = new Vue({ el: '#app', data: { filmList: [] }, methods: { handleLoad() { axios.get('http://127.0.0.1:5000/film').then(res => { if (res.data.code == 100) { this.filmList = res.data.results } else { alert(res.data.msg) } }) } } }) </script> </html>
计算属性和监听属性
计算属性
计算属性是基于它们的依赖进行缓存的
计算属性只有在它的相关依赖发生改变时才会重新求值
计算属性就像Python中的property,可以把方法/函数伪装成属性
计算属性必须要有返回值
基本使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <h1>普通函数---其他数据变化---》函数会重写计算</h1> 年龄:<input type="text" v-model="age"> 姓名:<input type="text" v-model="name"> <br> {{getAge()}} <br> <h1>计算属性</h1> 年龄:<input type="text" v-model="age1"> 姓名:<input type="text" v-model="name1"> <br> {{newAge}} <br> </div> </body> <script> var vm = new Vue({ el: '#app', data: { age: '', name: '', age1: '', name1: '', }, methods: { getAge() { console.log('我执行了') return Number(this.age) + 10 } }, computed: { newAge() { console.log('我执行了--计算属性') return Number(this.age1) + 20 } } }) </script> </html>
首字母变大写
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <h1>首字母变大写</h1> <!-- <input type="text" v-model="name"> ---》{{name.substring(0, 1).toUpperCase() + name.substring(1)}}--> <br> <!-- <input type="text" v-model="name"> ---》{{getName()}}--> <br> <input type="text" v-model="name"> ---》{{newName}} </div> </body> <script> var vm = new Vue({ el: '#app', data: { name: '', }, methods: { getName() { return this.name.substring(0, 1).toUpperCase() + this.name.substring(1) } }, computed: { newName() { return this.name.substring(0, 1).toUpperCase() + this.name.substring(1) } } }) </script> </html>
通过计算属性,重写过滤案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <h1>过滤案例</h1> <input type="text" v-model="search"> <ul> <li v-for="item in newDataList">{{item}}</li> </ul> </div> </body> <script> var vm = new Vue({ el: '#app', data: { search: '', dataList: ['a', 'at', 'atom', 'be', 'beyond', 'bee', 'c', 'cs', 'csrf'], }, computed:{ newDataList(){ return this.dataList.filter(item => item.indexOf(this.search) >= 0) } } }) </script> </html>
监听属性
只要属性发生变化,就会执行 函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <h1>监听属性</h1> <button @click="ordering='id'">按id排序</button> <button @click="ordering='price'">按价格排序</button> </div> </body> <script> var vm = new Vue({ el: '#app', data: { ordering: '' }, watch: { ordering() { console.log('我变了,向后端发送请求') console.log(this.ordering) } } }) </script> </html>
生命周期钩子 (八个核心函数)_面试会有
# vue 组件的生命周期钩子函数
一个vue的组件,从创建开始---》到最后销毁---》经历一些过程---》每个过程都绑定了一个函数--》当到这个过程的时候,这个函数就会执行
面向切面编程:AOP
# 8个生命周期钩子函数
1.beforeCreate: 组件创建之前实现这个:组件html,js--》html和js都是空的
2.created: 组件创建完成后:js就有值了,html还是空的 (向后端发送ajax请求)
3.beforeMount: 挂载模板之前,js有值,模板(html) 还是空的(向后端发送ajax请求)
4.mounted: 挂载完成:js有值,模板有值
5.beforeUpdate: 刷新之前执行:只要页面发送变化或js变量发生变化,就会触发它的执行
6.updated: 刷新之后执行
7.beforeDestroy: 被销毁之前执行 (资源清理性工作)
8.destroyed: 被销毁之后执行
# 实际用途
1 页面加载完成,向后端发请求拿数据
写在create中
2 组件中有定时任务,组件销毁,要销毁定时任务、
补充:定时器和延时器 setTimeout( ()=>{ console.log('延时器,3s后执行') },3000) setInterval(()=>{ console.log('每隔3s执行') },3000)
组件介绍
组件是:有模板,有js的 ,有方法的 对象 组件和组件直接的 变量,模板都是隔离的
定义组件 Vue.component('Child',{ template: ` <div> <h1>我是组件</h1> <button @click="haneleClick">点我看美女</button> <p>年龄是:{{ age }}</p> </div>`, data() { return { age: 19 } }, methods: { haneleClick() { alert('美女') } } }) # 使组件,直接根据组件名使用即可 <Child></Child>
全局组件使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <h1>组件的使用</h1> <button @click="handleClick">点我看美女</button> <hr> <Lqz></Lqz> <hr> <span>asdfasdfadsf</span> <p>你发誓啊发送是发放按摩阿斯顿发阿斯顿发as放到</p> <Lqz></Lqz> </div> </body> <script> // 1 定义全局组件 Vue.component('Lqz', { template: ` <div> <h1>{{ name }}</h1> <button @click="handleClick">点我换名字</button> </div>`, data() { return { name: 'lqz' } }, methods: { handleClick() { this.name = '彭于晏' } } }) var vm = new Vue({ el: '#app', data: {}, methods: { handleClick() { alert('美女') } } }) </script> </html>
局部组件
局部组件是定义在组件内部,只能在当前组件中使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <h1>局部组件的使用</h1> <Child></Child> </div> </body> <script> // 全局组件 Vue.component('Child', { template: ` <div> <Lqz></Lqz> <Lqz></Lqz> <Lqz></Lqz> </div>`, // 局部组件 components: { Lqz: { template: ` <div> <h2>我是局部组件</h2> </div> `, data() { return {} }, methods: {}, } } }) var vm = new Vue({ el: '#app', data: {}, methods: { handleClick() { alert('美女') } }, }) </script> </html>
局部组件和全局组件
全局组件 - 定义: Vue.component('Child',{}) - 使用,可以在任意位置使用 <Child></Child> # 局部组件-->只能定义在组件内部,只能在当前组件中使用 -定义 var vm = new Vue({ el: '#app', data: {}, components:{局部组件:{}} }) -使用:只能用在被 当前组件管理的 html (#app) 中,放在别的位置找不到
组件间通信
父传子
使用自定义属性实现父传子
-在父中定义变量 name='lqz'
-在子组件上 写自定义属性 <Child :name="name"></Child>
-在组件内部:props:['name'] # 可以接收多个
-在子组件内部,就可以使用插值,使用这个变量
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <h1>组件通信之父传子:自定义属性</h1> <p>父组件中得名字:{{name}}</p> <div style="background-color: pink"> <Child :name="name" yy="xx"></Child> </div> </div> </body> <script> // 全局组件 Vue.component('Child', { template: ` <div> <h2>我是Child组件</h2> <h3>父组件传递给子组件的:{{ name }}=={{yy}}</h3> </div>`, data() { return {} }, props:['name','yy'] }) var vm = new Vue({ el: '#app', data: { name:'彭于晏' }, }) </script> </html>
子传父
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <h1>组件通信之子传父:自定义事件</h1> 子组件的值:{{p_name}} <div style="background-color: pink"> <Child @myevent="handleEvent"></Child> </div> </div> </body> <script> // 全局组件 Vue.component('Child', { template: ` <div> <h2>我是Child组件</h2> <input type="text" v-model="name">-->{{ name }} <button @click="handleSend">传给父亲</button> </div>`, data() { return { name: '' } }, methods: { handleSend() { this.$emit('myevent',this.name) } } }) var vm = new Vue({ el: '#app', data: { p_name: '' }, methods: { handleEvent(name) { // name 是 子组件中调用 this.$emit('myevent',this.name) 传过来的 // alert('美女') this.p_name=name // 把子组件中传入的,赋值给父组件的p_name变量 } } }) </script> </html>
----扩展
轮询 聊天室 实时聊天
查询图书 页面加载显示 再前端bootstrap表格
标签:vue,return,入门,app,Vue,组件,data,05days,name From: https://www.cnblogs.com/wzh366/p/17956662