Vue定义
- 补充知识:
- Web前端开发三大框架
- Angular.js
- React.js
- Vue.js
- 其中:Vue.js的使用和关注在三大框架中略微胜出,且热度仍在递增。
- Web前端开发三大框架
- Vue定义:
- 是一套用于构建用户界面的JavaScript框架,使基于网页的前端应用程序开发更为方便。
- Vue官方说明文档:
- https://cn.vuejs.org/guide/introduction.html
Vue框架的使用
- Vue.js文件的引入
- 从Vue官网中下载Vue.js文件
- 将Vue.js文件放置在和个人.html文件同一文件夹下
- 在个人.html文件中,通过外链式方式、在src属性中引入Vue.js文件
- <script src="Vue.js"></script>
- Vue框架的使用
- 语法:实例化一个Vue对象
- var Vue对象变量名 = new Vue({
- // 选项(如下)
- });
- var Vue对象变量名 = new Vue({
- 选项:
- 挂载点
- el:'CSS选择器或HTML元素',
- 数据源
- data:{
- 键:值
- },
- data:{
- 函数方法
- methods{
- 函数名1( 形参 ){
- 代码块 }
- 函数名2( 形参 ){
- 代码块 }
-
……
- 函数名1( 形参 ){
- }
- methods{
- 计算
- computed:{
- 函数名(形参){
- 代码块
- return 返回值
- }
- 函数名(形参){
- }
- computed:{
- 侦听器
- watch:{
- 方法一:以函数的形式监听
- 侦听对象( 更新后的值,更新前的值 ){
- console.log(更新后的值)
- console.log(更新前的值)
- }
- 侦听对象( 更新后的值,更新前的值 ){
- 方法二:普通监听
- 侦听对象:{
- //当侦听对象发生变化时,handler函数将被调用
- handler(更新后的值,更新前的值){
- console.log(更新后的值)
- console.log(更新前的值)
- }
- }
- 侦听对象:{
- 方法三:深度监听(deep)
- //deep:可用于对对象或数组内部的属性进行监听
- 侦听对象:{
- //当侦听对象发生变化时,handler函数被调用
- //下述默认形参名,可随意指定
- handler( 默认形参名 ){
- console.log(默认形参名.键名)
- },
- //开启侦听器
- deep:true,
- //控制侦听器自动触发一次监听(默认为false)
- immediate: true
- }
- 方法一:以函数的形式监听
- }
- watch:{
- 挂载点
- 补充:在一个Vue实例化对象中:
- this:等价于Vue实例化对象
- this.属性名:等价于Vue实例对象中的属性
- 例如:引用Vue实例化对象中的数据属性,并使其值自增
- this.键名++
- 例如:引用Vue实例化对象中的数据属性,并使其值自增
- 语法:实例化一个Vue对象
Vue五大指令
- 内容渲染指令(插举法)
- {{ 键名 }}
- 双向绑定指令
- v-model属性
- 事件绑定指令
- @click属性
- 条件渲染指令
- v-if属性:根据条件的真假(True、False),对标签进行显示和隐藏。
- 当条件为True时,显示标签元素。反之则隐藏。
- v-show属性:【同v-if属性的功能】
- v-if与v-show区别:
- v-show:基于CSS样式的display属性对none值的设定(即diaplay:none)来隐藏和显示元素
- v-if:通过删除和添加标签元素来显示和隐藏元素
- v-if属性:根据条件的真假(True、False),对标签进行显示和隐藏。
- 列表渲染指令
- v-for属性:用于对数据或对象的遍历(输出)
- 可对数据源中的每个元素循环遍历、并分别生成相应的元素。
- v-for属性:用于对数据或对象的遍历(输出)
补充:API接口
- API:应用程序接口
- API(即接口):是前端调用后端数据的一个通道,通过通道,可以访问到后端的数据,但又无需调用其源代码。
- 接口相当于函数
- 前端调用后端提供的API接口,输入该API所需的参数信息后,在后端执行完函数,在将输出的结果返回前端。
- (即Axios提供了发送请求和处理响应数据的API接口,用于与后端的API接口进行通信。Axios的API接口让开发者可以方便地在前端代码中发送请求,并处理后端返回的数据。)
- 综上,Axios提供了一种简单的API接口方式来访问后端API接口,并不是自己提供了后端API接口。
- 补充:后端的API接口定义了前端可以发送的请求类型、请求参数和请求格式,以及后端将如何处理这些请求并返回响应数据。
axios
- axios:是一个用于发送各种类型的HTTP请求的JavaScript库
- 提供了简单易用的API接口,可以发送各种类型的请求(如 GET、POST、PUT、DELETE等),并处理响应数据。
- 用途:
- Axios负责将前端的请求发送到后端,然后接收来自后端的响应数据。
- axios引入方式
- 本地包axios.js导入
- <script src="axios.js"></script>
- 注意:此时axios.js与当前.html文件需在同一文件夹下。
- 以cdn方式引入
- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
- 本地包axios.js导入
- axios的书写语法
- 书写在script标签中
- <script>
- axios({
- method : '请求方式', // 发送get请求或post请求【默认为GET】
- url : ' http://IP地址 : xx端口/ xx接口 ',
- data : {
- // data:一般用于作为post请求中被发送的数据
- 键:值,
- …… }
- params : {
- // params:一般用于作为get请求中被发送的数据
- 键:值,
- …… }
- }).then((res) => {
- // 处理成功状态的结果
- }).catch((error) => {
- // 处理错误状态的结果 })
- axios({
- </script>