好记性不如烂键盘

插槽普通插槽在子组件中,使用特殊的标签就可以为子组件开启一个插槽,该插槽插入什么内容取决于父组件的使用<div id="app"> <comp>插槽被替换</comp> </div> <template id="tmp"> <h1> <slot>我是一个默认插槽</slot> </h1> </template> <script type="tex

父组件向子组件传值组件中可以用props来声明需要从父级接收的数据。props和data、method平级,有两种方式：1. 字符串数组方式,数组中的字符串就是传递时的名称<div id="app"> <!-- 第一步 使用bind绑定的方式 将父类的组件中的数据传给子组件 --> <parent :msg="msg"></parent> </div> <template id="temp"> <h2&

私有组件注册组件的方法中注册的是全局组件,这样就意味着可以在任意的Vue实例中使用组件。 <div id="app"> <my-component></my-component> <!--这个是comp可以用的 这个是app对象里的私有方法--> <comp></comp> </div> <div id="app2"> <my-component></my-co

Vue组件注册组件的三种方法1.使用Vue.extend方法2.不使用extend方法3.使用template方法不管使用那种方法template属性只有一个 <div id="app"> <my-component></my-component> <my-component2></my-component2> <my-component3></my-component3> <my-c

生命周期beforeCreate表示刚初始化一个Vue的空对象。这个时候在这个对象上只有一些默认的事件和默认的生命周期函数,其他的没有创建。实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性createddata、methods已经被初始化好了。data成功被挂载vue中,可以使用data的数据,这是data第一次可以使用。实例已经在内存中创建好，此时 data 和 methods 已经创建好，此时还没有开始编译模板beforeMount模板已经在内存中编译好,

循环遍历v-for遍历数组当我们有一组数据需要进行渲染时,我们就可以使用v-for完成。v-for类似于js中的for循环格式:v-for=“item in Data”。 item表示每一项的名称,Data表示要遍历的数组。v-for="(item,index) in Data"。 item表示每一项的名称,index表示索引,Data表示要遍历的数组 <ul id="app"> <!-- (item,index) in 数组 这个写法可以显示数组下标 --&

条件判断v-if v-else v-else-ifv-if可以根据表达式中的值渲染或者销毁元素和元素组件。v-if会频繁创建DOM元素和销毁DOM元素,效率慢<div id="app"> <div v-if="score >= 90">优秀</div> <div v-else-if="score >= 80">良好</div> <div v-else-if="score >= 60"&gt

事件监听v-on指令v-on指令的简写方式直接写@<div id="app"> <h2>{{count}}</h2> <button v-on:click="addCount">点</button><br> <!-- v-on的简写方法 --> <button @click="addCount">点</button><br> <inp

计算属性* 计算属性计算属性写法是个方法,但是使用的时候作为属性使用。计算属性中使用到data中的数据只要发生了变化,计算属性就会重新计算。如果两次获取计算属性的时候,里面使用的属性没有发生变化,计算属性会直接使用之前缓存的值。代码： <div id="app"> <input type="text" v-model="firstName"/> <input type="text" v-model="lastName"/> <h2>{{

监听器监听器代码： <div id="app"> <input type="text" v-model="user.firstName"/> <input type="text" v-model="user.lastName"/> <h2>{{user.fullName}}</h2> </div> <script type="text/javascript"> var app=new Vue({

插值操作插值运算符语法： {{数据}}插值运算符可以显示也可以对数据进行计算代码：<div id="app"> <h2>{{firstName}} {{lastName}}</h2> <h2>年龄：{{count*2}}</h2></div><script type="text/javascript"> var app=new Vue({ el:"#app", data:{ fi

Vue基础语法属性绑定属性绑定v-bindv-bind动态绑定一个或多个值v-bind绑定有简单写法,就是不用写v-bind: 直接使用:冒号代码:<div id="app"> <a v-bind:href="link">link</a> <!-- 简写 --> <a :href="link">link</a> </div> <script type="text/javascr