键指江湖的博客

vue 通过npm安装less或者sass预编css前提是需安装node环境安装less和less-loader :命令行输入：npm install less less-loader --save安装成功后运行项目，在package.json文件夹会出现如下代码说明安装成功切已经引用：样式代码：为了说明已经生效，特意在p标签里面嵌套了一个a标签效果：sass安装方式一样，这里...

组件样式问题在home组件里面有一个h2标签并设置样式 注意此时根节点div没有设置类名 id等<template> <div> <h2>我是home组件</h2> </div></template><script></script><style lang="scs...

vue组件使用先上代码<template> <div id="app"> <!-- 3.使用组件 --> <p>{{msg}}</p> <v-home></v-home> </div></template><script>// 1.引...

vue学习之封装Storage组件本地存储<template> <div id="app"> <input type="text" v-model="todo"> <button @click="add">+增加</button> <hr> <h2>进行中</h2>...

vue学习笔记之todolist<template> <div id="app"> <input type="text" v-model="todo"> <button @click="add">+增加</button> <hr> <h2>进行中</h2> ...

vue学习之事件、执行方法先来个简单的点击事件<button v-on:click="fn1">点我试试</button>fn1(){ alert("aaa") },执行效果：再来个请求数据的<ul> <li v-for="(item,index) in list" :key="index"> ...

vue学习笔记之双向数据绑定及ref获取Dom节点双向数据绑定注意：只用于表单<template> <div id="app"> <p>{{msg}}</p> <input type="text" v-model="msg"> <button v-on:click="getMsg">获取表单里...

vue 给当前li添加背景色思路1：循环li列表并且获取到当前li的索引值看代码：<div id="app"> <h1>{{ msg }}</h1> <input type="text" v-model="msg"> <button v-on:click="getMsg()">获取表单数据</butto...

vue学习之绑定属性 绑定class及style绑定属性：<template> <!-- v-bind:属性 简写 :属性--> <div id="app"> <p v-bind:title="title">鼠标移上去看看</p> <!-- v-bind:属性 简写 :属性--> <p...

vue学习之列表循环列表循环是十分常用的，直接上代码<template> <div id="app"> <ul> <li v-for="(item,index) in list1" :key="index"> {{item}} </li> </ul> &l...

如何搭建vue脚手架工具搭建vue的开发环境：https://cn.vuejs.org/v2/guide/installation.html1、必须要安装nodejs；2、搭建vue的开发环境 ，安装vue的脚手架工具 官方命令行工具；npm install --global vue-cli / cnpm install --global vue-cli注：cnpm 需安...

vant组件的引入方式这里接着上一讲（vue cli3脚手架创建vant项目环境）1.全局导入所有组件注意：配置 babel-plugin-import 插件后，将不允许以这种方式导入组件在main.js里面写入import Vue from 'vue'; import Vant from 'vant';import 'vant/lib/index.css';Vue.use(Va...

vue cli3脚手架创建vant项目环境1.在桌面创建一个文件夹vant，终端cd到vant文件下,运行下面vue create vantsite vantsite就是你的项目的目录文件，可以随意取名，但好像不能驼峰式会报错出现上图后直接回车，安装成功后 运行下面代码回车vue ui成功后浏览器会自动弹出页面 不能弹出手动输入终端里面的链接localhost:8000选择...

vue路由嵌套实现目标：新增一个用户中心页面；页面左侧为菜单栏，点击菜单右边内容区变化，如下图：1.新建组件，如下图2.引用组件 在main.js里面配置好。代码如下：3.在App.vue加上链接，让用户页面打开默认显示useradd组件的内容，如果是to="/user"打开用户页面时会是空白4.user组件左侧li添加路由切换，right为内容展示区，代码如下；运行效果如下...

vue编程式导航及hash模式接着（16）讲，在home组件点击按钮跳转到news组件1.以js的方式跳转<template> <div id="home"> {{msg}} <br> <button @click="goNews">通过js跳转到新闻页面</button> </div>...

路由结合请求数据 数据渲染首先在main.js里面引入vue-resource，前提先安装vue-resource插件（前面有讲解过安装vue-resource，这里就不再赘述）new组件里面代码如下：将aid传给conten组件；<template> <div id="news"> <ul> <li v-for="(item...

动态路由和get传值

vue路由1.安装vue-routernpm install vue-router --save 或者 cnpm install vue-router --save 安装成功后在node_modules文件可以看到vue-router文件步骤如下代码：//引入vue-router并useimport VueRouter from 'vue-router';Vue.use(Vu...

vue非父子组件之间的传值先建两个组件Home,vue和News.vue在App.vue里面引用两个组件（组件引用的方式前面有做过讲解，这里就不再叙述）1.新建一个vueEvent.js 新建一个空的vue实例并暴露出去；import Vue from 'vue';var VueEvent =new Vue();export default VueEvent;2.在Home.vue...

vue父子组件主动获取数据和方法父组件主动获取子组件的数据和方法1.定义一个ref<v-header ref="getChildren"></v-header>2.调用this.$refs.getChildren.属性this.$refs.getChildren.方法home组件代码如下：<template> <div> ...

vue父组件给子组件传值1.父组件给子组件传值前提：先在home组件里面引入header组件；<template> <div> <v-header></v-header> <hr> <h2>我是home组件</h2> </div></template>...

vue请求数据vue请求数据的方法有多种，这里用官方提供的插件vue-resource进行讲解。github里面搜索vue-resource;1.安装例如我的项目文件为vuedemo 终端cd到项目文件安装vue-resource；这里推荐npm install vue-resource --save 写入到package.json里面；安装完成后会在node_modules文件里...

vue组件中的生命周期函数在home组件里面引用了life组件，代码如下<template> <div> <h2>我是home组件</h2> <v-life v-if="flag"></v-life> <br> <button @click="flag=!flag"&g...