vue | 易学教程

前端模块化

阅读更多关于前端模块化

前端模块化为什么要用模块化，因为可以解决两个问题变量命名冲突代码复用 ES6中的导出export和导入import export导出的三种用法直接定义变量/函数/类的时候前面就加exprot 使用对象类型导出export export {变量名1,变量名2} 如果导入的时候我想自己命名，就可以用default方法导入。导入时自定义命名时不用加大括号同一模块中default只能存在1个 //导出default export default function(){} //export default {} 导出对象 //导入 import myFun from './xxx.js' import导入默认导入方法 import{变量名1,变量名2} from './xxx.js' 全部以对象的方式导入 import * as 自定义对象名 from './xxx.js' 使用的时候以对象的方式使用如 obj.name commonJS中的导入和导出导出 module.exports = {变量名1,变量名2} 导入 const {变量名1,变量名2} = require('./xxx.js') const obj = require('./xxx.js') el和template区别真实开发中，不会频繁更改index.html中的代码，而是通过template的方式。

vue 列表与对象的操作

阅读更多关于 vue 列表与对象的操作

在list与obj中不能采用使用下标修改数据，可以改变引用数据源来重新赋值。如果使用就会发现数据变了，但是页面上的数据没有发生变化。列表的操作方式： push方法向数组添加一个数据 vm.list.push({‘id’:‘1’,name:‘zhao’}) splice(截取)方法：传入下标为‘1’的数据，然后删除（1，表示删除一个数据），再添加一个数据 vm.list.splice(1,1,{‘id’:‘2’,name:‘李’}) pop方法向数组删除一个数据 vm.list.pop({‘id’:‘1’,name:‘zhao’}) sort方法 vm.list.sort reserve方 vm.list.reserve shift方法 vm.list.shift unshift方法 vm.list.unshift 图为改变原来的数据引用对象的操作方式：通过obj.name=’'qian"，可以改变数据的值但是obj对象添加一个数据必须改变原来的数据引用。使用set方法可以对list或obj经行操作来源： CSDN 作者：爱吃西瓜的二花链接： https://blog.csdn.net/zhaojikun521521/article/details/104358030

Vue模板的操作方法

阅读更多关于 Vue模板的操作方法

View就是View模板,HTML视图，DOM结构 v-if：确定元素是否在视图中存在 v-if 控制视图是存在，来控制元素是否存在，如果显示为false，在Dom节点中就不存在，找不到该元素。 v-if =""的值放的就是 data里面的数据。 v-show：确定元素是否显示，用display设置样式block为显示，none为隐藏。 v-show通过控制Dom节点的display样式，block为显示，none为隐藏，但是存在于节点中。 v-bind：绑定属性，添加动态值时。 v-bind:href="links“ => :href=“links” v-once:当数据改变时，插值处的内容不会更新 v-for :使用item in items,用循环数组，遍历数组的索引值 {{item.username}} {{index}}{{item.username}} 索引值从0开始 ![查询从0开始的数组数据](https://img-blog.csdnimg.cn/20200217132950495.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW95c2E=,size_16,color_FFFFFF,t

Vue ---day01

阅读更多关于 Vue ---day01

Vue 和 React 一样都是组件化；核心：声明式渲染和组件系统其他：客户端路由大数据管理 build系统 vue组件：　　根组件： let app = new Vue({}) app.$mount();延迟挂载　　可复用组件： Vue.component('component-a',{}) options: 　　el: 实例的私有属性　　template: 模板，（根实例未设置时，取el标签内容为默认模板）（template--->vnode--->dom元素）　　render：优先级高于 el 和 template （vnode--->dom元素，渲染速度比el和template快）　　components：私有组件　　data：对象，私有数据（可复用模板必须以函数方式返回对象）实例的属性和方法：　　app.$data app.$el app.$set 等以$开头　　访问私有数据： app.$data.user app.user　　拦截监听：　　rev2.0x，Object.defineProperty (递归调用) 　　　　　添加对象属性：　　　　　　　　Vue.$set() 添加属性的同时，defineProperty 　　　　　　　　app.$set() 是Vue.$set的别名　　　　　数组方法： shift unshift

vue-lazuload 的使用

阅读更多关于 vue-lazuload 的使用

1 安装 npm i vue-lazyload 引入 import Vue from 'vue'; import vueLazyload from 'vue-lazyload'; Vue.use(vueLazyload,{ // 加载错误时显示的图片 error: require('./image/fail.jpg'), // 正在加载的时候显示的图片 loading: require('./image/loading.gif'), // 预加载高度比例，默认是1.3，不过好像没有用 preLoad: 1.5, // 加载错误尝试加载的次数 attempt: 1 }) 3 使用 <img v-lazy="item.basic.cover.small_url" alt="iKON私藏" /> 4 重启项目来源： CSDN 作者： yuange11111 链接： https://blog.csdn.net/qq_38296051/article/details/104355936

vue 的基本语法

阅读更多关于 vue 的基本语法

一 . Vue 的介绍 1 . 前端的三大框架 (可以去 GitHub 查看三个框架的 star 星) 　　vue : 作者尤雨溪, 渐进式的JavaScript 框架　　react : Facebook公司, 里面的(高阶函数 es6) 非常多,对初学者不友好　　angular : 谷歌公司,目前更新到6.0 ,学习 angular 需要会 typescript. 2 . vue的思想 : 　　数据驱动视图 , 设计模式 MVVM ( model view viewmodel ) 3 . cdn 方式引用 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> 4 . 下载到本地引用 <script src='./vue.js'></script> 5. 库和框架　　上面的 vue.js 文件是一个库,小而精; 　　框架是功能比较齐全的, 像 Django ,大而全,功能比较多; 6. 实例化对象　　　示例代码 : <script src="./vue.js"></script> <script> new Vue({ el:"#app" // 绑定div的id值 // 这里data 是一个对象,在后面的学习中会发现 data 中一般是一个函数 data:{ //

Vue模板语法(一)

阅读更多关于 Vue模板语法(一)

Vue模板语法一.插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达式 Vue提供了完全的JavaScript表达式支持 {{str.substr(0,6).toUpperCase()}} {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} <li v-bind:id="'list-' + id">我的Id是js动态生成的</li> 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>vue插值</title> 6 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <ul> 11 12 <li> 13 <h3>文本</h3> 14 {{msg}} 15 </li> 16 <li> 17 <h3>Html字符串渲染</h3> 18 <div v-html="htmlSter"></div> 19 </li> 20 <li> 21 <h3>v-bind属性绑定</h3> 22

vue框架中props的typescript用法

阅读更多关于 vue框架中props的typescript用法

vue框架中props的typescript用法在vue中使用typescript时，需要引入vue-property-decorator库来兼容格式。 javascript写法 Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h3>{{ postTitle }}</h3>' }) typescript写法 @Prop({ type: Array, default: function(): Array<LabelData> { return []; } }) label_list: Array<LabelData> | undefined; typescript和javascript在用法的区别，主要是需要严格规定label_list的类型。但是，在vue里面，prop是不能赋初始值的。这个规则和typescript会发生矛盾，因此定义类型需要加undefined，避免typescript转义告警。在代码中使用label_list时，需要用 label_list as Array 的语法，转换成正常的数组格式参考链接 vue props vue-property-decorator 来源： https://www.cnblogs.com

[vue]初探vue生态核心插件Vuex

阅读更多关于 [vue]初探vue生态核心插件Vuex

为什么会有 Vuex 这个东西？现代前端框架主要解决的是事件 -> 状态 -> UI 将传统前端在两个过程的代码剥离出来，变得更加容易维护； vue的声明式渲染，解决了状态和 UI 的同步问题，从而使我们不需要由于状态发生改变去写大量的命令式改变 dom 的代码。而类似于 vuex 这类状态管理的库，则解决了事件 -> 状态这个过程的维护问题。这类库所做的事情就是管理从事件源映射到状态变化这个过程(将这个映射过程从视图组件中剥离出来，组织好这一部分的代码，在组件外部进行状态的管理) 具体表现就是一个全局的数据中心 store 配置，每个组件进行更新的时候就通知数据中心，数据中心改变后，再去触发每个调用它的组件进行更新(这种更新是响应式的)；几个核心概念就是 mutations 里的方法可以直接 mutate store 中的状态，并且 mutation 过程必须同步的，需要通过 commit 去触发；而 actions 则允许异步的操作，通过 commit 去触发 mutation ，达到间接修改 store 的目的， action 本身需要通过 disptch 去触发。 Vuex与全局对象的区别其实， vuex 与全局对象有一定的共同之处，那就是状态会被全局共享，无论是嵌套多少组件… 每一个 Vuex 应用的核心就是 store（仓库）。“store

解密国内BAT等大厂前端技术体系-阿里篇（长文建议收藏）

阅读更多关于解密国内BAT等大厂前端技术体系-阿里篇（长文建议收藏）

解密国内BAT等大厂前端技术体系-阿里篇（长文建议收藏）进入2019年，大前端技术生态似乎进入到了一个相对稳定的环境，React在2013年发布至今已经6年时间了，Vue 1.0在2015年发布，至今也有4年时间了。整个业界在前端框架不断迭代中，也寻找到了许多突破方向，例如跨平台中的RN、Flutter，服务端GraphQL、Serverless，前端和客户端的融合越来越紧密，前端在Node和Electron的加持下，也扩展了自己的版图到服务端和桌面。同时，随着前端开发越来越复杂，整个前端研发也经历了人工化->工具化->工程化->智能化的演变。目前各个大厂在工程化实践不断迭代，出现了许多Low/No Code等前端智能化解决方案，工程化实践也深入到研发的各个环节，不断提升前端研发的标准化能力。而且，随着机器学习的加入，各类UI2Code的解决方案也开始出现，前端研发进入了一个完全不同的时代。随着端上能力的不断增强，现在在端上做的事情越来越多。首先，数据可视化方向，各类图表、地图、3D等等数据可视化的尝试变得越来越多。其次，伴随着人工智能的加持，在端上的人工智能应用也变的普及，减少了服务端的交互，提高了系统的实时响应能力。最后，随着Webassembly等技术的应用，有可能将前端运行能力再提升一个档次，可以进行更为复杂的端上计算。为了了解当前前端的发展趋势

订阅 vue