首页 > 代码库 > Vue.js初识
Vue.js初识
VueJS
Vue.js是一套构建用户界面的渐进式框架。 与其他重量级框架不同的是，vue采用自底向上增量开发的设计。
vue核心库只关注视图层，易与其它库或已有项目整合。
vue完全有能力驱动采用 单文件组件 和 Vue生态系统支持的库 开发和复杂单页应用。
vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
引入vue.js
<script src="https://unpkg.com/vue/dist/vue.js"></script>
声明式渲染：
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: ‘#app‘,
data: {
message: ‘Hello Vue!‘
}
})
绑定Dom元素属性：
<div id="app-2">
<span v-bind:title="message"> //该指令简单含义为：将这个元素节点的title属性和vue实例的message属性绑定到一起
Hover your mouse over me for a few seconds to see my dynamically bound title!
</span>
</div>
//打开控制台输入app2.message即可显示出data中message的值
//控制台中输入app2.message=‘one two three‘即可将meassage原有的值更改为当前的one two three
var app2 = new Vue({
el: ‘#app-2‘,
data: {
message: ‘You loaded this page on ‘ + new Date()
}
})
v-bind属性为指令。指令带有前缀v-,表示是vue.js提供的特殊属性。它们会在渲染过DOM上应用特殊的响应式行为。
条件与循环：
控制一个元素的显示：通过v-if判断为true或false true显示 false不显示 控制台中可修改app3.seen=true/false
demo:
<div id="app-3">
<p v-if="seen">Now you see me</p>
</div>
var app3 = new Vue({
el: ‘#app-3‘,
data: {
seen: true
}
})
该例子演示我们不仅可以绑定DOM文本到数据，也可以绑定Dom结构到数据。而且，vue.js也提供了一个强大的过渡效果系统，可以在vue插入/ 删除元素时自动应用过渡效果。
v-for指令可以绑定数据到数组来渲染一个列表：
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: ‘#app-4‘,
data: {
todos: [
{ text: ‘Learn JavaScript‘ },
{ text: ‘Learn Vue‘ },
{ text: ‘Build something awesome‘ }
]
}
})
在控制台里，输入 app4.todos.push({ text: ‘New item‘ })。会发现列表中多了一栏新内容。
处理用户输出：
方便用户和应用进行互动，
使用v-on指令绑定一个监听事件用于调用我们Vue实例中定义的方法 demo:v-on:click=‘方法名‘
demo:
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
var app5 = new Vue({
el: ‘#app-5‘,
data: {
message: ‘Hello Vue.js!‘
},
methods: {
reverseMessage: function () {
this.message = this.message.split(‘‘).reverse().join(‘‘)
//message内容分割逆序排序再转化为字符串
}
sssss }
})
再revreseMessage方法中，我们在没有接触Don的情况下更新了应用的状态，所有的Dom都由vue来处理，写的代码只需要关注基本逻辑
v-model指令：在表单输入和应用状态中做双向数据绑定变得非常轻巧。
demo:
<div id=‘app-6‘>
<p>{{message}}</p>
<input type=‘text‘ v-model=‘message‘>
</div>
var app6 = new Vue({
el:"#app-6",
data:{
message:"Hello Vue!"
}
})
用组件构建（应用）：
组件系统是vue.js另一个重要概念，因为它提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点，几乎任意类型的应用的界面都可以抽象为一个组件树：
在vue理，一个组件实质上是一个拥有预定义选项的一个vue实例：
将数据从父作用域传到子作用域，接受prop字段。
通过v-bind指令将todo传到每一个重复的组件中。
上述例子将应用分割成了两个更小的单元，子元素props接口实现了与父元素很好的解耦。
我们现在可以在不影响到父应用的基础上，进一步为我们的todo组件改进更多复杂的模板和逻辑。
在一个大型应用中，为了使得开发过程可控，有必要将应用整体分割成一个个的组件。（后面会详述组件），下面是一个（假想）的例子，看看使用了组件的应用模板是什么样的：
可以注意到Vue.js的组件非常类似于自定义元素----它是Web组件规范的一部分。实际上vue.js的组件语法参考了该规范。
Vue.js初识