直接用 <script> 引入
CDN
NPM
# 最新稳定版
$ npm install vue
命令行工具 (CLI)
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev
开发版本
git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',data: {
message: 'Hello Vue!'
}
})
声明式渲染
>
span v-bind:title="message"
鼠标悬停几秒钟查看此处动态绑定的提示信息！
span>
>
Date().toLocaleString()
}
})
条件与循环
p v-if="seen">现在你看到我了ptrue
}
})
ol>
li v-for="todo in todos"
{{ todo.text }}
li },{ text: '学习 Vue' }
]
}
})
处理用户输入
>{{ message }}input v-model
}
})
组件化应用构建
定义名为 todo-item 的新组件
Vue.component('todo-item'
})
<!-- 创建一个 todo-item 组件的实例 -->
todo-item></>
Vue.component('todo-item' todo-item 组件现在接受一个
"prop"，类似于一个自定义特性。
这个 prop 名为 todo。
props: ['todo'],template: '<li>{{ todo.text }}</li>'
})
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，稍后再
作详细解释。
-->
todo-item
="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
Vue.component('todo-item'
})
1,text: '奶酪' }
]
}
})
app-navapp-viewapp-sidebarapp-content>
组件与自定义元素的关系
- Web 组件规范仍然处于草案阶段，并且未被所有浏览器原生实现。相比之下，Vue 组件不需要任何 polyfill，并且在所有支持的浏览器 (IE9 及更高版本) 之下表现一致。必要时，Vue 组件也可以包装于原生自定义元素之内。
- Vue 组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。
数据与方法
我们的数据对象
var data = { a: 1 }
该对象被加入到一个 Vue 实例中
var vm = Vue({
data: data
})
它们引用相同的对象！
vm.a === data.a => true
设置属性也会影响到原始数据
vm.a = 2
data.a => 2
……反之亦然
data.a = 3
vm.a => 3
data: {
newTodoText: ''falsenull
}
var obj = {
foo: 'bar'
}
Object.freeze(obj)
return {
obj
}
}
})
>{{ obj.foo }} 这里的 `obj.foo` 不会更新！ button @click="obj.foo = 'baz'">Change itbutton>
}
Vue({
el: '#example' => true
vm.$el === document.getElementById('example') $watch 是一个实例方法
vm.$watch('a',function (newValue,oldValue) {
这个回调将在 `vm.a` 改变后调用
})
实例生命周期钩子
Vue({
data: {
a: 1
},created: () {
`this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
=> "a is: 1"
生命周期图示
服务热线 19970861797
