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.后续添加

原文地址:https://www.cnblogs.com/floraCnblogs/p/learn-vue.html