![](https://img-blog.csdnimg.cn/20200803191447892.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue官方文档入门
自学Vue官方文档
FrequencyStar
这个作者很懒,什么都没留下…
展开
-
【Vue踩坑之一】箭头函数的this指向
【一】methods箭头函数的this指向箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象<body> <h1 id="app"> <span>{{message}}</span><br /> <button v-on:click="reverseMessage">逆转消息</button> </原创 2020-07-29 21:39:28 · 1345 阅读 · 0 评论 -
Vue自学官方文档入门【一】
Vue入门之一1、介绍Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。2、起步可以通过下面的CDN引入Vue(入门过程中暂时不使用vue-cli)<!-- 开发环境版本,包含了有帮助的命令行警告 --><原创 2020-07-29 22:47:17 · 416 阅读 · 0 评论 -
Vue实例【二】
Vue实例1、创建一个Vue实例每个Vue应用都是通过一个Vue函数创建一个新的Vue实例开始的。一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的、可复用的组件树组成。var vm = new Vue({ // 选项})当创建一个 Vue 实例时,你可以传入一个选项对象。这篇教程主要描述的就是如何使用这些选项来创建你想要的行为。作为参考,你也可以在 API 文档中浏览完整的选项列表。2、数据与方法当一个 Vue 实例被创建时,它将 dat原创 2020-07-30 17:12:21 · 135 阅读 · 0 评论 -
Vue的API之选项/数据
Vue的API之选项/数据data类型:Object | Function限制: 组件的定义只接受Function详细:Vue实例的数据对象。Vue会递归将data的property转换为getter/setter,从而让data的property能够响应数据变化。如下代码,将message作为Vue对象的一个属性,进行getter和setter,message就变成了直属于vm对象的一个属性。let vm = new Vue({ el: '#app', dat原创 2020-07-31 12:09:56 · 265 阅读 · 0 评论 -
Vue模板语法【三】
模板语法Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。插值文本Mustache语法(双大括号):<span>Message: {{ msg }}</span>msg的值绑定在data的msg的property上,如果data的msg的值发生改变,则插值处的内容就会更新。v-once指令,可以实现一次性插值原创 2020-08-01 12:35:32 · 206 阅读 · 0 评论 -
Vue计算属性【四】
计算属性和侦听器计算属性模板内的表达式是用于简单运算的,放入太多的逻辑会让模板过重且难以维护。因此,对于复杂逻辑运算,应当使用计算属性。<div id="app"> <p>This is message: {{ message }}</p> <p>This is message.reverse: {{ reverse }}</p> </div> <script>原创 2020-08-01 23:26:41 · 140 阅读 · 0 评论 -
Vue Class与Style绑定【五】
Class与Style绑定操作元素的class列表和内联样式是数据绑定的一个常见需求,因为他们都是attribute,所以我们可以用v-bind来处理他们绑定HTML Class对象语法通过v-bind:class,借助data或计算属性,来动态改变某个class是否存在<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta nam原创 2020-08-02 22:41:10 · 148 阅读 · 1 评论 -
Vue条件渲染【六】
条件渲染v-ifv-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。也可以用 v-else 添加一个“else 块”:<div id="app"> <h1 v-if="awesome">I am the first h1</h1> <h1 v-else>oh no</h1> </div> <script> let原创 2020-08-03 19:13:02 · 171 阅读 · 0 评论 -
Vue列表渲染【七】
列表渲染v-for用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名。<div id="app"> <ul> <li v-for="(item, index) in items" :key="index"> {{parent}}-{{index}}-{{item.message原创 2020-08-05 20:59:51 · 218 阅读 · 0 评论 -
Vue事件处理【八】
事件处理监听事件用v-on指令监听DOM事件,并在触发时运行一些JavaScript代码或者methods方法。<div id="app"> <p>This is counter: {{counter}}</p> <button v-on:click="add()">Add 1</button> </div> <script> let vm = new Vue(原创 2020-08-07 11:44:33 · 162 阅读 · 1 评论 -
表单输入绑定【九】
表单输入绑定基础用法文本多行文本复选框单选按钮选择框<div id="app"> <form action="#"> <!-- 文本 --> <input type="text" placeholder="文本" v-model="text" /> <span>text : {{text}}</span><br /> <hr原创 2020-08-07 17:48:51 · 123 阅读 · 0 评论 -
Vue组件基础【十】
组件基础基本示例// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'})<div id="compone原创 2020-08-07 22:35:23 · 193 阅读 · 0 评论 -
Vue组件注册【十一】
组件注册组件名Vue.component('my-component-name', { /* ... */ })该组件名就是 Vue.component 的第一个参数。自定义组件名 (字母全小写且必须包含一个连字符)。推荐组件名大小写定义组件名的方式有两种:使用kebab-caseVue.component('my-component-name', { /* ... */ })当使用 kebab-case (短横线分隔命名) 定义一个组件时,你也必须在引用这个自定义元素时使用原创 2020-08-09 18:52:29 · 127 阅读 · 0 评论 -
Vue的Prop【十二】
PropProp的大小写HTML 中的 attribute 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名<div id="app"> <blog-post post-title="hhhh"></blog-post> </div> <script原创 2020-08-09 20:34:35 · 343 阅读 · 0 评论 -
Vue自定义事件【十三】
自定义事件事件名推荐你始终使用 kebab-case 的事件名。<div id="app"> <blog-post @my-welcome="sayHi()"></blog-post> </div> <script> Vue.component('blog-post', { props: ['post'], template: `<button @click=原创 2020-08-11 18:43:45 · 155 阅读 · 0 评论