Twelve_Y的博客

【代码】CSS(四) -- 动效实现(立体盒子旋转-四方体+正六边)

插槽vue官网 插槽1. 父内容在子组件中显示只用于显示，不用做其他，就可以用插槽父组件：<子组件标签名 ...> <template slot="值">{{值}}</template></子组件标签名>定义卡片的内容，将内容添加slot属性为插槽的名字子组件定义插槽，给定name <元素><slot name="值"></slot></元素>拥有相同结构框架插槽是组件中

懒加载单页面问题单页面问题，首屏加载极慢脚手架自带打包工具，webpack把所有组件打包app.js文件，在首屏一次性全部下载解决1. 异步延迟加载 2. 彻底懒加载1. 异步延迟加载定义：优先下载并显示首页的内容。其它页面组件采用底层异步下载的方式。在不影响主屏下载速度的情况下，异步下载。优点即加快了首屏的加载速度，又能享受单页面应用带来的好处。步骤①. 不要再router/index.js 开头过早的引入除首页之外的其它页面组件。（凡是用import 引入的东西，v

VUE 脚手架一、文件结构：① 创建一个唯一完整的HTML页面：脚手架将唯一完整的HTML页面一分为三，运行时再组合起来。(1) 把唯一的页面html放入public中，head中引入第三方css和jspublic文件： 用来放第三方的压缩版和第三方JS的压缩版把<div id="app"></div>和<script> new Vue({ el: "#app" }); /script>划分出去。<div id="app"></d

SPASingle Page Application 单页面应用单页面应用:整个应用程序只有一个唯一完整的HTML页面，其它无所谓的“页面”,其实都是组件片段而已。所谓切换页面，只是在一个HTML中切换显示不同的组件片段而已。创建单页面应用1. 创建唯一完整的HTML页面支持vue.js基本结构的空页面<script src="js/vue.js"></script><div id="app"></div><script>

组件间传参父子传参、子父传参、兄弟间传参、父子通信1. 父子传参父组件传参给子组件用绑定的方式传参<子组件标签名 :自定义属性名="父组件中的变量"></子组件标签名>子组件中接收：<script> export default { props:["父组件中自定义属性名"] }</script>props中的属性的用法和data中的变量的用法是完全一样的区别：props的属性值来自于外部传入data中的变量值由自己定

vue 官网 组件组件拥有专属 的html+js+css+数据的可重用的独立的页面功能区域组件的分类根组件：new Vue()。整个页面甚至整个项目只有一个new vue() 监控全局全局组件：Vue.component()。可以放在任何位置，没有限制子组件规定只能放在指定父组件范围内使用的组件组件定义组件名大小写Vue.component('my-component-name', { /* ... */ })// 使用：<my-componen

vue 过滤器官网过滤器专门对变量的原始值先加工再显示的一种特殊函数。创建全局过滤器Vue.filter('过滤器名', function (旧值) { return 新值;})使用<元素>{{ 变量名 | 过滤器名 }}</元素>组件间的过滤器filters: { capitalize: function (旧值) { return 新值; }}Vue.filter(‘capitalize’, function (value)

自定义指令 directive如果希望在vue页面加载时，自动对元素执行一些初始化的操作。（比如 自动获取焦点时，就可以使用自定义指令）简单使用创建：Vue.directive("指令名",{ inserted(当前带有指令的DOM元素){ // 对带有指令的当前DOM元素执行原生操作 }});使用：<元素 v-指令名>注意：指令名： 不能有大写字母，如果有多个字母，用-分开inserted: 回调。new vue扫描到v-指令名，自动调用Vue.dir

计算属性和侦听器一、 计算属性 computed在模板字符串{{}}中放入大多的逻辑会让模板过重且难以维护。可使用计算属性1. 基本使用<p>{{message}}</p>data: { return { msg:"hello", }},computed: { // 计算属性的getter message: ()=>{ //vm.message return "hello"+this.msg; }}2. 计算属性的setter

绑定样式style精确修改一个元素的个别css属性值时，都可用绑定的内联样式可以存在 style和:style ⇒ 合并①<元素 :style="变量名"><!--data中变量-->data:{}data{return { 变量名："css属性名1:属性值1, css属性名2:属性值2,......", }}不便于值修改其中的某一个css属性值② 使用对象语法<元素 :style="{css属性名1:变量1, css属性名2:变量2

双向绑定双向绑定原理：就是在单向绑定的基础上，能自动为元素添加onchange或oninput事件处理函数。并能在事件处理函数中，自动将新值更新到data的变量中。v ⇒ m / m ⇒ v① 访问器属性 ② 虚拟DOM树 ③ 自动添加事件绑定v-model 双向绑定<元素 v-model="变量">1. 表单元素<表单元素 v-model="变量"><!--等价于单价绑定+input--><表单元素 :value="变量" @input

指令绑定语法(1)1. 插值语法：{{}}{{}}： 原理和模板字符串的${}一致底层相当于DOM中的textContent属性相当于 innerText2. 属性绑定：v-bind （简写：）元素的属性值发生变化，用v-bind绑定属性值<元素 v-bind:属性名="js变量或表达式"><!--简写--><元素 :属性名="js变量或表达式"><img :src="图片路径"/>3. 显示隐藏： v-show专门控制一个元素显

Vue一、基本介绍1. 什么是vue第三方开发的，基于MVVM设计模式，渐进式的，纯前端JS框架。只要以数据操作（增删改查）为主的项目，都可以由vue框架开发2. MVVM 设计模式MVC 衍生View 视图/界面Model 模型对象View/Model 视图模型双向绑定： 监听数据的变化，然后通知视图进行自动更新。当用户操作视图时，vm也能监听到视图的变化，然后通知数据做相应的改动3. vue实现双向绑定（核心原理）Vue2绑定原理：1. 访问器属性 2

小程序云函数小程序云函数实在小程序端定义，在云服务器端执行的函数。在小程序定义完毕后，可以通过开发工具上传部署到云服务器，然后在小程序端调过提供的API接口可以直接调用这些云函数。云函数示例定义一个云函数实现a+b，返回结果在cloudFunctions目录下新建一个云函数，函数名：add使用开发工具上传部署该云函数在文件夹上 右键 ==> 上传并部署：云端安装依赖（不上传node_modules)在小程序端使用 wx.cloud.callFunction()调用该云函数

云开发 小程序概述开发者可以使用腾讯提供的云服务来开发小程序、小游戏的服务端，而无需搭建服务器。开发提供的基础能力有： 云数据库、云存储、云函数。1. 云数据库是一个既可以在小程序端操作，也可以在云函数中操作的json类型的非关系型数据库。2. 云存储云存储支持在小程序端直接上传下载云端文件。（替代了后端的nodejs）3. 云函数云函数是在小程序端声明，而后部署到云端后，在云端执行的函数。小程序端部署完毕后可在小程序直接调用开通云开发服务小程序开发工具==》 云开

微信小程序API界面交互API1. Toast对话框 wx.showToast({ title: "添加成功", icon:"success", duration: 1000, mask: true });2. Modal对话框 wx.showModal({ title: '提示', content: "确认删除？", confirmText:"残忍删除", confirmColor: "#

WXML语法专题WXML是一套标签语言，符合标签语言的相关语法，用于定义页面的结构。而在WXML中的动态数据（动态文本、动态属性、动态样式等）来源于对应js的data。page({ data: { name:’zs’}})WXML中获取动态数据时，需要使用{{}}来应用data中的变量，大概有一下几种需求：内容绑定、 属性绑定 、 样式绑定 、列表渲染（wx:for、wx:key)、条件渲染1. 内容绑定动态更新标签内容的文本<text>{{name}

小程序事件处理bindtap、bindinput、bindchange、事件是视图层到逻辑层的通讯方式，它可以讲用户的行为反馈到逻辑层进行处理。一、 事件类型：在小程序中，事件类型分为2类： 冒泡事件、非冒泡事件1. 冒泡事件若为组件绑定了冒泡事件，当触发该事件时，将会向父节点执行冒泡。在小程序中： 12个类型 触发条件touchstart： 手指触摸动作开始touchmove 手指触摸后移动touchcancel 手指触摸动作被打断，如来电提醒，弹窗

小程序基础组件库小程序组件库参考小程序中wxml文件由各式各样的组件构成，这些组件都是微信自定义的。其他html的标签无法使用。1. 关于组件属性：对于布尔类型属性，无论直接设置为true和false，都会当做普通字符串来进行判断，最终被解释为true;除非用非空字符串“”。推荐使用{{}}引用js的字面量，为属性赋值为true或flase。比如：hover-stop-propagation="{{true}}"小程序组件既遵守驼峰命名法，也遵守短横线命名法，两种属性名的设置都将会生效。