声明

在您阅读这篇文章之前，笔者假设您熟悉html、css和javascript知识。

认识Vue

MVVM

MVVM是目前流行的前端开发模式。MVVM是Model-View-ViewModel的缩写，第一个字母M表示表示模型，第二个字母V表示视图，最后两个字母VM表示视图模型，这三部分的具体含义如下：

模型负责封装数据

视图表示UI（用户交互界面）

视图模型负责模型和视图之间的转换和适配

MVVM的核心思想模型驱动视图，也就是说数据改变界面即改变，开发者需要界面发生变化只需改变数据即可达到目的，而无需直接进行dom操作。目前流行的基于MVVM模式javascript框架主要有angularjs、react和Vue。

什么是Vue

Vue是一个以MVVM模式为思想基础的数据驱动式Javascript框架，Vue实际上主要提供了MVVM模式中VM部分，即实现通过数据渲染界面和界面对数据的反馈。下面通过例子认识Vue。

初步使用Vue

获得Vue

，下载文件名改为vue.js

建立项目

项目文件结构如下图：

页面demo_01.html代码如下：

            
           Vue实例一

Vue对象创建以及页面标签与Vue对象的关联

Vue对象负责渲染与之关联的页面标签，因此基于vue的开发，需要在页面写一个标签，一般为div（也可以是除body外的任何其它标签），并给该标签设置一个id，然后编写javascript代码创建Vue对象并通过id选择器与标签关联。

代码示例：

声明式渲染

Vue对象的构造参数中，使用data属性定义数据，在页面上使用模板语法将数据渲染为一个dom的文本节点。


     	
          {
    {info}}

let vm = new Vue({
     	el:'#app',    data:{
              info:'大家好！', //为Vue对象定义属性info    }});

Vue对象的构造参数中，在页面上使用v-bind指令将数据渲染为一个dom元素的属性值。


        
      
       鼠标悬浮停留，会看到一个提示信息
      
   
         
      
       鼠标悬浮停留，会看到一个提示信息

let vm = new Vue({
     	el:'#app',    data:{
              info:'大家好！', //为Vue对象定义属性info    }});

条件和循环

使用 v-if 和 v-else 指令可以实现依据条件渲染

let vm = new Vue({
         el:'#app',    data:{
              visibled:true     }});

使用v-for指令可以实现循环渲染


         
              
       
        学号：{
    {stu.stuId}}
       
        
       
        姓名：{
    {stu.stuName}}
       
        
       
        性别：{
    {stu.stuSex}}

let vm = new Vue({
        el:'#app',   data:{
            stuList:[           {
     stuId:'S00001',stuName:'小王',stuSex:'男'},           {
     stuId:'S00002',stuName:'小李',stuSex:'女'},           {
     stuId:'S00003',stuName:'小刘',stuSex:'女'},           {
     stuId:'S00004',stuName:'小张',stuSex:'男'},           {
     stuId:'S00005',stuName:'小赵',stuSex:'女'}                               ]   }});

转载地址：http://yihdi.baihongyu.com/

你可能感兴趣的文章

目录

声明