![](https://img-blog.csdnimg.cn/20190918140012416.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue全家桶的基本语法
简单学习Vue语法
青衫酒丶
这个作者很懒,什么都没留下…
展开
-
vue实现图片懒加载
vue-lazyload1.下载方式通过npm的方法下载到自己的项目里npm i vue-lazyload -S2.在main.js里引入import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload)还可以在使用VueLazyload相关的属性Vue.use(VueLazyload, { error: 'dist/error.png', //图片未能加载出来的时候显示 loading: 'dist/loading.gif',原创 2020-07-26 17:26:18 · 338 阅读 · 0 评论 -
Vuex
1.添加Vuexnpm install --save Vuex2.在main.js中配置import Vuex from 'vuex'Vue.use(Vuex)new Vue({ el: '#app', router, store, components: { App }, template: '<App/>'})3.案例:通过按钮完成自增效果//main.jsVue.use(Vuex)const store = new Vuex.Store(原创 2020-07-04 09:09:08 · 82 阅读 · 0 评论 -
vue——走马灯
<body> <div id="test"> <input type="button" value="滚动" @click='roll'> <input type="button" value="暂停" @click='stop'><br> <span>{{ msg }...原创 2020-01-15 16:50:13 · 225 阅读 · 0 评论 -
萌新VueDay6——选项卡
综合运用vue基本语法完成简单的选项卡基本的html的样式 <style> .tab ul{ overflow: hidden; padding: 0; margin: 0; } .tab ul li{ box-sizing: bor...原创 2020-01-02 14:30:08 · 158 阅读 · 1 评论 -
萌新VueDay6——双向绑定:属性绑定(v-bind)
双向绑定:属性绑定(v-bind)v-bind是属性绑定,以下是绑定value的案例<div id="test"> //第一个直接读取msg <p>{{msg}}</p> //v-bind:绑定value属性,相当于当你打开时,这个input就会显示msg里的内容 //添加v-vo:input是因为实现双向绑定,返回给msg赋值新改...原创 2020-01-02 10:12:13 · 273 阅读 · 0 评论 -
萌新VueDay5——自定义指令(全局定义和局部定义)
自定义指令简单定义大小写的指令讲述全局定义和局部定义<div id="test"> //注意msg不要写到p标签的html部分里 //大写 <p v-upper-text="msg"></p> //小写 <p v-lower-text="msg"></p></div><script...原创 2020-01-01 16:29:23 · 114 阅读 · 0 评论 -
萌新VueDay5——Vue日期(Date)
萌新VueDay5——Vue日期(Date)日期:Wed Jan 01 2020 15:23:21 GMT+0800 (中国标准时间)<div id="test"> <p>日期:{{date}}</p></div>new Vue({ el:'#test', data:{ dat...原创 2020-01-01 16:00:00 · 1290 阅读 · 0 评论 -
萌新VueDay4——Vue动画(transition)
Vue动画(transition)Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡enter-active是进入总的活动包括(enter刚进入,enter-to已经进入)leave-active是离开总的活动包括(leave准备离开,leave-to离开)<div id="test"> <button @cl...原创 2019-12-31 20:55:04 · 146 阅读 · 0 评论 -
萌新VueDay4——生命周期的初步了解
生命周期图示入门简单了解生命周期可分为三大阶段:初始化显示、更新显示、死亡简单根据例子了解:<div id="test"> <button @click="destoryVM">销毁</button> <p v-show="isshow">王大毛</p></div><script src="...原创 2019-12-31 19:53:22 · 85 阅读 · 0 评论 -
萌新VueDay4——使用v-model实现表单数据的双向绑定
萌新VueDay4——表单数据的自动收集注意:所有form表单提交都需要name属性后台需要根据name属性接受到提交的表单value表示input的数据<div id="test"> //@submit.prevent阻止默认提交 <form action="/xxx" @submit.prevent="handleSubmit"> &l...原创 2019-12-31 13:54:17 · 126 阅读 · 0 评论 -
萌新VueDay3——绑定监听(@click.stop、@click.prevent、@keyup)
事件处理绑定监听为按钮绑定事件监听简单分为以下情况:<div id="test"> <button @click="btn1">不带参数函数</button> <button @click="btn2('我是带参数函数')">带参数函数</button> <button @click="btn3"&...原创 2019-12-30 15:42:11 · 523 阅读 · 0 评论 -
萌新VueDay3——列表渲染检索列表(过滤、排序sort)
萌新Vue入门Day3——过滤、排序列表渲染检索通过text框输入关键字进行检索<div id="test"> <input type="text" v-model="searchname"> <ul> <li v-for="(p,index) in newStudents" :key="index"> ...原创 2019-12-30 14:37:17 · 260 阅读 · 0 评论 -
萌新VueDay2——v-for(增删改查)
萌新Vue入门Day2——v-for列表渲染v-for遍历数组vue中列表循环需加:key=“唯一标识” 唯一标识可以是标签里面的id或者index等。<div id="test"> <ul> //p :对象 index: 数组下标 students: 数组 :key :唯一标记 <li v-for="(p,index) in ...原创 2019-12-30 13:06:55 · 345 阅读 · 0 评论 -
萌新VueDay2——v-if、v-else、v-show
萌新Vue入门Day2——v-if、v-else、v-show条件渲染1.v-if、v-else用法:根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。简单来说:就是根据表达式的值的真假条件,如果是假则把这个标签从内存中移除,就好比下图第一个p标签判断为真,所以第二个p标签将不会显示在html<div id="test"> <p...原创 2019-12-29 15:52:44 · 188 阅读 · 0 评论 -
萌新VueDay2——style与class的绑定
萌新Vue入门笔记day2这是我学习Vue入门第二天在此记录强制数据绑定强制数据绑定1.class绑定1.1class直接绑定<div id="test"> <h2>1.class绑定</h2> //这里的class绑定不是a的css样式而是,data里的a,执行的是a的值(aclass的css样式) <p :class...原创 2019-12-29 10:39:43 · 166 阅读 · 0 评论 -
萌新VueDay1
萌新Vue入门笔记day1这是我学习Vue入门第一天在此记录1.计算属性计算属性:computed实现两个text输入框输入,且该随之改变以姓名举例办法一:<div id="test"> 姓:<input type="text" v-model='xing'><br/> 名:<input typr="text" v-model...原创 2019-12-28 16:04:56 · 107 阅读 · 0 评论 -
萌新VueDay1
萌新Vue入门笔记day1这是我Vue入门第一天在此记录1.Vue引入与必要的模板格式//一定要注意引入js文件<script type="text/javascript" src="../js/vue.js"></script><script> //建议建立实例对象起名为vm,可以对应MVVM框架 //new 后面注意是大写V,const vm ...原创 2019-12-28 10:53:41 · 196 阅读 · 0 评论