Vue的学习----慢慢更新

最新推荐文章于 2023-07-24 23:22:38 发布

♚ 无趣

最新推荐文章于 2023-07-24 23:22:38 发布

阅读量126

点赞数

分类专栏：笔记文章标签： vue.js 学习 npm

本文链接：https://blog.csdn.net/qq_56469942/article/details/125060238

版权

笔记专栏收录该内容

24 篇文章 1 订阅

订阅专栏

一、Vue—基础知识（指令-事件）

主要内容

Vue介绍
Vue安装使用
Vue常用命令
Vue事件方法

1、Vue介绍

1.介绍	
   - 渐进式JavaScript框架（渐进式：项目中可以逐步使用vue框架 可以使用一部分 或者整个项目）
   - 框架单页面的应用程序（vue项目入口：只有一个页面index.html）
   - 跳转的页面由功能--路由（其他页面组件）
   - 框架里面使用的是虚拟DOM 没有js BOM  DOM
   
2.特点
	1. 易用
	2. 灵活
	3. 高效
	
3.优缺点
	1.优点：易用 灵活 高效 易于维护
	2.缺点：
		1.首页加载速度慢
		2.不利于搜索引擎优化

2、Vue使用

1.使用vue（局部使用）

引入Vue的cnd网址或者下载到本地js文件（类型：jquery.js）
创建vue实例
代码演示

<body>
        <h2>普通的css布局实现的项目</h2>
        <p>测试vue使用在项目中，不是整个项目用vue写的 局部使用</p>
        <p id='ms'>ms--{{ msg }}</p>

        <!-- 使用vue  -->
        <div id='app'>
            <p>vue的区域了 app-- </p>
            <p>获取vue数据：{{ msg }}</p>
            <p>{{ arr }}</p>
        </div>


        <!-- 创建vue实例 -->
        <script>
            const vm = new Vue({
                el:'#app',//获取element元素 
                data:{
                    msg:'hello 各位老板',
                    arr:[5,2,1]
                }
            })
        </script>
    </body>

搭建vue项目
1. 兼容性
  Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
2. 安装vue 命令行工具 (CLI)
  1. 介绍：Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了开箱即用的构建设置。
  2. 网址：https://cli.vuejs.org/zh/
  3. 版本：Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)
  4. 先安装yarn: npm i yarn -g (推荐)
  5. 安装vue-cli：
    npm install -g @vue/cli （下载模块：npm install 模块）
    或者
    yarn global add @vue/cli （下载模块：yarn add 模块）
    
    命令来检查其版本是否正确
    vue --version
3. 创建一个vue项目–通过脚手架vue-cli
  1. 创建vue项目： vue create vue-project
    说明：vue项目名称最好是英文不能包含驼峰命名法
  2. 按需项目需要的依赖配置
  3. 进入项目
    cd 项目名称
  4. 启动项目
    npm run serve
    或者
    yarn serve
  5. 打包项目
    npm run build

3、目录结构

vue-project
node_moudles 安装包依赖–模块
public 单页面入口-index.html
src 资源文件–前端
assets 静态文件资源-放置css js images
components 公共组件–组件化（样式布局效果）
App.vue 根组件
main.js 入口配置文件

.browserslistrc  浏览器配置
.gitignore    上传git仓库 忽略的文件配置
babel.config.js  babel配置
package.json  项目配置文件（查看项目安装的依赖  版本  名称.....）
readme.md     项目说明文件
yarn.lock     配置信息  忽略

4、Vue组件组成

1、组成：三部分

template 视图标签（template标签不会被渲染只是包裹作用）必写
script 逻辑代码
style 样式
scope 样式作用域当前作用域

2、创建组件

xxx.vue 后缀.vue结尾
三部分组件快捷键

3、组件使用

引入组件
注册组件
使用组件

  <script>
        //1. 引入组件
        import Banner from './components/Banner.vue'

        export default {
            name: 'App',
            //2. 注册组件
            components: {
                Banner,
            }
        }
        </script>

    <!-- 3. 使用组件 -->
    <Banner></Banner>

5、Vue指令

指令：就是以 v-指令=‘js环境’ 具体特定的工具，指令。

模板语法 - 表达式
1. 作用：获取vue数据显示视图模板语法来声明式地将数据渲染进 DOM
2. 语法：{{ js表达式 }}
v-html=‘’ -原生HTML
1. 作用：输出真正的 HTML，你需要使用 v-html 指令 (innerHTML)
2. 语法：
v-text=‘’
1. 作用：渲染视图 innerText
2. 语法:
v-if=‘’ 条件渲染
1. 作用：是否显示元素/ true 显示 false 隐藏
2. 语法：
3. 特点：
  v-if=‘’ 控制元素是否渲染或者销毁
v-else
1. 作用：是对 v-if=''的结果取反
2. 语法：
  
  xxxx
v-else-if
1. 作用：是否显示元素与v-if v-else-if 多语句判断
2. 语法：
  
  xxxx
v-show=‘’
1. 作用：是否显示元素/ true 显示 false 隐藏
2. 语法：
3. 特点：
  控制元素的 display:block/none
4. v-if与v-show区别？
  v-if: 控制元素的渲染或者销毁
  v-show:控制元素的 display:block/none
  场景：
  频繁切换： v-show
  初次渲染优化：v-if
v-for=‘’ - 列表渲染
1. 作用：遍历数组或者对象
2. 语法：
3. {{ item }}
4. 1. 属性
    1. item 第一个元素表示数组的每一项内容
    2. index 第二个元素表示数组的下标 0 1 …
    3. arr 数组数据
  2. v-bind:属性=‘’ 绑定属性 key=‘’
  3. 作用：做当前数据的唯一标识一般写的是id 不推荐 index
  4. 语法：
```
 简写：<div :key=''></div>
```

 1. 遍历对象：   
    <div v-for="(value, key, index) in object">
        {{ index }}. {{ key }}: {{ value }}
    </div>
    value 对象的值 
    key   对象的键名
    index 下标0 1 ... 

 2. v-for 与 v-if 一同使用
 3. 注意我们不推荐在同一元素上使用 v-if 和 v-for 、v-for 的优先级比 v-if 更高
 4. 解决方法：
    ```
        <ul>
        <template v-for="item in zaoshi">
            <li :key="item.id" v-if="item.flag">
            {{ item.fruit }}
            </li>
        </template>
        </ul>

    ```

v-bind:属性=‘’ 动态绑定属性
作用：给标签元素绑定一个动态属性

语法：

  1. <div v-bind:key=''></div>

  2. 简写：  <div :key=''></div>

6、Vue事件

介绍
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码
定义事件
语法：<div v-on:事件名=‘dosomething’>
函数dosomething定义的位置：
要求定义mothds属性中
事件：1. this指向 2. 事件传递参数 3. 事件对象event
事件的this指向当前组件实例对象
事件传递参数 v-on:click=‘canshu(1,2)’
事件对象event
1. 函数不带参数第一个参数默认是事件对象 event
2. 函数带参数事件对象需要手动传递 $event
  v-on:事件名=‘函数’
  简写：
  @事件名=‘函数’

二、Vue-事件-计算属性-侦听器

1、Vue事件–下

绑定事件：<div v-on:事件名=“函数名”>
实现方法：
methods:{
函数名(){
}
}
事件对象 event
1.无参数传递：第一个参数就是event
2.有参数传递：需要手动传递事件对象
事件修饰符
.stop *
.prevent *
.capture
.self
.once
.passive
按键修饰符
.enter *
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
系统修饰符
.ctrl
.alt
.shift
.meta
鼠标按键修饰符
.left
.right
.middle

2、Vue中key属性的作用（考点）

1、作用：key的作用主要是为了高效的更新虚拟DOM
2、高效的Diff算法

3、数组更新检测

1、说明：在列表渲染中，如果遍历是数组，当数组数据发生改变时，页面什么时候能自动更新（页面重新渲染）
2、实现数组视图同步更新

变更方法（修改了原数组）
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
替换数组（修改后返回的数组原数据不修改视图想同步更新覆盖原数组） filter()、concat()和slice()

4、对象更新检测

1.说明：对象修改后视图同步更新视图 – 内存：栈内存堆内存
2. 实现对象视图同步更新

1.Vue.set( target, propertyName/index, value )
	 参数：
        {Object | Array} target
     	{string | number} propertyName/index
     	{any} value
	    返回值：设置的值。
     用法：
   	   向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')
2.代码演示
     addAttribute(){
     // this.obj.love='女'
     // console.log('obj',this.obj);
     //问题：vue认为 obj没有修改
     //1. ...  
     // this.obj ={...this.obj};
     //2. es6: 合并对象  Object.assign({},{},{}) 
     // this.obj=Object.assign({},this.obj)

     //3. vue官网解决方法：
     //向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。
     // this.$set(this.obj,'love','女')
     Vue.set(this.obj,'learn','学习')

     //删除 同步视图 删除对象的 property。如果对象是响应式的，确保删除能触发更新视图。
     Vue.delete(this.obj,'age')
 }

6、Class与Style绑定

1.介绍：动态的添加class或者是style样式
2.绑定 HTML Class
1、直接绑定变量

	<div v-bind:class='变量'></div>

2、对象语法

<div v-bind:class="{类名: 表达式-true显示类名、false隐藏 ,类名:boolean}"></div>

3、数组语法

<div v-bind:class="[变量1,变量2, {类名：boolean}]"></div>

4、绑定内联样式
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

对象语法

<div v-bind:style="{css样式:变量,... }"></div>

数组语法

  <div v-bind:style="[baseStyles, overridingStyles]"></div>

直接变量

<div v-bind:style="styleObject"></div>
    data: {
        styleObject: {
            color: 'red',
            fontSize: '13px'
        }
    }

7、Tabs切换

7.1 表单输入绑定

介绍
你可以用 v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定
通过指令 v-model=‘’ 获取表单输入的信息数据实现双向数据绑定
语法:

data(){
return{
msg:‘’
}
}
修饰符
.lazy 只有当input失去焦点时才更新数据
.number 把input标签中输入的内容转成数字，调用是parseFloat (Nunber())
.trim 去除左右空格
v-model实现原理
v-model只不过是一个语法糖而已,真正的实现靠的还是 语法糖的重点在于：增加程序的可读性，不是简化程序，更不是简写！

v-bind:绑定响应式数据
触发oninput 事件并传递数据

v-model 是什么。语法糖 :value + @input。还要分为两种情况
```
   <input v-model="val">
```
<基本等价于，因为内部还有一些其他的处理 >
$e v e n t 是事件对象，$ event.target.value表示input框中的输入值
```
<input :value="val" @input="val = $event.target.value">
```

7.2 计算属性与侦听器

计算属性
1. 介绍: 处理数据后把数据缓存起来使用数据的时候使用的缓存的数据,但是如果原数据修改了重新计算
2. 语法
  computed:{
  msg2(){
  console.log(‘计算属性: 对数据进行加工处理缓存数据’);
  return this.msg.split(‘’).reverse().join(‘’);
  }
  }
3. 使用计算属性
  1. 直接获取名字不加()
  2. {{ msg2 }}
侦听器
1. 介绍: Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化
2. 语法:

<script>
export default {
    data(){
        return{
            inp:'',
            arr:[]
        }
    },
    //侦听器--数据变化
    watch:{
        inp:function(n,o){
            console.log('新值:',n ,'旧值:',o);
            //业务逻辑 
            //模糊查询
            }
            }
            </script>

computed和watch区别（考点）

相同：computed和watch都是观察页面的数据变化的。
不同：
computed：是计算属性，依赖其它属性值:
1. 支持缓存，只有依赖数据发生改变，才会重新进行计算
2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
watch：没有缓存性，更多的是「观察」的作用，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作；
1. 不支持缓存，数据变，直接会触发相应的操作；
2. watch支持异步；

三、Vue组件

1、组件注册

局部组件
1. 创建一个组件.vue
2. 引入：import Mycomp from ‘./components/Mycomp.vue’
3. 注册组件
  export default {
  name: ‘App’,
  components: {
  Mycomp
  }
  }
4. 使用组件
```
  <Mycomp> </Mycomp> 
```
组件组成
1. template 视图
2. script 逻辑
3. style 样式

全局组件

注册全局组件在Vue对象身上有个Vue.component() 注册全局组件在所有的组件中不需要引入可以直接使用
语法：
Vue.component(‘my-component-name’, {
// … 选项 …
})
代码演示

  // import Vue from 'vue'//运行时：vue.runtime.js 
     import Vue from 'vue/dist/vue'

     /注册全局组件
     // Vue.component('组件名称',{内容配置})
     Vue.component('my-comp',{
         //视图 template :template作为属性使用 必须vue.js （完整版的vue.js）  默认引入-运行时-vue.runtime.js 
         template:'<div> <h2>我是一个全局组件</h2> <p>{{ msg }}</p></div>',
         //数据
         data(){
             return {
                 msg:'hello vue全局组件'
             }
         },
         //方法
         methods:{

         }
     })

全局组件–可以挂载创建好的局部组件注册全局
import MyBanner from ‘./components/MyBanner.vue’
// Vue.component(‘MyBanner’,MyBanner)
Vue.component(MyBanner.name,MyBanner)
vue 不同构建版本
1. vue.js 完整版 --编译器+ 运行时
2. vue.runtime.js 运行时

4.补充一个知识点

 1. 组件的视图模板组成

  2. <template>  标签 

  3. template  属性使用 

  4. render()  render函数渲染 -- react 

  5. 优先级问题
  <template>  标签  >  render()   > template (修改vue.js)

2、Prop传递数据

作用：实现组件之前数据传递- 父传子
语法
1. 父组件：
  <子组件 msg=‘hello’ :info=‘’ ></子组件>
2. 子组件：
  数组接受:
  props:[‘msg’,‘info’]
  
  对象接受方式:
  props:{
  msg:数据类型
  info:{
  type:String,
  default:‘默认值’
  },
  … 如下-prop验证
  }
3. 子组件使用父组件数据直接当data里面的数据使用
  {{ msg }}
注意:
1. prop传递数据时正向传递父串子数据时响应式的父组件数据修改了子组件同步更新
2. 子组件不能直接修改prop传递的数据

prop验证

props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
        type: String,
        required: true
    },
    // 带有默认值的数字
    propD: {
        type: Number,
        default: 100
    },
    // 带有默认值的对象
    propE: {
        type: Object,
        // 对象或数组默认值必须从一个工厂函数获取
        default: function () {
         return { message: 'hello' }
        }
    },
}

3、自定义事件 – 子传父

作用:把子组件的数据传递给父组件通过自定义事件
语法
1. 子组件定义事件
  this.$emit(‘getData’,this.msg)
2. 父组件-调用子组件上面接受自定义事件
  <子组件 @自定义事件名=‘函数名’/>
  
  methods:{
  函数名(val){
  this.xx = val;
  }
  }
特殊的prop传递函数
1. prop传递的是一个函数名 <子组件 :fun=‘函数名’ />
2. 子组件接受props:[‘fun’]
3. 子组件调用父组件传递的函数名fun this.fun() fun()

4、总结所有vue指令

指令:v-指令=‘表达式’ / v-xx=‘js环境’

v-text=‘表达式’
插入字符串数据
v-html=‘表达式’
1. 插入HTML数据解析html代码识别标签
2. 注意:不安全
v-show=‘表达式’
1. 是否显示 true显示 false隐藏
2. 控制css属性:diplay:block/none
v-if=‘’
1. 是否显示 true显示 false隐藏
2. 控制元素的创建和销毁
v-else
v-else-if=‘’
v-for=‘’
1. 遍历数组和对象
2. 语法:
  
  {{ item }}
  
  {{ item }}
v-on:事件名=‘函数名’
1. 绑定事件简写: @事件名=‘函数名’
2. <div v-on:click='demo'>点击</div>
3. 事件-修饰符
  1. .stop
  2. .prvent
  3. 键盘: .enter
v-bind:属性=‘’
1. 动态绑定属性简写: :属性=‘’
2. 语法: <div v-bind:class='demo'>点击</div>
v-model=‘’
1. 表单操作获取数据 — 双向数据绑定
2. 语法: <input v-model='msg' />
3. 实现原理:``html <input :value=‘val’ @input=‘val=$event.target.value’ /> `
v-slot=‘’
1. 显示插槽内容
2. 语法: <template v-slot:插槽名字='数据'></template>
v-pre
1. 不需要表达式跳过这个元素和它的子元素的编译过程 – 不编译vue语法直接输出内容
2. <div v-pre>{{ msg }}</div>
v-cloak
1. 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
2. [v-cloak] {
  display: none;
  }
  
  {{ message }}
v-once
1. 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。
2. 可以用于优化更新性能
3. 语法: <div v-once>一定不修改:{{ msg }}</div>

四、Vue生命周期

在这里插入图片描述

1、动态组件

作用：实现组件的动态切换加载哪个组件
语法：
特点：
通过组件销毁和重建过程实现组件切换

在动态组件上使用 keep-alive – 失活了

   <keep-alive>
    <component :is='加载的组件名称'></component>
   </keep-alive>

keep-alive
Props：
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。

使用：

include 和 exclude prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：

    <!-- 逗号分隔字符串 -->
    <keep-alive include="a,b">
    <component :is="view"></component>
    </keep-alive>

    <!-- 正则表达式 (使用 `v-bind`) -->
    <keep-alive :include="/a|b/">
    <component :is="view"></component>
    </keep-alive>

    <!-- 数组 (使用 `v-bind`) -->
    <keep-alive :include="['a', 'b']">
    <component :is="view"></component>
    </keep-alive>
    匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

max
    2.5.0 新增

    最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

    <keep-alive :max="10">
    <component :is="view"></component>
    </keep-alive>

2、异步组件

说明：使用组件的时候再去加载这个组件，提高代码执行速度
默认引入组件：
提前加载组件
import CompA from “./CompA.vue”;
异步组件写法：–局部
1. const CompB = ()=>import(‘./CompB.vue’)
2. 或者
  components: {
  CompA,
  CompB,
  // CompB:()=>import(‘./CompB.vue’),
  // CompC:()=>import(‘./CompA.vue’),
  //…
  }

3、处理边界问题

介绍：
访问元素 & 组件 – vue组件之间数据传递获取数据
vue组件之间数据传递
1. Prop 父传子
2. 自定义事件子传父 this.$emit(‘自定义事件名’,‘’)
3. 访问根实例 $root
  1. new Vue({ data:{ } })
  2. js：this.$root.xx
    template: {{ $root.xx }}
4. 访问父级组件实例 $parent
  1. this.$parent.xxx
  2. {{ $parent.xx }}
5. 获取子组件实例
  this.$children[0]
6. 访问子组件实例或子元素–$ref -操作DOM元素
  1. 获取DOM元素： <div ref='xx'></div>
    
    this.$refs.xx 获取div-dom元素
  2. 获取子组件实例 <Son ref='xx'/>
    
    this.$refs.xx
7. 原型链
  Vue.prototype.$user=‘admin’

4、MVVM设计模式（理解）

MVC MVVM
1. M model 数据-模型
2. V view 视图
3. VM viewmodel 视图和数据的链接

为什么要使用MVVM

低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候，View也可以不变。

可复用：可以把一些视图逻辑放到一个ViewModel里面，让很多View重用这段视图逻辑。

独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。

5、生命周期函数

生命周期：vue从创建vue实例到组件销毁的过程自动创建的函数
-每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数
生命周期函数：
1. beforeCreate new vue实例后创建之前 – 获取到data methods 和数据等。
2. created *** 创建之后
3. beforeMount 挂载之前
4. mounted *** 挂载完毕 – 初次获取DOM元素的地方
5. beforeUpdate 更新之前数据更新了视图时旧的
6. updated *** 更新之后数据和视图同步
7. beforeDestory 销毁之前什么都可以用
8. destory 销毁之后清空数据或者时计时器等
9. activated keep-alive 组件激活时调用。
10. deactivated keep-alive 组件停用时调用。

6、过渡 (理解-了解)

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：
在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css
语法： transition

   <transition name="fade">

    <p v-if="show">hello</p>

   </transition>

自定义动画 v = name
在进入/离开的过渡中，会有 6 个 class 切换。
1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3. v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
4. v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6. v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
自定义过渡的类名 – 与三方库 Animate.css
1. 写法1：animate.css@3.5.1
  1. 引入在线的cdn的库或者是下载到本地引入本地静态css文件
    引入在style
    @import url(“https://cdn.jsdelivr.net/npm/animate.css@3.5.1”);
  2. 安装：npm i animate.css@3.x -S
2. 写法2：animate.css@4.x
  1. 引入在线的cdn的库或者是下载到本地引入本地静态css文件
  2. 安装：npm i animate.css -S
  3. 引入：import ‘animate.css’;
3. 初始渲染的过渡
```
    <transition appear>
    
    </transition>
```
4. 多个元素的过渡
  1. 当有相同标签名的元素切换时，需要通过 key attribute 设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容
  2. key
5. 过渡模式
  1. 语法：
```
<transition name="fade" mode="out-in">
        
        </transition>
```
  1. 属性：
  2. in-out：新元素先进行过渡，完成之后当前元素过渡离开。
  3. out-in：当前元素先进行过渡，完成之后新元素过渡进入。

五、Vue-网络请求

1、过滤器

介绍:
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
语法：

<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

全局过滤器
1. Vue.filter(‘过滤器名字’,function(val){
  //处理val 处理成你想要的数据格式
  return val+’元’
  })
局部过滤器
1. 作用于当前的组件内部使用
2. 语法:

<script>
     export default {
         data(){
             return {
                 msg:'hello vue',
                 num:800,
                 phone:''
             }
         },
         //局部过滤器 --  过滤日期  年月日 
         filters:{
             //过滤器名称:function(vlaue){ retrun xxx }
             Guophone:function(value){
                 return '+86 '+value;
             }
         }
     }
 </script>

使用
{{ phone | Guophone}}
过滤器传递参数

    <!-- 过滤器 传递参数 {{ num | money(xx,xxx) }} -->

    <p>美元2：{{ num | money(4) }}</p>

2、前后端交互–网络请求

接口调用的方式有哪些

原生 xhr
基于 jQuery的ajax
fetch - 升级版xhr 基于原生
axios - 三方

url 地址格式有哪些
传统的url
协议+域名+端口号+/a/b-路径/?query-参数
query-参数 = ?xx=xx&xx=xx

Restful形式的url
协议+域名+端口号+/a/b-路径/xx/xx
比如：
https://www.zhihu.com/question/493868950

2.1 Fetch

Fetch API是新的ajax解决方案 Fetch会返回Promise
fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

语法：
fetch(url, options).then()

fetch(url, {
body: JSON.stringify(data), // must match ‘Content-Type’ header
headers: {
‘content-type’: ‘application/json’
},
method: ‘POST’, // *GET默认get请求, POST, PUT, DELETE, etc.
})
请求方式
1. get 查询请求
2. post 添加请求
3. put 修改请求
4. delete 删除请求
fetch语法
1. get
  fetch(‘url地址’)
  .then()
  
  fetch(‘url地址?id=123’)
  .then()
2. post
  fetch(‘url’,{
  body:‘key=value&key=value’,
  headers:{
  ‘content-type’:‘application/x-www-form-urlencoded’
  }
  })

2.2 Axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
特点：
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应

语法

安装：npm install axios -S
使用请求方式
1. get方式
  // 为给定 ID 的 user 创建请求
  axios.get(‘/user?ID=12345’)
  .then(function (response) {
  console.log(response);
  })
  .catch(function (error) {
  console.log(error);
  });
```
// 可选地，上面的请求可以这样做
axios.get('/user', {
    params: {
    ID: 12345
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});
```
2. post方式
  
  axios.post(‘/login’,qs.stringify({
  user:‘xxx’,
  pwd:‘密码’
  }))
  .then(res=>{
  console.log(res);
  console.log(res.data);
  })

执行多个并发请求

function getUserAccount() {
    return axios.get('/user/12345');
}

function getUserPermissions() {
    return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
    .then(axios.spread(function (acct, perms) {
        // 两个请求现在都执行完成
}));

3、vue跨域

跨域问题： proxy代理 vue-cli配置
创建一个根文件 vue.config.js

module.exports ={
    devServer: {
        // proxy: 'https://www.qyer.com'//缺点: 只能配置一个域名跨域
        proxy: {
            '/api': {
                target: 'https://www.qyer.com',
                ws: true,
                changeOrigin: true,
                pathRewrite:{//重写路径
                    '^/api':''
                }
            },
            // '/foo': {
            //   target: '<other_url>'
            // }
          }

      }
}

4、vue三方库–vant

Vant 轻量、可靠的移动端 Vue 组件库
基础使用
1. 安装：npm i vant -S
2. 引入组件
  1. 方式一. 自动按需引入组件 (推荐)
  2. npm i babel-plugin-import -D
  3. // 对于使用 babel7 的用户，可以在 babel.config.js 中配置
    module.exports = {
    plugins: [
    [‘import’, {
    libraryName: ‘vant’,
    libraryDirectory: ‘es’,
    style: true
    }, ‘vant’]
    ]
    };
  4. 方式二. 导入所有组件
    Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。
    
    import Vue from ‘vue’;
    import Vant from ‘vant’;
    import ‘vant/lib/index.css’;
    
    Vue.use(Vant);

六、Vue-路由

1、路由

1.1、介绍

vue组件中实现页面的跳转  配置路由--通过路由实现页面的跳转的

1.2、安装路由

1、安装命令：npm install vue-router -S
2、引入路由插件--main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.user(VueRouter)
3、定义（路由）组件
	import Home from './Home.vue'
	import About from './About.vue'
4、定义路由---页面走向
	const routes=[
	{
		path:'/' , // path:  地址栏的路径 /+字母
		component: Home   // 跳转这个路径显示的组件：页面
	},
	{ path:'/news/, component:News},
	]
	访问首页：http://localhost:8080/#/  --->Home
	访问新闻：http://loaclhost:8080/#/news  --News
5、创建router实例
	const router=new VueRouter({
		routes:routes
		})
6、挂载路径
	new Vue({
		router:router,
		})
7、显示路由出口
    ```<router-view></router-view>```
8、路由导航
	```<router-link to='/path'>首页</router-link>```
	```<router-link to='/'>首页</router-link>```
	```<router-link to='/news'>新闻<router-link>```

1.3 安装路由 vue-cli

安装项目的时候选择router
vue create vue-router

2、动态路由匹配

2.1. 介绍

路由传递参数如何给路由传递参数如何接受参数

2.2. 语法：

const router = new VueRouter({
routes: [
// 动态路径参数以冒号开头
{ path: ‘/user/:id’, component: User }
]
})

2.3. 获取动态路由传递的参数

this.$route.xxx

2.4. $route

fullPath 路由路径的全地址
matched 数组格式包含当前的路由路径以及父组件路由路径
name 路由名称
params {} 路由动态参数定义路由：/user/:uname params={uname:xx}
path 路由路径走向
query 地址栏参数 xx?aa=123

3、嵌套路由

3.1. 介绍

	路由的嵌套 当前的路由下面包含一级或者多级路由导航

3.2. 写法：

 const router = new VueRouter({
   routes: [ 
       {
           path:'/zhinan',
           component:Zhinan,
           children:[//二级路由
               {
                   path:'anzhuang',//访问地址： /zhinan/anzhuang  -- 推荐写法
                   component:,
                   children:[//三级路由

                   ]
               },
               {
                   path:'/base',//访问地址： /base
                   component:,
               }
           ]   
       }
   ]

})

4、编程式的导航

4.1. 介绍

除了使用创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现
说明：跳转路由的两种方式

标签跳转路由
编程式-js跳转路由
1. router.push()
2. router.replace()
3. router.go(n)
  1. 这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)
  2. 在浏览器记录中前进一步，等同于 history.forward()
    router.go(1)
    
    后退一步记录，等同于 history.back()
    router.go(-1)
    
    前进 3 步记录
    router.go(3)

4.2. 访问

注意：在 Vue 实例内部，你可以通过 $r o u t e r 访问路由实例。因此你可以调用 t h i s .$ router.push

5、命名路由

5.1. 介绍

通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候

5.2. 功能

跳转路由 - 编程式跳转
this.$router.push({ name: ‘User’, params: { uname: 123,id:xx } })
router-link 的 to 属性传一个对象
User

6、重定向和别名

重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b
const router = new VueRouter({
routes: [
{ path: ‘/a’, redirect: ‘/b’ }
]
})
别名
1. 含义：小名其他名称都是一个人
2. 语法：
  const router = new VueRouter({
  routes: [
  { path: ‘/a’, component: A, alias: ‘/b’ }
  ]
  })

♚ 无趣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的学习----慢慢更新

Vue—基础知识（指令-事件）主要内容Vue介绍Vue安装使用Vue常用命令Vue事件方法一、Vue介绍1.介绍 - 渐进式JavaScript框架（渐进式：项目中可以逐步使用vue框架可以使用一部分或者整个项目） - 框架单页面的应用程序（vue项目入口：只有一个页面index.html） - 跳转的页面由功能--路由（其他页面组件） - 框架里面使用的是虚拟DOM 没有js BOM DOM 2.特点 1. 易用 2. 灵活 3. 高效
复制链接

扫一扫