前端
猿某人74110
我能永远吃苦,却不能永远年轻!
展开
-
【轻松学vue】vue.js基础入门教程(一)介绍&安装
一、vue.js介绍Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。虽然没有完全遵循 MVVM 模型,但是 Vue 的设...原创 2019-05-13 14:55:36 · 259 阅读 · 0 评论 -
【轻松学vue】vue.js基础入门教程(二)第一个程序
一、起步开发环境引入vue.js,生产环境把vue.js换成vue.min.js,生产环境即线上正式运行环境,一般**.min.js都是混淆压缩后的js文件,体积更小创建html文件,引入cdn的vue.js,或将vue.js文件放到你的项目文件夹下引入<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><...原创 2019-05-13 15:09:44 · 358 阅读 · 0 评论 -
【轻松学vue】vue.js基础入门教程(三)模板语法
一、模板语法文本:{{message}} vue数据绑定最常见的形式,只要数据(data)对象message的值发生变化,插值处内容就会随之更新如果想让内容只渲染一次,可以使用v-once指令:<div v-once>{{msg}}</div>,当msg的值改变,插值处的内容不会改变测试可以在浏览器打开控制台,输入app.msg="nihao"来测试是否会改变原始...原创 2019-05-13 15:27:09 · 184 阅读 · 0 评论 -
【轻松学vue】vue.js基础入门教程(四)常用指令
vue常用指令上一节用的v-html就是vue.js的一个指令,那么什么是指令呢?Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribute)。vue.js常用指令如下:指令名说明v-if…v-else条件渲染指令v-...原创 2019-05-13 16:38:35 · 458 阅读 · 0 评论 -
【轻松学vue】vue.js基础入门教程(五)v-for指令
v-for指令根据一组数组的选项列表进行渲染。<div id="app"> <ul> <li v-for="(item,index) in items"> {{index}}--{{item}} </li> </ul></div><scri...原创 2019-05-13 17:03:14 · 153 阅读 · 0 评论 -
【轻松学vue】vue.js基础入门教程(六)v-on指令
v-on指令监听DOM事件。<div id="app"> <button v-on:click="add">点击加1</button> <div>数值增加了{{counter}}次</div></div><script> var app = new Vue({ el:...原创 2019-05-13 17:43:09 · 158 阅读 · 0 评论 -
【轻松学vue】vue.js基础入门教程(七)v-model指令
v-model指令表单输入绑定(双向绑定)v-model应用在<input>、<textarea>、<select>标签上,实现数据的双向绑定<div id="app"> <div> <p>单行文本框:<input type="text" v-model="text"></p&g...原创 2019-05-13 21:44:28 · 249 阅读 · 0 评论 -
【轻松学vue】vue.js基础入门教程(八)v-bind指令
v-bind指令给元素绑定属性,语法:v-bind:id=”idName”,也可以自定义绑定自定义属性:v-bind:data=“dataName”<div id="app"> <div> <button v-bind:id="attrbuteId" v-bind:data-index="index" v-on:click="getAttr...原创 2019-05-14 15:04:46 · 461 阅读 · 0 评论 -
【轻松学vue】vue.js指令综合应用
使用指令完成用户数据的增删查功能<!DOCTYPE html><html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> &l...原创 2019-05-14 15:10:40 · 189 阅读 · 0 评论 -
【轻松学vue】vue.js基础入门教程(九)样式绑定
样式绑定操作元素的class列表和style内嵌样式的常见的需求。因为class和style都是html的属性,所以我们可以使用v-bind来动态改变样式。1) 绑定html的class可以为v-bind:class设置一个对象,动态切换class<style> .active{ color: red; }</style><...原创 2019-05-14 15:27:59 · 138 阅读 · 0 评论 -
【轻松学vue】vue.js基础入门教程(十)计算属性
计算属性vue模板语法中可以使用js的方法实现数据的简单处理<div id="app"> <div>{{message.split('').reverse().join('')}}</div></div><script> var app = new Vue({ el:"#app", ...原创 2019-05-14 15:43:38 · 225 阅读 · 0 评论 -
【轻松学vue】vue.js基础入门教程(十一)组件
组件组件(Component)是vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用。组件在vue脚手架开发中扮演着很重要的角色。1) 注册全局组件<div id="app"> <button-counter></button-counter></div>...原创 2019-05-14 17:18:11 · 241 阅读 · 0 评论 -
【轻松学vue】vue.js基础入门教程(十二)声明周期钩子函数
生命周期钩子函数从vue实例被创建到实例被销毁,这个完整的声明周期内,vue给我们提供了多个钩子函数。vue1.0+vue2.0描述initbeforeCrete组件实例被创建,组件计算属性之前createdcreated组件实例创建完成,属性已绑定,但DOM还未生成,$el属性还不存在compiledbeforeMount模板编译/挂载之前...原创 2019-05-14 19:54:38 · 184 阅读 · 0 评论 -
【轻松学vue】vue.js基础入门教程(十三)路由模块
vue路由模块路由:通过不同的url访问不同的内容需要引入vue-router.js文件,如果是脚手架环境,我们需要下载相应模块<div id="app"> <p> <!--router-link组件做导航--> <!--to指定url地址的变化--> <router-link to...原创 2019-05-14 20:57:28 · 152 阅读 · 0 评论 -
【轻松学vue】vue.js基础入门教程(十四)node.js服务器
node.js服务器我们使用node.js完成下一个问题——使用vue的ajax和数据库的交互。node.js完成服务端程序。node.js就是运行在服务端的javascript,它是一个基于Chrome javascript运行时建立的一个平台。是一个事件驱动I/O服务端javascript环境,基于Google的V8引擎,V8引擎执行javascript的速度非常快,性能非常好。Nod...原创 2019-05-23 09:35:52 · 194 阅读 · 0 评论 -
【轻松学vue】vue.js基础入门教程(十五)node.js实现增删改查
使用node.js实现后端数据库的增删改查(如对node.js感兴趣,可深入学习)1) 创建一个文件夹nodeserver2) 使用cmd进入文件夹nodeserver3) npm install express4) npm install mysql5) 在此文件夹下创建server.js文件6) 使用nvaicat创建数据库vue7) 执行sql语句创建数据库表CREATE T...原创 2019-05-23 09:42:58 · 281 阅读 · 0 评论 -
【轻松学vue】vue.js基础入门教程(十六)vue-resouse
vue-resouse(vue对ajax的封装)vue实现异步加载需要引入vue-resource库脚手架环境引入对应模块注意:完成这部分内容我们需要上节的知识,需要启动node.js服务端监听<script src="js/vue-resource.js" type="text/javascript"></script>1)查询user表中的所有数据<...原创 2019-05-23 09:54:59 · 270 阅读 · 0 评论 -
【轻松学vue】vue.js路由和resource模块综合应用
实现一个简单的博客系统数据库:CREATE TABLE `blog` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '表id', `title` varchar(255) DEFAULT NULL COMMENT '博客标题', `author` varchar(255) DEFAULT NULL COMMENT '...原创 2019-05-23 10:06:19 · 156 阅读 · 0 评论 -
【轻松学vue】vue.js脚手架(一)脚手架搭建
vue-cli脚手架搭建环境:node.js、mysql、vue-cli工具:webstrom、Gitvue-cli脚手架的搭建所依赖的环境是node.js,使用的是node.js提供的npm命令,所以在开始脚手架搭建之前必须安装node.js环境。前面的教程中有node.js的安装,可选择查看vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack...原创 2019-05-29 10:43:00 · 313 阅读 · 0 评论 -
【轻松学vue】vue.js脚手架(二)文件流程及根组件app
文件流程及根组件app文件流程项目启动后,vue通过内部文件的加载机制首先加载index.html,然后调用main.js程序文件,最后通过vue实例引入根组件App.vueindex.html(入口模板文件)->main.js(程序入口文件)->App.vue(组件入口文件)main.jsimport Vue from 'vue' //导入vue模块,相当于引入vu...原创 2019-05-29 10:51:20 · 236 阅读 · 0 评论 -
【轻松学vue】vue.js脚手架(三)组件嵌套
组件嵌套实际上,HelloWorld已经实现了组件嵌套。嵌套过程:首先创建组件->使用import导入->在处理逻辑中注册组件->在模板中插入组件标签例:在app.vue中嵌套user组件在components文件夹中新建User.vue<template> <div class="user"> {{username}} ...原创 2019-05-29 10:56:40 · 209 阅读 · 0 评论 -
【轻松学vue】vue.js脚手架(四)组件css作用域
组件css作用域App.vue<template> <div id="app"> <h1>{{msg}}</h1> <User></User> </div></template><script>export default { name: 'App',...原创 2019-05-29 11:00:30 · 163 阅读 · 0 评论 -
【轻松学vue】vue.js脚手架(五)组件传值props
组件传值propsApp.vue<template> <div id="app"> <User v-bind:users="users"></User> </div></template><script>export default { name: 'App', data(){ ...原创 2019-05-29 11:08:05 · 204 阅读 · 0 评论 -
【轻松学vue】vue.js脚手架(六)事件传值(子向父)
事件传值(子向父)App.vue<template> <div id="app"> <User v-bind:users="users" v-bind:title="title" v-on:changeAllTitle="changeAllTitle"></User> <User v-bind:users="users"...原创 2019-05-29 11:12:35 · 201 阅读 · 0 评论 -
【轻松学vue】vue.js脚手架(七)路由
路由项目中使用路由模块,需要下载使用命令 :npm install vue-router --save-dev在src中创建一个文件夹叫router,在router中创建一个index.js文件写如下配置:import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Rou...原创 2019-05-29 11:22:12 · 126 阅读 · 0 评论 -
【轻松学vue】vue.js脚手架(八)vue-resource
vue-resource使用命令:npm install vue-resource --save-dev 安装模块在src目录下创建resource文件夹,创建index.js写入如下配置:import Vue from 'vue'import Resource from 'vue-resource'Vue.use(Resource)export default {}在main....原创 2019-05-29 11:34:09 · 158 阅读 · 0 评论 -
【轻松学vue】脚手架综合案例
后端:node.js数据库:mysql工具:webstrom此案例是把我们指令综合案例改装成vue-cli脚手架来实现在webstrom中创建一个名为blog的vue-cli项目。最终项目目录结构如下main.js// The Vue build version to load with the `import` command// (runtime-only or sta...原创 2019-05-30 10:18:41 · 304 阅读 · 0 评论