Vue.js
关注
分享
扫一扫
涂家豪
这个作者很懒，什么都没留下…
展开
-
看程序学Vue.js 1-简介
步骤 1 : 什么是 Vue什么是 Vue？考虑这个需求： 我们要把一个 json对象的数据，显示到一个元素上去。如果不使用 Vue, 那么就会用到 JS 或者 JQuery，通过操作 HTML DOM 的方式，把数据显示上去。如果使用Vue, 那么仅仅需要提供数据，以及数据要绑定到的元素的id,就行了,不需要显式地操作HTML DOM。以下就用代码来表示这两种方式，通过比较，就知道Vu...原创 2019-06-28 19:47:52 · 188 阅读 · 0 评论 -
看程序学Vue.js 16- VUE-CLI 3 教程
步骤 1 : vue-cli 概念什么是 vue-cli 呢？vue-cli 是 vue 出来的一个脚手架，可以进行 组件式地开发。但是要运用 vue-cli , 必须要有 node.js 和 webpack 的基础，否则里面很多命令既运行不了，也无法理解。所以没有 node.js 和 webpack 基础的同学， 请先学习这两门课程：node.js 入门教程webpack 入门教程...原创 2019-06-29 17:16:42 · 143 阅读 · 0 评论 -
看程序学Vue.js 15- VUE.JS 配合 FETCH.JS 或者 AXIOS.JS 进行 AJAX 访问
步骤 1 : AjaxVue.js 并没有限制使用哪种方式进行 ajax 访问，所以可以使用如下方式原生 ajaxJQueryvue-resourcefetch.jsaxios.js那么到底用哪种方式呢？原生一般不在项目中直接用jquery 不如4，5方便vue-resource 已经不再维护了，所以不推荐fetch.js 是 vue.js 官方推荐axios.js ...原创 2019-06-29 17:11:59 · 133 阅读 · 0 评论 -
看程序学Vue.js 14- AXIOS.JS 教程实例
步骤 1 : axios.js一般说来 Vue 不会直接使用原生的 Ajax 而是使用 ajax 框架。 而 axios.js 就是眼下比较流行的一种 ajax 框架步骤 2 : 准备 json数据json 数据很简单，然后我把他放在：http://how2j.cn/study/json.txt 方便调用{“name”:“gareen”,“hp”:“355”}步骤 3 : 通过 axio...原创 2019-06-29 17:09:56 · 101 阅读 · 0 评论 -
看程序学Vue.js 13- FETCH.JS 教程实例
步骤 1 : fetch.js一般说来 Vue 不会直接使用原生的 Ajax 而是使用 ajax 框架。 而 fetch.js 就是眼下比较流行的一种 ajax 框架步骤 2 : 准备 json数据json 数据很简单，然后我把他放在：http://how2j.cn/study/json.txt 方便调用代码比较 复制代码{“name”:“gareen”,“hp”:“355”}步骤 3...原创 2019-06-29 17:07:59 · 184 阅读 · 0 评论 -
看程序学Vue.js 12- VUE.JS 什么是路由？以及如何进行路由
步骤 1 : vue.js 里的路由概念vue.js 里的路由相当于就是局部刷新。点击左边的菜单，右边的内容在不刷新整个页面的情况下，进行局部刷新步骤 2 : vue-router.min.js为了实现路由，需要一个额外的库： vue-router.min.js步骤 3 : 路由代码讲解<script src="http://how2j.cn/study/vue.min.js"&g...原创 2019-06-29 17:05:07 · 143 阅读 · 0 评论 -
看程序学Vue.js 11- VUE.JS 如何自定义指令
步骤 1 : 简单例子像 v-if, v-bind, v-on 等等前面学习的指令，都是 vus.js 自带的指令，那么除了这些指令，开发者还可以开发自定义的指令，比如 v-xart 来做一些效果。如效果所示， 一旦使用了 v-xart 这个指令，那么文字颜色就会变成粉红，后面也会自动加上 (x-art)自定义指令的方式：使用Vue.directive 来自定义第一个参数就是 指令名称...原创 2019-06-29 17:02:25 · 1270 阅读 · 0 评论 -
看程序学Vue.js 10- VUE.JS 中使用组件举例
步骤 1 : 组件是什么每个产品展示，就是一个模板。 只用做一个模板，然后照着这个模板，传递不同的参数就可以看到不同的产品展示了。这个模板，就是组件。步骤 2 : 局部组件<script src="http://how2j.cn/study/vue.min.js"></script> <style>div.product{ float:left...原创 2019-06-29 13:24:50 · 150 阅读 · 0 评论 -
看程序学Vue.js 9- 使用过滤器
步骤 1 : 一个过滤器<script src="http://how2j.cn/study/vue.min.js"></script> <style>table tr td{ border:1px solid gray; padding:10px; }table{ border-collapse:collapse...原创 2019-06-29 13:19:46 · 101 阅读 · 0 评论 -
原 看程序学Vue.js 8- VUE.JS 通过WATCH 监听属性变化
vue可以通过watch来监听属性值的变化。这是一个计算人民币对美元汇率的例子<script src="http://how2j.cn/study/vue.min.js"></script> <style>table tr td{ border:1px solid gray; padding:10px; }tab...原创 2019-06-28 20:43:40 · 149 阅读 · 0 评论 -
看程序学Vue.js 7- VUE.JS 计算属性 COMPUTED的用法举例
步骤 1 : 先看不用 computed<script src="http://how2j.cn/study/vue.min.js"></script> <style>table tr td{ border:1px solid gray; padding:10px; }table{ border-colla...原创 2019-06-28 20:42:21 · 115 阅读 · 0 评论 -
看程序学Vue.js 6- VUE.JS 通过V-MODEL进行双向绑定
步骤 1 : v-model 双向绑定前面的例子，都是把 Vue对象上的数据显示在视图上，那么如何把视图上的数据放到Vue对象上去呢？这时就需要用到v-model进行双向绑定<script src="http://how2j.cn/study/vue.min.js"></script> <div id="div1"> hero ...原创 2019-06-28 20:30:35 · 155 阅读 · 0 评论 -
看程序学Vue.js 5- VUE.JS 使用V-BIND进行属性绑定
步骤 1 : v-bind 做属性绑定<script src="http://how2j.cn/study/vue.min.js"></script> <div id="div1"> <a v-bind:href="page">http://12306.com</a></div> <scri...原创 2019-06-28 20:27:07 · 237 阅读 · 0 评论 -
看程序学Vue.js 4- VUE.JS 使用 V-FOR 循环语句实例
步骤 1 : v-for 循环语句<script src="http://how2j.cn/study/vue.min.js"></script> <style>table tr td{ border:1px solid gray;}table{ border-collapse:collapse; width:300px;...原创 2019-06-28 20:24:38 · 166 阅读 · 0 评论 -
看程序学Vue.js 3- VUE.JS 中使用 V-IF 条件语句实例
步骤 1 : v-if通过toggle函数切换show的值。 通过v-if 语句，当show 是true的时候，显示当前元素<div v-if="show"> 默认这一条是看得见的</div><script src="http://how2j.cn/study/vue.min.js"></script> <div id="div1"...原创 2019-06-28 20:21:32 · 426 阅读 · 0 评论 -
看程序学Vue.js 2- VUE.JS 监听事件 V-ON 的用法
步骤 1 : v-on 监听事件<script src="http://how2j.cn/study/vue.min.js"></script> <div id="div1"> <div>一共点击了 {{clickNumber}}次</div> <button v-on:click="count">点...原创 2019-06-28 20:00:05 · 273 阅读 · 0 评论 -
看程序学Vue.js 17- 用 VUE.JS 做一套 增删改查 CRUD
步骤 1 : CRUDCRUD 这个东西还是绕不过去的，毕竟业务上太常见了。接下来会用 VUE.js 做一套 CRUD。 不过这个 CRUD，是仅仅前端的，并没有和服务端交互。步骤 2 : 效果直接操作就可以看到 CRUD 的效果了步骤 3 : 分解动作接下来，就按照查询，增加，删除，编辑和更新，由浅入深地把这个 CRUD 一点点做出来。步骤 4 : 查询<html>...原创 2019-06-29 17:21:25 · 207 阅读 · 0 评论