随笔分类 -  VUE基础

摘要:在webpack-simple模板中,包括webpck模板。一个.vue文件就是一个组件。 为什么会这样呢?因为webpack干活了!webpack的将我们所有的资源文件进行打包。同时webpack还能将我们的html(template)、css、js文件通过模板编译的方式将这些文件打包成一个.vu 阅读全文
posted @ 2018-07-24 15:14 王竹笙 阅读(143) 评论(0) 推荐(0) 编辑
摘要:vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。 GitHub地址是:https://github.com/vuejs/vue-cli 一、安装Nodejs 首先需要安装Node环境。安装完成之后,可以在命令行工具中输入node -v和np 阅读全文
posted @ 2018-07-24 14:00 王竹笙 阅读(141) 评论(0) 推荐(0) 编辑
摘要:vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来。组件的使用更使我们的项目解耦合。更加符合vue的设计思想MVVM。 那接下来就跟我看一下如何在一个Vue实例中使用组件吧! 这里有一个Vue组件的示例: 组件是可复用的Vue实例,并且带有一个名字:在这个例子中是 <Vhea 阅读全文
posted @ 2018-07-24 11:41 王竹笙 阅读(161) 评论(0) 推荐(0) 编辑
摘要:修饰符 .lazy 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步: .number 如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符 效果: 阅读全文
posted @ 2018-07-24 11:24 王竹笙 阅读(116) 评论(0) 推荐(0) 编辑
摘要:vue的核心:声明式的指令和数据的双向绑定。 那么声明式的指令,已经给大家介绍完了。接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V是View的简写,VM就是ViewModel。 单向绑定和双向绑定的区别? 单向绑定非常简单,就是把 阅读全文
posted @ 2018-07-24 10:37 王竹笙 阅读(121) 评论(0) 推荐(0) 编辑
摘要:所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了。 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上。 OK,接下来我们一一介绍我们的指令系统的用法。 一、条件渲染 1、v-if 表示条件渲染 在vue中,我们使用v-i 阅读全文
posted @ 2018-07-23 17:34 王竹笙 阅读(261) 评论(0) 推荐(0) 编辑
摘要:一、安装 对于新手来说,强烈建议大家使用<script>引入 二、引入vue.js文件 我们能发现,引入vue.js文件之后,Vue被注册为一个全局的变量,它是一个构造函数。 三、使用vue实例化对象 1.创建vue实例对象 <div id="app"> {{ msg }} </div> var a 阅读全文
posted @ 2018-07-23 17:03 王竹笙 阅读(168) 评论(0) 推荐(0) 编辑
摘要:vue的作者叫尤雨溪,中国人。自认为很牛逼的人物,也是我的崇拜之神。 关于他本人的认知,希望大家读一下这篇关于他的文章,或许你会对语言,技术,产生浓厚的兴趣。https://mp.weixin.qq.com/s__biz=MzA5NzkwNDk3MQ==&mid=2650585523&amp;idx 阅读全文
posted @ 2018-07-23 16:43 王竹笙 阅读(312) 评论(0) 推荐(1) 编辑
摘要:这个是解析我们es6的代码的,为什么要用它呢,因为对于一些ie浏览器,甚至FF浏览器,低版本的还不能识别我们的es6代码,那么vue里面好多还让我们去写es6的代码,这个时候我们就可以用babel这个工具将我们的es6的代码转译成浏览器能识别的代码。 左边是我们写的es6代码,右边是通过babel这 阅读全文
posted @ 2018-07-23 16:32 王竹笙 阅读(113) 评论(0) 推荐(0) 编辑
摘要:在这里我仅仅的是对webpack做个讲解,webpack这个工具非常强大,解决了我们前端很繁琐的一些工具流程繁琐的事情。如果感兴趣的同学,简易还是看官网吧。 中文链接地址:https://www.webpackjs.com/ 为什么要使用webpack? 现今的很多网页其实可以看做是功能丰富的应用, 阅读全文
posted @ 2018-07-23 16:21 王竹笙 阅读(131) 评论(0) 推荐(0) 编辑
摘要:npm是什么? 简单的说,npm就是JavaScript的包管理工具。类似Java语法中的maven,gradle,python中的pip。 1. 安装配置 https://nodejs.org/en/ https://nodejs.org/dist/v17.9.1/ #下载具体地址 下载linux 阅读全文
posted @ 2018-07-23 16:07 王竹笙 阅读(131) 评论(0) 推荐(0) 编辑
摘要:打开Nodejs英文网:https://nodejs.org/en/ 中文网:http://nodejs.cn/ 我们会发现这样一句话: 翻译成中文如下: Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 阅读全文
posted @ 2018-07-23 15:34 王竹笙 阅读(128) 评论(0) 推荐(0) 编辑
摘要:JavaScript 语言中,生成实例对象的传统方法是通过构造函数。 上面这种写法跟传统的面向对象语言(比如 C++ 和 Java)差异很大,很容易让新学习这门语言的程序员感到困惑。 ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义 阅读全文
posted @ 2018-07-23 15:01 王竹笙 阅读(117) 评论(0) 推荐(0) 编辑
摘要:为了解决箭头函数this指向的问题 推出来一种写法 对象的单体模式。 阅读全文
posted @ 2018-07-23 14:51 王竹笙 阅读(97) 评论(0) 推荐(0) 编辑
摘要:箭头函数 基本语法: ES6允许使用“箭头”(=>)定义函数 如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。 使用箭头函数注意点: 箭头函数有几个使用注意点。 (1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。 我们发现,打印的结果为 此时this指向 阅读全文
posted @ 2018-07-23 14:50 王竹笙 阅读(121) 评论(0) 推荐(0) 编辑
摘要:模板字符串 传统的JavaScript语言,输出模板通常是这样的写的。 上面这种写法相当繁琐不方便,ES6 引入了模板字符串解决这个问题。 模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。 阅读全文
posted @ 2018-07-23 14:31 王竹笙 阅读(165) 评论(0) 推荐(0) 编辑
摘要:起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件。 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法。不推荐上来就直接用 vue-cli 构建项目,尤其是如果没有 Node/Webpack 基础。 另外在这里大家补充点ES6的语法 阅读全文
posted @ 2018-07-23 14:03 王竹笙 阅读(147) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示