Vue
文章平均质量分 54
是瑞瑞小甜心
这个作者很懒,什么都没留下…
展开
-
24、Vue UI 组件库
24、Vue UI 组件库1. 移动端常用 UI 组件库Vant https://youzan.github.io/vantCube UI https://didi.github.io/cube-uiMint UI http://mint-ui.github.io2.PC 端常用 UI 组件库Element UI https://element.eleme.cnIView UI https://www.iviewui.com...原创 2021-12-07 21:02:05 · 67 阅读 · 0 评论 -
23、路由
23、路由1.路由概念vue 的一个插件库,专门用来实现 SPA 应用理解: 一个路由(route)就是一组映射关系(key - value),多个路由需要路由器(router)进行管理。路由分类后端路由:理解:value 是 function, 用于处理客户端提交的请求。工作过程:服务器接收到一个请求时, 根据请求路径找到匹配的函数 来处理请求, 返回响应数据。前端路由:理解:value 是 component,用于展示页面内容。工作过程:当浏览器的路径改变时, 对原创 2021-12-07 21:01:02 · 92 阅读 · 0 评论 -
22、vuex
22、vuex1.概念 在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。Github 地址: https://github.com/vuejs/vuex2.何时使用?多个组件依赖于同一状态来自不同组件的行为需要变更同一状态 即多个组件需要共享数据时3.搭建vuex环境创建文件:src/store/index.js//引入Vue核心库import原创 2021-12-07 20:58:27 · 52 阅读 · 0 评论 -
21、插槽
21、slot插槽作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件 ===> 子组件分类:默认插槽、具名插槽、作用域插槽使用方式:默认插槽:父组件中: <Category> <div>html结构1</div> </Category>子组件中: <template> <div>原创 2021-12-07 20:56:01 · 40 阅读 · 0 评论 -
19、脚手架
19、脚手架1.初始化脚手架Vue 脚手架是 Vue 官方提供的标准化开发工具(开发平台)文档: https://cli.vuejs.org/zh/具体步骤:第一步(仅第一次执行):全局安装@vue/cli。 npm install -g @vue/cli第二步:切换到你要创建项目的目录,然后使用命令创建项目 vue create xxxx第三步:启动项目 npm run serve如出现下载缓慢请配置 npm 淘宝镜像:npm config set registry https://re原创 2021-12-06 20:45:30 · 51 阅读 · 0 评论 -
18、组件
18、组件1.模块概念模块向外提供特定功能的 js 程序, 一般就是一个 js 文件,从而复用 js, 简化 js 的编写, 提高 js 运行效率当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用2.组件概念组件用来实现局部(特定)功能效果的代码集合(html/css/js/image……),从而复用编码, 简化项目编码, 提高运行效率当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用3.基本使用Vue 中使用组件的三大步骤:定义组件(创建组件)原创 2021-12-06 20:44:08 · 463 阅读 · 0 评论 -
17、生命周期
17、生命周期引出生命周期 1.又名:生命周期回调函数、生命周期函数、生命周期钩子。 2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。 3.生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。 4.生命周期函数中的this指向是vm 或 组件实例对象。<body> <!-- 准备好一个容器--> <div id="root"> <h2 v-if="a"&原创 2021-12-06 20:41:56 · 68 阅读 · 0 评论 -
16、自定义指令
16、自定义指令 一、定义语法: (1)局部指令: new Vue({ new Vue({ directives:{指令名:配置对象} 或 directives{指令名:回调函数} })原创 2021-12-06 20:40:55 · 58 阅读 · 0 评论 -
15、内置指令
15、内置指令之前学过的指令: v-bind : 单向绑定解析表达式, 可简写为 :xxx v-model : 双向数据绑定 v-for : 遍历数组/对象/字符串 v-on : 绑定事件监听, 可简写为@ v-if : 条件渲染(动态控制节点是否存存在) v-else : 条件渲染(动态控制节点是否存存在) v-show : 条件渲染 (动态控制节点是否展示)v-text指令:原创 2021-12-06 20:39:05 · 64 阅读 · 0 评论 -
14、过滤器
14、过滤器 定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理) 语法: 1.注册过滤器:Vue.filter(name,callback) 或 new Vue{filters:{}} 2.使用过滤器:{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名” 备注: 1.过滤器也可以接收额外参数、多个过滤器也可以串联 2.并没有改变原本的数据, 是产生新的对应的数据 &l原创 2021-12-06 20:38:40 · 35 阅读 · 0 评论 -
13、收集表单数据
13、收集表单数据 若:,则v-model收集的是value值,用户输入的就是value值。 若:,则v-model收集的是value值,且要给标签配置value值。 若: 1.没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值) 2.配置input的value属性: (1)v-model的初始值是非数组,那么收集的就是checked(勾选 or 未勾选,是布尔值)原创 2021-12-06 20:37:29 · 61 阅读 · 0 评论 -
12、列表渲染
12、列表渲染基本列表 v-for指令: 1.用于展示列表数据 2.语法:v-for="(item, index) in xxx" :key=“yyy” 3.可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)<!-- 准备好一个容器--> <div id="root"> <!-- 遍历数组 --> <h2>人员列表(遍历数组)</h2>原创 2021-12-06 20:36:24 · 344 阅读 · 0 评论 -
11、条件渲染
11、条件渲染v-if 写法: (1).v-if=“表达式” (2).v-else-if=“表达式” (3).v-else=“表达式” 适用于:切换频率较低的场景。 特点:不展示的DOM元素直接被移除。 注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。v-show 写法:v-s原创 2021-12-06 20:35:25 · 36 阅读 · 0 评论 -
10、绑定样式
10、绑定样式class样式 写法:class=“xxx” xxx可以是字符串、对象、数组。 字符串写法适用于:类名不确定,要动态获取。‘classA’ 对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。{classA:isA, classB: isB} 数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。[‘classA’, ‘classB’]style样式 :style="{f原创 2021-12-05 21:36:30 · 43 阅读 · 0 评论 -
9、监视属性
9、监视属性天气案例<!-- 准备好一个容器--> <div id="root"> <h2>今天天气很{{info}}</h2> <!-- 绑定事件的时候:@xxx="yyy" yyy可以写一些简单的语句 --> <!-- <button @click="isHot = !isHot">切换天气</button> --> <butt原创 2021-12-05 21:35:36 · 46 阅读 · 0 评论 -
8、计算属性
8、计算属性姓名案例_插值语法实现<!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器--> <div id="root"> 姓:<input type="text" v-model="firstName"> <br/><原创 2021-12-05 21:35:04 · 40 阅读 · 0 评论 -
7、事件处理
7、事件处理事件的基本使用 1.使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名; 2.事件的回调需要配置在methods对象中,最终会在vm上; 3.methods中配置的函数,不要用箭头函数!否则this就不是vm了; 4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象; 5.@click=“demo” 和 @click=“demo($event)” 效果一致,原创 2021-12-05 21:34:31 · 52 阅读 · 0 评论 -
6、数据代理
6、数据代理回顾 Object.defineProperty方法 <script type="text/javascript" > let number = 18 let person = { name:'张三', sex:'男', } Object.defineProperty(person,'age',{ // value:18, // enumerable:true, //控制属性是否可以枚举,默认值是false //原创 2021-12-05 21:33:48 · 51 阅读 · 0 评论 -
5、vue中的MVVM
5、vue中的MVVMMVVM模型 1. M:模型(Model) :data中的数据 2. V:视图(View) :模板代码 3. VM:视图模型(ViewModel):Vue实例观察发现: 1.data中所有的属性,最后都出现在了vm身上。 2.vm身上所有的属性 及 Vue原型上所有属性,在Vue模板中都可以直接使用。<body><!-- 准备好一个容器--> <div id="root"&原创 2021-12-05 21:33:17 · 50 阅读 · 0 评论 -
4、el和data的两种写法
4、el和data的两种写法data与el的两种写法 1.el有2种写法 (1)new Vue时候配置el属性。 (2)先创建Vue实例,随后再通过vm.$mount(’#root’)指定el的值。 2.data有2种写法 (1)对象式 (2)函数式 如何选择:目前哪种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错。 3.一个重要的原则:原创 2021-12-05 21:32:30 · 75 阅读 · 0 评论 -
3、数据绑定
3、数据绑定Vue中有2种数据绑定的方式: 1.单向绑定(v-bind):数据只能从data流向页面v-bind:href =“xxx” 可以简写为 :href 2.双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data。双向绑定一般都应用在表单类元素上(如:input、select等)v-model:value 可以简写为 v-model,因为v-model默认收集的就是value值。<body><!-- 准原创 2021-12-05 21:31:50 · 112 阅读 · 0 评论 -
2、模板语法
2、模板语法 Vue模板语法有2大类: 1.插值语法(双大括号表达式): 功能:用于解析标签体内容。 写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性。 2.指令语法(以 v-开头): 功能:用于解析标签(包括:标签属性、标签体内容、绑定事件…)。 举例:v-bind:href=“xxx” 或 简写为 :href=“xxx”,xxx同样要写js表达式,且可以直接读取到data中的原创 2021-12-06 20:34:24 · 39 阅读 · 0 评论 -
1、初识vue
1、初识vuevue是动态构建用户界面的渐进式javascript框架借鉴 Angular 的模板和数据绑定技术和 React 的组件化和虚拟 DOM英文官网: https://vuejs.org/中文官网: https://cn.vuejs.org/想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;root容器里的代码被称为【Vue模板】;Vue实例和容器是一一对应的;真实开发中原创 2021-12-05 21:29:11 · 41 阅读 · 0 评论