https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中 1.设置选中项颜色 <template> <div id="app"> <v-header></v-header> <div class="tab"> <div class="tab-item"> <router-link to="/goods&qu…
一.star组件使用到了computed属性 computed相当于属性的一个实时计算,当对象的某个值改变的时候,会进行实时计算. computed: { starType() { return 'star-' + this.size }, <template> <div class="star" :class="starType"> <span v-for="(itemClass,index) in itemClasses&…
一.定位问题按照视频写代码时,发现元素“5个“”定位不对,如下图 正常位置为 还以为是哪里写错了,仔细研究了下,需要在父div上加relative. position:relative/absolute的父(祖先)节点的padding-box的区进行定位(忽略文字),找不到符合条件的父(祖先)节点,则相对浏览器窗口进行定位.没有设置了TRBL则默认浮动,默认浮动在父级节点的content-box区. <style lang="stylus" rel="styleshee…
https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中 webpack.dev.conf.js中添加两段代码 'use strict' const utils = require('./utils') const webpack = require('webpack') const config = require('../config') const merge = require('webpack-merge') const path…
https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中有的同学找不到data.json,以下是data.json内容 { "seller": { "name": "粥品香坊(回龙观)", "description": "蜂鸟专送", "deliveryTime": 38, "score": 4.2, "…
一.父子组件之间对象传递 1.app.Vue中的v-header 中加入 v-bind:seller="seller" template> <div id="app"> <v-header v-bind:seller="seller"></v-header> <div class="tab"> <div class="tab-item"> 2…
https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中 写法如下 <div class="tab-item"> <router-link to="/goods">商品</router-link></div>…
继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的代码: html: <body> <div ng-controller="compileCtrl"> <level-one> <level-two> <level-three> hello,{{name}} </level-…
这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那么link属性的定义会被忽略.原因继续看讲解: 1.compile的返回值:compile函数返回值有两种可能 (1).返回pre-link函数和post-link函数: 一种是返回一个对象,对象具有两个方法,第一个方法是pre-link函数,第二个方法是post-link函数. compile:f…
本篇接着上一篇来讲解当指令中带有template(templateUrl)时,compile和link的执行顺序: 把上一个例子的代码再进行一些修改: 1.将level-two指令改成具有templateUrl的指令,利用transclude,把level-three指令给嵌套到模板里.(注意,level-two必须是一个拥有transclude属性的指令,否则它的子元素里的指令就被替换了,也就无所谓执行顺序,失去讨论意义) html: <!DOCTYPE html> <html ng-…