现在的前端，越来越多的公司开始使用VUE，有的说是兼容性好，有的说是很小巧。我觉得可能也是前端不满足现状，开发了新的组件来优化前端的工作。
安装vue-cli 需要安装node.js 然后安装npm 再安装vue
npm install npm -g // 安装npm
npm install vue // 安装vue
npm install --global vue-cli // 安装vue-cli
vue-cli 相当于自动构建好了webpack,并对ES6转换成ES5的强制模式。 对于学习vue ,还要学习 vue-router （路由） 相当于控制页面的结构和页面的连接。
v-if 指令
现在你看到我了
现在你看不b到我了
<script> new Vue({ el: '#app', data: { seen: true, ok: false } })</script>data里面的json ok为false 表示当前的if判断不成立。vue 会隐藏当前区域的代码。 ps:这里不是display:none. 是当前页面上不会显示该区域。
v-for 指令
- { { site.name }}
这里的for 循环和之前学习过的for in 很类似 这里的 site 代表就是JSON 里面的每一个。
v-on 指令
当我们点击的时候，会在控制台打印出来 hi .在绑定事件的时候有种简写： @ 可以代替 v-on
v-class 样式绑定
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Vue</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script><style>.active { width: 100px; height: 100px; background: green;}.text-danger { background: red;}</style></head><body><div id="app"> <div v-bind:class="classObject"></div></div><script>
new Vue({ el: '#app', data: { classObject: { active: true, 'text-danger': true } }})</script></body></html>相当于我们给当前的div绑定了一个样式，这个样式根据js 里面的 classObject 里面的值为 true 或者false 来添加相关的样式。