![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
vue常用指令及相关操作
无悟饭空
一个立志要从事十年的迷路码农
展开
-
vue组件间通信
父子间通信 props props是父子间通信比较常用的方式,可以传字符串、数组、对象。 父组件 <template> <div > <!-- 在子组件标签用v-bind绑定传递数据--> <child :arrData=arrData :alertFun=alertFun :strData=strData :objData=objD...原创 2020-03-21 15:55:10 · 174 阅读 · 0 评论 -
v-router
vue-router中文文档 在单页面应用中,路由的配置是我们必不可少的。 vue-router基本使用步骤 1、定义路由组件,一般放到单独的文件里(views/pages) 2、配置路由 router文件夹里的index.js 的代码示例 import Vue from 'vue' // 创建路由器 import VueRouter from 'vue-router' // 引入路由组件 ...原创 2020-03-21 00:02:45 · 252 阅读 · 0 评论 -
vli脚手架编写流程
第一步入口main.js编写 import Vue form 'vue'; // 引入Vue对象; import App form './App.vue';// 引入主页面名为App的vue文件 import router form './router';// 从文件router引入 路由, // router文件必须有index.js,系统默认引入这个文件 new Vue({ el: '#ap...原创 2020-03-20 08:39:38 · 135 阅读 · 0 评论 -
vue自定义指令
注册全局指令 Vue.directive('my-directive',function(el,bounding){ //编写元素调用该指令的效果 }) el:为调用当前指令的元素; bounding:是一个对象;该对象包含了当前调用指令元素对象的一些信息; 注意:全局指令注册在vm示例外面注册; 注册局部指令 directives: { 'lower-text'(el, bin...原创 2020-03-19 17:47:08 · 112 阅读 · 0 评论 -
vue的过滤器
理解过滤器 功能:对要显示的数据进行特定格式化后再显示 注意:并没有改变原本的数据,但产生新的数据; 定义和使用过滤器 定义过滤器 Vue.filter(filterName, function(value,format){ // 进行一定的数据处理,返回这个新数据作为filterName过滤器的值 return newValue }) 使用过滤器 // myData是原有的数据,fi...原创 2020-03-19 17:07:00 · 83 阅读 · 0 评论 -
vue中的过渡和动画
vue 动画的理解 1、主要操作css中transition和animation; 2、vue给目标元素添加/移除特定的class; 3、过渡的相关类名 xxx-enter:指定进入之前的样式; xxx-leave-to:指定离开后的样式; xxx-enter-active:指定进入时的样式 xxx-leave-active:指定离开时的样式 基本过渡动画的编码 1、在目标元素外包裹<tr...原创 2020-03-19 16:52:19 · 143 阅读 · 0 评论 -
vue生命周期
vue生命周期图: vue生命周期分析: 1、初始化显示 beforeCreate() created() beforeMount() mounted() 2、更新状态:当vm示例中有数据状态发生变化时; beforUpdate() updated() 3、销毁阶段,当调用vm.$destroy() beforeDestroy() destroyed() 常用生命周期函数 1、cre...原创 2020-03-19 16:28:44 · 73 阅读 · 0 评论 -
vue初识
vue是尤雨溪结合Angular的模板语法及数据绑定的思路和React的组件化及虚拟Dom的思想,它是渐进式前端框架,主要功能是动态地构建用户界面; vue的主要特点: 遵循MVVM模式 编码简洁,体积小,运行高效。适合PC和移动端开发。 本身只关注UI,可以轻松引入vue插件和第三方开发库。 理解MVVM模型 M:指的是data model,也就是vue实例对象里面的data; V:vie...原创 2020-03-19 16:12:22 · 104 阅读 · 0 评论