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