![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
Vue快速入门
奇葩也是花
码农也是码
Ps:有问题可以私聊我
展开
-
Css3 Flex布局
Flex 布局原创 2022-04-21 11:17:36 · 317 阅读 · 0 评论 -
css 水平垂直居中(背景铺满)
#app{ height: 100%; width: 100%;}.login { background: url('../../assets/bg4.jpg') no-repeat; background-size: 100% 100%; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; .grid-content { backg原创 2021-03-11 15:24:10 · 406 阅读 · 0 评论 -
vue-elementui--按钮和提示信息的简单使用
<template> <div class="hello"> <el-alert v-if="show" title="点击提示成功的信息" description="这个框不用管他会自动消失的" show-icon center type="success"> </el-alert> <el-row>原创 2020-09-24 13:10:33 · 5159 阅读 · 0 评论 -
vue-elementui简单使用
elementui文档地址安装vuevue init webpack likang-demo安装element-ui npm i element-ui -S引入 Element在 main.js 中写入以下内容:import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';Vue.use(ElementUI);找到Hello原创 2020-09-24 13:04:05 · 170 阅读 · 0 评论 -
vue-项目开发-购物车Js效果
<template> <div class="hello"> <table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> <input type="checkbox" v-model="all_select" @click="choseAll()"/> </td>原创 2020-07-16 22:06:03 · 211 阅读 · 0 评论 -
Vue-页面传值
父页面<template> <div class="hello"> {{msg}} <table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td>序号</td> <td>年级</td> <td>学生</td> .原创 2020-07-13 20:26:34 · 203 阅读 · 0 评论 -
vue-项目-MiXin(commonjs)
export default { methods: { gotoPage: function ( page_name ) { this.$router.push( { name:page_name } ); }, ajaxPost:function ( url , data ) { return this.$http.post( url , data ).then( (response) =>{ return response.bo原创 2020-05-29 16:08:23 · 466 阅读 · 0 评论 -
vue-项目-商品详情
<template> <div class="maincont"> <header> <a href="javascript:history.back(-1)" class="back-off fl"><span class="glyphicon glyphicon-menu-left"></span></a> <div class="head-mid"> <h1>原创 2020-05-29 16:06:52 · 644 阅读 · 0 评论 -
vue-实现商品列表(列表+刷新+筛选)
<template> <div class="maincont"> <header> <a href="javascript:history.back(-1)" class="back-off fl"><span class="glyphicon glyphicon-menu-left"></span></a> <div class="head-mid"> &l原创 2020-05-29 16:05:53 · 4487 阅读 · 0 评论 -
vue-首页
<template> <div class="maincont"> <div class="head-top"> <img src="@/assets/images/head.jpg" /> <dl> <dt> <a v-if="is_login" href="user.html"> <img :src="user_info原创 2020-05-29 16:05:05 · 283 阅读 · 0 评论 -
vue-项目-实现登陆
<template> <div class="maincont"> <header> <a href="javascript:history.back(-1)" class="back-off fl"><span class="glyphicon glyphicon-menu-left"></span></a> <div class="head-mid"> &l原创 2020-05-29 16:04:29 · 225 阅读 · 0 评论 -
vue-项目-实现注册-(验证码+倒计时+短信发送)
<template> <div class="maincont"> <header> <a href="javascript:history.back(-1)" class="back-off fl"><span class="glyphicon glyphicon-menu-left"></span></a> <div class="head-mid"> &l原创 2020-05-29 16:03:10 · 1389 阅读 · 0 评论 -
Js-promise
<script> // function callback() { // console.log('Done'); // } // console.log('before setTimeout()'); // setTimeout(callback, 3000); // 1秒钟后调用callback函数 // console.log('after setTimeout()'); function callback(){ // P原创 2020-05-25 08:45:12 · 136 阅读 · 0 评论 -
vue-linux下挂后台运行
linux下如果需要把vue项目挂到后台可以使用nohupnohup npm run dev >> ./vue.log & 实际在使用的时候发现,断开xshell之后会自动关闭项目。如果要挂后台可以在这个命令基础上加上exit,这样就可以了nohup npm run dev >> ./vue.log & exit...原创 2020-05-21 08:50:01 · 2718 阅读 · 0 评论 -
vue-项目部署到Nginx服务器
vue项目开发完成之后 需要把代码部署到web服务器上,此处以Nginx为例找到你的项目目录,执行以下代码 npm run build 对vue项目进行打包,没有问题的话,会提示 Build complete.[root@izm5e331c21uktboqzfrvqz likang-demo]# npm run build> likang-demo@1.0.0 build /data/wwwroot/vue/likang-demo> node build/build.js⠸原创 2020-05-19 22:51:04 · 909 阅读 · 0 评论 -
vue-watch和computed
computed:计算属性,它会根据数据动态显示新的计算结果。watch: 监听数据的改变。一个数据需要被监听并且对数据做一些操作就用 watch计算属性DEMO:new Vue({ el: '#id', template: `<div> <span>Name: {{name}}<span> </div>`, data: { firstName: 'Leo', lastNam原创 2020-05-17 13:35:21 · 229 阅读 · 0 评论 -
vue-抽象公共方法以及调用
在实际项目中,可能很多的代码需要服用,这样的话就要求我们把公共的部分抽象出来,Vue中可以使用mixin把公用的代码抽象出来Mixin模式,混合模式。这是一种不用继承就可以复用的技术。主要还是为了解决多重继承的问题。多继承的继承路径是个问题。JS是基于对象的,类和对象都是对象模板。混合mixin,指的是将一个对象的全部或者部分拷贝到另一个对象上去。其实就是属性了。可以将多个类或对象混合成一个类或对象。1、创建名字为mixin的文件夹,用来写一些公共的方法在src目录下创建 mixin的路径,用原创 2020-05-13 09:11:12 · 1183 阅读 · 0 评论 -
Vue-登陆实现
<template> <div class="hello"> // 给my-header组件传递参数 title 组件名字为myHeader 但是在template调用的时候要写为 my-header <my-header title="LIKANG TEST"></my-header> 手机号:<input type="text " v-model="user_name"/><br/> 密码:&l原创 2020-05-13 00:19:18 · 200 阅读 · 0 评论 -
Vue-请求数据渲染页面
1、前边说到ajax请求的发送,今天要实现的是页面加载完成之后,渲染出列表的数据2、首先新建一个GoodsList.vue ,加入一下HTML内容<template> <div class="hello"> <h1>{{title}}</h1> <ul> <li v-for="(v,k) in goodsList" :key="k"> <div style="border:1px原创 2020-05-13 00:01:26 · 7235 阅读 · 2 评论 -
vue-发送Ajax请求
1、使用Vue开发的时候,肯定要使用到ajax去服务端请求数据。这个时候就需要用到AJAX发送请求到服务端,Vue项目内置了对http的支持,2、使用http请求执行需要先添加对应用到的类库,找到src目录下的 main.js ,添加一下内容// 引入http请求相关类库import VueResource from 'vue-resource'//使用http请求相关类库Vue.use(VueResource)// 确保post请求不会被转换为 options 请求Vue.http.opti原创 2020-05-12 22:44:16 · 1189 阅读 · 0 评论 -
Vue-表单元素绑定
1、添加表单元素// 文本框 输入的内容绑定到 name<input type="text" v-model="name"/>// 下拉框 - 数据从data的 tt 中读取 选择的结果绑定到 select_value<select v-model="select_value"> <option value="0">请选择</option> <option v-for="(v,k) in tt" v-bind:key="k" :v原创 2020-05-12 22:30:11 · 471 阅读 · 0 评论 -
vue-v-bind绑定属性到元素
// HTML 通过v-bind给div绑定颜色<div v-bind:style="‘color:'+rand_color+"> 这里是测试的内容</div><button @click="changeColor()">点击切换颜色</button>//通过v-bind给div绑定样式,指向JS中 data下的my_class ,也就是给改div指定了main的样式<div v-bind:class="myclass"> 这里是原创 2020-05-12 21:58:30 · 526 阅读 · 0 评论 -
vue-vmodel数据的双向绑定
1、没有出现双向绑定之前( 1 ) 在没有出现数据双向绑定之前,我们一般要更新页面的数据,需要找到节点,修改节点的数据,拿Jquery举例:// HTML代码<div id='ele'>我是要修改的值</div>//Js代码 Jq写法let msg = '我是要修改的值';$('#ele').val(msg);这样的代码相对还是比较简单,如果我们要实现一个用户输入给出对应提示。相对就比较麻烦了。// HTML代码<div id='notice'>这原创 2020-05-12 21:23:04 · 471 阅读 · 0 评论 -
vue-数据遍历-IF判断
1、在js代码中的data节点中,定义一个数据<script>export default { name: 'HelloWorld', show_div: true, data () { return { title: 'test title' list: [ { id: 1, name: 'likang' }, { id: 2, nam原创 2020-05-12 20:58:53 · 4121 阅读 · 0 评论 -
双向绑定原理
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>原生js实现简单的双向数据绑定</title></head><body><input type="text" id="userName"><span id ="uName"></span><script> var转载 2020-05-12 17:29:26 · 273 阅读 · 0 评论 -
Vue-页面跳转2
1、页面添加a标签 <div> <a href="javascript:;" @click="gotoList()" >跳转页面</a> </div>其中需要把a标签href 修改为 javascript:;@click代表给a标签绑定点击时间 调用gotoList方法2、对应js代码export default { name: 'HelloWorld', data () { return { },原创 2020-05-11 11:55:12 · 341 阅读 · 0 评论 -
vue-页面跳转-router-link
1、Vue项目新建成功之后,打开src的目录。src目录是我们要写代码的目录assets 目录 用来存放一些静态资源components 目录 用来存放我们的组件,我们要写的代码基本都在这个目录下,新建的vue页面都放在这个目录下router 目录 目录下index.js 是我们的路由文件,规定了项目中可以访问的路由App.vue 是我们的核心文件,可以理解为入口文件main.js 核心js文件,在这个文件初始化了Vue2、新建成功之后,默认会产生一个 HelloWorld.vue,而且原创 2020-05-11 11:40:47 · 921 阅读 · 0 评论 -
vue-目录介绍
── v-proj| ├── node_modules // 当前项目所有依赖,一般不可以移植给其他电脑环境| ├── public| | ├── favicon.ico // 标签图标| | └── index.html // 当前项目唯一的页面| ├── src| | ├── assets // 静态资源img、css、js| | ├── components // 小组件转载 2020-05-10 12:57:34 · 220 阅读 · 0 评论 -
vue-创建一个vue项目
统一管理,把vue的内容全部放到指定的目录[root@izm5e331c21uktboqzfrvqz vue]# mkdir -p /data/wwwroot/vue && cd /data/wwwroot/vue 使用npm安装vue,需要用到vue和vue-cli[root@izm5e331c21uktboqzfrvqz vue]# cnpm install vue vue-cli -g# -g 安装之后全局可以使用创建一个基于vue的项目# 敲完命令之后一堆.原创 2020-05-10 12:47:36 · 1071 阅读 · 0 评论 -
Linux下安装Cnmp
国内下载nodejs模块可能会很慢,也有可能失败,为了保证下载效率,可以使用 cnpm加速访问。【和composer镜像原理一样】安装文档可参考:https://developer.aliyun.com/mirror/NPM?from=tnpm# 使用npm安装 cnpm[root@izm5e331c21uktboqzfrvqz vue]# npm install -g cnpm --registry=https://registry.npm.taobao.org[...............原创 2020-05-10 12:16:33 · 995 阅读 · 0 评论 -
vue-nodejs-nvm安装
NVM:nvm:nodejs 版本管理工具。在开发和测试中可能会用到多个版本的nodejs,nvm专门用来坐nodejs版本的管理,可以实现nodejs的切换。nvm github地址:https://github.com/nvm-sh/nvmhttps://github.com/coreybutler/nvm-windows安装下载安装的脚本,并且安装nvmcurl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/insta原创 2020-05-10 11:58:44 · 696 阅读 · 0 评论 -
Vue-Linux下Nodejs环境安装
Nodejs官网Nodejs官网下载Nodejs下载Nodejs文档地址Nodejs 文档Linux 安装Nodejs二进制安装:下载nodejs的安装包,放到指定的目录下# 把NodeJs的包下载下来,放到home/package下方便后期查找mkdir -p /home/package && cd /home/package wget https:...原创 2020-05-07 17:05:06 · 637 阅读 · 0 评论 -
vue-常见名词解析
Nodejs【菜鸟教程解释】简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。Vue和NodejsNodejs :nodejs是js...原创 2020-05-07 16:47:57 · 1167 阅读 · 0 评论 -
单页应用的原理
<a href="#index">Index</a><a href="#list">List</a> <h1 id="main"></h1>};/** * 单页应用原理: * 只有 # 后面的 fragment 发生改变时,页面不会重新请求,其他参数发生变化,都会引起页面的重新请求。 * window.onh...原创 2020-05-07 16:48:21 · 324 阅读 · 0 评论 -
vue基本认知
一、wap站的普及随着移动端的普及,很多的wap(h5)应用出现了,手机站、公众号等,普通网页的缺点:(1)点击链接或者按钮整个页面刷新(2)Js css请求很多,加载时间较长二、传统web/wap页面特点:做操作的时候,会引起整个页面的刷新,页面刷新之后都会重新加载所有的js 和 css。【加载速度慢,页面刷新体验差】点击 超链接提交表单js使用 location.href...原创 2020-05-07 16:48:36 · 428 阅读 · 0 评论