Lee Chen的博客

原创 Vue教程19：Vue 2.0组件开发模式

示例代码请访问我的GitHub：https://github.com/chencl1986/vue-tutorial该节教程代码可通过npm start运行devServer，在http://localhost:8080/查看效果代码示例：/lesson17/src/components/parent.js，/lesson17/src/components/child.js...

原创 Vue教程18：组件间通信之二：通过事件通信

示例代码请访问我的GitHub：https://github.com/chencl1986/vue-tutorial该节教程代码可通过npm start运行devServer，在http://localhost:8080/查看效果通过$emit触发事件，通过$on接收事件，实现通信代码示例：/lesson17/src/components/parent.js，/lesson17/sr...

原创 Vue教程17：组件间通信之一：通过组件实例通信

示例代码请访问我的GitHub：https://github.com/chencl1986/vue-tutorial该节教程代码可通过npm start运行devServer，在http://localhost:8080/查看效果

原创 Vue教程16：Vue实例生命周期详解

原创 Vue教程15：Vue组件

示例代码请访问我的GitHub：https://github.com/chencl1986/vue-tutorial该节教程代码可通过npm start运行devServer，在http://localhost:8080/查看效果注册Vue组件示例代码：/lesson15/src/cmp1.js通过Vue.component可以注册一个组件，再将其导出到入口vm.js即可。im...

原创 Vue教程14：配置子路由

示例代码请访问我的GitHub：https://github.com/chencl1986/vue-tutorial添加子路由在/src/components/news.js文件中配置子路由，之后将子路由配置赋值给’/news’路由的children属性中。编译后访问路径’/news/1’可以看到效果。子路由配置：代码示例：/lesson14/src/components/news....

原创 Vue教程13：基于Webpack构建项目

创建Vue项目的文件夹结构├── package.json├── webpack.config.js # Webpack配置文件├── index.html # 项目HTML文件├── css # 项目样式文件夹├── dest # 项目打包后输出文件夹├── src # 项目开发文件夹│ ├── vm.js # 项目入口文件│ ├── router.js # 路由...

原创 Vue教程12：多视图

示例代码请访问我的GitHub：https://github.com/chencl1986/vue-tutorial多视图代码示例：/lesson12/01. vue-router 多视图.html在之前的例子中，路由的组件配置都是用component，如果改为components，就可以支持在一个页面中显示多视图。在router-view中添加name属性，该视图会显示对应comp...

原创 Vue教程11：利用JS实现路由跳转，路由监听和导航守卫

示例代码请访问我的GitHub：https://github.com/chencl1986/vue-tutorial利用JS实现路由跳转，利用watch实现路由监视代码示例：/lesson10 vue-router/01. vue-router 最基本的路由.html使用this.$router.push方法可以实现路由跳转，this.$router.replace实现替换当前路由。...

原创 Vue教程10：使用vue-router实现路由和传参

示例代码请访问我的GitHub：https://github.com/chencl1986/vue-tutorial实现一个简单路由代码示例：/lesson10 vue-router/01. vue-router 最基本的路由.html在实例化VueRouter时，配置一个路由表，每个路由中配置相应的组件模板，就可以通过vue-router.html#/index地址访问页面时，在HT...

原创 Vue教程09：双向绑定对象中属性原理

以06课双向绑定为基础实现双向绑定对象属性代码参考/lesson09/01. watch监听对象属性.html在06课中，实现了对数据的监听，当然Proxy对象同时也可以监听对象类型的数据，我们需要做的只是将相应的变化渲染到页面中。首先，我们先将_data中的值修改为// 用_data保存数据let _data = { userInfo: { name: 'lee', ...

原创 Vue教程08：Computed计算属性、Watch监听属性

Computed计算属性代码示例：/lesson08/01. Computed计算属性.html计算属性类似于方法，用于输出数据的计算结果，在数据变化时，它会同步更新，计算属性不可与data中的属性重名。相对于方法，它的优势是当它的依赖变化时，才会重新进行计算，也就是说它拥有缓存，而方法在每次render的时候都会计算，因此computed的性能较高。计算属性除了设置为方法外，还可以用...

原创 Vue教程06：数据同步、双向绑定原理

利用Proxy实现数据同步代码示例：/lesson06/01. 数据同步利用Proxy拦截可以对数据的修改，得知数据被修改时，将模板中相应属性的部分替换，就完成了简单的数据同步功能。const el = document.querySelector('#app')// 获取标签内容作为页面模板let template = el.innerHTML// _data为初始化let...

原创 Vue教程05：v-pre、v-cloak指令

v-pre指令代码示例：/lesson05/01. v-pre指令.htmlv-pre可以用来阻止预编译，有v-pre指令的标签内部的内容不会被编译，会原样输出。如果已知页面内部有大段内容无需编译，使用v-pre指令阻止编译可以提高性能，同时可以防止页面内有可能导致Vue编译出错的代码存在。JavaScript：let vm = new Vue({ el: '#app', // ...

原创 Vue教程04：v-for指令

v-for循环数组、对象代码参考：/lesson04/01. v-for指令.html使用v-for="(item, index) in items"就可以将数组或对象中的数据循环输出。JavaScript：let vm = new Vue({ el: '#app', // 根元素或挂载点。 data: { users: [ { name: 'lee', p...

原创 Vue教程03：Vue事件、v-show、v-if指令

v-on指令代码参考：lesson03/01. v-on指令.html通过v-on指令添加事件，如v-on:click=“onClick(1)”，表示添加的是click事件，同时传入1作为参数。v-on:click="onClick(1)"也可以简写为@click=“onClick(1)”。JavaScript：let vm = new Vue({ el: '#app', // ...

原创 Vue教程02：v-model、v-text、v-html

v-model指令代码参考/lesson2/01. v-model指令.htmlv-model指令的作用是双向绑定数据，它只能用于输入组件，如input、textarea、select、radio等。需要注意的是，通过v-model绑定的数据都为字符串。实现一个简单的双向绑定。JavaScript：let vm = new Vue({ el: '#app', // 根元素或挂载...

原创 Vue教程01：Vue表达式与v-bind指令

标题

原创 Vue教程00：MVC、MVP、MVVM模式的区别，服务端渲染与客户端渲染的区别

现代与传统开发模式的区别现代开发模式传统开发模式Vue、React、AngularjQuery只需花费20%时间在视图层需花费80%时间在视图层数据层与视图层自动绑定数据与视图不分离MVC模式介绍MVC为Model（模型，同时也是数据）、View（视图）、Controller（控制）的缩写，它代表程序分为三层：最上层是View（视...