Vue学习笔记
关注
分享
扫一扫
杨贵妃会飞飞飞
越菜越爱
展开
-
vue学习笔记（八）---- vue中的实例属性（wacth和computed的使用）
一、watch属性的使用1.传统方式实现双向数据改变监听事件（姓名拼接案例）<div id="app"> 姓: <input type="text" value="" @keyup="textChange()" v-model="firstname"/> + 名: <input type="text" value="" @keyup="textChange()" v-model="lastname"/> = 姓名: &l原创 2020-10-27 23:54:16 · 264 阅读 · 0 评论 -
vue学习笔记（七）---- vue中的路由
一、什么是路由对于普通的网站来说，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源对应单页面的应用程序来说，主要通过URL中的hash（#号）来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容，所以，单页面的应用程序的页面跳转主要用hash来处理在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；二、vue-router的安装官方文档：https://router.vuejs.org/zh/安原创 2020-10-27 23:52:50 · 249 阅读 · 0 评论 -
vue学习笔记（六） ----- vue组件
一、模块化与组件化模块化的定义模块化在Node中是一个规范，定义一些模块的相关的规则，从代码角度上来说，方便做区别，如果不使用模块化，写在js文件中不利于后期维护和扩展，从代码的层面上就把相关的功能脱离出来，所以模块化从从代码的角度触发，分析项目，把项目中一些功能类型的代码，单独抽离为一个个的模块，那么为了保证大家以相同的方式去封装模块，于是我们就创造了CommentJS规范模块化的优点在我们项目中，如果需要是实现相同的功能，就不需要再重写，所以模块化从一定程度上提高我们的开发效率，有原创 2020-10-27 23:51:49 · 367 阅读 · 0 评论 -
vue学习笔记（五）---- vue动画
官方文档：https://cn.vuejs.org/v2/guide/transitions.html一、使用过度类名没有使用动画之前：<body><div id="app"> <input type="button" value="切换" @click="flag=!flag"/> <h4>{{flag}}</h4></div><script> var vm = new Vue({原创 2020-10-27 23:48:11 · 237 阅读 · 2 评论 -
vue学习笔记（四）---- 品牌管理案例
导入相关包<script src="../lib/vue2.6.10.min.js"></script> <script src="../lib/axios-v0.17.1.js"></script>设置容器<div id="app"></div>测试数据能否接收成功Vue.prototype.$http = axios var vm = new Vue({ el: '#app.原创 2020-10-27 23:46:55 · 216 阅读 · 0 评论 -
vue学习笔记（三）---- vue-resource
一、使用vue-resource发起get请求github仓库地址：https://github.com/pagekit/vue-resource/blob/develop/docs/http.md<body><div id="app"> <input type="button" value="get请求" @click="vueget()"/></div><script src="../lib/vue-resource-1.3.4.原创 2020-10-24 19:15:59 · 476 阅读 · 0 评论 -
vue学习笔记（二） ---- vue实例的生命周期
vue实例的生命周期什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！生命周期钩子：就是生命周期事件的别名而已；生命周期钩子 = 生命周期函数 = 生命周期事件主要的生命周期函数分类：创建期间的生命周期函数：beforeCreate() {这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化},原创 2020-10-24 19:12:27 · 144 阅读 · 0 评论 -
vue学习笔记（一）---- vue指令（ v-bind 属性绑定 ）
看栗子：<body> <div id="app"> <input type="button" value="按钮" title="哈喽~~~~这不是我的title"/> </div> <script src="./vue2.6.10.min.js"></script> <script> var vm = new Vue({ el: '#app', data: {原创 2020-10-24 19:07:30 · 790 阅读 · 0 评论 -
vue学习笔记（一）---- vue指令（ v-on 事件绑定 ）
Vue 中提供了 v-on: 事件绑定机制绑定的事件处理函数必须定义到vm实例的事件处理函数 methods 中去<div id="app"> <!-- <input type="button" value="点我，魅力可大了呢" id="btn"/> --> <input type="button" value="点我，魅力可大了呢" v-on:click="add"/> <!-- <input type="butt原创 2020-10-24 19:05:09 · 281 阅读 · 0 评论 -
vue学习笔记（一）---- vue指令（浪起来~~~哦耶 的案例）
案例实现分析:把第一个字符追加到最后一个字符身上去基本结构:<body> <div id="app"> <input type="button" value="继续浪" @click="lang()"/> <input type="button" value="别浪了" @click="stop()"/> <h1>{{msg}}</h1> </div> <script sr原创 2020-10-24 19:01:24 · 196 阅读 · 0 评论 -
vue学习笔记（一） ---- vue指令（过滤器）
一、什么是过滤器官方文档：https://cn.vuejs.org/v2/guide/filters.html二、过滤器的使用没有使用过滤器之前：<div id="app"> <table> <thead> <tr> <th>排名</th> <th>菜名</th> </tr>原创 2020-10-24 18:54:10 · 320 阅读 · 1 评论 -
vue学习笔记（一） ----- vue指令（菜单列表案例）
一、渲染品牌列表<div id="app"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">添加品牌</h3> </div> <div class="panel-body form-inline">原创 2020-10-24 18:52:48 · 426 阅读 · 0 评论 -
vue学习笔记（一） ---- vue指令（v-for 和 key 属性）
vue指令之v-for和key属性一\ v-for1. v-for循环数组<div id="app"> <h3>好饿，我好想吃~~~~</h3> <ul v-for="menu in list"> <li>{{menu}}</li> </ul></div><script> var vm = new Vue({ el: '#app原创 2020-10-24 18:50:00 · 467 阅读 · 0 评论 -
vue学习笔记（一）---- vue指令（在vue中使用样式的方式）
方式:1.直接传递一个数组，注意： 这里的 class 需要使用 v-bind 做数据绑定,<style> .red { color: red; } .thin { font-weight: 200; } .italic { font-style: italic; } .active { letter-spacing: 0.5em; } </style><原创 2020-10-24 18:47:17 · 175 阅读 · 0 评论