vue初学之路
从现在开始学习,用博客来充当笔记本吧,当然也是让自己熟练起来,只有用起来学起来写起来,才能越玩越厉害,加油!!
liusongjing
2018年7月1日开始的博客,好好学习!!!
展开
-
vue学习 十七 Vue路由和http请求
路由的实现:首先需要cmd将路由模块装上,然后重启项目,多打几遍就熟悉了npm run dev,在下面的黑窗口中,我之前已经装过了路由模块,显示如下npm install vue-router --save-devnpm run dev然后你需要的就是在main.js文件中引入路由模板,然后使用它,如下图中第一和第二个画圈的部分配置路由什么的参照mode:“his...原创 2019-08-17 00:54:04 · 569 阅读 · 0 评论 -
vue学习 十六 Vue生命周期
下图展示了实例的生命周期。不需要立马弄明白所有的东西,不过随着不断学习和使用,它的参考价值会越来越高。Vue 有八种生命周期方法:Before create 组件实例化之前的函数 Created 组件实例化完毕,但页面还没显示 Before mount 组件挂载前,页面没有显示,但虚拟Dom已经配置 Mounted ...原创 2019-08-15 22:13:55 · 107 阅读 · 0 评论 -
vue学习 十五 传值和传引用 or 事件传值(子传父)
传引用: 传的就是对象(object)和数组(array);传值: 传的就是字符串(string)、布尔(boolean)、数值(number);主要表达的意思是: 在父传子组件中,数据写在父组件时;传引用的时候,改变一个数组或者对象都是将所有的改变;传值的话,改变哪个值就是改变哪个,不会影响到其他。。在这里,通过pop方法出栈数组元素,然后点击一个删除,两个相同数组中...原创 2019-08-15 20:22:03 · 239 阅读 · 0 评论 -
vue学习 十四 属性传值Props(父传子)
解决的问题: 子组件中很多复用的数据,我们就可以统一的写在父组件中,然后通过Props属性传值到子组件,如此优化代码,具体用法如下。。在前一个demo中,数据放到了App,.vue中,然后我们的组件就要给它绑定一个元素<user v-bind:users="users"></user>引号里的users代表的是数组,然后users是一个名字可以...原创 2019-08-14 13:49:21 · 225 阅读 · 0 评论 -
vue学习 十三 组件CSS的作用域 or 组件Demo
组件CSS的作用域:当我们直接写的时候,各个组件之间的颜色不同的话,而显示只会显示一种,那就是主模板,或者说总是会覆盖其他的样式,所以就出现以下规定,在各个组件的样式写上scoped(范围的意思),就能让组件之间的样式不会冲突了,一个组件中的样式只会规定自身的样式。。。组件Demo:做到以下效果,其中点击一个div它会让下面那行文字显示和隐藏。。。。。这个很简单实现,就...原创 2019-08-13 19:47:50 · 152 阅读 · 0 评论 -
vue学习 十二 vue文件目录知晓 or 组件嵌套
说明:我使用的是HBuilder,软件能用就可以了查看顺序是:index.html(入口文件)--->main.js----->App.vue(模板文件)可以看出能显示出欢迎页面,还有那个大V都在这里可以看到------>components/...(自定义组件)组件嵌套方式:1.注册全局组件你得先在components下创建一个文件来自定义自己的组件,比如我...原创 2019-08-13 13:44:51 · 241 阅读 · 0 评论 -
vue学习 十一 vue-cli脚手架的安装和了解
首先了解一下什么的脚手架:脚手架是通过webpack搭建的开发环境 使用的是ES6的语法 打包和压缩JS为一个文件 项目文件在环境中编译,而不是浏览器 实现页面的自动刷新windows下脚手架的安装:安装node.js: 下载地址:https://nodejs.org/en/ 下载安装好安装好node.js后再cmd中输入:node -v会...原创 2019-08-13 13:21:22 · 125 阅读 · 0 评论 -
vue学习 十 实例化多个Vue对象 和 组件的使用
实例化多个Vue对象和一个其实都是一样的格式,如下:代码是没有截屏到的部分然后想通过第二个Vue对象来改变第一个Vue中的数据也是可以的,通过one.name的方式来实现<div id="app-one"> <h3>{{name}}</h3> <p>{{test}}</p></div> <di...原创 2019-08-12 22:44:04 · 1377 阅读 · 0 评论 -
vue学习 九 基础事例demo
为了更好的理解之前的各类知识,认真的实现下面的demo很有必要。。。就是当点击“掉血”按钮后,进度条的血减10%,然后一直点到0的时候图片就会变成另外一张打坏了的图片。。事例代码如下,图片可以随便两张吧,简单实现<!DOCTYPE html><html><head><meta charset="utf-8"><tit...原创 2019-08-12 20:41:40 · 148 阅读 · 0 评论 -
vue学习 八 v-if和v-for的使用
个人理解:v-if:正如if一样,就是判断为真为假,然后看情况输出相应结果;v-else:跟在v-if后面,如果什么不成立,就运行else后面的命令;v-else-if:就像选择一样,如果一个变量等于A,执行A下面的命令,如果等于B,则执行B下面的命令;v-show: 和v-if的结果是一样的,用法也一样<h1 v-show="error">Hello!<...原创 2019-08-12 19:57:57 · 326 阅读 · 0 评论 -
vue学习 七 动态绑定css样式
实现绑定css样式的方法:在data中设定一个值,比如changColor:false,然后就可以在容器中添加入下命令: 意思是点击这个div盒子后,里面的class就会显示出来,然后颜色就会变成你设定的,再次点击就还原<div v-on:click="changeColor=!changeColor" v-bind:class="{changeColor:changeCo...原创 2019-08-12 12:02:51 · 1004 阅读 · 0 评论 -
vue学习 六 计算属性Computed的详解
计算属性: 首先,我们得知道什么的计算属性,有什么用? 看下面例子,不难看懂,我们给按钮事件让其能让a的值或b的值自增1,然后addToA方法和addToB方法就是将age的值和a相加。 这时候就有一个问题,当我们直接在浏览器刷新的时候,我们事先写好的输出直接就显示出来了,而且是A和B都输出了,看console中的结果。而当我们点击一次“Add t...原创 2019-08-12 00:03:22 · 183 阅读 · 0 评论 -
vue学习 五 数据的双向绑定v-model
数据的双向绑定: 顾名思义就是当我们输入什么,页面就显示什么,就是将变量值和你想要的东西绑定在一起一样,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。第一种方式:不使用v-model在input标签中设定一个ref做为标记,然后按键事件触发方法,方法中将输入框中的东西赋值给name,然后就可以显示在页面中了,即相当于双向绑定;第...原创 2019-08-11 23:26:24 · 253 阅读 · 0 评论 -
vue学习 四 v-on的事件修饰符和按键修饰符
方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节,为了解决这个问题,Vue.js 为v-on提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。.stop 阻止事件继续传播 .prevent 阻止标签的默认事件发生 .capture .self .once 事件只会发生一次 .passive<!-- ...原创 2019-08-11 21:12:51 · 963 阅读 · 0 评论 -
vue学习 三 事件绑定v-on的使用
v-on:我的理解是绑定事件监听器,比如鼠标点击事件绑定,然后就可以写函数去做一些交互了如下: 给点击事件click绑定,设置add有参方法后就可以让age在点击时自增一,再者就可以给双击事件dblclick绑定等等,所以v-on的作用就这样,v-on的缩写形式: 效果一样<a @click="add(1)">增加一岁</a><!DOCTYP...原创 2019-08-11 09:46:38 · 224 阅读 · 0 评论 -
vue学习 二 属性绑定 v-bind和v-html的使用
v-bind的使用:当我们要将一个地址赋值上一个a标签时,我们的做法如果还是像之前那样的话,就无法生效了,如下图:这时候就要用到属性绑定v-bind,它的作用就是让vue知道这是标签的一个属性,所以解析的时候就会变成我们所需要的百度链接了,用法就是<a v-bind:href="website">点击到百度</a>v-html的使用:就如名字...原创 2019-08-11 00:58:49 · 1472 阅读 · 0 评论 -
vue学习 一 认识vue并且简单使用
Vue (读音 /vjuː/,类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。官网开发手册地址:https://cn.vuejs...原创 2019-08-11 00:36:42 · 669 阅读 · 0 评论 -
vue入门 -----npm安装 vue.js安装
发现一个写的特别详细,按照步骤就可以轻松完成,如下https://www.cnblogs.com/lgx5/p/10732016.htmlnpm: Nodejs下的包管理器。webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。vue-cli: 用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是...转载 2019-08-09 16:26:20 · 222 阅读 · 0 评论