Vue.js
Byte_Dance
长风破浪会有时,直挂云帆济沧海
展开
-
使用Vue渲染swiper模板,按钮点击设置渲染内容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial原创 2018-08-19 20:52:41 · 818 阅读 · 0 评论 -
创建Vue-cli 项目
首先 : 安装Vue -cli 安装的时候注意要获取cmd的管理员权限router路由可以先安装好, 选择启动方式的时候要自己cd到创建好的文件夹,然后输入npm install(创建依赖) ,最后输入 npm run dev 启动项目,默认是不启动浏览器.可以在config的index.js文件内修改自动启动浏览器和端口号码autoOpenBrowser:true 修改为tr...原创 2018-10-09 18:17:19 · 240 阅读 · 0 评论 -
在Vue-cli中使用swiper
一 : 首先要把swiper 安装到 vue 项目中语法 : npm install --save-dev vue-awesome-swiper在 main.js中引入//配置swiperimport VueAwesomeSwiper from 'vue-awesome-swiper'//配置swiper CSSimport 'swiper/dist/css/swiper....原创 2018-10-09 19:02:05 · 496 阅读 · 0 评论 -
VueX使用方法
(1):首先安装VUEX : npm install vuex --save(2):然后再main.js里引入vuex: import Vuex from "vuex" Vue.use(Vuex)(3):然后再创建一个store对象const store = new Vuex.Store({ state: { count: 10 ...翻译 2018-10-20 15:39:32 · 390 阅读 · 0 评论 -
vue-cli构建项目npm run build打包后怎么在本地查看效果
这时如果直接运行npn run build是可以运行并打包你的代码的,不会报任何异常或错误,但是会看到打包完成有这样一句提示:打开了控制台,看到console tab下一片404的各种找不到资源 解决方案打开项目文件夹。找到config文件夹里的index.js文件中的build对象,将assetsPublicPath中的“/”,改为“./”,并在build\build.js将...转载 2018-10-21 21:01:43 · 1526 阅读 · 0 评论 -
模拟Vue双向绑定
<!--模拟Vue--> <script> window.onload = function(){ Binding("ins","boxs"); } function Binding(ins,boxs){ // 创建数据对象 window.d...翻译 2018-12-19 14:01:14 · 228 阅读 · 0 评论 -
试用Vue CDN + Element
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--引入vue --> <script src=&quo原创 2019-01-26 23:01:22 · 1110 阅读 · 0 评论 -
Vue的data值必须是函数返回
data值必须要是函数返回,这样才能使组件在多次调用的时候 改变其中的data其他的不受到影响<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=&q原创 2019-02-08 15:30:06 · 585 阅读 · 0 评论 -
Vue中控制v-for循环次数的方法
在Vue中的遍历方法v-for控制循环次数的方法可以通过以下两种方法1.截取循环的数据 v-for="(item,index) in domainList.slice(0, 2)" 用这样的方法可以截取循环的数据长度,从而控制循环的次数2.通过v-if来控制 v-for="(item,index) in domainList" v-if="index<3...转载 2019-01-30 15:47:08 · 6280 阅读 · 0 评论 -
Vue子父组件相互通信
子组件<!-- 子组件模板 --><template> <div id="app"> 子组件 <br> {{title}} <button @click="addCounter">按钮</button> &l翻译 2018-09-29 09:32:59 · 271 阅读 · 0 评论 -
vue-cli目录结构介绍
原文地址:http://www.jianshu.com/p/7006a663fb9f总体框架一个vue-cli的项目结构如下,其中src文件夹是需要掌握的,所以本文也重点讲解其中的文件,至于其他相关文件,了解一下即可。 文件结构细分1.build——[webpack配置] build文件主要是webpack的配置,主要启动文件是dev-server.js,当我们输入...转载 2018-10-06 21:09:22 · 340 阅读 · 0 评论 -
获取后台数据使用JQ-AJAX 和 Vue-Axios 两种方式的使用对比
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial原创 2018-10-05 18:31:28 · 723 阅读 · 1 评论 -
有关刷卡动态改变数据遇到的坑(不能自动滚动,自动跟新数据,切换不正常
转载:有关刷卡动态改变数据遇到的坑(不能自动滚动,自动跟新数据,切换不正常)原文地址:https://www.cnblogs.com/DivHao/p/6866399.html 以前都觉得刷卡的使用很简单,那是因为使用刷卡时都是写的数据,按照官网上介绍直接初始化刷卡,随便丢一个地方初始化就OK了,但是在很多需求中,我们都需要动态的改变数据,这样可能就会遇到很多问题。以下简单说说最近遇...转载 2018-08-23 18:46:28 · 576 阅读 · 0 评论 -
Vue点击动态添加删除active类特效
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial转载 2018-08-23 23:06:22 · 2173 阅读 · 0 评论 -
使用Vue中的router路由
要使用Vue路由,首先需要在项目启动前安装router安装方法 : npm install vue-router --save-dev安装完毕后,输入npm run dev启动项目首先配置main.jsimport Vue from 'vue'import App from './App.vue' //主组件import HelloWorld from './compone...翻译 2018-09-16 19:12:00 · 337 阅读 · 0 评论 -
使用npm搭建Vue cli脚手架
文字地址 : https://www.cnblogs.com/tjyoung/p/6832234.html翻译 2018-09-16 19:21:02 · 432 阅读 · 1 评论 -
使用Vue的Ajax获取数据
new Vue({ el:'#Materials', data:{data:""}, beforeCreate:function(){ var url="json.jsp"; var _self=this; $.get("MaterialsContent.php",functi...翻译 2018-09-20 11:47:01 · 1773 阅读 · 0 评论 -
Vue动态组件
使用动态组件: 和传统组件绑定一样 都需要先import引入地址,再在components里进行加载, 不同的是:我们使用动态的data 变量 来表示引入的组件名 然后再上边引用的时候 用<component :is="currentView"></component> 标签来引入, is里边的值是可变的data参数 可通过添加事件对其进行更改<!--模...翻译 2018-10-01 21:45:06 · 413 阅读 · 0 评论 -
Vue中的CSS过渡的6个过程
<!--模板--><template> <div name="users"> <hr> <!--过渡--> <button @click="showHide">按钮</button> <翻译 2018-10-03 22:12:16 · 348 阅读 · 0 评论 -
Vue自定义指令-实现进入页面就获取输入框焦点
自定义指令一般用在很多地方都使用到的功能,把它封装成一个自定义指令.注册全局的输入框默认选中功能import Vue from 'vue'import App from './App.vue' //主组件import HelloWorld from './components/HelloWorld.vue' //Helloworld组件import Home from './...翻译 2018-10-04 11:51:14 · 1287 阅读 · 0 评论 -
Vue将数字金额变为汉字大写金额
<div id="app"> <input type="text" v-model="num"> <p>{{text}}</p> <button @click="NumberToChinese(num)">按钮</button>&am转载 2019-01-30 16:18:36 · 3664 阅读 · 0 评论