vue是一套构建用户界面的渐进式框架，其核心库只关注视图层，通过使用vue手脚架，它完全能够为复杂的单页应用程序提供驱动。为了便于初学者入门vue语法，介绍语法部分均通过引用vue.js文件的方式来引入vue，在实际项目开发中，建议尽量使用vue手脚架开发和npm来维护。
渐进式框架
那么，什么叫渐进式框架？渐进式框架可以理解为能支持任何其他前端框架及类库的一种框架。这就意味着vue框架没有任何结构上的主张，比如AngularJs前端框架对元素的控制必须用控制器controller。从另一个角度来说，vue可以兼容现在乃至未来任何的前端用户界面技术，这就是vue的强大之处。
约定
本系列文章demo均以当前vue最新版本2.4.2为准，所有知识点都来自于vue官网及博主个人实际使用经验的总结而来，目的是为了让更多的前端开发人员能更迅速的掌握使用vue框架，本篇主要简单介绍一下vue的基本用法和语法，我们来创建第一个vue应用：hello world。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="./js/libs/vue/2.4.2/vue.js"></script>
</head>
<body>
<!-- helloworld -->
<div id="app">
{{message}}
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello world"
}
});
</script>
</body>
</html>
上例中new Vue()表示创建一个实例，el表示该实例绑定的元素id，data表示数据内容，数据格式为对象类型。在元素标签中用两个大挂弧{{…}}表示的是数据输出（这种写法源于react的jsx表达式），上例中{{message}}将输出为文本hello world。
另外vue常用的几个指令有：v-bind绑定，v-if条件，v-for循环，v-on监听，v-model双向绑定，Vue.component()创建组件，这些指令在本篇中大家不必深究，在这里为了让大家对vue指令有一个基本的认知，demo如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="./js/libs/vue/2.4.2/vue.js"></script>
</head>
<body>
<!-- helloworld -->
<div id="app">
{{message}}
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello world"
}
});
</script>
<!-- v-指令 -->
<div id="app2">
<span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
</div>
<script>
var app2 = new Vue({
el: "#app2",
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
});
</script>
<!-- 条件 -->
<div id="app3">
<span v-if="seen">现在你看见我了,但两秒后我消失了</span>
</div>
<script>
var app3 = new Vue({
el: "#app3",
data: {
seen: true
}
});
setTimeout(function() {
app3.seen = false;
}, 2000);
</script>
<!-- 循环 -->
<div id="app4">
<ol>
<li v-for="item in items">{{item}}</li>
</ol>
</div>
<script>
var app4 = new Vue({
el: "#app4",
data: {
items: ["a", "b", "c"]
}
});
</script>
<!-- 监听 -->
<div id="app5">
<span>{{message}}</span>
<button v-on:click="resetMsg(helloworld);">改变文本</button>
</div>
<script>
var app5 = new Vue({
el: "#app5",
data: {
message: "！！！！！！"
},
methods: {
resetMsg: function(resp) {
this.message = resp;
}
}
});
</script>
<!-- v-model双向绑定 -->
<div id="app6">
<p>{{message}}</p>
<input type="text" v-model="message" />
</div>
<script>
var app6 = new Vue({
el: "#app6",
data: {
message: "helloworld"
}
});
</script>
<!-- 组件component -->
<div id="app7">
<ol>
<my-li v-for="item in items" v-bind:todo="item" v-bind:key="item.id"></my-li>
</ol>
</div>
<script>
Vue.component("my-li", {
props: ['todo'], // 获取绑定的属性值
template: "<li>{{todo.text}}</li>"
});
var app7 = new Vue({
el: "#app7",
data: {
items: [{
id: 0,
text: '蔬菜'
}, {
id: 1,
text: '奶酪'
},
{
id: 2,
text: '随便其他什么人吃的东西'
}
]
}
});
</script>
</body>
</html>
完整vue实例结构
var vue = new Vue({
el: "",
data: {},
methods: {},
filters: {},
computed: {},
components: {},
watch: {}
});
建议要熟悉vue语法及vue实例结构，因为这些将有助于你快速建立vue实例。
el
绑定指定ID的元素标签并挂载在该Dom节点
data
定义了作用域在该vue实例的变量
methods
执行的方法函数
filters
通过vue实例的filters属性创建过滤器，创建的过滤器是一个函数,在值运算中用竖杠 | 表示
computed
通过vue实例的computed属性创建计算器，创建的计算器是一个函数,计算器会依赖于绑定的data而更新，如本例num更新，addOne也会更新。与过滤器和methods功能类似，不同的是若计算器依赖的数值不变，则不会重新执行函数，性能较优。
components
组件
watch
监察数据的变化。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
