vue.js
文章平均质量分 59
谢西顾
这个作者很懒,什么都没留下…
展开
-
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 阅读 · 0 评论 -
vue.js入门(3-4)(methods,属性绑定)
//index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@原创 2018-05-14 13:38:50 · 1391 阅读 · 0 评论 -
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入门(5)事件绑定
//index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@原创 2018-05-14 16:32:55 · 441 阅读 · 0 评论 -
vue.js(23)生命周期(构造函数)
图片来源于vue官网,注释是我自己加的,另外,红色原创 2018-05-21 10:29:44 · 735 阅读 · 0 评论 -
vue.js入门(24)路由和Http
我们之前实现的页面跳转,都是通过<a>标签来进行页面跳转的路由所实现的功能是一样的,只是a标签要一直刷新请求,而路由是直接跳转到页面去,更加优化要使用路由,首先要安装路由模块...原创 2018-05-21 21:25:23 · 674 阅读 · 0 评论 -
vue.js入门(6)事件修饰符
//index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@原创 2018-05-15 16:00:14 · 277 阅读 · 0 评论 -
vue.js入门(7)按键修饰符
//index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@原创 2018-05-15 22:58:34 · 322 阅读 · 0 评论 -
vue.js(8)双向数据绑定
双向数据绑定:一定要有一个输入的地方,一定要有一个输出的地方//index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src="htt原创 2018-05-15 23:49:06 · 286 阅读 · 0 评论 -
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 阅读 · 0 评论 -
vue,js入门(9)计算属性computed
//index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@原创 2018-05-16 19:39:00 · 294 阅读 · 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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 · 1342 阅读 · 0 评论 -
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 · 14161 阅读 · 0 评论 -
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 · 159 阅读 · 0 评论 -
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 阅读 · 0 评论 -
vue.js入门(el,data)
//index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@原创 2018-05-13 23:07:21 · 2471 阅读 · 0 评论 -
vue.js入门(17)介绍src文件流程及根组件
public/index.html为入口文件,然后进入main.js<!--main.js-->import Vue from 'vue'import App from './App'Vue.config.productionTip = falsenew Vue({ el:'#app', template:'<App/>', compo...原创 2018-05-19 23:58:32 · 708 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
vue,js入门(实战项目:在线翻译器)
这里主要讲概念,因为运用之前的知识是完全可以弄起来的首先我们要在components下建立两个组件,一个是translate组件,一个是show组件,第一个组件用来输入你要翻译的内容,第二个组件输出你要展示的内容效果大致这样这里的重点是,子向父传值,父向子传值我们当前先实现一个小功能,就是在translate模块输入要翻译的内容,也就是说要把translate.vue的值传送到app.vue文件,...原创 2018-05-23 19:33:33 · 2748 阅读 · 2 评论