2024年前端最新【Java系列笔记016】Vue框架简单入门（完结），2024年最新微信小程序 跳转页面

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

这些表达式会在所属的Vue实例的数据作用域下作为javaScript被解析。有个限制就是，每个绑定都只能包含**单个表达式**，所以下面的例子都不会生效

{{var a=1}}

{{if (ok) {return message}}}

#### 第二节：VueJs常用系统指令


##### 2.1 v-on


###### 作用


可以用`v-on`指令监听DOM事件，并在触发时运行一些javaScript代码


###### 简写


`@事件名称`就是 `v-on:事件名称`的简写


`@click`就等同于`v-on:click`


###### v-on:click

{{message}} vue的onclick

###### v-on:keydown

---

###### v-on:mouseover

这是一个文件域

---

##### 2.2 vue中的事件修饰符


`Vue.js`为`v-on`提供了事件修饰符来处理DOM事件细节，如：`event.preventDefault()`或`event.stopPropagation()`


Vue.js通过由点(.)表示的指令后缀来调用修饰符


* `.stop`：停止事件的传播，相当于`.stopPropagation()`
* `.prevent`：阻止默认事件起作用，相当于`.preventDefault()`
* `capture`
* `.self`
* `once`

##### 2.3 vue中的按键修饰符


vue允许为v-on在监听键盘事件时添加按键修饰符


全部的按键别名：


* `.enter`
* `.tab`
* `delete`：捕获（“删除”和“退格”键）
* `.esc`
* `.space`
* `up`
* `.down`
* `.left`
* `.right`
* `ctrl`
* `alt`
* `.shift`
* `.meta`

##### 2.4 v-text和v-html

##### 2.5 v-bind


###### 简化


直接使用:（冒号）

传智播客 黑马程序员

##### 2.6 v-model


取值，获取json（有点像对象的形式）的值

用户名：
密码：

##### 2.7 v-for


###### 遍历数组

• {{item}}={{index}}

1. {{key}}={{value}}:{{index}}

###### 遍历对象

	</table>
</div>

序号	编号	名称	价格
{{index+1}}	{{produce.id}}	{{produce.name}}	{{produce.price}}

##### 2.8 v-if与v-show


v-if是根据表达式的值来决定是否渲染元素


v-show是根据表达式的值来切换元素的display css属性



### 最后

**前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档**

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/b629a8dff64f85fb297bf89197250493.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/7724ac36b72ce81b0d18b76aae4d4372.webp?x-oss-process=image/format,png)



ce: 6000},
				{id:3,name:"谢特",price: 7000}
			]
		}
	})
</script>

2.8 v-if与v-show

v-if是根据表达式的值来决定是否渲染元素

v-show是根据表达式的值来切换元素的display css属性

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-s4S11POz-1715601925252)]

[外链图片转存中…(img-3kaXCKkq-1715601925252)]