Vue学习笔记【11】——Vue调试工具vue-devtools的安装步骤和使用

【Vue学习笔记【11】——Vue调试工具vue-devtools的安装步骤和使用】的更多相关文章

vue学习笔记（四）——Vue实例以及生命周期

1.Vue实例API 1.构造器(实例化) var vm = new Vue({ //选项 |-------DOM(3) | |-------el (提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标.) | |-------template (一个字符串模板作为 Vue 实例的标识使用.模板将会替换挂载的元素.挂载元素的内容都将被忽略,除非模板的内容有分发 slot.) | |-------render (字符串模板的代替方案,允许你发挥 JavaScript…

Vue学习笔记一：初识Vue

目录什么是Vue? 为什么要学习前端框架? MVC,MVP 和 MVVM 最简单的入门小案例下载Vue.js 新建文件结构写一个html 运行可笑的小报错 Vue和MVVM 什么是Vue? Vue就是一个渐进式的JavaScript框架. 为什么要学习前端框架? 我们要做前端,不可避免的要写HTML,要写JavaScript,但是自己一个一个打多麻烦啊,于是,前端之路有了以下的发展变化. 原生JavaScripts:各个浏览器的兼容性无法保证 Jquery 前端引擎模板:表格1000条数…

Vue学习笔记【23】——Vue组件（组件的定义）

定义Vue组件什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可: 组件化和模块化的不同: 模块化: 是从代码逻辑的角度进行划分的:方便代码分层开发,保证每个功能模块的职能单一: 组件化: 是从UI界面的角度进行划分的:前端的组件化,方便UI组件的重用: 全局组件定义的三种方式使用 Vue.extend 配合 Vue.component 方法: var login = Vue.ext…

Vue学习笔记【4】——Vue指令之v-on

Vue指令之v-on v-on指令介绍直接使用指令v-on 使用简化指令@ 绑定事件代码:@事件名="methods中的方法名称" <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in…

vue学习笔记（六） ----- vue组件

一.模块化与组件化模块化的定义模块化在Node中是一个规范,定义一些模块的相关的规则,从代码角度上来说,方便做区别,如果不使用模块化,写在js文件中不利于后期维护和扩展,从代码的层面上就把相关的功能脱离出来,所以模块化从从代码的角度触发,分析项目,把项目中一些功能类型的代码,单独抽离为一个个的模块,那么为了保证大家以相同的方式去封装模块,于是我们就创造了CommentJS规范模块化的优点在我们项目中,如果需要是实现相同的功能,就不需要再重写,所以模块化从一定程度上提高我们的开发效率,有一…

Vue学习笔记【31】——Vue路由（computed计算属性的使用）

computed计算属性的使用默认只有getter的计算属性: <div id="app"> <input type="text" v-model="firstName"> + <input type="text" v-model="lastName"> = <span>{{fullName}}</span> </di…

Vue学习笔记【30】——Vue路由（watch属性的使用）

考虑一个问题:想要实现名和姓两个文本框的内容改变,则全名的文本框中的值也跟着改变:(用以前的知识如何实现???) 监听data中属性的改变: <div id="app"> <input type="text" v-model="firstName"> + <input type="text" v-model="lastName"> = <…

Vue学习笔记【29】——Vue路由（命名视图实现经典布局）

命名视图实现经典布局标签代码结构: <div id="app"> <router-view></router-view> <div class="content"> <router-view name="a"></router-view> <router-view name="b"></router-v…

Vue学习笔记【28】——Vue路由（使用 children 属性实现路由嵌套）

使用 children 属性实现路由嵌套 <div id="app"> <router-link to="/account">Account</router-link> <router-view></router-view> </div> <script> // 父路由中的组件 const account = Vue.extend({ …

Vue学习笔记【27】——Vue路由（设置路由）

设置路由高亮 css: .router-link-active, /* vue-router*/ .myactive { color: red; font-weight: 800; font-style: italic; font-size: 80px; text-decoration: underline; } js: var routerObj = new VueRouter({ // route…