vue日常篇
是小左了
与坚持梦想者同行
展开
-
Render函数与VDOM
一、x-template:这是一种组件模板的书写方式。在HTML文档中书写x-template模板内容: <script type="text/x-template" id="xyz"> <div></div> </script>在index.js文件中定义组件: Vue.component('my-com',{ ...原创 2019-10-14 21:50:16 · 222 阅读 · 0 评论 -
VUE中的自定义指令
一、Vue指令的特征:Vue指令名必须以v-开头。Vue指令书写在HTML标记对内部,像HTML属性一样使用。有的指令必须具备取值,有的指令可以没有取值。v-show=“isShow” v-once v-pre指令可以有修饰符:修饰符用 . 连接到指令的后面。v-model.number=“nick”指令可以有参数:参数用 : 连接到指令的后面。v-bind:src=“url” v-o...原创 2019-10-06 23:55:05 · 384 阅读 · 0 评论 -
组件与复用技术(下)
接上一篇组件与复用技术(上)三、组件之间的通信(1):props / $emit认识父组件和子组件①父组件:在HTML中使用组件的代码被称为“父组件”。②子组件:在JS中注册组件的代码被称为“子组件”。父组件向子组件的通信:①数据从父组件传递给子组件。②通过props来实现。③通过props来实现的父组件向子组件的通信是“单数据流传递”。由于是单数据流传递,因此在子组件中不允许...原创 2019-10-06 23:41:17 · 183 阅读 · 0 评论 -
组件与复用技术(上)
组件(Component):组件是可以复用的Vue实例。一、组件的分类与注册:组件的分类:①局部组件:在Vue实例内部使用components选项注册局部组件,只能适用在本Vue实例的挂载点内部。②全局组件:使用Vue.component()方法注册全局组件,可以使用在所有Vue实例的挂载点内部。局部组件的注册与使用:①在js文件中注册局部组件: var vm=new ...原创 2019-10-06 23:06:07 · 512 阅读 · 0 评论 -
计算属性与侦听器总结
计算属性与侦听器总结计算属性简介(缘由):模板里不建议进行复杂的逻辑操作,为了代码的整洁,放到computed计算属性(侦听器等效)。计算属性是为了防止表达式或逻辑复杂时使用计算属性。所有的计算属性都以函数的形式写在Vue实例内的computed选项内,最终通过return返回计算结果 三部曲:①调用---②computed选项---③方法返回值计算属性的两个实用小技巧...原创 2019-09-10 21:00:05 · 261 阅读 · 0 评论 -
侦听属性
侦听属性1. 侦听属性依靠watch选项来实现对自身变量的检测。 侦听属性只能检测在data中设置好的数据。 当侦听的属性值发生变化时,执行侦听属性所对应的函数。语法格式:watch:{ 侦听属性:function(newValue,oldValue){ //当侦听属性的取值发生变化时所执行的代码 }}例:watch:{ kb:functio...原创 2019-09-10 20:23:49 · 801 阅读 · 0 评论 -
计算属性
上面讲到了使用计算属性来实现数据的计算功能,下面让我们来看一下在不同的Vue实例下使用计算属性:Vue实例.计算属性名案例1:根据不同的用电类型计算电费:让我们先看一下效果图是这样的这里我是用了bootstrap布局,看上去比较好看~效果是这样的,用户输入上个月的使用电表数,再输入本月的用电表数,得出的插值再分别用商业用电和民用用电的价格相乘,然后得出本月应缴纳的电费。下面我们可以先...原创 2019-09-02 18:58:34 · 382 阅读 · 0 评论 -
计算属性
计算属性计算属性在Vue实例中使用computer选项来实现。计算属性的书写格式:computed:{ 属性名:function(){ return 返回值; } }在computed中定义的function不是方法,而是属性。计算属性在data中不用书写。例1:实现两个数值的相加computed:{ add:function(){ return this.numA+this.num...原创 2019-08-22 08:03:34 · 3055 阅读 · 0 评论 -
利用所学的Vue指令实现一个分类筛选器
学完Vue的基础指令以后,我们可以用所学的指令实现一个简易的分类筛选器,接下来让我们看一下,写完以后大概就是这样:可以看到,成型之后是这个样子,然后我们点击上面的主题分类,下面的主题细节会随着筛选变化:然后接下来我们开始制作,在这里列举了几个分类:然后我们可以根据上边的数据在编辑器内写出简单的样式: <p> 主题分类: ...原创 2019-08-21 21:58:53 · 1279 阅读 · 0 评论 -
vue之实例绑定、文本插值、基础绑定、语法糖
vue.js是一套构建用户界面的框架,只关注数据层且不会影响DOM层vue的应用创建很简单,通过构造函数vue即可创建Vue根实例,并启动vue根实例。创建根实例var app = new Vue({ //相应的代码块 })将vue实例绑定到变量app,事实上所有代码都是一个对象,写入vue实例的选项的。vue()构造函数的参数是一个键值对,内...原创 2019-07-04 20:39:10 · 657 阅读 · 1 评论 -
vue之属性、条件、渲染、事件指令及修饰符
今天我们来了解一下vue的属性、条件、渲染、事件指令及修饰符基本指令v-bind:v-bind动态属性:常用于动态绑定HTML元素的属性,例如id、class、href、src等属性。改变任一方数据后都会实时更新。语法格式1:单个语法格式v-bind:attributeName=variable语法格式2:对象语法格式v-bind=“{attributeName1:variab...原创 2019-07-09 09:24:53 · 369 阅读 · 2 评论