• Vue学习笔记


    1. 简介

    Vue.js处在React和Angular 1之间,从其它框架借鉴了很多设计理念。
    Vue.js从React那里借鉴了组件化、prop、单向数据流、性能、虚拟渲染,并意识到状态管理的重要性。
    Vue.js从Angular那里借鉴了模板,并赋予了更好的语法,以及双向数据绑定(在单个组件里)。

    搭建一个vue项目的步骤:https://github.com/vuejs/vue-cli

    2. Vue 也支持双向绑定,不过默认为单向绑定,数据从父组件单向传给子组件。后台传值的数据有双向数据绑定, js自生成的没有, 需要sync

    <tip :show.sync="showTip">

    <div id="tip" v-show="show"></div>

    3. 指令

    指令 值类型 例子
    v-tap function 点击事件
    v-for array 循环
    v-if boolean 判断, false不占块
    v-show boolean 判断
    v-model string 双向绑定
    v-text string 文本
    v-style string or object

    1. <div v-style="color:red;"></div>

    2. <div v-style="{color: 'red',fontWeight: 'bold'}"></div>

    v-on:event function

    1. event is keyup/click/~~~~~~

    2. <a v-on:click="onClick">click</a>

    v-html html  
    v-attr    
    v-link  

    1. 字面量路径:<a v-link="'home'">Home</a>

    2. 效果同上:<a v-link="{ path: 'home' }">Home</a>

    3. 具名路径

    url的/后: <a v-link="{ name: 'user', params: { userId: 123 }}">User</a> this.$route.params.userId
    url的?后: <a v-link="{ name: 'user', query: { page: 1}}">User</a> this.$route.query

    4.后续添加

  • 相关阅读:
    PAT (Basic Level) Practise 1013 数素数
    PAT (Basic Level) Practise 1014 福尔摩斯的约会
    codeforces 814B.An express train to reveries 解题报告
    KMP算法
    rsync工具
    codeforces 777C.Alyona and Spreadsheet 解题报告
    codeforces 798C.Mike and gcd problem 解题报告
    nginx + tomcat多实例
    MongoDB副本集
    指针的艺术(转载)
  • 原文地址:https://www.cnblogs.com/floraCnblogs/p/learn-vue.html
Copyright © 2020-2023  润新知