vue
美美| ू•ૅω•́)ᵎᵎᵎ
| ू•ૅω•́)ᵎᵎᵎ
展开
-
8.①配路由跳转页面(前进和后退)②配置首页
前进一:安装vue-router二:在router/index.js下配置以下//1.引入vue-routerimport VueRouter from 'vue-router';//2.定义routes路由的集合,数组类型const routes = [ { path: '/sharefriend', name: 'ShareFriend', component: () => import ('@/views/my-visit/S原创 2021-12-30 09:53:17 · 731 阅读 · 1 评论 -
7.案例:todolist注意事项
注意事项一:filter遍历每一项筛选过滤把符合真假条件的赋值给新数组二:localStorage深度监视存储todos数据(永久存储,关闭和刷新浏览器,数据不会丢失)①localStorage是h5新增的一种本地存储数据方式,本质是一个对象,是一个小型的数据库,存储到localStorage当中的东西都会自动转化为字符串②localStorage当中有4个Api localStorage.setItem('键',值) //给localStorage存储数据...原创 2021-12-16 16:36:32 · 266 阅读 · 0 评论 -
6.①拆分组件②Vue脚手架的安装③组件化开发案例:对vue的评论④组件之间传值:props通信组件,this.$emit
目录四:Vue脚手架安装1.基本配置: 安装Node.js 安装淘宝镜像源 安装Vue Cli3脚手架 检查其版本是否正确2.在想创建项目的目录3.修改成项目代码五:comment组件化开发案例:对vue的评论六:props通信组件(通信组件的十种之一)七:自定义事件通信方式一:基本写法 <div id="app"> <school></school>...原创 2021-12-02 15:03:43 · 228 阅读 · 0 评论 -
5.vue当中添加过渡和动画
官方文档 <style> .a { width: 100px; height: 100px; background-color: springgreen; } .slide-leave { height: 100px; opacity: 1; background-color: spring原创 2021-11-11 17:47:27 · 326 阅读 · 2 评论 -
4.①条件渲染v-if和v-show以及区别②样式style和类绑定的方法③event事件监听④阻止冒泡⑤阻止超链接跳转⑥监听回车事件⑦自动收集表单数据
目录一:v-if 和 v-show 两个条件渲染的区别二:样式类和style的绑定三:绑定事件监听相关(添加点击事件)1.event事件的绑定,可以传参也可以不传参2.阻止冒泡 直接.stop第一种:@click.stop(参数event,等等)3.阻止超链接跳转4.键盘事件设置回车监听四:自动收集表单数据一:v-if 和 v-show 两个条件渲染的区别 ①v-if条件渲染的时候,条件为真的被渲染,条件为假的不渲染,其实条件为假的元素根本不存在dom上...原创 2021-11-11 15:22:40 · 746 阅读 · 0 评论 -
3.①循环渲染图片v-for=“(person,index)空格in persons“ :key=“index“②列表过滤筛选:用双向数据绑定v-model和filter和indexOf③列表排序
一:列表渲染二:列表过滤筛选(注意渲染的是遍历后符合筛选条件的数组) <div id="app"> <input type="text" placeholder="请输入过滤条件" v-model="keyword"> <ul> <li v-for="(person,index) in newPersons" :key='person.id'> {.原创 2021-11-09 17:20:07 · 1258 阅读 · 2 评论 -
2.①computed计算属性和watch监视中deep:true深度监视对象内的数据②实现数据双向绑定并实时拼接还有methods③vue的内置指令v-text、v-html、ref
①computed是计算属性:一般是没有这个值的但是想要用这个值,那么要根据已有的去做计算②watch 是监视属性:一般监视属性,监视的数据一定是已经存在并且可以改变的③能用computed的 都能用watch,但是能用watch解决的computed不一定能解决④区别:computed函数当中只能使用同步,而watch当中可以是同步也可以是异步一:computed计算属性 <div id="app"> 姓:<input type="text".原创 2021-11-09 14:43:48 · 749 阅读 · 0 评论 -
1.①绑定<a :href=‘url‘>点</a><button @click=‘say‘>点</button>②双向数据绑定MVVM用v-model③Object.defineProperty()
一:基本语法1.引入 vue.js2.body里面必须有一个挂载点app3.script里面有一个 vm实例化对象,和挂载点进行挂载请求回来的数据,是配置对象里的data二:数据的绑定及事件的添加(跳转和点击事件)及简写1. <a v-bind:href='url'>点我去百度</a>2. <button v-on:click='say'>点击事件绑定</button>...原创 2021-11-08 15:27:42 · 291 阅读 · 4 评论 -
const(因为地址值无法修改对象无法修改,但是对象的内部属性的地址值可以修改)和let
不能修改是因为对象的内存地址值不能修改,但是 对象的内部属性可以修改。原创 2021-07-13 10:39:12 · 185 阅读 · 0 评论 -
04——vue计算属性(简单写法、复杂写法、setter和getter、计算属性和methods的对比)
1.基本使用,firstName+lastName2.复杂使用(遍历data里面的book数组,把所有book的价格加起来并输出)原创 2021-07-08 12:23:08 · 115 阅读 · 0 评论 -
05——v-on事件监听(计数器,传参问题,手动获取event,v-on的修饰符:@click.stop/@click.prevent/v-on:keyup/@click.once)
1.v-on简单使用案例:计数器2.v-on的传参问题3.v-on的修饰符[email protected]的使用(解决点击事件冒泡)出现问题:点击事件冒泡解决方法:加个[email protected]的使用(阻止点击后的默认跳转)运行结果:有文字输出并且跳转到百度界面阻止跳转的方法:@click.prevent注意!!!一定要写在app的div里面结果:阻止了跳转3.v-on:key...原创 2021-07-13 17:24:40 · 105 阅读 · 0 评论 -
06——v-if和v-else-if和v-else的使用,登录切换小案例
1. v-if2.v-else3.v-if和v-else-if和v-else的使用上面的写法不推荐推荐用computed(比methods里面写好,效率高)原创 2021-07-14 14:37:27 · 122 阅读 · 0 评论 -
06.1——v-if和v-show的区别
原创 2021-07-14 20:52:32 · 61 阅读 · 0 评论 -
03——vue动态绑定属性 v-bind动态绑定,绑定class改变数组中某一项颜色,动态绑定style
v-bind进行跳转绑定v-bind动态绑定class(用来做点击样式)原来后来其他点击按钮字体变色让class样式里面写的更简约:(调用自定义方法)原创 2021-07-06 19:26:27 · 527 阅读 · 0 评论 -
02——vue插值操作 v-html,v-pre,v-cloak
v-htmlv-pre(不解析)v-cloak:解决用户卡的时候可能看到代码的问题原创 2021-07-06 16:09:23 · 54 阅读 · 0 评论 -
01——vue初体验-vue计数器
第一种方式第二种方式(运行还有输出语句)原创 2021-07-05 13:38:54 · 51 阅读 · 0 评论 -
01——vue初体验-vue列表展示
原创 2021-07-05 12:47:23 · 48 阅读 · 0 评论