Vue个人学习笔记

最新推荐文章于 2023-03-08 21:28:14 发布

yu_wen_

最新推荐文章于 2023-03-08 21:28:14 发布

阅读量235

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/yu_wen_/article/details/104992936

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

属性

data： 定义数据
methods： 定义方法

指令

v-cloak： 能解决插值表达式（即{{message}}）表达式闪烁问题

v-text：

默认v-text是没有闪烁问题的；
会覆盖元素中原本的内容，但是插值表达式只会替换自己的占位符，不会把整个元素的内容清空

v-html： 编译变量的html的代码

v-bind：

是vue中提供的用于绑定属性的指令
可以被简写为冒号（:）；
可以写合法的JS表达式，如下；
如果不加冒号输出的是“mytitle123‘”，可以理解为冒号把mytitle变成了一个变量，需要去找这个变量被赋予的值；
只能实现数据的单行绑定

:title="mytitle  + ‘123’"
<!-- 输出 我是一个title123 -->
<!--  -->
data:{
	mytilte：我是一个title
}

v-on： 事件绑定机制，可以写做@，方法要在mothods中写

<!-- 完整语法 -->
<a v-on:click="show"></a>
<!-- 缩写 -->
<a @click="show"></a>
<!--  -->
mothods:{
   click(){
   	alert(111)
   }
}

v-model：

可以实现表单元素和model中的数据的双向绑定
注意：v-model只能运用在表单元素即input（radio，text，address，email…），select，checkbox，textarea；div，span，a标签等不能用
M 是放数据的 V 是展示数据的, v-bind 从M里拿出来当是放不回去, v-model 可以实时存取

v-for：

遍历数组 v-for(x in list) 注意：第二个位置有索引
遍历对象数组 v-for(x in list) 注意：第二个位置有索引
遍历对象 v-for((val , key) in list) 注意：除了有val，key，在第三个位置还有索引
迭代数字 v-for(x in 10) 注意：x从1开始
将v-for的元素赋予唯一的key属性，则会打破“就地复用原则”

data{
	//对象
	name:'张三'，
	age:18，
	sex:'男'
	//数组
	list[
	{name:'张三',age:18,sex:'男'}
	{name:'张三',age:18,sex:'男'}
	{name:'张三',age:18,sex:'男'}
	]
}

v-if和v-show的区别：

v-if：每次都会重新创建或删除元素，有较高的切换性能消耗
v-show：不会每次重新创建或删除元素，知识切换了元素的display状态，有较高的初始渲染消耗
如果元素涉及了频繁的切换，最好不要使用v-if，推荐使用v-show
如果元素可能永远也不会显示出来，推荐使用v-if

事件修饰符

.stop： 阻止冒泡 @click.stop=“btn”

.prevent： 阻止默认行为

.capture： 捕获事件，即顺序反着来

.self： 只有点击当前元素时候才会触发事件处理函数；只阻止自己身上的冒泡行的触发，并不会真正阻止冒泡行为

.once： 只触发一次事件处理函数

生命周期

生命周期图示
1.beforeCreate： 在实例完全被创建出来之前，会执行它，而在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有初始化

2.created： 在created方法中，data和methosd都已经被初始化好了；如果要调用methods中的方法，或者操作data中的数据，最好只能在created中

3.beforeMount： 表示模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中，在beforeMount执行的时候，页面中的元素是没有真正替换过来的，只是之前写的一些模板字符串

4.mounted： 表示内存中的模板已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了；mounted是实例创建期间最后一个生命周期函数，当执行完mounted就表示实例已经完全创建好了，此时如果没有其他操作的话，这个实例就静静的躺在内存中，一动不动；如果要通过某些插件操作页面上的DOM节点了，最早要在mounted中运行；只要执行完了mounte，就表示整个vue实例已经初始化完毕了，此时，组件已经脱离了创建阶段，进入到了运行阶段

5.beforeUpdata： 界面没有更新，数据更新了；当执行beforeUpdata的时候，页面中的数据还是旧的，此时data的数据是最新的，页面尚未和最新的数据保持同步

6.updata： updata事件执行的时候，页面和data数据已经保持同步了，都是最新的

7.beforeDestroy： 当执行beforeDestroy勾子函数的时候，vue实例就已经从运行阶段，进入了销毁阶段；vue实例身上所有的data和所有的methods，以及过滤器，指令等等，都处于可用状态，此时还没有真正执行到销毁的过程

8.destroy： 当执行destroyed勾子函数的时候，组件已经被完全销毁了，此时，组件中所有的数据，方法，指令，过滤器等等都已经不可用了

路由

路由规则

每个路由规则都是一个对象，这个规则对象身上有两个必须的属性：

path：表示监听哪个路由链接地址
component：表示，如果路由是前面匹配到的path，则展示component属性对应的那个组件
redirect：重定向

路由跳转三种方法和传值

router-link
默认渲染一个a标签
两个p（path params）不能组合 pq组合用的比较多
this.$router.push
传值用router
接受值用route

this.$router.replace
和router.push用法基本相同，只是replace不能返回上一个页面

两个p（path params）不能组合
pq（path query）组合用的比较多
query和params的区别：query相当于get方法，会在浏览器上面显示传的参数，刷新还会存在；
params传的参数不会在浏览器上面显示，刷新不会存在
children属性，实现路由嵌套

{
      path: '/parent',
      name: 'parent',
      component: parent,
      children:[{
        path: '/contentArea_1',
        name: 'contentArea_1',
        component: contentArea_1
      },
      {
        path: '/contentArea_2',
        name: 'contentArea_2',
        component: contentArea_2
      },
      {
        path: '/contentArea_3',
        name: 'contentArea_3',
        component: contentArea_3
      },

在页面内引入子组件

组件传值

父传子：

在父组件定义一个变量logo，在data声明demo，然后在子组件用props接收，用插值表达式输出
在这里插入图片描述

子传父：

在子组件定义一个事件，然后在事件内写传值方法，接着在父组件用定义的transferUser来接收值
在这里插入图片描述

bus：

https://www.cnblogs.com/yanwuming/p/10512905.html

监视 watch

可以监视data中制定数据的变化，然后出发watch中对应的function处理函数
监视路由的变化 this.$touter.path
在这里插入图片描述

计算 computed

在computed中可以定义一些属性，这些属性叫做计算属性，计算属性的本质就是一个方法，只不过，我们在使用的时候，是把它们的名称直接当做属性来使用，并不会把计算属性当做方法去调用
注意：

计算属性在引用的时候一定不要加()去调用，直接把它当做普通属性去使用就好
只要计算属性，这个function内部所用到的任何data中的数据发生率变化，就会立即重新计算，这个计算属性的值
计算属性的求值结果会被缓存起来，方便下次直接使用，如果计算方法中所有的数据都没有发生变化，则不会对计算属性求值

注意

1：在vue的实例中，想要获取data上的数据，或者methods中的方法，必须通过 this. 数据或 this .方法来进行调用

2： vue实例会监听自己身上的data所有数据的改变，只要数据一发生变化，就会自动把最新的数据从data上同步到页面
【好处：程序员只需要关心数据，不需要考虑如何重新渲染页面】

3： watch、computed、methods的对比
computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，主要当做属性来使用；
methods 方法表示一个具体的操作，主要书写业务逻辑；
watch 一个对象，键是需要监视的表达式，值是对应的回调函数，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看做是上面两个的结合体

创建一个新的vue的步骤

引入node_modules：npm i
改变config-index.js的路由
删除HelloWorld.vue和App.vue中多余的部分
引入element ：1.安装：npm i element-ui -S
2.main.js里：import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;
Vue.use(ElementUI);
引入3.0.7版本：npm i vue-router@3.0 -S
启动：npm run dev

yu_wen_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue个人学习笔记

属性data：定义数据methods：定义方法指令v-cloak：能解决插值表达式（即{{message}}）表达式闪烁问题v-text：默认v-text是没有闪烁问题的；会覆盖元素中原本的内容，但是插值表达式只会替换自己的占位符，不会把整个元素的内容清空v-html：编译变量的html的代码v-bind：是vue中提供的用于绑定属性的指令；可以被简写为冒号（:）；可以写...
复制链接

扫一扫