12 2019 档案

vue小故事之父子(上下级)通信之父传子props
摘要：vue小故事之父子(上下级)通信之父传子props vue 父子(上下级)通信 props 或许你对父子通信有点迷糊，为什么这样那样父子之间就可以通信了，以下通过一个小故事来进行解说，故事模型或许有点牵强，如果能理解最好，不能理解请向我咨询。 知识回顾，请参考父子通信的前置知识，父子组件 https 阅读全文
posted @ 2019-12-19 14:38 明奴 阅读(793) 评论(1) 推荐(0)
vue父子组件
摘要：vue父子组件新建 模板 小书匠 为什么要厘清哪个是父组件，哪个是子组件？一开始浏览器接收和要显示的数据非常少，此时无需划分区域进行布局。随着页面数据量的增加，如果单纯一个窗口来加载和显示数据，是非常缓慢的。此时将主页面充当父组件中转，分发到子组件，将会大大降低父组件的压力。你可以想象你开了一个小餐馆，自己可以充当厨师，收银员和后勤进货。当小餐馆逐渐变成大酒店后，一个人是无法再兼任多职了。厨师可... 阅读全文
posted @ 2019-12-17 22:23 明奴 阅读(2245) 评论(0) 推荐(0)
vue组件化之模板优化及注册组件语法糖
摘要：vue组件化之模板优化及注册组件语法糖vue组件化 模板 优化 在 https://www.cnblogs.com/singledogpro/p/12054895.html 这里我们对vue.js进行了初体验，输出了经典的hello world.但是在这个过程遇到了编程最恶心的事情----字符串拼接。enter description herevue.extend函数需要一个对象，这个对象的属性... 阅读全文
posted @ 2019-12-17 21:17 明奴 阅读(845) 评论(0) 推荐(0)
vue组件化初体验 全局组件和局部组件
摘要：vue组件化初体验 全局组件和局部组件vue组件化 全局组件 局部组件 关于vue入门案例请参阅https://www.cnblogs.com/singledogpro/p/11938222.html 下载vuejs,Hello Vue（vscode）先看看目录结构，这里的vue.js脚本存放在src文件夹下，所以如果你参照上面的vue入门，记得把vue.js引用的地方也要修改下目录结构vue... 阅读全文
posted @ 2019-12-17 15:43 明奴 阅读(696) 评论(0) 推荐(0)
vue指令之v-cloak
摘要：vue指令之v-cloak一起学 vue指令 v-cloak 指令可看作标签属性某些情况下可能由于机器性能故障或者网络原因，导致传输有问题，那么浏览器无法成功解析数据，此时浏览器输出的内容就是纯文本，这样会非常影响客户体验，干脆就不显示。此时我们可以使用v-cloak指令。该指令不常用。v-cloak指令：当数据未解析完成时会渲染什么样式。例如不显示。定义v-cloak样式然后给容器添加v-... 阅读全文
posted @ 2019-12-15 16:29 明奴 阅读(1779) 评论(0) 推荐(1)
一起学vue指令之v-text
摘要：一起学vue指令之v-text一起学 vue指令 v-text 指令可看作标签属性v-text的功能和v-html很相似，都是在容器标签内控制字符串内容的输出，v-text输出纯文本，而v-html输出解析后的文本，该文本会覆盖掉原来的标签内容值。v-text和v-html功能类似,覆盖标签内容值如果是纯文本输出，那么输出的字符串结果和插值输出【mustache】一样。插值输出和v-text... 阅读全文
posted @ 2019-12-15 16:25 明奴 阅读(1312) 评论(0) 推荐(0)
一起学vue指令之v-bind
摘要：一起学vue指令之v-bind一起学 vue指令 v-bind 网页的图片url地址并不是固定写死的，如果写死，每一个活动就改一次图片的url,一个网页有多少张图片，工作量多大？通常来说，客户端向服务器发送请求，服务器返回url数据到vue实例的data数据中，由于url动态绑定了vue实例的data，所以会实时更新图片.无需我们手工更改，并且不会出错。有的同学说，直接用插值语法不就行了？插值语... 阅读全文
posted @ 2019-12-15 16:21 明奴 阅读(364) 评论(0) 推荐(0)
一起学vue指令之v-pre
摘要：一起学vue指令之v-pre一起学 vue指令 v-pre 指令可看作标签属性浏览器解析引擎遇到vue的插值符号时会自动解析，当你想输出不被解析的纯文本时，可以使用v-pre指令。未使用v-pre指令之前，data数据保存着message的值hello world,当启动浏览器时，输出Hello World,i am vue..未使用v-pre使用v-pre指令之后，输出纯文本值{{mess... 阅读全文
posted @ 2019-12-15 16:20 明奴 阅读(6085) 评论(0) 推荐(1)
一起学vue指令之v-html
摘要：一起学vue指令之v-html一起学 vue指令 v-html 指令可看作标签属性某些情况下，我们点击百度搜索下一页，服务器应该就返回下一页的数据页面，包含其他资源链接等。返回的数据的本质是一个含HTML代码的字符串。以百度链接为例，如果是链接，它的形式是 百度一下如果我们直接通过{{}}插值输出，由于没有解析，就直接输出包含HTML的字符串，这肯定不符合需求的未使用v-html我们希望它先... 阅读全文
posted @ 2019-12-15 16:18 明奴 阅读(768) 评论(0) 推荐(0)
一起学vue指令之v-once
摘要：一起学vue指令之v-once一起学 vue指令 v-once 指令可看作标签属性v-once口该指令后面不需要跟任何表达式（v-for后面接表达式）口该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。未使用v-once指令之前，对数据进行修改，界面同步更新未使用v-once指令之前对容器使用v-once指令进行修饰之后，对数据进行修改，界面不更新使用v-once指令之后 阅读全文
posted @ 2019-12-15 16:17 明奴 阅读(3257) 评论(0) 推荐(0)
webpack插件之webpack-dev-server
摘要：webpack插件之webpack-dev-serverwebpack插件 自动化 webpack-dev-server 现在只需要使用 npm run build指令就可以自动打包，并自动处理好各种依赖关系，但还是存在一个问题，如果对js文件的代码进行了修改，又要重新打包才能测试，很明显又要手动操作在开发测试过程中，我们会经常修改代码后，然后频繁刷新页面查看效果.对于我们前端仔来说，每次修改代... 阅读全文
posted @ 2019-12-12 17:44 明奴 阅读(1120) 评论(0) 推荐(0)
webpack插件之htmlWebpackPlugin
摘要：webpack插件之htmlWebpackPluginwebpack插件 自动化 htmlWebpackPlugin 由于webpack已经帮我们处理好js之间的依赖关系，现在我们可以忽略js的加载顺序，而只要在index.html内使用标签引入bundle.js即可。在index.html内使用引入bundle.js开发阶段，index.html在根目录，script引入好像也没什么问题。in... 阅读全文
posted @ 2019-12-12 17:37 明奴 阅读(2631) 评论(0) 推荐(0)
webpack配置之webpack.config.js文件配置
摘要：webpack配置之webpack.config.js文件配置webpack.config.js webpack resolve 1.总是手动的输入webpack的输入输出文件路径，是一件非常繁琐的事情。我们尝试用文件的形式将输入输出文件夹配置好。新建一个js文件，并命名为webpack.config.js【目前只能命名为这个，不然程序不识别】webpack.config.js2.在webpac... 阅读全文
posted @ 2019-12-12 17:34 明奴 阅读(19605) 评论(0) 推荐(1)
webpack的安装和运行
摘要：webpack依赖于node,为了可以正靠运行，必须依赖node环境.node环境为了可以真正的执行很多代码，必须其中包含各种依赖的包npm工县（node packages manager）所以在进行webpack安装之前，首先要安装node运行环境。 关于node的安装请参照博客的以下页面 htt 阅读全文
posted @ 2019-12-11 10:20 明奴 阅读(718) 评论(0) 推荐(0)
webpack安装大于4.x版本(没有配置webpack.config.js)
摘要：webpack安装大于4.x版本(没有配置webpack.config.js)webpack 输出参数-o 高版本 如果安装的webpack版本大于4+,还需要安装webpack-cli.在没有配置webpack.config.js之前，还需要配置输出参数webpack ./src/main.js ./dist/bundle.js //没有配置输出参数 -o/没有配置输出参数 -oWAR... 阅读全文
posted @ 2019-12-10 20:12 明奴 阅读(1527) 评论(0) 推荐(0)
webpack安装低于4版本(没有配置webpack.config.js)
摘要：webpack安装低于4版本(没有配置webpack.config.js) webpack 无需配置输出参数-o 低版本 1.初始化项目 npm init -y 初始化项目 2.安装webpack@3.6.0版本 npm i webpack@3.6.0 -g 安装webpack@3.6.0版本 3. 阅读全文
posted @ 2019-12-10 20:11 明奴 阅读(1363) 评论(0) 推荐(0)
什么是webpack以及为什么使用它
摘要：什么是webpack以及为什么使用它新建 模板 小书匠 在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具。因为开发时用的是高级语法开发，效率非常高，但很可惜的是，浏览器未必会支持或认识这些语法，此时需要使用打包工具进行转化变换，并处理好各模块间的依赖关系，最后将其进行整合打包。webpack就是其中一个佼佼者，其核心在于让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。不... 阅读全文
posted @ 2019-12-10 20:09 明奴 阅读(1410) 评论(0) 推荐(0)
webpack前置知识2(JavaScript项目初始化)
摘要：所有的JavaScript项目都是在终端输入npm init -y进行项目初始化，如果要自定义项目规则，去掉 -y 参数。vscode终端快捷键ctrl+`初始化运行上述命令后，项目内会新建一个package.json文件，打开该文件如下:package.jsonpackage.json文件内部就是一个JSON对象，该对象的每一个成员就是当前项目的一项设置。比如name就是项目名称，versio... 阅读全文
posted @ 2019-12-10 10:51 明奴 阅读(441) 评论(0) 推荐(0)
webpack前置知识1(模块化开发)
摘要：webpack前置知识1(模块化开发)新建 模板 小书匠 在开始对模块化开发进行讲解之前，我们需要有这么一个认识，即在没有过多第三方干扰时，成本低收益高的事物更容易获得推广和信赖。模块化开发就是这样的事物，它具有以下优点1.开发效率高1.1各模块并行开发1.2复用性高2.可维护性高上面的文字生涩难懂，到底什么是模块化开发？我们知道一个成熟稳健的社会，模块化是必然的，即社会分工是明确的。最初的网页... 阅读全文
posted @ 2019-12-10 10:50 明奴 阅读(289) 评论(0) 推荐(0)