vue2学习

sxy_yang

已于 2022-05-12 23:41:40 修改

阅读量165

点赞数

文章标签：学习 vue.js

于 2022-05-12 23:38:21 首次发布

本文链接：https://blog.csdn.net/sxy_yang/article/details/124742717

版权

##vue

用于构建用户界面的前端框架
vue框架的两个特性

1 数据驱动视图

1. 单向的数据绑定
1. vue会监听数据变化，从而自动渲染页面结构

2 双向数据绑定

1. 在网页中，表单负责采集数据，ajax负责提交数据
1. 辅助开发者在不操作DOM的前提下，自动把用户填写的内容同步到数据源

MVVM

1. 实现数据驱动视图、双向数据绑定的核心原理
2. - model 表示当前页面渲染时所依赖的数据源
3. - view 表示当前页面所渲染的 DOM 结构
4. - viewmodel 表示vue的实例，是MVVM的核心

####基本使用步骤

1. 导入vue.js的script脚本文件
2. 在页面中声明一个将要被 vue 所控制的DOM区域
3. 创建vm实例对象
4. //创建 vue 实例对象
    const vm = new Vue({
        // el 属性是固定写法，表示当前vm实例要控制页面的哪个区域，接收的值是一个选择器
        el: '#app',
        // data 对象就是要渲染到页面上的数据
        data: {
            username: 'zs'
        }
    })

vue 指令

指令是vue为开发者提供的语法模板，用于辅助开发者渲染页面的基本结构
按用途可以分为六类
#####1. 内容渲染指令
v-text 指令缺点：会覆盖元素内部原有的内容
{{}} 插值表达式，实际开发用的多，只是内容的占位符，不会覆盖原有的内容
v-html 指令的作用：可以把带有标签的字符串，渲染成真正的html内容
#####2. 属性绑定指令
注意： {{}} 插值表达式，只能用在元素的内容节点，不能用在元素的属性节点
v-bind 可以为元素的属性动态绑定值，简写是英文：
在使用v-bind期间，绑定内容如果需要进行动态拼接，则字符串外应该用单引号包裹，例如：

<div :title="'box' + index">只是一个div</div>

#####3. 事件绑定指令

v-on 可以简写为@

语法格式为：

   <button v-on:click="sub">-1</button>
   methods: {
          //add: function() {} 可以简写为add() {}
          add(n) {
              // vm === this
              // vm.count +=1
              this.count += n
          },
          sub() {
              this.count -= 1
          }
      }

- $的应用场景：如果默认的事件对象 e 被覆盖了，则可以手动传递一个$ event，例如：

	<button @click="add(2,$event)">+1</button>
	methods: {
            //add: function() {} 可以简写为add() {}
            add(n,e) {
                // vm === this
                // vm.count +=1
                this.count += n

                if(this.count % 2 === 0 ) {
                    e.target.style.backgroundColor = 'blue'
                } else {
                    e.target.style.backgroundColor = 'pink'
                }
            }
        }

事件修饰符
- .prevent
  
  <a href="www.baidu.com" @click.prevent="show">跳到百度</a>
- .stop 防止冒泡
  
  <button @click.stop="btnclick">按钮</button>

-按键修饰符

#####4. 双向绑定指令

v-model 指令，只能和表单元素使用
- input
- select

#####5. 条件渲染指令

v-if 每次动态移除和创建元素
- 如果刚进入页面不需要展示，后来也不会用，偶然会用用这个
- v-else-if 必须配合 v-if 一起使用，不然不会被识别
v-show 动态为元素添加或移除 display改为none
- 频繁的切换时使用
  #####6. 列表渲染指令
v-for
- 官方建议用到 v-for 之后加一个 :key，并且将id作为key的值
- key的值类型必须是字符串或数字，且不允许重复

过滤器本质是一个函数

应用于插值表达式/v-bind属性绑定
vue3 不可用
| 管道符
过滤器函数，必须定义到 filters 节点之下，过滤器本质是函数
通过函数形参值获取 | 前面的那个值
如果全局过滤器和私有过滤器冲突，按就近原则，调用私有过滤器
- 全局过滤器
- 使用 Vue.filter() 定义全局过滤器
```
  Vue.filter('capi', function(str) {
  	const first = str.charAt(0).toUpperCase()
  	const other = str.slice(1)
  	return first + other + '~~~~'
  })
```
- 连续使用过滤器，每层过滤器进行加工
- 过滤器可以传参，第一个值永远是 | 前面的那个值

watch 侦听器

允许开发者监视数据的变化
方法格式的侦听器
- 缺点：1.无法在刚进入页面时自动触发
- 2.如果侦听的是一个对象，如果对象的属性发生了变化，不会触发侦听器
对象格式的侦听器
- 优点：1.可以通过 immediate 选项；让侦听器自动触发一次
- 2.可以通过 deep 选项，让侦听器深度侦听每个属性的变化
深度监听
- ‘info.username’(newVal) {
  console.log(newVal);
  }

计算属性 ——通过一系列运算得到一个属性值

计算属性在定义的时候，要定义“方法格式”
使用的时候，当成普通的属性使用即可
优点
- 实现了代码的复用
- 只要计算属性中依赖的数据源变了，则计算属性会自动重新求值

axios 专注于网络请求的库

axios在请求到数据后，在真正的数据外，套了一层壳

  - {
  	config: {},
  	data: {真实的数据},
  	headers: {},
  	request: {},
  	status: xxx,
  	statusText: ""		
  - }

发起 GET 请求

  // 1.调用 axios 方法得到的返回值是 promise 对象
  axios({
      // 请求方式
      method: 'GET',
      url: 'http://www.liulongbin.top:3006/api/getbooks',
      // url 中的查询参数
      params: {},
      // 请求体参数
      data: {}
  }).then(function(result) {
      console.log(result);
  })

vue-cli

1.管理员模式下运行 npm install -g @vue/cli
- 输入 vue -V 查看是否安装成功
- 成功会显示版本号
- 创建项目，指定目录下（用管理员模式创建，否则可能创建失败），地址栏cmd，输入命令
- vue create 项目名称（英文）
- 1 敲回车后新手选择第三个——手动选择
- 2 下一步选择css那一行，去掉Linter
- 3 选择版本2.x或者3.x
- 4 选择less
- 5 默认选择第一项
- 6 y是选择保存之前的选择，n是不保存
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sphclD5t-1652369871183)(image/create-vue.PNG)]
- 选择y后，输入自己的保存风格名称
- 开始下载后，鼠标在页面不能随便滑动，否则会停止下载
  - 解决办法，单击窗口栏，ctrl+c
- 成功后切换到项目根目录下，npm run serve
- 如果命令行窗口不小心关掉，项目会停止，打开vscode，终端运行npm run serve即可
2.vue项目中src目录构成
- assets 存放静态资源文件，例如：图片，css样式表
- components 存放程序员封装的、可复用的组件
- main.js 项目的入口文件，整个项目的运行，要先运行 main.js
- App.vue 项目的根组件
3.vue 要做的事：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中

vue 的组件

vue 组件的后缀名为.vue
.vue 组件由3部分构成
- template 组件的模板结构
  - 只能有一个div
- script 组件的 JavaScript 行为
- style 组件的样式
组件被封装好之后，彼此之间是相互独立的
在使用组件的时候，根据彼此的嵌套关系，才会形成父子、兄弟关系
使用组件的三个步骤：
- 1.在父组件中import需要的组件
- 2.使用components 节点注册组件
  - 通过 components 注册的是私有子组件
- 3.以标签形式使用刚才注册的组件
注册全局组件
- 在vue项目的main.js入口文件中，通过Vue.component()方法，可以注册全局组件
  - 代码示例
  - // 导入需要的全局组件
  - import Count from ‘@/components/Count.vue’
  - Vue.component(‘MyCount’,Count)
组件的 props
- // props 是自定义属性，允许使用者通过自定义属性，为当前组件指定初始值
- props:[‘init’],
- props 的default 默认值没有传递init值时，默认值生效
- props 的type 选项检查init 的值类型，不是会报错
- props 的required选项必填校验项
vue规定：组件中封装的自定义属性是只读的，程序员不能直接修改，否则会报错

组件之间的样式冲突问题

默认情况下，写在.vue组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题
解决方式，在style行内加 scoped

组件的生命周期

生命周期一个组件从创建-运行-销毁的整个阶段
生命周期函数
- 组件创建阶段 new Vue() beforeCreate-created-beforeMount-mounted 最少执行1次
  - created 非常常用
  - 经常在它里面，调用 methods方法，请求服务器的数据
  - 并且把请求到的数据，转存到data中，供template模板渲染时使用
  - 但是模板结构未生成，不能调用DOM
  - mounted 可以开始第一次操作组件的dom
- 组件运行阶段 beforeUpdatad-updated 最少执行0次
  - 当数据变化之后，为了能够操作最新的dom结构，必须把代码写到updated生命周期函数中
- 组件销毁阶段 beforeDestory-destoryed

组件之间的数据共享

父向子共享数据
- 使用自定义属性
子向父共享数据
- 使用自定义事件
- $emit（）触发自定义事件
兄弟组件之间的数据共享
- 在vue2中，使用EventBus
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j2ROVG5o-1652369871200)(image/eventBus.PNG)]

ref 引用

辅助开发者在不依赖jQuery的情况下，获取 DOM 元素或组件的引用
当代码需要延迟时，保证括号里的代码可以操作最新的DOM元素
```
  - this.$nextTick(() => {
  	 this.$refs.iptRef.focus()
  	 })
```

动态组件

component 标签是 vue 内置的，作用：组件的占位符 -->
is 属性的值，表示渲染组件的名字 -->
keep-alive 缓存内部组件，而不是销毁 -->
二者选其一，不能同时使用 -->
include 指定要缓存的组件 -->

exclude 指定不被缓存的组件 -->

   <keep-alive include="Left,Right" >
  <component :is="comName"></component>
   </keep-alive>

插槽

- <slot></slot>

自定义指令

私有自定义指令
- directives
- - directives: {
    // 定义名为color 的指令，指向一个配置对象
    // color: {
    // 当指令第一次被绑定到元素上的时候，会立即触发 bind 函数
    // 形参中的 el 表示当前的指令所绑定到的那个 DOM 对象
    // bind(el, binding) {
    // el.style.color = binding.value
    // },
    // // 在 DOM 更新的时候会触发 bind 函数
    // update(el, binding) {
    // el.style.color = binding.value
    // },
    // },
    
    // 函数简写形式
    color(el, binding) {
    el.style.color = binding.value
    },
    }
全局自定义指令
在main.js文件中定义
- Vue.directive(‘color’, function (el, binding) {
  el.style.color = binding.value
  })

ESlint

创建项目时选择
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KtfQfFSO-1652369871204)(image/ESlint.PNG)]
- 下一项选择 Lint on save
- 下一项倒数第二个
- 如果报错先用管理员模式运行试试
- prettier
  - 下载并配置

路由 —— 就是对应关系

详情代码及使用见 day7-router-demo1
前端路由
- Hash 地址与组件之间的对应关系
- vue-router
- 1.下载vue-router
  - npm i vue-router@3.5.2 -S
- 1. 创建路由模块
  - 在src源代码目录下，新建router/index.js路由模块，并初始化代码如下:
    - // 1. 导入 Vue 和 VueRouter 的包
      import Vue from 'vue'
      import VueRouter from 'vue-router'
    // 2. 调用 Vue.use() 函数，把 VueRouter 装为插件
    Vue.use(VueRouter)
    
    // 3. 创建路由的实例对象
    const router = new VueRouter()
    
    export default router
- 1. 在 main.js 文件中导入路由并进行挂载
    - router：路由名

####导航

声明式导航
- 点击链接实现导航的方式
- 例如：
编程式导航
- 调用API方法实现导航的方式
- 例如： location.href
- // 通过编程式导航API，调到指定页面，会增加一条历史记录
  - this.$router.push('/movie/1')
  - // 不会增加历史记录
  - this.$router.replace('/movie/2')
  - // 后退回上一个页面超过后退上限则不动
  - this.$router.go(-1)
导航守卫
- 控制路由的访问权限
- 全局前置守卫

sxy_yang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue2学习

##vue用于构建用户界面的前端框架vue框架的两个特性1 数据驱动视图单向的数据绑定vue会监听数据变化，从而自动渲染页面结构2 双向数据绑定在网页中，表单负责采集数据，ajax负责提交数据辅助开发者在不操作DOM的前提下，自动把用户填写的内容同步到数据源MVVM1. 实现数据驱动视图、双向数据绑定的核心原理2. - model 表示当前页面渲染时所依赖的数据源3. - view 表示当前页面所渲染的 DOM 结构4. - viewmo
复制链接

扫一扫