html+css（6）

Vue学习

---

• 数据要写在data:{}中
• v-model="":双向绑定
  • .lazy:延迟
  • .trim:去除两端空格
  • .number:自动识别为数字
  • 用于input、textarea、select
• v-show/if="":有输入才显示
• v-for="":可以通过console直接push数据
• v-bind：绑定href、src、class(v-bind可省略）
  v-model和v-bind区别
• v-on：绑定事件
  • 方法定义在Vue的methods中
  • v-on可：简略写出@
• 控制流指令：v-if=“role == ‘admin’”
• 计算属性:computed:{ss:function(){},
• 组件：定义了组件之后一定要new Vue({el:’#app’})
• 全局及局部组件

new Vue({
el:'#app',
components:{
    'alert':{
    template:'<button @click="onClick">text</button>',
    methods:{
    onClick:function(){
    alert('yo')
    }
}}}})

• 创建组件
  • data里面是function
  • 函数中要用的变量应该在return中就声明，并且用的时候要加上this.
• 组件通信
  • 父子通信：props:[‘attr’]
  • 子父通信：this.$emit(‘函数名’,{参数})
  • 任意组件通信：一个例子
    • template里面的东西必须包含在一个div内
    • var event=new Vue（）作为两者之间的桥梁
    • event.$on( event, callback )
      监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
    • event.$emit( event, […args] )
      触发当前实例上的事件。附加参数都会传给监听器回调。
    • mounted:function(){}:在该组件初始化完成的一瞬间就开始执行function内
    • 在mounted内先保存this：var me=this
• 过滤器filter:官方说明
  • Vue.filter(‘filter_name’,function(val,xx){return}
  • {{val|filter_name(‘传入xx的参数’)}}
  • filter_name后面可带多个参数
• 自定义指令directive：
  • Vue.directive(‘dir_name’,function(el,binding){}) el、binding含义
  • 当position定位fixed之后只能通过top/left等定位position的四个状态
  • @click=“”中不仅可以绑定函数，还可以直接是表达式
  • 修饰符和传参：
    • .true：通过binding.warning获取，===‘true’
    • .bottom.left:通过binding.modifiers获取然后迭代

var position=binding.modifiers;
for(var key in position)
{
    if(position[key]{
        el.**style[key]**='10px';
    }
}

• 混合mixins:封装不同组件里面的相同

var base={methods:{},data：function{return{}},}
mixins[base],

• 插槽slots
  
  

Vue Router

• route & routes & router
• router-link &router-view（隐藏和渲染）这两个是成对出现的！！！
• 命名路由：
  • $route.params.name
  • $route.query.age
• 子路由：children:[{path:‘more’,component:{template:``}],在父路由的template中加上<router-link to=“more” append>和router-view
• 手动访问路由：this.router.push({name:‘routename’,(params:{name:’’}) 注意：params只能用name来引入路由，所以此处换成path:’/'错误！
• 命名视图：有多个router-view时
  • 给router-view加上name属性标识

,components（pl.）{
    sidebar:{
        component:{
            template:``
        }
    },
}

• 导航钩子：（applied in 权限管理）

  • router.beforeEach(function(to,from,next){})
  • to.path=’’
  • next(’’)导航到某处，不填则无影响
  • router.afterEach(function(to,from){})

• 路由匹配：登陆实例

  • 元数据meta：{xxx：true}meta的用法
  • to.matched:to路径的所有匹配组成的数组
  • to.matched.some(function(item){return item.meta.xxx?
  • 注意在此处不要给每个都加相同的meta，ortherwise陷入无限循环！！