随笔分类 -  前端框架VUE

前端框架VUE----导入Bootstrap以及jQuery的两种方式
摘要:Vue引入bootstrap主要有两种方法 Vue引入bootstrap主要有两种方法 方法一:在main.js中引入,此方法导入的bootstrap中对于html,body的一些预设置的css样式可能无效。 一、引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnp 阅读全文

posted @ 2018-05-28 15:42 TheLand 阅读(915) 评论(0) 推荐(0)

前端框架VUE----补充
摘要:修饰符 .lazy 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步: .number 如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符 效果: 阅读全文

posted @ 2018-05-28 10:12 TheLand 阅读(187) 评论(0) 推荐(0)

前端框架VUE----表单输入绑定
摘要:vue的核心:声明式的指令和数据的双向绑定。 那么声明式的指令,已经给大家介绍完了。接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V是View的简写,VM就是ViewModel。 单向绑定和双向绑定的区别? 单向绑定非常简单,就是把 阅读全文

posted @ 2018-05-28 10:11 TheLand 阅读(814) 评论(0) 推荐(0)

前端框架VUE----组件的创建
摘要:vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来。组件的使用更使我们的项目解耦合。更加符合vue的设计思想MVVM。 那接下来就跟我看一下如何在一个Vue实例中使用组件吧! 这里有一个Vue组件的示例: Vue.component('Vheader',{ data:func 阅读全文

posted @ 2018-05-28 10:09 TheLand 阅读(594) 评论(0) 推荐(0)

前端框架VUE----cli脚手架(框架)
摘要:一、创建vue项目 npm install vue-cli -g #-g全局 (sudo)npm install vue-cli -g #mac笔记本 vue-init webpack myvue #项目的名字 cd muvue npm install npm run dev 二、目录结构的说明 出 阅读全文

posted @ 2018-05-28 10:08 TheLand 阅读(595) 评论(0) 推荐(0)

前端框架VUE----计算属性和侦听器
摘要:一、计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如: <div> {{ message.split('').reverse().join('') }} </div> 在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能 阅读全文

posted @ 2018-05-25 11:11 TheLand 阅读(296) 评论(0) 推荐(0)

前端框架VUE----vue的使用
摘要:一、安装 对于新手来说,强烈建议大家使用<script>引入 二、 引入vue.js文件 我们能发现,引入vue.js文件之后,Vue被注册为一个全局的变量,它是一个构造函数。 三、使用Vue实例化对象 1.创建vue实例对象 输出结果: ok,我们已经简单的创建了第一个vue应用。渲染的数据的方式 阅读全文

posted @ 2018-05-25 10:00 TheLand 阅读(507) 评论(0) 推荐(0)

前端框架VUE----babel
摘要:这个是解析我们es6的代码的,为什么要用它呢,因为对于一些ie浏览器,甚至FF浏览器,低版本的还不能识别我们的es6代码,那么vue里面好多还让我们去写es6的代码,这个时候我们就可以用babel这个工具将我们的es6的代码转译成浏览器能识别的代码 左边是我们写的es6代码,右边是通过babel这个 阅读全文

posted @ 2018-05-25 09:47 TheLand 阅读(439) 评论(0) 推荐(0)

前端框架VUE----webpack打包工具的使用
摘要:在这里我仅仅的是对webpack做个讲解,webpack这个工具非常强大,解决了我们前端很繁琐的一些工具流程繁琐的事情。如果感兴趣的同学,还是看官网吧。 中文链接地址:https://www.webpackjs.com/ 一、为什么要使用webpack? 现今的很多网页其实可以看做是功能丰富的应用, 阅读全文

posted @ 2018-05-25 09:42 TheLand 阅读(1166) 评论(0) 推荐(0)

前端框架VUE----nodejs中npm的使用
摘要:NPM是什么? 简单的说,npm就是JavaScript的包管理工具。类似Java语法中的maven,gradle,python中的pip。 安装 傻瓜式的安装。 第一步:打开https://nodejs.org/en/ 第二步: 第三步:我们为了统一版本,虽然node.js更新到了8.11.1的版 阅读全文

posted @ 2018-05-25 09:39 TheLand 阅读(2024) 评论(0) 推荐(0)

前端框架VUE----node.js的简单介绍
摘要:一、什么是node.js? 它是可以运行JavaScript的服务平台,可以吧它当做一门后端程序,只是它的开发语言是JavaScript 二、安装 1、node.js的特性: - 非阻塞IO模型 - 时间驱动 2、运用的场景: - 高并发低业务 - 实时场景 - 聊天、电子商务、视频直播等 3、安装 阅读全文

posted @ 2018-05-25 09:37 TheLand 阅读(1192) 评论(0) 推荐(0)

前端框架VUE----面向对象
摘要:JavaScript 语言中,生成实例对象的传统方法是通过构造函数。 上面这种写法跟传统的面向对象语言(比如 C++ 和 Java)差异很大,很容易让新学习这门语言的程序员感到困惑。 ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义 阅读全文

posted @ 2018-05-25 09:35 TheLand 阅读(1056) 评论(1) 推荐(0)

前端框架VUE----箭头函数
摘要:箭头函数 基本语法: ES6允许使用“箭头”(=>)定义函数 如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。 使用箭头函数注意点: 箭头函数有几个使用注意点。 (1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。 我们发现,打印的结果为 此时this指向 阅读全文

posted @ 2018-05-25 09:33 TheLand 阅读(5878) 评论(1) 推荐(2)

前端框架VUE----对象的单体模式
摘要:对象的单体模式 为了解决箭头函数this指向的问题 推出来一种写法 对象的单体模式 阅读全文

posted @ 2018-05-25 09:33 TheLand 阅读(241) 评论(0) 推荐(0)

前端框架VUE----模板字符串
摘要:传统的JavaScript语言,输出模板通常是这样的写的。 上面这种写法相当繁琐不方便,ES6 引入了模板字符串解决这个问题。 模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量 上面代码中的模 阅读全文

posted @ 2018-05-25 09:31 TheLand 阅读(1105) 评论(0) 推荐(0)

前端框架VUE----指令
摘要:一、什么是VUE? 它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 二、怎么使用VUE? 1、引入vue.js 2、展示HTML 3、建立一个vue对象 三、数据绑定 1、插入文本{{ }}。如上例,也可以放表达式 2、插入html:v-html 四、vue的指令 阅读全文

posted @ 2018-05-25 09:28 TheLand 阅读(327) 评论(0) 推荐(0)

前端框架VUE----es6简单介绍
摘要:1、ECMAScript 6 简介 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。 ECMA:国际标准组织 2、let 阅读全文

posted @ 2018-05-21 20:49 TheLand 阅读(1794) 评论(2) 推荐(1)

前端框架VUE----学习vue前的准备工作
摘要:起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件。 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法。不推荐上来就直接用 vue-cli 构建项目,尤其是如果没有 Node/Webpack 基础。 关于VUE的介绍,请参考:htt 阅读全文

posted @ 2018-05-21 20:42 TheLand 阅读(1038) 评论(0) 推荐(0)