vue

我们都知道，只要在 Vue 实例中声明过的数据，那么这个数据就是响应式的。 什么是响应式，也即是说，数据发生改变的时候，视图会重新渲染，匹配更新为最新的值。 那么Vue如何监听数据变化？ 数据变化后，如何通知视图更新？ 数据变化后，视图怎么知道何时更新 思考以上3个问题 先介绍下Object.defineProperty()，因为这个方法是Vue实现响应式系统的重中之重 Object.defineProperty() MDN上的定义： Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。 语法： Object.defineProperty(obj, prop, desc) 使用： const obj = {name: 'Bob'} Object.defineProperty(obj, 'name', { get(){ console.log('get 被触发') }, set(val){ console.log('set 被触发') } }) obj.name //get 被触发 obj.name = 'Lily' //set 被触发 Object.defineProperty可以为对象属性设置get、set函数， get：属性被访问时触发 set：属性被赋值时触发 其实 Object

主要是用了 Object.defineProperty 重新定义了一下属性 < ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < meta http - equiv = "X-UA-Compatible" content = "ie=edge" > < title > Document33 < / title > < / head > < body > < p > name : < input type = "text" id = 'name' / > < / p > < p > age : < input type = "text" id = 'age' / > < / p > < div id = 'show' > < / div > < script > var oDiv = document . getElementById ( 'show' ) ; var nameO = document . getElementById ( 'name' ) ; var age = document . getElementById

前言 对于刚开始学习前端的伙伴俩说，问得最多的问题就是 ——前端技术现在如此繁杂，我到底应该如何学习。这个话题太大了，几句话回答不好；也由于这个问题确实困扰了很多前端开发人员，所以我也就着手系统的输出这篇文章。 虽然这篇文章花了很长时间，肯定也有其局限性；希望各位不吝指出。 入题 我们俨然能感受到前端岗位现在已经发展成了最重要的研发岗位之一，所以对我们提出的要求也就越来越高。所以我们需要学的也就不仅仅只是CSS&HTML&JavaScript了。但这三大件一直都是前端的根本，这一点从未改变。而这三大件中JavaScript又是重中之重。 接下来我会结合我的一点经验，给出前端学习路线的一些具体建议。 目录 三大件学习 库工具 前端框架（ MVVM ）的学习 浏览器 & 计算机基础 前端工程化 性能优化 Nodejs 数据结构和算法 依葫芦画瓢 三大件学习 现在每年依旧有很多初级入门的前端开发。所以对初入门的朋友也给出一点意见。 刚入门的朋友，我觉得不应该一开始就学习像Vue、TypeScript、Webpack等知识。应该把重点放在CSS&HTML&JavaScript基础知识的学习上。 CSS & HTML 对于刚入门的朋友我依旧建议先将CSS(3)&HTML(5)的知识点认真学习一遍。学习的途中最好是学习完一部分就自己在敲一遍代码，加深自己的记忆。 当然如果你愿意

一、原因分析 1、每一次页面的跳转都会发送一次请求，获取一次数据，这样在页面没有改动的情况下极大的耗费了资源，所以需要优化 是由于在入口文件中有mounted函数，每次都会加载，导致每次页面切换都会重新加载数据 2、通过增加keep-alive进行优化，在数据加载过一次之后，会保存起来，下次直接在缓存中获取，减少请求次数。在根节点上增加 二、activated 优化 每次页面切换，如果没有数据的变化可以直接使用缓存中的数据，但是如果数据变化的话，那么缓存中的数据也要随之变化，此时keep-alive就不能满足要求，需要引入activated ，keep-alive的加入使得每次页面切换的时候mounted只记载一次，但是activated则每次页面变化都会加载，所以可以通过activated来实现我们在数据变化后的动作 < template > < div > < home - header > < / home - header > < home - swiper : list = "swiperList" > < / home - swiper > < home - icons : list = "iconList" > < / home - icons > < home - recommend : list = "recommendList" > < / home -

前言 好了，上一篇我讲了怎么使用webpack来构建vue项目，接下将对它进一步完善，添加静态资源和代码校验及webpack-dev-server服务器，废话不多说，直接开始吧。 配置静态资源 安装 在配置之前，需要安装样式和文件资源处理的loader npm install style - loader -- save - dev npm install -- save - dev url - loader file - loader //url-loader是基于file-loader的 配置 module : { rules : [ { test : /\.css$/ , use : [ 'style-loader' , 'css-loader' ] } , { test : /\.(gif|jpg|jpeg|png|svg)/ , use : { loader : 'url-loader' , options : { limit : 1024 , // 每次输出文件的字节数的大小 name : '[name].[ext]' // 输出的文件类型 } } } ] } , css处理器 这里css处理器使用的是stylus，当然也可以使用其他处理器，可以根据个人习惯去更换，我这里使用它是因为它编写的样式简洁，容易阅读 安装 npm install stylus-loader

对于Vue内部来说，不管是根组件还是子组件，都存在this.$router和this.$route两个属性，它们的区别如下: $router 　　　指向当前的VueRouter实例，也就是new Vue({router:router})这里传入的router实例对象,可以使用上一节里列出的VueRouter实例的属性和方法, $route 　　指向当前跳转的路由对象,是一个包含当前的路由信息的对象, <router-view/>组件会通过这个属性来获取需要渲染的组件 对于$router来说，它包含了如下属性 path ;当前路由的路劲,总是解析为绝对路劲 ;例如:/foo/bar params ;对象类型,包含了动态片段和全匹配片段，如果没有路由参数就是一个空对象 query ;对象类型，表示URL查询参数，对于/foo/user=1来说，$route.query.user等于1，如果没有查询参数，则是个空对象 hash ;当前路由的hash值(带#),如果没有hash值，则为空字符串 fullPath ;解析完成后的URL,包含查询参数和hash的完整路劲 matched ;一个数组，包含当前路由的所有嵌套路劲片段的路由记录，也就是所有父路由对象都在这个数组里面，<router-view/>组件会用到这个属性 name ;当前路由的名称 ;和命名别名有关

创建一个公共组件，然后提供给别的组件引用 主要的难点：数据传递 实践了一个简单的，上代码看注释 引用的部分： <template> <div> <Modal v-model="showStatus" title="订正记录"> <!-- 引用Correction组件 可以当做标签使用，传入数据info 类似于标签的自有属性（对应Correction组件中的props变量） 参考文档：https://cn.vuejs.org/v2/guide/components-props.html --> <Correction :info="data.info"></Correction> </Modal> </div> </template> <script> // 引入组件 import Correction from './components/Correction' export default { // 类似组件声明，即可以直接用这个字符当做标签 components: { Correction }, data () { return { data: '', showStatus: false } }, methods: { getCorrectList () { this.showStatus = true } } } 组件的部分 <template> <div> <div>

<div id="app"> <select v-model="selectItem" @change="selectFn($event)"> <!--选择项的value值默认选择项文本 可动态绑定选择项的value值 更改v-model指令绑定数据--> <option v-for="item in items" :value="item.id">{{item.name}}</option> </select> <div>{{selectItem}}</div> <!--选择项的value值--> </div> <script> new Vue({ el: '#app', data: { selectItem: '分类1', items: [ {id:11, name: '分类1'}, {id:22, name: '分类2'}, {id:33, name: '分类3'} ] }, methods: { selectFn(e) { console.log(e) console.log(e.target.selectedIndex) // 选择项的index索引 console.log(e.target.value) // 选择项的value } } }) </script> 来源： https://www.cnblogs.com/jianglibaizhi/p/10650683

一、vue中的双向数据绑定主要使用到了Object.defineProperty（新版的使用Proxy实现的）对Model层的数据进行getter和setter进行劫持，修改Model层数据的时候，在setter中可以知道对那个属性进行修改了，然后修改View的数据。 二、简易版双向数据绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Proxy双向数据绑定大概原理</title> </head> <body> <div id="app"> <input type="text" id="inpt"/> <span id="txt"></span> </div> <script> var inputDom = document.getElementById("inpt"), spanDom = document.getElementById("txt"), data = {} // 更新DOM function

我们学习一门新语言或者框架时，第一件事是什么呢，那必然是向世界say Hello。 创建一个Vue应用 话不多说，先上代码，让我们感受一下Vue的核心功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-model="message"> <h1>{{message}}</h1> // {{message}}模板的输出方式 </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', // app是Vue实例的挂在对象 data: { message: "Hello world" // 字面量 } }