安装
兼容性
Vue.js 不支持 IE8 及其以下版本。Vue.js 支持所有兼容 ECMAScript 5 的浏览器。
审查和调试工具
Vue Devtools
npm
在用 Vue.js 构建大型应用时推荐使用 NPM 安装，NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。
# 最新稳定版
$ npm install vue
命令行工具
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：
# 全局安装 vue-cli
$ npm install -g vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖
$ cd my-project
$ npm install
$ npm run dev
介绍
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM：
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
app.message = 'hello world';
绑定 DOM 元素属性：
<div id="app2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
var app2 = new Vue({
el:'#app2',
data:{
message:'页面加载于 '+new Date().toLocaleString()
}
});
app2.message='提示信息'
条件与循环
<div id="app1" v-cloak>
<p v-if="seen">现在你看到我了</p>
</div>
var app1 = new Vue({
el:'#app1',
data:{
seen:true
}
});
app1.seen = false
<div id="app2" v-cloak>
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
var app2 = new Vue({
el:'#app2',
data:{
todos:[
{text:'html5'},
{text:'css3'},
{text:'javascript'}
]
}
});
app2.todos.push({text:'jquery'})
app2.todos.push({text:'bootstrap'})
处理用户输入
<div id="app1" v-cloak>
<p> {{message}} </p>
<button v-on:click="reverseMsg" type="button">逆转消息</button>
</div>
var app1 = new Vue({
el:'#app1',
data:{
message:'Hello Vue.js!'
},
methods:{
reverseMsg: function(){
this.message = this.message.split('').reverse().join('');
}
}
});
<div id="app2">
<p>{{message}}</p>
<input v-model="message">
</div>
var app2 = new Vue({
el:'#app2',
data:{
message:'Hello Vue.js!'
}
});
组件化应用构建
<div id="app1" v-cloak>
<ol>
<!-- 创建一个 todo-item 组件的实例 -->
<todo-item v-for="item in list" v-bind:todo="item" v-bind:key="item.id"></todo-item>
</ol>
</div>
// 定义名为 todo-item 的新组件
Vue.component('todo-item',{
// todo-item 组件现在接受一个 "prop"，类似于一个自定义属性 这个属性名为 todo。
props:['todo'],
template:'<li>{{todo.text}}</li>'
});
var app1 = new Vue({
el:'#app1',
data:{
list:[
{id:0,text:'html'},
{id:1,text:'css'},
{id:2,text:'javascript'},
]
}
});
