vue基础知识总结

本文介绍了Vue.js中的关键特性,包括单向和双向数据绑定(v-bind和v-model),方法(methods),修饰符,条件渲染(v-if和v-show)以及列表渲染(v-for)。此外,还详细阐述了组件的使用,局部组件和全局组件的定义,以及Vue实例的生命周期。最后,讨论了路由在Vue.js中的应用,展示了如何实现页面间的导航和组件渲染。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、单向绑定数据v-bind

你看到的 v-bind 特性被称为指令。指令带有前缀 v-

除了使用插值表达式{{}}进行数据渲染,也可以使用 v-bind指令,它的简写的形式就是一个冒号(:)

2、双向绑定数据v-model

data: {

searchMap:{

keyWord: '斌'

}

}

<!-- v-bind:value只能进行单向的数据渲染 -->

<input type="text" v-bind:value="searchMap.keyWord">

<!-- v-model 可以进行双向的数据绑定 -->

<input type="text" v-model="searchMap.keyWord">

<p>您要查询的是:{{searchMap.keyWord}}</p>

3、方法methods

4、修饰符

修饰符 (Modifiers) 是以半角句号(.)指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。

例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():

即阻止事件原本的默认行为

5、条件渲染

v-if:条件指令

<input type="checkbox" v-model="ok">同意许可协议

<!-- v:if条件指令:还有v-else、v-else-if 切换开销大 -->

<h1 v-if="ok">if:Lorem ipsum dolor sit amet.</h1>

<h1 v-else>no</h1>

v-show:条件指令

使用v-show完成和上面相同的功能

<!-- v:show 条件指令 初始渲染开销大 -->

<h1 v-show="ok">show:Lorem ipsum dolor sit amet.</h1>

<h1 v-show="!ok">no</h1>

v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

6、列表渲染

v-for:列表循环指令

例1:简单的列表渲染

<!-- 1、简单的列表渲染 -->

<ul>

<li v-for="n in 10">{{ n }} </li>

</ul>

<ul>

<!-- 如果想获取索引,则使用index关键字,注意,圆括号中的index必须放在后面 -->

<li v-for="(n, index) in 5">{{ n }} - {{ index }} </li>

</ul>

例2:遍历数据列表

data: {

userList: [

{ id: 1, username: 'helen', age: 18 },

{ id: 2, username: 'peter', age: 28 },

{ id: 3, username: 'andy', age: 38 }

]

}

<!-- 2、遍历数据列表 -->

<table border="1">

<!-- <tr v-for="item in userList"></tr> -->

<tr v-for="(item, index) in userList">

<td>{{index}}</td>

<td>{{item.id}}</td>

<td>{{item.username}}</td>

<td>{{item.age}}</td>

</tr>

</table>

五、组件

组件(Component)是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素,封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:

1、局部组件

var app = new Vue({

el: '#app',

// 定义局部组件,这里可以定义多个局部组件

components: {

//组件的名字

'Navbar': {

//组件的内容

template: '<ul><li>首页</li><li>学员管理</li></ul>'

}

}

})

使用组件

<divid="app"><Navbar></Navbar></div>

定义全局组件:components/Navbar.js

// 定义全局组件

Vue.component('Navbar', {

template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'

})

<div id="app">

<Navbar></Navbar>

</div>

<script src="vue.min.js"></script>

<script src="components/Navbar.js"></script>

<script>

var app = new Vue({

el: '#app'

})

</script>

六、Vue生命周期

  1. Vue实例生命周期流程图

七、路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。

Vue.js 路由需要载入 vue-router 库

1、引入js

<script src="vue.min.js"></script>

<script src="vue-router.min.js"></script>

2、编写html

<div id="app">

<h1>Hello App!</h1>

<p>

<!-- 使用 router-link 组件来导航. -->

<!-- 通过传入 `to` 属性指定链接. -->

<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->

<router-link to="/">首页</router-link>

<router-link to="/student">会员管理</router-link>

<router-link to="/teacher">讲师管理</router-link>

</p>

<!-- 路由出口 -->

<!-- 路由匹配到的组件将渲染在这里 -->

<router-view></router-view>

</div>

3、编写js

<script>

// 1. 定义(路由)组件。

// 可以从其他文件 import 进来

const Welcome = { template: '<div>欢迎</div>' }

const Student = { template: '<div>student list</div>' }

const Teacher = { template: '<div>teacher list</div>' }

// 2. 定义路由

// 每个路由应该映射一个组件。

const routes = [

{ path: '/', redirect: '/welcome' }, //设置默认指向的路径

{ path: '/welcome', component: Welcome },

{ path: '/student', component: Student },

{ path: '/teacher', component: Teacher }

]

// 3. 创建 router 实例,然后传 `routes` 配置

const router = new VueRouter({

routes // (缩写)相当于 routes: routes

})

// 4. 创建和挂载根实例。

// 从而让整个应用都有路由功能

const app = new Vue({

el: '#app',

router

})

// 现在,应用已经启动了!

</script>

### Vue.js 基础知识总结与归纳 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架,其核心库专注于视图层,能够轻松集成到现有项目中[^3]。以下是关于 Vue.js基础知识总结归纳: #### 1. 核心概念 - **MVVM 模式**:Vue 实现了 MVVM(Model-View-ViewModel)模式,开发者通过绑定数据模型(Model)视图(View),使得数据变化时视图会自动更新。 - **模板语法**:Vue 使用双大括号 `{{ }}` 表达式将数据插入到 HTML 中[^2]。 - **指令**:Vue 提供了一些内置指令(如 `v-if`、`v-for`、`v-bind` `v-on`),用于操作 DOM[^2]。 #### 2. 生命周期 Vue 实例从创建到销毁的过程称为生命周期。以下是关键的生命周期钩子: - `beforeCreate`:实例初始化完成,但尚未挂载数据或事件监听器。 - `created`:实例已完成数据观测,但尚未挂载到 DOM。 - `beforeMount`:模板已编译,但尚未渲染到页面上。 - `mounted`:实例已被挂载到 DOM 上,可以访问真实 DOM[^5]。 - `beforeUpdate`:当数据发生变化时触发,此时 DOM 尚未更新。 - `updated`:DOM 已经根据最新的数据完成更新[^5]。 - `beforeDestroy` `destroyed`:实例即将销毁或已经销毁。 #### 3. 数据绑定 - **单向绑定**:通过 `v-bind` 指令实现父组件向子组件传递数据。 - **双向绑定**:通过 `v-model` 指令实现表单输入与数据之间的同步[^2]。 #### 4. 组件化开发 - **局部组件**:在 `components` 属性中定义组件,并在模板中使用。 - **全局组件**:通过 `Vue.component` 方法注册全局组件。 - **Props Events**:`props` 用于父组件向子组件传递数据,`$emit` 用于子组件向父组件发送事件。 #### 5. 路由管理 Vue Router 是官方提供的路由管理器,用于构建单页面应用中的路由系统。通过配置路由规则,可以实现页面间的切换参数传递。 #### 6. 状态管理 Vuex 是 Vue 官方的状态管理库,适用于管理复杂的应用状态。它提供了集中式的存储机制,使组件间共享状态变得更加高效。 #### 7. 过渡效果与动画 Vue 提供了丰富的过渡效果支持,包括 CSS 动画、JavaScript 钩子函数等,用于增强用户体验。 #### 8. 插件系统 Vue 具有强大的插件系统,可以通过安装插件扩展核心功能。例如,`vue-router` `vuex` 都是以插件形式提供的。 #### 示例代码 以下是一个简单的 Vue 实例示例: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue Example</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> </head> <body> <div id="app"> {{ message }} </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); </script> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值