Vue 基础

最新推荐文章于 2022-12-23 14:10:54 发布

hello world65536

最新推荐文章于 2022-12-23 14:10:54 发布

阅读量332

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_43176019/article/details/109388334

版权

本文详细介绍了Vue的基础知识，包括methods、插值表达式、指令（如v-on、v-for等）、过滤器、ref操作DOM、全局和局部自定义指令、计算属性、组件通信、JSON-server的使用、RESTful接口规则和axios的运用。还深入探讨了Vue的watch、组件（包括父子、兄弟、隔代组件通信）以及路由的实现，包括vue-router的动态路由和嵌套路由等高级概念。

摘要由CSDN通过智能技术生成

methods

可以在试图中通过 { {}} 调用方法
可以通过 vm 对象.方法名去调方法 vm.fn1()
方法种得 this 指的是当前 Vue 实例对象。
不推荐写箭头函数，因为箭头函数 this 指向不是 vm 实例
可以通过指令调用方法 @click=“fn1()”

插值表达式

作用：将绑定的数据实时显示出来，通过任何方式修改所绑定的数据，所显示的数据都会被实时替换。
注意：{ { }} var = 1 if for 都不能写在插值表达式中。

指令

Directives 是带有 v- 前缀的特殊特性
特性的预期值是单个 JS 表达式 v-for 是例外
职责是当表达式的值改变时，将其产生的连带影响，响应式作用域 DOM
是 Vue 框架提供的语法
扩展了 HTML 的能力
减少 DOM 操作

v-on

绑定 DOM 事件，在事件触发时执行 JS 代码
语法 @事件名.修饰符 = ”methods 中的方法名“
注意 $event 可以传形参

v-for

v-for 列表渲染
语法 v-for = ”item in 容器“
写法1 item 指的是数组中每个元素的值 item in 数组
写法2 （item, index） item 指的是数组中每个元素的值 index 指每个元素的下标
（item, index）in 数组

// html
<ul>
	<li v-for = "(item, index) in list">{
   {
    item }} -- {
   {
    index }}</li>
<ul>

// JS
var vm = new Vue({
   
	el: 'app',
	data: {
   
			list:['a', 'b', 'c']
		}