Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。
渐进式框架：通俗来讲就是 你可以只用我的一部分，而不是用了我这一点就必须用我的所有部分。
自底向上逐层应用：就是先编写出基础程序段，然后再逐步扩大规模、补充和升级某些功能。
介绍两个概念，vue是声明式渲染。
命令式：一步一步告诉程序如何去做，能否达成结果取决于开发者的设计。
声明式：只告诉程序想要什么结果，如何达成由程序保证，开发者不用关心
1、案例1——经典模板
//html
<div id="app">
{{ message }}
</div>
//js
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
el：是element的缩写，指要操作/绑定的元素
data：写需要操作改变的内容。
逻辑：el绑定id="app"进而绑定此div，将message：‘hello Vue’与{{message}}进行双向绑定。
2、案例2——v-bind( v-，表示 Vue 提供的特殊 attribute),意思是“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。也可以使用简写: 符号表示
即将title设置为message的日期信息，toLocaleString根据本地时间把 Date 对象转换为字符串。
//html
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟可查看此处动态绑定的提示信息！
</span>
</div>
//js
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
3、案例3——条件与循环（这个就不用解释了，如果需要的话，麻烦留言，我再修改）
//html
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
//js
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
//html
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
//js
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
4、用户输入
//html
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>
//js
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
v-on绑定事件监听器,可以方便用来做交互，也可一次绑定多个事件，如下。也可以使用简写@ 符号表示
<button v-on="{mouseenter:onenter,mouseleave:leave}">click me</button>
<button v-on:mouseenter='onenter' v-on:mouseleave='leave'>click me</button>
<button v-on:mouseenter='onenter' v-on:mouseleave='leave' v-on:click="myclick">click me</button>
<button v-on="{mouseenter:onenter,mouseleave:leave}" v-on:click="myclick">click me</button>
methods属性是定义方法的主要区域，在此属性中，可以定义各种自定义函数名的方法以及参数
//html
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
//js
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
v-model限制在<input>、<select>、<textarea>、components中使用，
举例：
v-model本质上是一个语法糖。如下代码<input v-model="message">本质上是<input :value="message" @input="message = $event.target.value">，其中@input是对<input>输入事件的一个监听:value="message"是将监听事件中的数据放入到input
5、组件
//js
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
template: '<li>这是个待办项</li>'
})
var app = new Vue(...)
//html
<ol>
<!-- 创建一个 todo-item 组件的实例 -->
<todo-item></todo-item>
</ol>
模板可直接使用
//js
Vue.component('todo-item', {
// todo-item 组件现在接受一个
// "prop"，类似于一个自定义 attribute。
// 这个 prop 名为 todo。
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
//html
<div id="app-7">
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，稍后再
作详细解释。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
//js
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
案例
//html
<div id="app-7">
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，稍后再
作详细解释。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
//js
Vue.component('todo-item', {
// todo-item 组件现在接受一个
// "prop"，类似于一个自定义 attribute。
// 这个 prop 名为 todo。
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
特此声明：文档中的代码示例基本来自于Vue官方文档，可协同进行学习。
网友评论