vue2基础知识
从搭建环境到写一个vue实现是个人博客站
vanessa_earth
你不勇敢,没人替你坚强
展开
-
1.vue2环境搭建
Author:vanessaDate:2018/01/21 ## 方式一:直接<script\>引入,cdn的方式1.可以将vue,js下载到本地引入<script src="本地路径/vue.js"></script>2.也可以直接写cdn的地址<script src="https://cdn.jsdelivr.net/npm/...原创 2018-07-28 10:31:37 · 186 阅读 · 0 评论 -
2.vue2-实例和生命周期
Author:vanessaDate:2018/01/21 参考文献: https://www.cnblogs.com/xiaofenguo/p/6605091.html## 1.创建一个实例var vm = new Vue({ //选项 |-------DOM(3) | |-------el (提供一个在页面上已存在的 DOM 元素作为 Vue...原创 2018-07-28 11:01:00 · 171 阅读 · 0 评论 -
3.vue2-模板语法
Author:vanessaDate:2018/02/04* 指令:带有 v- 前缀的特殊属性,指令属性的值预期是单个 JavaScript 表达式,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM* 参数:一些指令能够接收一个“参数”,在指令名称之后以冒号表示。如v-bind:href,href即为参数* 修饰符:是以半角句号 . 指明的特殊后缀,如:v-on:sub...原创 2018-07-28 11:11:03 · 277 阅读 · 0 评论 -
4.vue2-计算属性computed
Vue计算属性Author:vanessaDate:2018/02/11计算属性(computed):通过对data中属性,进行简单变换后得到的属性例子: <div id="box"> <div>{{msg}}</div> <div>{{doubleMsg}}</div> ...原创 2018-07-28 11:13:46 · 454 阅读 · 0 评论 -
5.vue2-样式Class 与 Style 绑定
Author:vanessaDate:2018/02/11---样式内容---<style> .title{font-size: 40px;} .active{color:red} .txt{text-decoration: line-through} .bg{background: yellowgreen}...原创 2018-07-28 11:15:41 · 435 阅读 · 0 评论 -
6.vue2-条件渲染v-if和列表循环v-for
Author: vanessaDate: 2018/03/061.v-if语法:写在html标签内部,类似于标签属性<div id="app"> <div v-if="examType=='kzbs'">考证笔试</div> <div v-else-if="examType=='kzms'">考证面试&原创 2018-07-28 11:18:17 · 1159 阅读 · 0 评论 -
7.vue2-事件绑定v-on/@
Author: vanessaDate: 2018/06/151.v-on语法,简写用@代替v-on<div v-on:click="add"></div><div v-on:click="add2('a',$event)"></div><script>new Vue({ el:'', data:{原创 2018-07-28 11:20:14 · 393 阅读 · 0 评论 -
8.vue2-组件component
Author: vanessaDate: 2018/06/191.组件<my-div></my-div>Vue.component('my-div',{ template:'<button>按钮</button>', })2.父组件给子组件传递数据props<my-div title="this is a ele...原创 2018-07-28 11:21:54 · 366 阅读 · 0 评论 -
9.vue2-组件注册,prop,插槽
Author: vanessaDate: 2018/06/191.组件命名使用小写,单词中间加横线,如:<my-input></my-input>2.注册a.全局注册Vue.component('my-component-name', { // ... 选项 ...})b.局部注册,components这个属性一定是复数var Co...原创 2018-07-28 11:23:54 · 692 阅读 · 0 评论 -
10.vue2-动态组件和异步组件
Author: vanessaDate: 2018/06/191.keep-alive失活的组件将会被缓存<keep-alive> <component v-bind:is="currentTabComponent"></component></keep-alive>原创 2018-07-28 11:32:04 · 416 阅读 · 0 评论 -
11.vue2-过渡和动画
Author: vanessaDate: 2018/06/201.css过渡,transition<div id="example-1"> <button @click="show = !show"> Toggle render </button> <transition name="slide-fade">原创 2018-07-31 21:52:15 · 182 阅读 · 0 评论