1. 简单的方式
创建好一个 html 文件,通过 script 的方式引入,如下:
2. 其他的方式
参考官网给出的选项:
https://cn.vuejs.org/guide/installation.html
vue.js 的核心是采用简洁的模板语法来声明式的将数据渲染进 DOM!
例 1:
- <div id="app">
- {{ message }}
- </div>
- 12
- var app = new vue({
- 3 el: "#app",
- 4 data: {
- 5 message: "hello vue"6
- }
- 7
- }) 8
这已经生成了一个 vue 应用,现在数据和 DOM 已经绑定在一起,只要修改 app.message,相应的也会更新 DOM!
例 2:
- <div id="app_2">
- <span v-bind:title="message">
- Hover your mouse over me for a few seconds to see my dynamically bound
- title!
- </span>
- </div>
- 1 2
- var app_2 = new Vue({
- 3 el: '#app_2',
- 4 data: {
- 5 message: 'You loaded this page on ' + new Date() 6
- }
- 7
- }) 8
例子 2 涉及到了 Vue 的特殊属性 v-bind 指令,也会在相应的 DOM 元素上渲染!
Vue 不仅可以绑定 DOM 文本到数据,也可以绑定 DOM 结构到数据!
1. 条件
我们可以使用其中的 v-if 指令达到条件设置,而在实际应用中控制切换一个元素的显示也很简单。
例 3:
- 1 < div id = "app_3" > 2 < p v -
- if = "flags" > Now you see me < /p>
- 3 </div >
- 1 2
- var app_3 = new Vue({
- 3 el: '#app_3',
- 4 data: {
- 5 flags: true 6
- }
- 7
- }) 8
同样的可以修改 data 属性来达到响应。
2. 循环
每个指令都有特殊的功能,v-for 指令可以绑定数组的数据来渲染一个列表!
例 4:
- 1 < div id = "app_3_2" > 2 < ul > 3 < li v -
- for = "todo in todos" > 4 {
- {
- todo.text
- }
- }
- 5 < /li>
- 6 </ul > 7 < /div>/
- 1
- var app_3_2 = new Vue({
- 2 el: '#app_3_2',
- 3 data: {
- 4 todos: [5 {
- text: 'Learn JavaScript'
- },
- 6 {
- text: 'Learn Vue'
- },
- 7 {
- text: 'Learn Other '
- }
- 8] 9
- }
- 10
- })
打开控制台,输入 app_3_2
,你会发现列表中添加了一个新项。
- .todos.push({ text: '新项目' })
Vue 提供了一个
指令,它能轻松实现表单输入和应用状态之间的双向绑定。
- v-model
例 5:
- 1 < div id = "app5" > 2 < input type = "text"v - model = "msg2" / >3 < p > {
- {
- msg2
- }
- } < /p>
- 4 </div >
- 1
- var app5 = new Vue({
- 2 el: '#app5',
- 3 data: {
- 4msg2: '# hello '5
- }
- 6
- })
为了让用户和你的应用进行互动,我们可以用
指令绑定一个事件监听器,通过它调用我们 Vue 实例中定义的方法!
- v-on
例 6:
- 1 < div id = "app6" > 2 < p > {
- {
- message
- }
- } < /p>
- 3 <button v-on:click="reverseMessage">Reverse Message</button > 4 < /div>/
- 1
- var app6 = new Vue({
- 2 el: '#app6',
- 3 data: {
- 4 message: 'Hello Vue.js!'5
- },
- 6 methods: {
- 7 reverseMessage: function(e) {
- 8 this.message = this.message.split('').reverse().join('');
- 9
- }
- 10
- }
- 11
- })
注意:在 methods 方法中,只更新了状态,没有触动到 DOM!
一定要先注册完组件,再来实例化!
一定要确保在初始化根实例之前注册了组件!
否则未注册就使用会报错的!
组件比较强大,可以扩展,封装可重用代码,就是比较腻害 (*@ο@*) 哇~一定要好好的熟悉熟悉它!
例 7:
- 1 < div id = "app_7" > 2 < ol > 3 < todo - item v -
- for = "list in itemsList"v - bind: todo = "list" > </todo-item>
- 4 </ol > 5 < /div>/
- 1 Vue.component('todo-item', {
- 2 props: ['todo'],
- 3 template: '
- {{todo.text}}
- '4
- });
- 5
- var app_7 = new Vue({
- 6 el: '#app_7',
- 7 data: {
- 8 itemsList: [9 {
- text: 'Vegetables'
- },
- 10 {
- text: 'Cheese'
- },
- 11 {
- text: 'Whatever else humans are supposed to eat'
- }
- 12] 13
- }
- 14
- })
组件是很重要的一部分,当你熟悉完以上的内容后要好好研究组件系统,其中涉及到许多内容需要更详细的掌握。
在实际项目中使用时,多个页面有相同的 part,组件复用简直厉害的不要不要~ O(∩_∩)O~~
---------------------------------------------------------------
vue 的基本功能介绍就到这里了,谢谢思密达 O(∩_∩)O~~
多多指教 n(*≧▽≦*)n
来源: http://www.cnblogs.com/anniey/p/7147029.html