vue.js
关注
分享
扫一扫
虬川候
如果有用请赞一下,没用请留言告诉我版本和情况
展开
-
vue项目多人开发目录搭建二 router路由目录搭建
每个人控制moudules下的一个单独的JS路由文件,不互相干扰.不BB,直接上代码.有问题请留言!index.jsimport Vue from 'vue'import Router from 'vue-router'import leition from './modules/leition'import A001 from './modules/A001'impor...原创 2019-11-29 14:18:27 · 412 阅读 · 0 评论 -
Vue.js生命周期钩子
**官方文档：**https://cn.vuejs.org/v2/api/#选项-生命周期钩子什么是实例的生命周期？实例在被创建前经过的一系列初始化过程叫生命周期什么是生命周期钩子？在生命周期中被自动调用的函数叫做生命周期钩子生命周期钩子的用途？为我们提供执行自定义逻辑的机会钩子函数有哪些？创建beforeCreate created挂载beforeMount mou...原创 2018-10-27 20:47:48 · 392 阅读 · 0 评论 -
vue.js全局组件
全局组件可在任何实例的vm里调用方法一这个好用,方便.<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title&a原创 2018-10-30 20:56:45 · 653 阅读 · 0 评论 -
vue.js局部组件
局部组件写在实例的vm里,只能此vm调用<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js" type="text/javascript原创 2018-10-30 21:08:38 · 600 阅读 · 0 评论 -
vue.js props选项
props选项作用 : props选项用来声明他期待获得的数据props本质 : props为元素属性用事件改变props时方法后无需写小括号&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &原创 2018-10-30 21:36:14 · 288 阅读 · 0 评论 -
vue.js槽口/具名槽口slot
槽口的作用 :在组件里插入内容,用来混合父组件的内容与子组件自己的模板普通槽口:<slot></slot>,1个组件只有1个具名槽口:带name属性的槽口<slot name='slotA'></slot>1个组件可以有多个,具名槽口将绑定slot属性等于其name的标签槽口的显示槽口的显示是按照其组件顺序来显示的<!DOCTY...原创 2018-10-30 22:23:49 · 1806 阅读 · 0 评论 -
vue.js一级、二级、重定向路由配置
方法一<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <title>Document</title> <script src="vue.js" type="text/原创 2018-11-01 15:00:00 · 1565 阅读 · 0 评论 -
vue.js npm安装
1. 安装nodejs到https://nodejs.org/en/download/下载 nodejs下面代码框内容都在cmd的输入 -g是全局的意思2. 安装cnpm(淘宝镜像,cnpm安装接下来的东西更快)npm install -g cnpm --registry=https://registry.npm.taobao.org3. 安装脚手架 vue-cli...原创 2018-11-01 15:21:35 · 254 阅读 · 0 评论 -
vue.js路由传参
传递参数<router-link to='/test/0'>TEST</router-link>输出路径配置var routes = [ {path: '/test/:id',component:Test}, ];模板输出{{ $route.params.id }}代码示例<!DOCTYPE html><html...原创 2018-11-02 10:08:09 · 237 阅读 · 0 评论 -
Vue.js过滤器
过滤器的作用在不改变数据的情况下，输出前端需要的格式数据过滤器的定义方法Vue.filter(‘方法名’,function(val){});过滤器的调用方法{{ msg|方法名}}注意事项定义过滤器，必须放在Vue实例化前面在没有冲突的前提下，过滤器可以串联举例应用&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&a原创 2018-10-27 20:30:59 · 180 阅读 · 0 评论 -
Vue.js交互
Vue.js交互vue,js交互需要使用vue-resource.js库vue.js交互借助于$http完成语法：使用promise语法常用的交互类型get类型post类型jsonp类型举例应用get类型语法：this.$http.get(‘url’, {params:{a:1,b:2…}}).then(function(res){处理请求成功},function(res)...原创 2018-10-27 20:07:35 · 394 阅读 · 0 评论 -
练习004 仿留言板 （生命周期钩子、过滤器、交互）
需求:调用接口获取留言数据过滤时间只取年月日打开网页便执行请求代码:&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html lang=&amp;quot;zh&amp;quot;&amp;amp;gt;&amp;amp;lt;head&amp;amp;gt; &amp;amp原创 2018-10-28 13:58:48 · 267 阅读 · 0 评论 -
练习005 仿百度搜索框 （交互、事件修饰符）
需求:实现搜索框的搜索功能a) 对用户在输入框内输入的值进行双向数据绑定b) 点击"搜索"按钮,进行网络请求c) 将请求回的数据在搜索框下进行展示实现通过方向键控制搜索选项a) 绑定上下方向键的处理函数b) 对展示的数据进行样式绑定代码:&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt;&lt;h原创 2018-10-28 22:26:08 · 229 阅读 · 0 评论 -
练习003 todolist （vue.js指令）
需求：原创 2018-10-26 15:39:39 · 386 阅读 · 0 评论 -
vue.js父子组件
父子组件：1. 父子组件间的作用域相互独立。2. 子组件只能在父组件的配置项里创建。3. 子组件只能在父组件的模板中进行调用。<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <title>Document</tit原创 2018-10-31 14:30:48 · 202 阅读 · 0 评论 -
vue.js抛出与接收自定义事件$emit
抛出自定义事件监听语法：this.$emit('event',val)$emit：实例方法，用来触发事件监听event：自定义事件名称 val：通过自定义事件传递的值（为可选参数） 接收自定义事件监听语法：<component @event='fn'></component>fn：function(val){}触发及接收原则：...原创 2018-10-31 15:24:07 · 4018 阅读 · 0 评论 -
vue.js父组件给子组件传递数据
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="vue原创 2018-10-31 15:52:27 · 156 阅读 · 0 评论 -
Vue.js常用指令介绍跟举例应用
什么是vue.js指令？指令是带有v-前缀的特殊属性。vue.js指令的用途？在表达式的值改变时，讲某些行为应用到DOM上。指令介绍v-show：控制切换一个元素的显示和隐藏v-on：为html元素绑定事件监听v-model：将用户的输入同步到视图上v-for：遍历data中数据，并在页面进行数据显示v-bind：绑定HTML元素的属性举例应用v-show&amp;amp;amp;amp;amp;amp;lt;!DOCT...原创 2018-10-24 16:30:07 · 370 阅读 · 0 评论 -
练习001 列表点击变色 （vue.js指令）
需求：分析：给li绑定一个背景色样式，当你点击这个li的时候，这个li背景色的样式生效，其他的li背景色样式不生效代码：&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&am原创 2018-10-24 23:39:56 · 2273 阅读 · 0 评论 -
练习002 列表点击计算价格 （vue.js指令）
需求如下：分析：点击li改变背景色加等于总价，再次点击还原背景色剪等于总价。代码：&amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt;&amp;amp;amp;lt;html&amp;amp;amp;gt; &amp;amp;amp;lt;head&amp;amp;amp;gt; &amp;amp;amp;lt;meta charset=&a原创 2018-10-25 11:32:24 · 731 阅读 · 0 评论