现在的前端，越来越多的公司开始使用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 指令
<div id="app">
<p v-if="seen">现在你看到我了</p>
<template v-if="ok"> <h1>现在你看不b到我了</h1> </template>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true,
ok: false
}
})
</script>
data里面的json ok为false 表示当前的if判断不成立。vue 会隐藏当前区域的代码。 ps:这里不是display:none. 是当前页面上不会显示该区域。
v-for 指令
<div id="app">
<ol>
<li v-for="site in sites"> {{ site.name }} </li>
</ol>
</div>
<script>
new Vue({
el: '#app',
data: {
sites: [ { name: '张三' },
{ name: '李四' },
{ name: '王五' } ]
}
})
</script>
这里的for 循环和之前学习过的for in 很类似 这里的 site 代表就是JSON 里面的每一个。
v-on 指令
<div id="app">
<button v-on:click="say('hi')">Say hi</button>
</div>
<script>
new Vue({
el: '#app',
methods: {
say: function (message) {
console.log(message);
}
}
})
</script>
当我们点击的时候，会在控制台打印出来 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 {
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 来添加相关的样式。