2018年05月_谢西顾

原创 vue,js入门（实战项目：在线翻译器）

这里主要讲概念，因为运用之前的知识是完全可以弄起来的首先我们要在components下建立两个组件，一个是translate组件，一个是show组件，第一个组件用来输入你要翻译的内容，第二个组件输出你要展示的内容效果大致这样这里的重点是，子向父传值，父向子传值我们当前先实现一个小功能，就是在translate模块输入要翻译的内容，也就是说要把translate.vue的值传送到app.vue文件，...

2018-05-23 19:33:33 2745 2

原创 vue.js补充

1.name是什么，调用的标签名就是name名2.对于p标签的内容也可以写成<p v-text="sendmessage"></p>3.placeholder：placeholder 属性提供可描述输入字段预期值的提示信息（hint），该提示会在输入字段为空时显示，并会在字段获得焦点时消失。4.之前我们讲过出栈，也就是删除一个数组是用pop（），现在来讲讲添加进入数组pus...

2018-05-22 16:38:40 421

原创 vue.js入门（24）路由和Http

我们之前实现的页面跳转，都是通过<a>标签来进行页面跳转的路由所实现的功能是一样的，只是a标签要一直刷新请求，而路由是直接跳转到页面去，更加优化要使用路由，首先要安装路由模块...

2018-05-21 21:25:23 673

原创 vue.js（23）生命周期（构造函数）

图片来源于vue官网，注释是我自己加的，另外，红色

2018-05-21 10:29:44 735

原创 vue.js入门（22）事件传值（子向父传值）

上一节讲的是父向子传值首先我们在Header.vue文件先加入一个方法来改变title值，首先注册一个事件methods:{ changetitle:function() { this.$emit("titlechange","子向父传值");//事件名要给它传的内容 } }然后通过点击button<button v-on:click="chang...

2018-05-20 16:10:09 611 1

原创 vue.js入门（21）传值和传引用

传值：string number boolean传引用：object（对象） array（数组）引用：一旦你某个地方发生删除或者添加，整个都会进行改变！（不要忘记基础知识）1.传值，现在我们想要，App.vue里面的一个数值传到Header.vue文件里面首先我们先给App.vue里面一个String值data(){ return{ sendmessage:"传值用法，string...

2018-05-20 15:30:25 6511

原创 vue.js入门（20）实战demo（组件嵌套）

模拟一个网页，有头部，内容，尾部，先对头部进行编码（并进行css稍微修饰一下），创建一个Header.vue文件//Header.vue<template> <header> <h1>{{ title }}</h1> </header></template><script>export defa

2018-05-20 15:02:24 354

原创 vue.js入门（19）组件css作用域

还是刚刚的文件，App.vue和User.vue现在两个里面都有style样式模块，我们在App.vue里面加入<style>h1{ color:purple;}</style>然后发现，App.vue和User.vue里面，h1标签的字体全部都变成了紫色然后我们在User.vue里面加入<style >h1{ color:green;}&l...

2018-05-20 14:01:01 288

原创 vue.js入门（18）组件嵌套

养成一个习惯，components下的组件，首字母都大写，组件名是什么，class名，name名就是什么这个时候写好User.vue文件<template> <div class="user"> <ul> <li v-for:"user in user">{{ user }}</li> </u

2018-05-20 13:45:17 785

原创 vue.js入门（17）介绍src文件流程及根组件

public/index.html为入口文件，然后进入main.jsimport Vue from 'vue'import App from './App'Vue.config.productionTip = falsenew Vue({ el:'#app', template:'<App/>', compo...

2018-05-19 23:58:32 708

原创 vue.js入门（16）搭建脚手架CLI

1.首先要到node.js官网下载2.下载之后安装，这里不细说，基本上都是默认3.然后运行终端，分别运行node -vnpm -v来查看是否安装成功，如下图就算安装成功4.这个时候移步到vue.js官网，安装-cli命令行看到如下图所示点击cli文档查看先输入第一句，然后vue --version查看结果然后第二句话是创建项目了，会创建在路径处，所以这里，我们首先路径定位，定位在自己所想要存放的文...

2018-05-19 10:17:24 310

原创 vue.js入门（15）初始组件的应用

//index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vu

2018-05-18 20:58:52 158

原创 vue,js入门（14）实例化多个vue对象

//index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/cs

2018-05-18 14:19:19 14160

原创 vue.js入门（13）实战demo

//index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/cs

2018-05-18 13:44:36 1341

原创 vue.js入门（12）v-for循环指令

//index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/cs

2018-05-17 21:05:11 1931

原创 vue.js入门（11）条件渲染v-if

//index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/cs

2018-05-17 13:06:26 196

原创 vue.js入门（10）动态绑定css样式

//index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/cs

2018-05-17 10:50:36 5435