【Vue自学】的更多相关文章

vue 自学笔记记录

vue 自学笔记(一): 知识内容:  安装vue ,创建vue实例,安装第一个组件,单项数据流 https://www.cnblogs.com/baili-luoyun/p/10763163.html vue 自学笔记(二) 知识内容:实例的概念,属性和方法,页面如何绑定数据,声明周期函数,官方图解 https://www.cnblogs.com/baili-luoyun/p/10763551.html vue 自学笔记(三) 知识内容: 计算属性,侦听 https://www.cnblogs…

vue 自学项目笔记

感觉小青推荐的学习网课,  利用vue 仿制一个去哪网, 学习的东西很多, 在食用之前,需要先确保js 和css 过关 js https://www.bilibili.com/video/av30099487  140 集大礼包, 22小时 es6 https://www.bilibili.com/video/av47304735   台湾小姐姐的es 6   声音很好听  4 小时 阮一峰的 es 6 教程 http://es6.ruanyifeng.com/ css3+html  https…

vue自学入门-6（vue jsx）

目录: vue自学入门-1(Windows下搭建vue环境) vue自学入门-2(vue创建项目) vue自学入门-3(vue第一个例子) vue自学入门-4(vue slot) vue自学入门-5(vuex state) vue自学入门-6(vue jsx) vue自学入门-7(vue style scope) vue自学入门-8(vue slot-scope) vue组件视图可以通过模板,也可以通过jsx方式 1.删除HelloWorld<template>内容 -------------…

vue自学入门-4（vue slot）

vue自学入门-1(Windows下搭建vue环境) vue自学入门-2(vue创建项目) vue自学入门-3(vue第一个例子) vue自学入门-4(vue slot) vue自学入门-5(vuex state) vue自学入门-6(vue jsx) vue自学入门-7(vue style scope) vue自学入门-8(vue slot-scope) 好长时间没有用vue了,从新安装vue脚手架. 1.从新安装webpack cnpm install --save-dev webpack…

vue自学入门-5（vuex state）

vue自学入门-1(Windows下搭建vue环境) vue自学入门-2(vue创建项目) vue自学入门-3(vue第一个例子) vue自学入门-4(vue slot) vue自学入门-5(vuex state) vue自学入门-6(vue jsx) vue自学入门-7(vue style scope) vue自学入门-8(vue slot-scope) 同上一节,通过HelloWorld修改一个值,改变App.Vue中显示 实现目标 1.增加一个store文件夹,新建一个idex.js im…

vue自学入门-7（vue style scope）

vue自学入门-1(Windows下搭建vue环境) vue自学入门-2(vue创建项目) vue自学入门-3(vue第一个例子) vue自学入门-4(vue slot) vue自学入门-5(vuex state) vue自学入门-6(vue jsx) vue自学入门-7(vue style scope) vue自学入门-8(vue slot-scope) 通过在style 上加scope可以避免影响其它组件 修改app.vue .helloworld.vue style 代码如下 1.都不加s…

vue自学入门-8（vue slot-scope）

vue自学入门-1(Windows下搭建vue环境) vue自学入门-2(vue创建项目) vue自学入门-3(vue第一个例子) vue自学入门-4(vue slot) vue自学入门-5(vuex state) vue自学入门-6(vue jsx) vue自学入门-7(vue style scope) vue自学入门-8(vue slot-scope) 1.修改helloworld代码如下,绿色部分 2.修改App.Vue代码如下(user随便起,改成其它任意名称都行) <template>…

Vue自学

一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.Vue是框架而jQuery则是库. 1.2.AMD与CMD 在传统的非模块化JavaScript开发中有许多问题:命名冲突.文件依赖.跨环境共享模块.性能优化.职责单一.模块的版本管理.jQuery等前端库层出不穷,前端代码日益膨胀 AMD规范及其代表:RequireJS异步模块定义(Asynchronous Module Definition),它是依…

Vue自学笔记--项目的创建

一.项目的创建 1.必须要安装nodejs    2.搭建vue的开发环境 ,安装vue的脚手架工具   官方命令行工具        npm install --global vue-cli  /   cnpm install --global vue-cli         (此命令只需要执行一次)    3.创建项目   必须cd到对应的一个项目里面                   vue init webpack vue-demo01        cd  vue-demo01   …

vue 自学笔记(1)

从to do list  开始  一: 安装  1: 导入cdn <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> 二: 创建一个vue实例 在script中创建vue 对象 所有的 Vue 应用都是从创建一个实例开始的,它通过Vue函数创建 从这个实例创建后,Vue 框架就通过这个vm实例管理它可以管理的内容.但它管理的是哪一部分呢? 在 html 中,有一个 id 为…

vue 自学笔记(三) 计算属性与侦听器

一:计算属性 虽然在模板内使用表达式对属性进行处理十分便利,例如在小胡子语法里写number + 1实现对数据的简单处理,但若我们在其中加入大量的代码,使得逻辑变重,导致难以维护.例如下面的代码,并不是简单的逻辑处理,而是需要经过一段时间的推算后,才知道在 div 中展示的是怎么样的内容 可以在小胡子语法中直接书写简单js  Vue 建议我们在其中只做一些简单的运算即可,那么当给页面要绑定的属性需要大量逻辑处理的时候,我们建议使用计算属性 1:基础例子 创建了一个根节点,我们现在给其挂载实例 明…

vue 自学笔记(4): 样式绑定与条件渲染

一:对象绑定 Vue 对于页面的样式加载也有独特的方式,按照 Vue 提供的方式,我们可以轻松的控制它们的呈现. 假使我们要实现点击 div 变色 Vue 提供的样式方案的本质是对元素节点进行属性的绑定,由此我们可以获知它会采用v-bind指令去绑定属性,同时我们也能知道样式内容的定义也可以放在 data 中,以下是几个绑定样式的方案.     一:对象绑定   class 我们在 div 上绑定的属性是对象方式呈现的   1: 通过指令,给元素的 class 绑定了一个对象,这个对象的属性名在…

vue 自学笔记(5) 列表渲染

列表渲染 一:v-for 指令 当我们涉及到列表渲染数据的时候,不可能做一个重复的工作去不停的一个一个的渲染每一项列表.并且列表数据的表现,比如从后端请求过来的数据,不可能是一个一个的单独的 JSON 数据,通常会是一个数组或者对象. 针对这样的情景,Vue 提供了 v-for 指令使列表使我们可以根据一组数组的选项列表进行渲染.并且,我们只需要写一个列表元素作为模板就可以通过遍历属性的方式渲染出大量的列表内容. 当然,除了列表,也可以通过v-for重复渲染其他元素,这里我们使用v-for重复渲…

vue 自学笔记(6) axios的使用

前情提要:axios 的使用 axios是一个ajax 的包,主要在node.js 使用 axios 的官网 https://www.kancloud.cn/yunye/axios/234845 一:书写格式 二:在cli 中下载axios  三: 在主程序mian.js中 四:  注册使用的vue 五:在home.vue 中使用axiso 文件 模板层 js层 <script> export default { name: "home", data(){ return {…

vue 自学笔记(七) 组件细节问题

前情提要: 这里盘点一下,组件细节的问题 现在我们观察一些用框架开发的网页BiliBili.掘金,会发现很多部分都十分相似或者一模一样,我们甚至可以将其拆分归类.而事实上,页面的确是被一个个组件构成的,本章,我们就对组件的细节做一个细致的拆分. 一:组件的使用 组件的注册分为全局注册和局部注册,目前我们用全局注册做例子. 使用Vue.component()对 Vue 实例进行全局组件的注册.这里我们注册了一个叫 Row 的组件,本质是它的模板在template中定义.另外需要注意的是,与根实例 …

vue自学入门-2（vue创建项目）

本人也是刚学习VUE,边找资料,边学习,边给大家分享.1.创建项目 2.启动项目 3.注意上面和下面全部用cnpm…

vue自学笔记

  做前端也做了一段时间了,为了高薪,不能一直做网页不是~~,所以从今天开始整理vue的笔记 内容都是从网上搜集整合并且自己实践过了的,需要注意的点,也在后面标注了“注”   当然了,如果有什么问题的话希望能及时的告诉我以做修改 - -与君共勉 1.实例化 <script src="http://unpkg.com/vue"></script> <div id="app"> {{message}} </div> var…

vue自学小demo----前端

vue学习的小demo,实现简单的页面项目的增删 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue</title> <script src="./vue.js"> </script> <link rel="stylesheet" href="./bo…

VUE自学日志01-MVC和MVVM

一.需要了解的基础概念 Model(M)是指数据模型,泛指后端进行的各种业务逻辑处理和数据操控,主要围绕数据库系统展开.这里的难点主要在于需要和前端约定统一的接口规则. View(V)是视图层,也就是用户界面.前端主要由HTML和CSS来构成,为了更方便地展现ViewModel或者Model层的数据. ViewModel(VM)由前端开发人员组织生成和维护的视图数据层.在这一层,前端开发者从后端获取得到Model数据进行转换出来,做二次封装,以生成符合View层使用预期的视图数据模型.视图状态和…

VUE自学日志02-应用与组件实例

准备好了吗? 我们刚才简单介绍了 Vue 核心最基本的功能--本教程的其余部分将更加详细地涵盖这些功能以及其它高阶功能,所以请务必读完整个教程! 应用 & 组件实例 创建一个应用实例创建一个应用实例 每个 Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始的: const app = Vue.createApp({ /* 选项 */ }) 该应用实例是用来在应用中注册"全局"组件的.我们会在后面的指南中详细讨论,简单的例子: const app = Vue…

vue自学入门-1（Windows下搭建vue环境）

本人是一个喜欢动手的程序员,先跑起来个HelloWorld,增加感性认识,这三篇入门文章,花了不到一个小时,从网上找资料,程序跑通后,整理出来的,有的新人可能去哪找资料,运行代码都不知道,分享出来,大家少走弯路.1.去Nodejs官网下载安装包 2.点击安装,cmd命令行 3.使用淘宝镜像npm install -g cnpm --registry=http://registry.npm.taobao.org 4.脚手架npm install -g vue-cli…

vue自学入门-3（vue第一个例子）

1.安装后打开8080端口,http://localhost:8080/#/ 2.进入项目目录 2.默认路由 3.修改文件index.js 将Import HelloWorld一句修改为 import Hello form '@/components/Home' 出现错误 添加回车4.点回车编译通过 4.重新访问链接,成功,你已经基本入门了!…

Vue学习官网和Vue的书籍 目录结构

Vue基础知识学习网站[中文] https://cn.vuejs.org/v2/guide/ Vue路由知识学习网站[中文] https://router.vuejs.org/zh/guide/  Vuex更为复杂的Vue知识学习网站[中文] https://vuex.vuejs.org/zh/ Vue脚手架搭建和使用学习网站[中文] https://cli.vuejs.org/zh/guide/ Vue自学可以参考的博客,博客中有demo https://www.cnblogs.com/kee…

vue教程自学笔记（一）

一.介绍 1.指令 指令带有前缀v-,以表示它们是Vue提供的特殊特性.eg:v-bind,v-if,v-for,v-on,v-model(实现表单输入和应用状态之间的双线绑定) v-bind跟v-on的区别是:v-bind用于HTML属性,v-on是DOM事件监听. 2.组件component 官网2.x组件不显示问题:定义组件后,要同时new一个实例,然后把组件放在实例里面.先组件,后实例. 二.Vue实例 1.数据与方法 当一个Vue实例被创建时,它向Vue的响应式系统中加入了其data对…

自学vue笔记 (二) : 实例与生命周期

一: 什么是实例 我们说了,Vue 应用都应该从构建一个 Vue 实例开始.它管理着挂载在它身上的所有内容,因此实例是一个根实例, 所有的组件都应该挂载在根实例上面.创建一个 Vue 实例,需要通过 new 一个构造函数的方式,同时传入一个对象. 该对象可以传入很多内容,驱动页面的数据,模板,挂载的元素节点,方法,生命周期函数,子组件等. 二:属性和方法 每个 Vue 实例都会代理其 data 对象里的所有属性,并且让其作为驱动页面的数据.当 data 中的数据改变时,页面也会响应式的发生改变…

VUE：模板语法（小白自学）

VUE:模板语法 一:何为声明式 安装规定的语法,去实现一些效果(不需要管流程). 二:模板语法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 1 模板的理解:动态的html页面,包含了一些js语法代码 双大括号表达式 指令(以v-开头的自定义标签属性)…

VUE：渐进式JavaScript框架（小白自学）

VUE:渐进式JavaScript框架 一.官网 英文 https://vuejs.org/ 中文 https://cn.vuejs.org/ 二:渐进式 即有一个核心库,在需要的时候再逐渐添加插件的一种概念 作用:动态构建界面(将后台的数据在前台动态显示出来) 三:与其他框架的关联 1)借鉴 angular 的 模板 和 数据绑定 技术 2)借鉴 react 的 组件化 和 虚拟DOM 技术 四:Vue扩展插件 1)vue-cli: vue脚手架(帮我们下载基于vue的.编写好配置的.设定好依…

vue組件自学

Vue组件 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素.使用组件 全局注册 我们已经知道,可以通过以下方式创建一个 Vue 实例: new Vue({ el: '#some-element', // 选项 }) 要注册一个全局组件,可以使用 Vue.componen…

自学vue第二天，从入门到放弃（生命周期的理解）

生命周期的理解 beforeCreate 创建前 数据还没有监听,没有绑定到vue对象实例,同时也没有挂载对象 没有数据也没有方法 created 在创建后 数据和方法已经 data数据已经绑定好了 数据已经绑定到了对象实例,但是还没有挂载对象 el模板 然后判断是否有el 没有就结束周期 如果有el 就继续编译模板 beforeMount 已经编译好了模板  根据数据和模板生成一个对象 Mount 将$el的内容挂载在el上  生成真正的dom页面 现在我们就可以获取数据和操作dom befo…

小白自学vue的第一天，加油！

一.插值的操作 1.Mustache语法 也就是双大括号(翻译过来就是胡须的意思) 2.v-once指令 加了v-once数据不会随着数据的改变而改变,只会渲染一次 3.v-html指令 可以解析HTML并且渲染出来 4.v-text指令 直接渲染文本数据 和胡子语法相似,但是只会接受一个String类型 5.v-pre指令 把内容原封不动的输出,不会做任何的解析 6.v-cloak指令 如果网页有点卡,那么先是解析的div显示的是{{message}},然后解析的script的vue代码再显示…