Vue
djinzhong
这个作者很懒,什么都没留下…
展开
-
Hello World!
先创建一个 .html 文件,然后通过如下方式引入 Vue :<!-- 开发环境版本,包含了用帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>或者<!-- 生产环境版本,优化了尺寸和速度 --><script src="https...转载 2018-05-29 15:48:23 · 381 阅读 · 0 评论 -
WebStorm 使用方法
1.下载安装官方网站:https://www.jetbrains.com/webstorm/ps: 这个需要翻墙下载,如果无法翻墙请自行选择其他方式下载这里提供一个我的百度网盘分享地址链接:https://pan.baidu.com/s/1sbWZtCgjJa1E9o-KmJjNfA提取码:xpjl2.安装成功后只要双击安装包后一个个点击 Next 就好了3.获...原创 2019-04-28 14:41:22 · 1048 阅读 · 0 评论 -
学习 vue 一篇demo就足够了
项目githu地址项目介绍与简单讲解1.vue安装与如何引入组件2.vue 实现路由跳转3.vuex实现简单的赠删改功能4.父子组件的相互通信5.问卷调查的路由传值与父子组件通信未完待续。。。项目截图1.1.优惠券主页1.2.优惠券新增与修改页面2.1.问卷管理主页2.2问卷新增与修改页面2.3问卷详情页面...原创 2018-11-02 16:39:56 · 364 阅读 · 0 评论 -
vuex实现简单的赠删改功能
上一节已经完成路由跳转,这节就来利用vuex实现简单的赠删改功能1.先利用element-ui组件完成页面的构建1)main.js全局引入element-ui组件import ElementUI from 'element-ui'Vue.use(ElementUI);2)index.html全局引入css<link rel="stylesheet" href="http...原创 2018-10-31 16:13:53 · 2421 阅读 · 1 评论 -
vue 实现路由跳转
1.前一节已经安装了vue-router(npm install vue-router --save),现在就来使用一下1)先在App.vue组件中配置路由出口<template> <div id="app"> <div class="container"> <app-header></app-header&a原创 2018-10-31 11:50:32 · 1777 阅读 · 0 评论 -
vue安装与如何引入组件
1.第一步安装npm install -g vue-cli (如果安装了可以 vue -V 查看是否已经安装)vue init webpack vue-demo(安装webpack模板)这里我使用的是简易模板vue init webpack-simple vue-democd vue-demonpm installnpm install vue-router vuex...原创 2018-10-31 11:10:22 · 3008 阅读 · 0 评论 -
Vue---过渡
先看一个典型的例子:HTML:<div id="app"> <button @click="show=!show">切换</button> <transition name="fade"> <p v-if="show">Hello</p> &am原创 2018-06-15 14:57:21 · 206 阅读 · 0 评论 -
Vue-----Class与Style绑定
1.1绑定HTML Class我们可以传给 v - bind : class 一个对象,以动态地切换 class 。这里 v-bind : class 可以和普通的 class 共存。<div id="app" class="static" v-bind:class="{'didi-orange': isRipe,'didi-green':isNotRipe}"> </div&g...原创 2018-06-15 11:34:40 · 171 阅读 · 0 评论 -
Vue--自定义过滤器
1.单个参数HTML<p v-text="message | reverse"></p>自定义过滤器Vue.filter('reverse',function(value){ return value.split('').reverse().join(''); })脚本数据message: 'abc',浏览器显示结果2.多参数<p>{{msg}}的三次...原创 2018-06-14 17:14:34 · 218 阅读 · 0 评论 -
Vue--过滤器limitBy fiterBy orderBy
1.1字母操作<li> 1.1字母操作 <ul> <li> 1.capitalize(首字母大写) <p>deng:{{'deng' | capitalize}}</p> </li> ...原创 2018-06-14 17:05:34 · 2423 阅读 · 1 评论 -
Vue之表单控件绑定
1.text<p>text输入文本</p> <span>Hello {{name}}</span> <input type="text" v-model="name" placeholder="yous name" name="">2.checkbox <p&原创 2018-06-14 16:39:30 · 223 阅读 · 0 评论 -
Vue--计算属性(getter/setter)
通常我们会在模板中绑定表达是,模板是用来描述视图结构的。如果模板中的表达式存在过多逻辑,模板就会变得臃肿不堪,难以维护。为了简单逻辑,当某个属性依赖于其他属性的值时,我们可以使用计算属性。什么是计算属性计算属性就是当其依赖属性的值发生变化时,这个属性的值会自动更新,与之相关的DOM部分也会同步更新。<div id="example"> <input type="text" v...原创 2018-06-14 16:28:38 · 4059 阅读 · 1 评论 -
v-指令 v-if v-else v-show v-for v-on
1.v-if/v-elsev-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。v-else必须跟着v-if,充当else功能。<div id="example"> <p v-if="greeting">Hello</p> <p v-else="greeting">Hi</p> &原创 2018-06-14 16:04:28 · 349 阅读 · 0 评论 -
Vue-指令 v-text v-html v-model v-bind
1.v-text<div id="app"> <span v-text="msg"></span></div>var app=new Vue({ el: "#app", data:{ msg: 'Hello Wrold', } })最后不要忘了前面加上脚步引入<script src=&qu原创 2018-06-14 15:28:42 · 934 阅读 · 0 评论 -
如果在本地访问 vue 打包好的 dist 文件
众所周知我们是无法直接通过打开 vue 打包好的 dist 目录下的 index.html ,需要我们在本地开启一个服务器进行访问,这里分享一个node 开启本地服务器的方法, 首先我们需要在dist 外层目录新建一个 server.js 文件var connectHistoryApiFallback = require('connect-history-api-fallback')var...原创 2019-04-19 16:04:49 · 3166 阅读 · 0 评论