![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue框架学习
文章平均质量分 72
狄鸠
写给5年后的自己
展开
-
Vue学习(一)-基础学习
基础概念一,安装直接引用下载开发版本和生产版 (开发班有完整警告和调试模式,生产版本经过压缩后的)CDN引用<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>二,简介vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面...原创 2019-12-05 10:24:32 · 218 阅读 · 0 评论 -
Vue学习(二)-胡子({{}})语法
一,插值操作这种语法叫做 Mustache 语法中文叫做胡子的意思,两个 {{}} 长的比较像胡子,所以这样命名了<body> <div id="app"> <p>{{ message }}</p> <!-- 直接在模板里面写 --> <p>{{ message +...原创 2019-12-05 10:30:12 · 5440 阅读 · 0 评论 -
Vue学习(三)-v-bind指令学习
二,v-bind动态绑定属性v-bind语法动态绑定一个标签的属性只要一个属性被加 v-bind,该属性的值就会被当成模板变量解析<img v-bind:src="img1" alt=""><script> var app = new Vue({ el: '#app', data: { ...原创 2019-12-05 10:36:14 · 150 阅读 · 0 评论 -
Vue学习(四)-计算属性computed
计算属性在以前的写法中,如果我们要在一个节点中显示多个数据,可能会这样写或者这样写代码阅读性比较差,数据冗杂,我们既想通过变量的方式获取值,又不想想函数一样 写法,就要变化属性computed 的使用语法 Vue 实例中,需要在 option 里面传入computed,用来存放函数,在 {{}} 语法中就像属性一样访问使用<section> ...原创 2019-12-05 10:40:16 · 271 阅读 · 0 评论 -
Vue学习(五)-v-on的使用
v-on 使用v-on用来进行事件监听,**v-on:**后面跟上事件,@+事件='回调' 为语法糖的写法使用<button v-on:click="counter++">+</button> // 简单写法<button v-on:click="sub">-</button> // 封装到函数里面传参// 1. 当我们在标签...原创 2019-12-05 10:41:40 · 284 阅读 · 1 评论 -
Vue学习(六)-v-if的使用
v-if 的使用v-if满足一定条件渲染数据使用<div id="app"> <section v-if="isShow"> <!-- isShow 为 true 时,显示下面的div --> <div>我是div,isShow为True时我显示</div> </section>...原创 2019-12-05 10:44:22 · 5041 阅读 · 0 评论 -
Vue学习(七)-v-show 的使用
六,v-show 的使用v-show是否显示元素,就是给元素添加 display:none 这个行内样式使用<h2 v-show="isShow">我是v-show</h2><h2 v-if="isShow">我是v-if</h2>两者区别:都会隐藏元素,v-if 是直接删除了DOM元素,v-show 是给元素添加 display...原创 2019-12-05 10:48:14 · 273 阅读 · 0 评论 -
Vue学习(八)-v-show 的使用
v-for 循环遍历v-for对数组或者是对象进行遍历使用遍历数组遍历中没有下标(index)值<li v-for="item in movies">{{item}}</li>movies: ['《星际穿越》', '《弱点》', '《一条狗的使命》', '《夏洛特烦恼》']遍历过程中有下标(index)值<li v-for="(it...原创 2019-12-05 10:50:11 · 576 阅读 · 1 评论 -
Vue学习(九)-数据能响应的数组方法
数组响应式方法响应式方法(把数据的内容改变,界面的内容也会发生变化)// 1. push, 在数组末尾添加一个或多个元素this.movies.push('a');this.movies.push('a', 'b', 'c');// 2. pop, 在数组最后删除一个元素this.movies.push();// 3. shift, 在数组最前删除一个元素this.movies.s...原创 2019-12-05 10:52:25 · 202 阅读 · 0 评论 -
Vue学习(十)-过滤器以及案例(购物车)
过滤器用来定义我们自己的文本格式化格式使用可以被使用的地方为 {{}}双括号里 | v-bind表达式里<!-- 第一种方法 --><div id="app">{{ message | getValue }}</div> <!--message自动传入getValue里面作为第一个参数--><!-- 第二种方法 -->...原创 2019-12-05 11:01:11 · 320 阅读 · 0 评论 -
Vue学习(十一)-表单绑定 v-model
表单绑定 v-model概述使用 v-model 指令在 , 以及 元素上面创建数据的双向绑定 什么是双向绑定?就是我们从DOM元素界面修改值也能影响到 Vue 实例里面的数据,类似这样以前我们只能修改 Vue 实例里面的数据来让DOM进行响应式,不能通过改变DOM的数据让Vue的数据改变这样写也是不能发生双向绑定<div id="app"> ...原创 2019-12-05 11:09:33 · 207 阅读 · 0 评论 -
Vue学习(十二)-Vue的组件化开发
组件化开发引子组件化开发是Vue里卖弄非常重要的一个思想我们将一个完整的页面分成很多个组件每个组件都用于实现页面的一个功能块而每一个组件又可以进行细分Vue.js 提供了一种抽象的,可以让我们开发出一个个可复用的小组件来构造我们的应用 任何的应用都会被抽象成一颗组件树基础所谓的组件化开发,实际上就是把可复用的代码抽成一个模板,能在多个地方重复...原创 2019-12-05 11:14:35 · 262 阅读 · 0 评论 -
Vue学习(十三)-Vue的插槽使用
在生活中很多地方都会用到插槽,比如最常见的就是电脑预留的USB插槽,给我们留了更多可扩展性的空间,比如我们可以外接鼠标,键盘,硬盘等等组件的插槽:让我们封装的组件也更加具有扩展性,可以让使用者决定组件内部展示什么东西就像下面京东的几个页面的头部,我们封装了一个组件用于展示他们,我们不能把组件写死,要能展示不同东西我们不能决定组件里面写什么东西,所以要预留位置(插槽),让业务决定插槽...原创 2019-12-13 17:46:58 · 223 阅读 · 0 评论