![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue.Js
文章平均质量分 56
BriskNo1
努力学习的小菜鸟
展开
-
vue进阶内容总结--自定义事件(三)
自定义事件事件名不同于组件和 prop,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子,如果触发一个 camelCase 名字的事件:this.$emit('myEvent')则监听这个名字的 kebab-case 版本是不会有任何效果的:<!-- 没有效果 --><my-component v-on:m...原创 2019-11-16 10:55:53 · 252 阅读 · 0 评论 -
vue进阶内容总结--Prop (二)
PropProp的大小写(camelCase vs kebab-case)HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为 小写字符。这意味着当你使用 DOM 的模板时,camelCase(驼峰命名法)的 prop名需要使用其等价的 kebab-case(短横线分隔命名)命名:Vue.component('blog-post',{ // 在JavaSc...原创 2019-10-10 22:01:42 · 503 阅读 · 0 评论 -
vue进阶内容总结--组件注册(一)
组件注册组件名在注册一个组件的时候,我们始终需要给它起一个名字。比如在全局注册的时候我们已经看到了:Vue.component('my-component-name',{...})该组件名就是 Vue.component 的第一个参数(my-component-name)。你给予组件的名字可能依赖于你打算拿它来做什么。当直接在 DOM 中使用一个组件(而不是在字符...原创 2019-10-02 16:40:18 · 325 阅读 · 0 评论 -
vue基础内容总结(十二)
组件基础这里有一个 Vue 组件的示例:组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是 <my-template> 。我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用,如上图。因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、meth...原创 2019-10-02 15:32:07 · 196 阅读 · 0 评论 -
vue基础内容总结(十一)
表单输入绑定基础用法你可以使用 v-model 指令在表单 <input> 、<textarea>、<select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-module 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。注意:v-model 会忽略所...原创 2019-10-02 10:23:34 · 269 阅读 · 0 评论 -
vue基础内容总结(十)
事件处理监听事件可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。示例:事件处理方法然后许多事件处理逻辑会更复杂,所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。示例:当然,也可以通过 JavaScript 直接调用:vm.greet...原创 2019-10-01 17:37:43 · 178 阅读 · 0 评论 -
vue基础内容总结(九)
用 v-for 把一个数组对应为一组元素我们可以用 v-for 指令基于一个数组来渲染一个列表。 v-for 指令需要使用 item in items 形式的特殊语法, 其中 items 是源数据数组,而 items 是被迭代的数组元素的别名。在 v-for 块中,我们可以访问所有父作用域的属性。 v-for 还支持第二个参数,即当前选项的索引。当然,我们也可以用 of 替代 in...原创 2019-10-01 11:29:45 · 276 阅读 · 0 评论 -
vue基础内容总结(八)
条件渲染v-ifv-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy值的时候会被渲染。<h1 v-if="awesome">This is awesome!</h1> <h1 v-else>Oh no!</h1>也可以用 v-else 添加一个 “v-else块”。在&...原创 2019-10-01 08:56:38 · 149 阅读 · 0 评论 -
vue基础内容总结(七)
Class 与 Style 绑定操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。绑定 HTML Class...原创 2019-09-27 08:39:27 · 166 阅读 · 0 评论 -
vue基础内容总结(六)
计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:{{message.split('').reverse('').join('')}}在这个地方,模板不在是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理。...原创 2019-09-18 09:14:56 · 192 阅读 · 0 评论 -
vue基础内容总结(五)
实例声明周期钩子每个 Vue 实例在被创建时都要经过一系列的初始化过程--例如,需要设置数据监听、编辑模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。比如 created 钩子可以用来在一个实例被创建以后执行代码:也有一些其他的钩子,在实例生命周期的不同阶段被调用, 如 ...原创 2019-09-17 15:31:46 · 296 阅读 · 0 评论 -
vue基础内容总结(四)
创建一个 Vue 实例每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue实例开始的:var vm = new Vue({ // 选项});虽然没有完全遵循 MVVM 模型,但是 Vue 的设计也受到它的启发。当创建一个 Vue 实例时,可以传入一个选项对象。一个 Vue 应用由一个通过 new Vue 创建的根Vue实例,以及可选的嵌套的、可复用的组...原创 2019-09-16 17:54:23 · 151 阅读 · 0 评论 -
vue基础内容总结(三)
组件化应用构建组件系统是Vue的另外一个重要概念,因为它是一种抽象的,允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树:在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例,在 Vue 中注册组件很简单://定义名为 todo-item 的新组件Vue.component('todo-item',{...原创 2019-09-16 14:34:30 · 179 阅读 · 0 评论 -
vue基础内容总结(二)
vue.js是什么? Vue (读音 /vjuː/,类似于 view)是一套用户构建用户界面的渐进式框架。与其他框架不同的是,vue被设计为可以自底向上逐层应用。Vue的核心库只关心图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页应用提供驱动。声明式渲染 Vue.js 的核心是一个允许采...原创 2019-09-16 09:37:38 · 198 阅读 · 0 评论 -
我的第一个vue应用
vue的安装方式:1.直接用<script>引用的方式 直接下载vue.js文件,并在html文件中通过<script>标签引用,Vue会被注册成一个全局变量。 <script src="vue.js" type="text/javascript" charset="UTF-8"></script>2.通过CDN的方式...原创 2019-09-10 19:51:04 · 140 阅读 · 0 评论 -
vue各个目录结构说明
结构如图:目录结构说明:1.main.js 使我们程序的入口文件,作用是初始化vue实例2.App.vue 是我们的根组件,所有的页面都需要在App.vue里进行注册,可以理解为所有的组件都是App.vue的子组件,我们可以把头部和底部每个页面都出现的内容放到App.vue里面。3. index.html 文件入口4. src 放置组件和入口文件5. node_mod...原创 2019-09-10 16:29:20 · 380 阅读 · 0 评论 -
vue环境搭建好后npm run dev 报errno -4058
报错截图如下:进入到项目目录下,shift+右键 打开cmd执行 npm install然后再执行 npm run dev如图:看下效果图:原创 2019-09-10 15:50:38 · 12859 阅读 · 0 评论 -
Node.js安装图解
从node.js官网下载自己对应的版本:http://nodejs.cn/download/按照提示选择安装位置安装完毕!执行npm命令配置命令(替换自己的安装路径):npm config set prefix "D:\SoftWare\Path\Other\NodeJs\node_global"npm config set cache "D:\SoftWare\Path\Other...原创 2019-09-10 15:05:17 · 118 阅读 · 0 评论