vue笔记

最新推荐文章于 2022-07-18 09:49:42 发布

VIP文章兔子零-A酱

最新推荐文章于 2022-07-18 09:49:42 发布

阅读量469

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_43764814/article/details/87019681

版权

vue day01

vue 简介

简单易用, 上手快
热度最高

对比jQuery的区别

以前使用jQuery结合模板引擎(art-template), 每一次进行页面渲染都需要将整个节点渲染, 而如果使用vue进行渲染, 只会将改变的内容渲染一次, 大大提高了用户体验!!!
jQuery只是一个JavaScript库, 对项目的侵入性较小, 开发过程中可以很轻易的切换成其他库或框架来继续开发
jQuery一直以来最强大的功能就是选择器和便捷的DOM操作, 处理了浏览器兼容性问题
Vue等MVVM思想设计的框架, 都有数据绑定的特点, 当Model层的数据更新, 会通过VM层自动同步刷新到View层, 从此程序员只需要关注业务逻辑, 而不需要操作DOM
Vue和Angular都提供了双向数据绑定, 除了可以从Model同步到View层, 还可以在View层数据发生变化时反向同步到Model层

Vue的基本使用

引入vue.js文件
```
 <script src="./lib/vue.js"></script>
```
引入vue.js后, 全局作用域中就有一个 Vue 的构造函数, 通过此构造函数创建Vue实例

新创建出来的实例对象, 就是MVVM中的VM层
```
 let vm = new Vue()
```

在VM实例创建时, 可以传入一个配置对象

html结构:

 ...
 <body>
 	<div id="app"></div>
 </body>
 ...

js代码:

 let vm = new Vue({
 	el: '#app', // vm实例托管的区域
 	data: {
 		test: 'Hello Frontend 23!!!'
 	}
 })

当创建了VM实例后, 在VM实例托管的范围内, 就可以使用模板语法引用data中的数据(只要data中的数据修改了, 页面会自动同步)

html结构:
```
 <div id="app">
 	{
    { test }}
 </div>
```

VSCode编写Vue的插件

Vetur
Vue 2 Snippets

Vue的指令

在Vue中, 只要是以 v- 开头的属性, 都是指令

v-cloak

为了解决Vue模板渲染时的闪烁问题

闪烁:

当标签内使用小胡子{ {}}语法进行模板渲染时, 由于Vue文件在HTML结构之后才引入, 会导致{ {}}模板代码在HTML中短暂停留, 然后再渲染成真正的数据, 用户体验不够好

使用v-cloak指令结合CSS将元素默认隐藏起来, 当数据变化时进行渲染, 会自动显示, 无需手动干预

其他解决方案: 不要在HTML后面引入vue文件, 应该在head区域引入

插值表达式

同art-template, 将data中的数据渲染到{ {}}中, { {}} 内部写的是表达式(可以写js代码的地方)

{
  { test }}

注意: 在Vue中插值表达式只能用于元素内部文本的渲染, 不能用于属性渲染

v-text

将表达式的结果渲染到标签的 innerText 属性上

后面的内容会拼接到test数据后面

<p>{
  { test }}后面的内容</p>

后面的内容会被覆盖, 等同于 p.innerText = test

<p v-text="test">后面的内容</p>

v-html

用法同v-text, 区别在于 v-html 可以解析带HTML标签的结构, v-text 会将HTML解析成纯文本进行渲染

<p v-html="test"></p>

v-bind

Vue中提供用于属性绑定的指令

<input v-bind:value="val + 'aaa'" type="text">

由于v-bind太长了, 所以Vue提供了简写 :

v-bind支持非标准属性的绑定

<input :aaa="val" :value="val + 'aaa'" type="text">

v-on

Vue中提供用于事件绑定的指令

<input id="inp" :value="msg" v-on:keyup="keydownHandler" type="text">

data与methods的代码:

data: {
	msg: '你好啊!'
},
methods: {
	keydownHandler() {
	  // console.log('我被调用了!')
	  // console.log(document.querySelector('#inp').value)
	  this.msg = document.querySelector('#inp').value
	}
}

注意: 由于还没有学习到双向数据绑定的指令, 所以暂时操作了一下DOM, 后期实现该功能不需要操作DOM

v-on的简写: @

<input id="inp" :value="msg" @keyup="keydownHandler" type="text">

事件修饰符

Vue中为了方便开发人员处理一些简单的逻辑, 例如阻止冒泡或者阻止浏览器默认行为等操作

特意提供了一系列事件修饰符完成:

.stop
.prevent
.capture
.self
.once

.passive

 <!-- 阻止单击事件继续传播 -->
 <a v-on:click.stop="doThis"></a>
 
 <!-- 提交事件不再重载页面 -->
 <form v-on:submit.prevent="onSubmit"></form>
 
 <!-- 修饰符可以串联 -->
 <a v-on:click.stop.prevent="doThat"></a>
 
 <!-- 只有修饰符 -->
 <form v-on:submit.prevent></form>
 
 <!-- 添加事件监听器时使用事件捕获模式 -->
 <!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
 <div v-on:click.capture="doThis">...</div>
 
 <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
 <!-- 即事件不是从内部元素触发的 -->
 <div v-on:click.self="doThat">...</div>

github提交代码时报错解决方案

报错信息:

permisstion denied

access denied

检查公钥是否配置正确
检查当前仓库关联的远端仓库是否使用的 ssh 协议

查看当前仓库的关联详细信息
```
 git remote --verbose
```
将本地的仓库关联到远端的 [email protected]:TianchengLee/test.git
```
 git remote add origin [email protected]:TianchengLee/test.git
```
如果之前关联的是https, 非ssh, 可以删除

删除关联
```
 git remote remove origin
```
重新添加
```
 git remote add origin [email protected]:TianchengLee/test.git
```

vue day02

指令

v-model

Vue提供的双向数据绑定的指令, 在Vue中也只有唯一这一个属性可以提供双向数据绑定

<!-- v-bind只能实现单向绑定 -->
<!-- <input :aaa="msg" :value="msg" type="text"> -->

<!-- 为什么v-model不需要手动指定要绑定的属性呢??? -->
<!-- 由于用户与input交互时, 修改的都是value属性的值, 所以v-model只能绑定value属性 -->
<!-- v-model 除了可以从M层绑定到V层, 还可以在用户修改value属性时 自动同步回M层 -->
<input v-model="msg" type="text">

v-for

在Vue中可以迭代的类型有:

数组

对象

数字

迭代数组

数组中有多少个元素, 就会循环创建多少个p

item表示数组中的每一项
```
 <p v-for="item in list">{
    { item }}</p>
```
index表示数组中的每一项对应的索引
```
 <p v-for="(item, index) in list">{
    { item }}</p>
```

迭代对象

对象中有多少个属性, 就会循环创建多少个p

 <p v-for="(value, key) in obj">{
    { key }} --- {
    { value }}</p>

迭代数字

迭代的数字有多大, 就会循环创建多少个p

注意: v-for迭代数字时, num从1开始, 到10结束
```
 <p v-for="num in 10">{
    { num }}</p>
```

注意事项: v-for中的key属性, 在v-for循环渲染列表后, 如果每个单项中都有状态类型的表单元素, 例如: checkbox, 此时数据顺序发生变化后, 默认不会记录每个单项的状态, 会导致checkbox勾选状态出现混乱

v-for的原理

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。

key的作用就是将当前的数据与当前对应的DOM元素进行绑定, 以后如果数据顺序发生变化, Vue会在内部重新排序然后渲染

如果实在无法理解原理, 那就记住以后只要用v-for, 都使用 :key, 给key绑定一个唯一标识, 可以是 number/string

v-if和v-show

v-if和v-show都是用于控制元素的显示隐藏的

区别在于: v-if有较高的切换性能消耗, v-show有较高的初始渲染消耗

因为, v-if如果表达式是false, 元素压根不会创建, 而v-show如果表达式结果是false, 元素也会创建

最低0.47元/天解锁文章

兔子零-A酱

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue笔记

vue day01vue 简介简单易用, 上手快热度最高对比jQuery的区别以前使用jQuery结合模板引擎(art-template), 每一次进行页面渲染都需要将整个节点渲染, 而如果使用vue进行渲染, 只会将改变的内容渲染一次, 大大提高了用户体验!!!jQuery只是一个JavaScript库, 对项目的侵入性较小, 开发过程中可以很轻易的切换成其他库或框架来继...
复制链接

扫一扫