Vue
Hi-Jimmy
Coder & Coding - 技术讨论及工作联系:douyang369@163.com
展开
-
Vue入门教程合集
自己虽然是做后端的,但是对前端还是有很大兴趣,之前项目用过React和Vue,对比之下个人更喜欢Vue的方便与简洁。所以整理以下教程。本教程只是带大家入门学习,更多进阶高级用法还需要自己实际摸索或参考官方CookBook。目录Vue入门教程 第一篇 (概念及初始化)Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。V...原创 2020-04-16 15:24:24 · 1576 阅读 · 0 评论 -
Vue入门教程 第一篇 (概念及初始化)
注:为了本教程的准确性,部分描述引用了官网及网络内容。安装Vue1、使用npm安装vue:npm install vue2、下载使用js文件:https://vuejs.org/js/vue.min.jsVue概念Vue (读音 /vjuː/,类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vu...原创 2019-10-16 10:44:00 · 918 阅读 · 0 评论 -
Vue入门教程 第二篇 (数据绑定与响应式)
数据绑定Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:1 <div id="app">2 {{ message }}3 </div>1 var app = new Vue({2 el: '#app',3 data: {4 message: 'Hello Vue!'5 }...原创 2019-10-16 10:52:00 · 881 阅读 · 0 评论 -
Vue入门教程 第三篇 (条件、循环)
v-if语法(条件)符合条件时显示(渲染)某一元素。 1 <div id="app"> 2 <div v-if="ok"> 3 <h1>title</h1> 4 </div> 5 6 <div v-if="type==1"> 7 <h...原创 2019-10-16 10:59:00 · 424 阅读 · 0 评论 -
Vue入门教程 第四篇 (属性、事件)
computed计算属性计算属性(computed)在处理一些复杂逻辑时是很有用的。它的定义方式与methods类似。 1 <div id="app"> 2 <div> 3 name:{{name}} 4 </div> 5 {{reversedMessage}} 6 </div> 7 8 <...原创 2019-10-16 11:07:00 · 374 阅读 · 0 评论 -
Vue入门教程 第五篇 (组件)
component(组件)vue是单页面web程序,这意味着需要大量模块化界面参与其中,这就是组件。组件是一个实现单一功能的vue界面,也可以是一个以功能划分而成的复杂vue界面。注册组件:Vue.component('my-component-name', { /* ... */ })范例: 1 <div id="app"> 2 <ru...原创 2019-10-16 11:13:00 · 527 阅读 · 0 评论 -
Vue入门教程 第六篇 (路由、axios)
路由Vue.js 路由需要载入 vue-router 库。npm安装:npm install vue-router使用范例: 1 // router/index.js 2 import Vue from 'vue' 3 import Router from 'vue-router' 4 import Login from '@/pages/login' 5 imp...原创 2019-10-17 11:23:00 · 456 阅读 · 0 评论 -
Vue入门教程 第七篇 (vue脚手架、发布)
vue-cli(vue脚手架)vue-cli,我们也称vue脚手架,是一个全自动生成vue项目的程序,使用它我们可以快速搭建一个基础的vue项目。vue-cli只是为了方便我们开发的工具,并非必须。npm安装脚手架程序:npm install -g vue-cli开始初始化项目(项目名称:project-name):vue init webpack project-name...原创 2019-10-17 11:32:00 · 400 阅读 · 0 评论 -
Vue入门教程 第八篇 (拓展:自定义指令、vuex)
自定义指令除了核心功能默认内置的指令 (v-model 、 v-show等),Vue 也允许注册自定义指令。如果你需要对普通 DOM 元素进行底层操作,这时候就会用到它。举个聚焦输入框的例子,如下: 1 <div id="app"> 2 <p>页面载入时,input 元素自动获取焦点:</p> 3 <input v-fo...原创 2019-10-17 14:00:00 · 664 阅读 · 0 评论