![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue学习笔记
文章平均质量分 86
vue的学习笔记
给你翅膀
这个作者很懒,什么都没留下…
展开
-
[vue]10-vue脚手架
vue-cli什么是Vue CLI如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI.如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作,那无疑效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些事情。CLI是什么意思?CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手转载 2021-04-26 00:21:07 · 154 阅读 · 0 评论 -
[vue]8-vue组件1
父组件和子组件在前面我们看到了组件树:组件和组件之间存在层级关系而其中一种非常重要的关系就是父子组件的关系我们来看通过代码如何组成的这种层级关系: <div id="app"> <my-cpn></my-cpn> </div> <script> const myComponent1 = Vue.extend({ template:`转载 2021-04-20 22:35:05 · 227 阅读 · 0 评论 -
[vue]7-vue的组件化
认识组件化什么是组件化人面对复杂问题的处理方式:任何一个人处理信息的逻辑能力都是有限的所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容。但是,我们人有一种天生的能力,就是将问题进行拆解。如果将一个复杂的问题,拆分成很多个可以处理的小问题,再将其放在整体当中,你会发现大的问题也会迎刃而解。组件化也是类似的思想:如果我们将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展。但如果,我们讲一个页面拆分成一个个小的功能块,每个功能原创 2021-04-18 23:06:23 · 139 阅读 · 0 评论 -
[vue]6-vue的事件绑定/条件渲染/循环/表单绑定
事件监听在前端开发中,我们需要经常和用于交互。这个时候,我们就必须监听用户发生的时间,比如点击、拖拽、键盘事件等等在Vue中如何监听事件呢?使用v-on指令v-on介绍作用:绑定事件监听器缩写:@预期:Function | Inline Statement | Object参数:eventv-on基础这里,我们用一个监听按钮的点击事件,来简单看看v-on的使用下面的代码中,我们使用了v-on:click="counter++”另外,我们可以将事件指向一个在method原创 2021-04-17 23:23:12 · 781 阅读 · 0 评论 -
[vue]5-计算属性/watch监听
计算属性 前面的笔记提到了计算属性,这里单独讲一下计算属性我们知道,在模板中可以直接通过插值语法显示一些data中的数据但是在某些情况,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示比如我们有firstName和lastName两个变量,我们需要显示完整的名称。但是如果多个地方都需要显示完整的名称,我们就需要写多个{{firstName}} {{lastName}} <div id="app"> <h2>{{name原创 2021-04-14 22:36:01 · 200 阅读 · 0 评论 -
[vue]4-vue指令
插值操作mustachemustache翻译为中文的意思是 胡须、胡子 的意思 {{ }}这里再简单说一下他的用法 <div id="app"> <!-- 插入标签和文字一块使用 --> <h1>hello {{name}}</h1> <!-- 两个mustache --> <h2>{{name}} {{age}}</h2>原创 2021-04-13 22:29:47 · 127 阅读 · 0 评论 -
[vue]3-Vue的生命周期
先放一幅图beforcreate、created<body> <div id="app"> <hehe></hehe> </div> <template id="hehe"> <div class = 'test'> <p ref='p'>{{num}}</p> </div> </template><scrip原创 2021-04-11 22:30:14 · 97 阅读 · 0 评论 -
[vue]2-vue初了解
数据绑定上一节提到了数据绑定,也提到了数据变页面也变<div id="app">{{name}}</div>let app = new Vue({ el: 'app', data: { name: 'vue'}})当我们运行这段代码的时候页面中会显示vue,当我们按F12打开控制台,输入app.name = ‘hello vue’可以看到,我在控制台输入了app.name = “hello vue”我们在修改我们的data里面的数据的时候,原创 2021-04-11 15:08:47 · 138 阅读 · 0 评论 -
[vue] 1-vue开篇
[vue] 1-vue开篇为什么学习vue每个人学习Vue的目的是各不相同的。可能你的公司正要将原有的项目使用Vue进行重构。也可能是你的公司新项目决定使用Vue的技术栈。当然,如果你现在正在换工作,你会发现招聘前端的需求中,10个有8个都对Vue有或多或少的要求。当然,作为学习者我们知道Vuejs目前非常火,可以说是前端必备的一个技能。前端框架的三大马车angular 谷歌 MVC(设计典范) M(数据) V(视图) C(控制器) 双向数据绑定re原创 2021-04-10 21:40:22 · 119 阅读 · 0 评论