Vue2.0 基础笔记:MVVM设计模式和组件化思想
需积分: 5 144 浏览量
更新于2024-02-02
收藏 445KB DOCX 举报
<div id="app"></div>", data:{ message:"Hello Vue!" } }); 2.2 模板语法模板语法是一种特殊的 HTML 语法,用来将模板中的数据渲染到页面上,在模板中使用双大括号{{}}包含数据,被包含的数据会被渲染到页面上 <div id="app"> {{ message }} </div> 2.3 绑定属性和事件可以使用 v-bind 指令绑定 HTML 元素的属性,使用 v-on 指令绑定 HTML 元素的事件 <div id="app"> <img v-bind:src="imgSrc" /> <button v-on:click="handleClick">Click me</button> </div> 3.vue 组件的使用3.1 创建组件Vue.component('my-component', { template:'<div>这是一个自定义组件</div>'}); 3.2 组件的复用<my-component></my-component> 3.3 组件的组合<my-component><my-component></my-component><my-component></my-component> 4.生命周期vue 实例有一个完整的生命周期,也就是从初始化、编译、创建 DOM、更新、渲染、销毁等一系列过程,这些过程称为 vue 的生命周期 created: function() {//实例创建后执行}, mounted: function(){//实例挂载后执行} updated: function(){//数据更新后执行} destroyed: function(){//实例销毁后执行} 5.vue 路由vue-router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。 使用 vue-router 可以方便地实现页面间的跳转、参数传递等功能 var router = new VueRouter({ routes: [//配置路由需要使用 routes 配置项,其中 routes 是一个数组}, {path: '/', component: Home},//每个路由映射一个组件,一个路由一般映射一个组件,其中 component 是通过 Vue.component() 定义的 {path:'/about', component: About} ] }) 6.vue 状态管理Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态只能按照一定的方式进行修改。Vuex 集成到 Vue.js 生态中,是为了能更好地处理 Vue.js 应用程序中的组件之间的关系。 7.vue 的 ajax请求vue-resource 是 Vue.js 官方提供的用于处理 Web 请求和处理响应的插件,它提供了一系列的组件用来处理 Web 请求和响应。 可以使用 vue-resource 发送 get、post 请求 Vue.http.get('/api/user').then((res) => { console.log(res.data); }, (res) => { console.log(res.status); });"
203 浏览量
239 浏览量
2020-08-30 上传
2021-03-16 上传
101 浏览量
210 浏览量
哒哒哒Q
- 粉丝: 43
- 资源: 4