[js高手之路] vue系列教程 - vue的基本用法与常见指

什么是vue?

本系列课程选用vue的版本为1.0.21

Vue.js是JavaScript MVVM(Model-View-ViewModel)库,十分简洁,Vue核心只关注视图层,相对AngularJS提供更加简洁、易于理解的API。Vue尽可能通过简单的API实现响应的数据绑定和组合的视图组件。

什么是vue?

vue是由尤雨溪开发的一款基于MVVM的框架,M->模型,V->视图, 也就是说模型数据改变了,视图也跟着改变, 视图内容改变,模型内容也跟着改变, 业界称之为双向绑定,或者说双向数据驱动,基于此特点,学习这个框架,跟jquery完全不同, 不要用DOM的思想来学习vue, 在vue里面几乎不需要用到DOM操作,一切都是基于数据驱动.

vue是由尤雨溪开发的一款基于MVVM的框架,M->模型,V->视图, 也就是说模型数据改变了,视图也跟着改变, 视图内容改变,模型内容也跟着改变, 业界称之为双向绑定,或者说双向数据驱动,基于此特点,学习这个框架,跟jquery完全不同, 不要用DOM的思想来学习vue, 在vue里面几乎不需要用到DOM操作,一切都是基于数据驱动.

如何使用vue?

如何使用vue?

现在vue已经发布了2版本,为什么学1版本,如果想要深入的学习vue,了解和掌握个版本的异同是很有必要的。要想使用vue,首先必须引入vue,在客户端(浏览器)可以通过script标签引入,如果是服务端,通过import引入

现在vue已经发布了2版本,为什么学1版本,如果想要深入的学习vue,了解和掌握个版本的异同是很有必要的。要想使用vue,首先必须引入vue,在客户端(浏览器)可以通过script标签引入,如果是服务端,通过import引入

一个基本的vue程序有哪些部分组成?

一个基本的vue程序有哪些部分组成?

就像初学者学习jquery一样,一个基本的jquery程序, 有 domReady, 选择器,this绑定,事件绑定,属性和样式修改组成的,而vue的基本结构如下:

就像初学者学习jquery一样,一个基本的jquery程序, 有 domReady, 选择器,this绑定,事件绑定,属性和样式修改组成的,而vue的基本结构如下:

window.onload = function () {
      var c = new Vue({
        el: '#box', //相当于选择器
        data: {
          content: 'ghostwu tell you how to learn vue',
          msg : 'vue中的数据1',
          msg2 : 'vue中的数据2'
        }
      });
}
window.onload = function () {
            var c = new Vue({
                el: '#box', //相当于选择器
                data: {
                    content: 'ghostwu tell you how to learn vue',
                    msg : 'vue中的数据1',
                    msg2 : 'vue中的数据2'
                }
            });
}

这段简单的代码,可以实现最基本的数据读取和显示功能. 

这段简单的代码,可以实现最基本的数据读取和显示功能.  

1,使用vue,先要实例化一个vue

1,使用vue,先要实例化一个vue

2,构造函数中,传入字面量对象, data后面也是一个字面量对象,里面的数据可以自定义,按照json的格式

2,构造函数中,传入字面量对象, data后面也是一个字面量对象,里面的数据可以自定义,按照json的格式

3,el: 表示要把data中的数据显示在 el 后面跟的元素下面, 比如上面的例子, 就是把data中, content, msg, msg2的数据显示在id 为 box的元素下面

3,el: 表示要把data中的数据显示在 el 后面跟的元素下面, 比如上面的例子, 就是把data中, content, msg, msg2的数据显示在id 为 box的元素下面

具体怎么读取呢?

具体怎么读取呢?

<div id="box">
  {{content}}
  <br>
  {{msg}}
  <br>
  {{msg2}}
</div>
1 <div id="box">
2     {{content}}
3     <br>
4     {{msg}}
5     <br>
6     {{msg2}}
7 </div>

{{data中定义的键}}, 如{{content}} 读取的就是vue实例 data里面的 content定义的值,所以{{content}}输出 ghostwu tell you how to learn vue, 同理{{msg}}输出vue中的数据1 ,

{{data中定义的键}}, 如{{content}} 读取的就是vue实例 data里面的 content定义的值,所以{{content}}输出 ghostwu tell you how to learn vue, 同理{{msg}}输出vue中的数据1 ,

{{msg2}}输出 vue中的数据2

{{msg2}}输出 vue中的数据2

如果我们需要让数据显示在不同的元素下面,可以定义多个vue实例

如果我们需要让数据显示在不同的元素下面,可以定义多个vue实例

window.onload = function () {
      var c = new Vue({
        el: '#box', //相当于选择器
        data: {
          content: 'ghostwu tell you how to learn vue',
          msg : 'vue中的数据1',
          msg2 : 'vue中的数据2'
        }
      });
      var c2 = new Vue({
        el: '#box2',
        data: {
          msg: 'this is a paragraphy'
        }
      });
      var c3 = new Vue({
        el: '#box3',
        data: {
          msg2: 'this is box3'
        }
      });
    }
<p id="box2">{{msg}}</p>
<div id="box">
  {{content}}
  <br>
  {{msg}}
  <br>
  {{msg2}}
</div>
 <div id="box3">{{msg2}}</div>
 1         window.onload = function () {
 2             var c = new Vue({
 3                 el: '#box', //相当于选择器
 4                 data: {
 5                     content: 'ghostwu tell you how to learn vue',
 6                     msg : 'vue中的数据1',
 7                     msg2 : 'vue中的数据2'
 8                 }
 9             });
10            var c2 = new Vue({
11                el: '#box2',
12                data: {
13                    msg: 'this is a paragraphy'
14                }
15            });
16            var c3 = new Vue({
17                el: '#box3',
18                data: {
19                    msg2: 'this is box3'
20                }
21            });
22         }

1 <p id="box2">{{msg}}</p>
2 <div id="box">
3     {{content}}
4     <br>
5     {{msg}}
6     <br>
7     {{msg2}}
8 </div>
9  <div id="box3">{{msg2}}</div> 

 指令:v-model  作用:实现数据的双向驱动

指令:v-model  作用:实现数据的双向驱动

window.onload = function () {
      var c = new Vue({
        el: "body",
        data: {
          msg: 'welcome to study vue!!!'
        }
      });
    }
<input type="text" v-model="msg" id="txt" />
  <input type="text" v-model="msg" id="txt2"/>
  <br/>
  {{msg}}
  <div class="box">
    {{msg}}
  </div>
  <div class="box">
    {{msg}}
  </div>
  <div class="box">
    {{msg}}
  </div>
  <div class="box">
    {{msg}}
  </div>
        window.onload = function () {
            var c = new Vue({
                el: "body",
                data: {
                    msg: 'welcome to study vue!!!'
                }
            });
        }

 1     <input type="text" v-model="msg" id="txt" />
 2     <input type="text" v-model="msg" id="txt2"/>
 3     <br/>
 4     {{msg}}
 5     <div class="box">
 6         {{msg}}
 7     </div>
 8     <div class="box">
 9         {{msg}}
10     </div>
11     <div class="box">
12         {{msg}}
13     </div>
14     <div class="box">
15         {{msg}}
16     </div>

上例,如果修改data中msg的值,那么输入框中v-model绑定的msg, 以及4个div中输出的msg的值 都会随着data中msg的值的变化而变化,这个就叫做M->V,模型M(data中的数据),

上例,如果修改data中msg的值,那么输入框中v-model绑定的msg, 以及4个div中输出的msg的值 都会随着data中msg的值的变化而变化,这个就叫做M->V,模型M(data中的数据),

视图V(html代码).  模型改变,视图V也跟着改变, 同样的上面两个input输入框中的值任何一个改变了,data中的msg也会改变,4个div中的msg也跟着改变,这个就叫做V->M,视图改变,模型数据也跟着改变.

视图V(html代码).  模型改变,视图V也跟着改变, 同样的上面两个input输入框中的值任何一个改变了,data中的msg也会改变,4个div中的msg也跟着改变,这个就叫做V->M,视图改变,模型数据也跟着改变.

data中可以定义哪些数据?

data中可以定义哪些数据?

常见的字符串,整形数字,数组,布尔,对象类型都可以

常见的字符串,整形数字,数组,布尔,对象类型都可以

本文由威尼斯人棋牌发布于计算机教程,转载请注明出处:[js高手之路] vue系列教程 - vue的基本用法与常见指