![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 59
nine-seven
这个作者很懒,什么都没留下…
展开
-
13. vue --- 插槽(1)
插槽 vue官网 插槽 1. 父内容在子组件中显示 只用于显示,不用做其他,就可以用插槽 父组件: <子组件标签名 ...> <template slot="值">{{值}}</template> </子组件标签名> 定义卡片的内容,将内容添加slot属性为插槽的名字 子组件 定义插槽,给定name <元素><slot name="值"></slot></元素> 拥有相同结构框架 插槽是组件中原创 2021-11-28 22:24:37 · 514 阅读 · 0 评论 -
12. vue-懒加载(异步延迟懒加载、彻底懒加载)
懒加载 单页面问题 单页面问题,首屏加载极慢 脚手架自带打包工具,webpack把所有组件打包app.js文件,在首屏一次性全部下载 解决 1. 异步延迟加载 2. 彻底懒加载 1. 异步延迟加载 定义: 优先下载并显示首页的内容。 其它页面组件采用底层异步下载的方式。在不影响主屏下载速度的情况下,异步下载。 优点 即加快了首屏的加载速度,又能享受单页面应用带来的好处。 步骤 ①. 不要再router/index.js 开头过早的引入除首页之外的其它页面组件。(凡是用import 引入的东西,v原创 2021-11-28 22:00:37 · 826 阅读 · 0 评论 -
11. VUE 脚手架--文件结构、vue安装
VUE 脚手架 一、文件结构: ① 创建一个唯一完整的HTML页面: 脚手架将唯一完整的HTML页面一分为三,运行时再组合起来。 (1) 把唯一的页面html放入public中,head中引入第三方css和js public文件: 用来放第三方的压缩版和第三方JS的压缩版 把<div id="app"></div>和<script> new Vue({ el: "#app" }); /script>划分出去。 <div id="app"></d原创 2021-11-27 22:44:55 · 834 阅读 · 0 评论 -
10 SPA + 路由简介
SPA Single Page Application 单页面应用 单页面应用: 整个应用程序只有一个唯一完整的HTML页面,其它无所谓的“页面”,其实都是组件片段而已。所谓切换页面,只是在一个HTML中切换显示不同的组件片段而已。 创建单页面应用 1. 创建唯一完整的HTML页面 支持vue.js基本结构的空页面 <script src="js/vue.js"></script> <div id="app"></div> <script>原创 2021-11-27 16:35:14 · 214 阅读 · 0 评论 -
9. 组件件传参--父子绑定传参、子父兄弟传参、ref父子通信 ---(1)
组件间传参 父子传参、子父传参、兄弟间传参、父子通信 1. 父子传参 父组件传参给子组件 用绑定的方式传参 <子组件标签名 :自定义属性名="父组件中的变量"></子组件标签名> 子组件中接收: <script> export default { props:["父组件中自定义属性名"] } </script> props中的属性的用法和data中的变量的用法是完全一样的 区别: props的属性值来自于外部传入 data中的变量值由自己定原创 2021-11-24 21:43:00 · 269 阅读 · 0 评论 -
8. 组件定义使用component --(1)
vue 官网 组件 组件 拥有专属 的html+js+css+数据的可重用的独立的页面功能区域 组件的分类 根组件: new Vue()。整个页面甚至整个项目只有一个new vue() 监控全局 全局组件: Vue.component()。可以放在任何位置,没有限制 子组件 规定只能放在指定父组件范围内使用的组件 组件定义 组件名大小写 Vue.component('my-component-name', { /* ... */ }) // 使用:<my-componen原创 2021-11-23 22:53:56 · 220 阅读 · 0 评论 -
7. 过滤器的使用 -- filter
vue 过滤器官网 过滤器 专门对变量的原始值先加工再显示的一种特殊函数。 创建 全局过滤器 Vue.filter('过滤器名', function (旧值) { return 新值; }) 使用 <元素>{{ 变量名 | 过滤器名 }}</元素> 组件间的过滤器 filters: { capitalize: function (旧值) { return 新值; } } Vue.filter(‘capitalize’, function (value)原创 2021-11-23 22:05:37 · 214 阅读 · 0 评论 -
6. 自定义指令 directive --(1)
自定义指令 directive 如果希望在vue页面加载时,自动对元素执行一些初始化的操作。(比如 自动获取焦点时,就可以使用自定义指令) 简单使用 创建: Vue.directive("指令名",{ inserted(当前带有指令的DOM元素){ // 对带有指令的当前DOM元素执行原生操作 } }); 使用: <元素 v-指令名> 注意: 指令名: 不能有大写字母,如果有多个字母,用-分开 inserted: 回调。new vue扫描到v-指令名,自动调用 Vue.dir原创 2021-11-22 21:32:56 · 66 阅读 · 0 评论 -
5. vue 计算属性和侦听器
计算属性和侦听器 一、 计算属性 computed 在模板字符串{{}}中放入大多的逻辑会让模板过重且难以维护。可使用计算属性 1. 基本使用 <p>{{message}}</p> data: { return { msg:"hello", } }, computed: { // 计算属性的getter message: ()=>{ //vm.message return "hello"+this.msg; } } 2. 计算属性的setter原创 2021-11-20 15:03:49 · 70 阅读 · 0 评论 -
4. vue样式绑定 style class
绑定样式 style 精确修改一个元素的个别css属性值时,都可用绑定的内联样式 可以存在 style和:style ⇒ 合并 ① <元素 :style="变量名"> <!--data中变量--> data:{} data{ return { 变量名:"css属性名1:属性值1, css属性名2:属性值2,......", } } 不便于值修改其中的某一个css属性值 ② 使用对象语法 <元素 :style="{css属性名1:变量1, css属性名2:变量2原创 2021-11-20 14:04:30 · 494 阅读 · 0 评论 -
3. vue双向绑定指令
双向绑定 双向绑定原理: 就是在单向绑定的基础上,能自动为元素添加onchange或oninput事件处理函数。并能在事件处理函数中,自动将新值更新到data的变量中。 v ⇒ m / m ⇒ v ① 访问器属性 ② 虚拟DOM树 ③ 自动添加事件绑定 v-model 双向绑定 <元素 v-model="变量"> 1. 表单元素 <表单元素 v-model="变量"> <!--等价于单价绑定+input--> <表单元素 :value="变量" @input原创 2021-11-20 13:34:35 · 534 阅读 · 0 评论 -
1. Vue简介+Vue2的不足
Vue 一、基本介绍 1. 什么是vue 第三方开发的,基于MVVM设计模式,渐进式的,纯前端JS框架。 只要以数据操作(增删改查)为主的项目,都可以由vue框架开发 2. MVVM 设计模式 MVC 衍生 View 视图/界面 Model 模型对象 View/Model 视图模型 双向绑定: 监听数据的变化,然后通知视图进行自动更新。当用户操作视图时,vm也能监听到视图的变化,然后通知数据做相应的改动 3. vue实现双向绑定(核心原理) Vue2绑定原理:1. 访问器属性 2原创 2021-11-20 11:34:38 · 621 阅读 · 0 评论 -
2. vue单向绑定指令 -- (1)
指令绑定语法(1) 1. 插值语法:{{}} {{}}: 原理和模板字符串的${}一致 底层相当于DOM中的textContent属性 相当于 innerText 2. 属性绑定:v-bind (简写:) 元素的属性值发生变化,用v-bind绑定属性值 <元素 v-bind:属性名="js变量或表达式"> <!--简写--> <元素 :属性名="js变量或表达式"> <img :src="图片路径"/> 3. 显示隐藏: v-show 专门控制一个元素显原创 2021-11-20 11:45:00 · 1272 阅读 · 0 评论