![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
南南合作
这个作者很懒,什么都没留下…
展开
-
Vue项目前期准备--插件下载与IDE的配置
插件下载需要下载浏览器插件 Vue.js devtools下载完成后,如果网站是用Vue框架,那么右上角的V会高亮显示,f12打开控制器,也可以看到我用的IDE是Vscode,需要下载以下插件:自动补全标签插件 Auto Close Tag浏览器自动打开,修改文件,浏览器自动刷新插件 Live Server路径自动补全插件 Path Intellisensevue语法高...原创 2018-11-29 09:57:06 · 670 阅读 · 0 评论 -
组件的生命周期
生命周期分为八个阶段:1.beforeCreate(创建前)2.created(创建后),3.beforeMount(载入前),4.mounted(载入后),5.beforeUpdate(更新前),6.updated(更新后),7.beforeDestroy(销毁前),8.destroyed(销毁后)<!DOCTYPE html><html lang="en...原创 2019-01-04 19:10:54 · 112 阅读 · 0 评论 -
Vue中计算属性computed
计算属性出现的目的是解决模板中放入过多的逻辑会让模板过重且难以维护的问题;计算属性是基于它们的依赖进行缓存的 <!-- html部分--><div id="app"> <input type="text" v-model="firstName"> <input type="text" v-model="lastName"&g...原创 2019-06-25 20:00:12 · 157 阅读 · 0 评论 -
Vue中的监听watch及深度监听
(watch)用来观察和响应 Vue 实例上的数据变动 <div id="app"> <input type="text" v-model="firstName"> <input type="text" v-model="lastName"> <!-- 这样写不好,这样是模板逻辑变得厚重,不易维护 --...原创 2019-06-25 20:09:15 · 1034 阅读 · 0 评论 -
Vue中局部过滤器和局部自定义指令
不管是局部自定义指令还是局部过滤器都只能在当前组件内使用,脱离当前组件无效// 全局自定义指令可以在任何组件中使用 Vue.directive('mycolor', { inserted(el, binding) { console.log(binding); // binding.value可以获取传入自定...原创 2019-06-26 08:45:07 · 400 阅读 · 0 评论 -
Vue中的路由使用及添加参数
在一个系统中会由很多页面组成,在Vue开发中这些页面通常使用的是Vue中的组件来实现的,那么当在一个页面要跳转到另外一个页面的时候是通过改变url路径来实现的,那么这个时候Vue需要知道当前url对应的是哪个组件页面<!DOCTYPE html><html lang="en"><head> <title></title>...原创 2019-06-26 09:41:40 · 8632 阅读 · 1 评论 -
Vue中监听路由参数变化
var productType = Vue.component('indexB', { data() { return { allProduct: '' } }, // 在h...原创 2019-06-26 09:56:22 · 1081 阅读 · 0 评论 -
vue-cli脚手架工具的使用
全局安装vue-cli npm install vue-cli -gvue init webpack jxc-weekly运行项目 npm run dev项目上线 npm run build原创 2019-06-26 20:06:42 · 148 阅读 · 0 评论 -
Vue中登录状态保存
HTTP请求是无状态的cookie 1. 保存在客户端 2. 数据量小(很多站点对cookie的大小和数量进行了限制) 3. 不安全(别人可以分析存放在本地的cookie并进行cookie欺骗,也可能被拦截)session 1. 保存在服务器端 2. 安全 3. session可以依赖cookie,也可以不依赖使用url 4. 访问量增多,占用服务器资源,如果服务器挂...原创 2019-07-02 12:01:51 · 4177 阅读 · 0 评论 -
利用component组件和is属性实现动态组件
<!DOCTYPE html><html lang="en"><head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=d原创 2019-01-04 18:32:11 · 5716 阅读 · 0 评论 -
兄弟组件间的传值
<!DOCTYPE html><html lang="en"><head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=de原创 2019-01-04 18:20:31 · 1009 阅读 · 0 评论 -
什么是MVVM
M :Model(数据模型)V :View(视图模型)VM:ViewModel(一个同步View和Model的对象)用jquery库开发存在缺点:1. 业务与视图代码糅合一起,会相互影响2. 大量操作DOM,操作冗余,难以维护3. 大量的DOM操作使得页面渲染性能降低,加载速度变慢,影响用户体验4. 当Model频繁变化时,开发者需要手动更新view,用户操作改变model时,...原创 2018-11-29 11:26:12 · 174 阅读 · 0 评论 -
vue中常用的系统指令
插值表达式数据绑定最常见的形式,其中最常见的是使用插值表达式,写法是{{}} 中写表达式<body> <div id="app"> <p>{{name}}</p> <p>{{age}}</p> </div> &a原创 2018-11-29 20:43:56 · 359 阅读 · 0 评论 -
Vue中使用过滤器filter
1. 定义方式 可以在 new Vue({filters:{}})中的filters中注册一个私有过滤器 2. 定义格式: new Vue({ el:'#app', filters:{ '过滤器名称':function(管道符号|左边对象的值,参数1,参数2,....) { ...原创 2018-12-19 13:41:24 · 436 阅读 · 0 评论 -
vue中组件的创建
三种创建方法:注意:1.模板template中只能有一个根节点2.组件的名字,如果采用驼峰命名的话,如myName,那么在使用的时候只能只用my-name1.vue.extend结合vue.component创建&lt;body&gt; &lt;div id="app"&gt; &lt;index-a&gt;&lt;/inde原创 2019-01-03 19:59:45 · 407 阅读 · 0 评论 -
组件中使用指令和事件
错误写法data: { msg: 'hello world' }data必须是一个函数<!DOCTYPE html><html lang="en"><head> <title></title> <meta charset="UTF-8"> <原创 2019-01-04 10:59:15 · 242 阅读 · 0 评论 -
在Vue中输入框自动获取焦点的三种方式
原生JS操作DOM使用mounted钩子函数,它表示页面一加载进来就执行函数里面的内容(和window.onload类似)//html部分 编号:<input type="text" v-model='newId' id='inputId'>//vue对象var vm = new Vue({ el: '#app', data: { newId...原创 2018-12-19 13:22:20 · 33715 阅读 · 3 评论 -
父子组件创建
<body> <div id="app"> <father></father> </div> <script> // 创建一个fahter组件 Vue.component('father', { template: `&原创 2019-01-04 11:29:38 · 384 阅读 · 0 评论 -
父子组件间的传值
父组件向子组件传值 (props)<body> <div id="app"> <father></father> </div> <script> //创建一个父组件 Vue.component('father', { te原创 2019-01-04 14:35:51 · 693 阅读 · 0 评论 -
Vue中路由全局守卫
//注册全局守卫,作用是路由跳转前对路由进行判断,防止未登陆的用户跳转到其他页面去router.beforeEach((to,from,next)=>{ let token=localStorage.getItem('mytoken') //如果已经登录就不干涉 if(token){ next() }else{ if(to.p...原创 2019-07-02 12:03:13 · 377 阅读 · 0 评论