Vue2.0 基础笔记:MVVM设计模式和组件化思想

需积分: 5 0 下载量 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);   });"