Vue2 学习笔记1

【Vue2 学习笔记1】的更多相关文章

什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,Vue语法也是可以用于进行手机App开发的,需要借助于Weex) Vue.js 是前端的主流框架之一,和Angular.js.React.js 一起,并成为前端三大主流框架! Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.(Vue有配套的第三方类库,可以整合起来做大型项目的开发) 为什么要学习流行框架…

Vue2 学习笔记3

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

vue2 学习笔记2

文中例子代码请参考github 品牌管理案例添加新品牌 <body> <div id="app"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">添加品牌</h3> </div> <div class="…

Vue2学习笔记:键盘事件

Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="vue.js"></script> <script type="text/javascript"> window.o…

Vue2 学习笔记5

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

Vue2 学习笔记4

文中例子代码请参考github 父组件向子组件传值组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 <script> // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: '这是父组件中的消息' }, components: { son: { template: '<h1>这是子组件 --- {{finfo}}</h1>', props: ['finfo']…

Vue2学习笔记:计算属性（computed）

参考:https://www.cnblogs.com/zycbloger/p/6428907.html…

Vue2学习笔记:组件（Component）

组件组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 js 特性扩展. 1. 全局 Vue.component(tagName, options) <!DOCTYPE html> <html> <head> <title></title> <meta…

Vue2学习笔记:过渡效果css

过渡效果 Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加 entering/leaving 过渡 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="vue.js"></script> <style type=&q…

Vue2学习笔记:实例生命周期

实例生命周期每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM .在这个过程中,实例也会调用一些生命周期钩子 ,这就给我们提供了执行自定义逻辑的机会.例如,created 这个钩子在实例被创建之后被调用: <!DOCTYPE html> <html> <head> <title></title> <meta ch…