Vue.js基础入门
vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
</head>
<body>
<!-- 定义一个 View -->
<div id="box">
{{message}}
<input type="text" v-model="message"/>
</div>
<script src="js/vue.js"></script>
<script>
/* *
* 定义一个 Modal
* */
var mes = {
message: 'hello'
}
/* *
* 创建一个 Vue 实例或 "ViewModal"
* 它用于连接 View 和 Modal
* */
new Vue({
el: '#box', // 指向View
data: mes // 指向Modal
})
</script>
</body>
</html>
常用指令
指令（Directives）是带有 v- 前缀的特殊属性。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上
1、v-model
可用于一些表单元素，常见的input、checkbox、radio、select
2、v-for
vue.js 1.0以前的版本是v-repeat
<ul id="box">
<li v-for="item in arr" >{{item}}</li>
</ul>
var mes = {
arr: [1, 3, 4, 5]
}
new Vue({
el: '#box',
data: mes
})3、v-on
用于监听 DOM 事件
<button v-on:click="doSomething">doSomething</button>
// "v-on:" 可以简写为 "@"
<button @click="doSomething">doSomething</button>
new Vue({
el: '#box',
methods: {
doSomething: function () {
alert(1)
}
}
})4、v-if、v-else-if、v-else、v-show
为true时都会显示出来
v-if、v-else-if、v-else值为false时，不会生成对应的节点
v-show为false时，会生成对应的节点，并用display:none隐藏
<div id="box">
<div v-if="aa == 1">v-if true</div>
<div v-else>v-else</div>
<div v-show="aa == 1">v-show true</div>
<div v-else>v-else</div>
<div v-if="aa != 1">v-if false</div>
<div v-else>v-else</div>
<div v-show="aa != 1">v-show false</div>
<div v-else>v-else</div>
</div>aa = 1时，浏览器的解析效果解析
5、v-bind
用来响应地更新 HTML 属性
<div v-bind:title="message">{{message}}</div>
// "v-bind:" 可以简写为 ":"
<div :title="message">{{message}}</div>6、v-once
一次性地插值，当数据改变时，插值处的内容不会更新，v-once会影响到该节点上所有的数据绑定
过滤器
Vue.js 你自定义过滤器，被用作一些常见的文本格式化。过滤器应该被添加在 mustache 插值的尾部，由“管道符”指示：
{{ message | capitalize }}
new Vue({
// ...
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})过滤器可以串联：{{ message | filterA | filterB }}
过滤器是 JavaScript 函数，因此可以接受参数：{{ message | filterA('arg1', arg2) }}
这里，字符串 ‘arg1’ 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数
