vue 学前班002

创建一个Vue实例

最近事多,更新稍慢了点,距离第二节推送快一周了。

我们之前说过,Vue是数据驱动视图的,只要model(模型层)的数据改变了,Vue就会帮我们改变视图上显示的内容,不用我们自己去动手写代码更新。那么,它是怎么做到的,我们的代码要怎么写才能做到这一点。

答案是:Vue实例。

先确保你的项目安装好Vue.js, 官网可以看到

安装好之后,我们来看看怎么创建和使用Vue实例,我们把它分成 4 步走。

第1步  创建语法

创建一个Vue实例的语法很简单,如下:

  <script>
      let vm = new Vue({});
   </script>

通过关键语句 new Vue( )我们就可以创建一个Vue实例:vm了。我们注意到了我们给Vue( )传了一个参数选项,是一个空对象,我们接着往下看。

第2步  设置数据

没错,我们就是利用上面的对象参数,来创建这个Vue实例wm的,比如,设置vm里面的数据。

  let vm = new Vue({
     //实例vm的数据
   data:{
          name: "张三",
          age :  21
     }
  });

写法也很简单,参数对象不再是一个空对象,它包含一个属性:data,而data的值也是一个对象,这个对象就是我们给实例vm设置的数据了。比如:name为张三,age为21等等。

第3步  挂载元素

创建了一个实例vm,设置了vm的数据后,我们怎么把数据展示在视图上呢这就要通过我们的挂载元素了。我们看看怎么用:

视图view部分:

  <div id="app"></div>

 

视图(html部分)上我们有一个id为”app”的div元素。

  let vm = new Vue({
    //挂载元素
  el:‘#app‘,
    //实例vm的数据
  data:{
        name: "张三",
        age :  21
    }
  });

 

我们看到参数中我们不但有属性“data”,还多了个属性:“el”,el参数提供一个在页面上已经存在的DOM元素,作为我们实例vm的挂载目标。表示我们的实例vm和id为“app”的DOM节点就关联起来了。

第4步  渲染

实例vm创建好了,数据data有了,DOM节点也关联起来了,最后一步,就是把vm的数据绑定到指定的视图上了,也就是数据渲染。

  <div id="app">
    我是{{ name }},
  今年{{ age }}岁
  </div>

 

对,就是你看到的这么简单,我们只需要用一个双大括号:{{  }} 即可,你可以留意到,{{ name }}  和 {{ age }} 就是我们给实例vm设置的数据name和age,我们用{{  }}可以直接读取到它们的值。

我们访问页面,就会看到vm的数据data就会被成功地渲染出来:

( 数据渲染成功 )

就这样,我们就成功地创建了一个vue实例。

5 本节小结

创建并使用一个Vue实例并不难,仅需4步走:

时间: 2024-10-07 04:10:18

vue 学前班002的相关文章

vue 学前班003(生命周期)

ue把整个生命周期划分为创建.挂载.更新.销毁等阶段,每个阶段都会给一些"钩子"让我们来做一些我们想实现的动作.学习实例的生命周期,能帮助我们理解vue实例的运作机制,更好地合理利用各个钩子来完成我们的业务代码. 我们分别来看看这几个阶段: 1. beforeCreate 此阶段为实例初始化之后,此时的数据观察和事件配置都没好准备好. 我们试着console一下实例的数据data和挂载元素el,代码如下: <div id="app">{{name}}&l

vue项目实战爬坑小记002

1.如何使用vuex来保存数据(需要传参的情况下) 实例说明:登录->缓存用户信息->跳转到首页->从state获取用户信息显示在页面上 step1: 新建store.js作为初始化vuex的主文件,可在里面创建state对象,缓存数据字段,初始化vuex, 目录结构如下: store.js代码如下: 1 import Vue from 'vue'; 2 import Vuex from 'vuex'; 3 import * as actions from './actions'; 4

关于Vue的路由、脚手架笔记

在页面引入vue-router.js文件,开始配置路由 <div id="box"> <ul><li> <a v-link="{path:'/home'}">主页</a> </li> //点击跳转路由 <li> <a v-link="{path:'/news'}">新闻</a></li> </ul> <div&

vue遍历时添加个数过滤条件

1.效果 本身有5个地址,显示3个 2.address.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta charset="utf-8"> <!-- Always force latest IE rendering engine or request Chrome Frame --&g

一步步带你做vue后台管理框架(三)——登录功能

系列教程<一步步带你做vue后台管理框架>第三课 github地址:vue-framework-wz 线上体验地址:立即体验 <一步步带你做vue后台管理框架>第一课:介绍框架 <一步步带你做vue后台管理框架>第二课:上手使用 认证又称"验证"."鉴权",是指通过一定的手段,完成对用户身份的确认.身份验证的方法有很多,基本上可分为:基于共享密钥的身份验证.基于生物学特征的身份验证和基于公开密钥加密算法的身份验证. 登录鉴权功能是

vue组件大集合 component

vue组件分为全局组件.局部组件和父子组件,其中局部组件只能在el定义的范围内使用, 全局组件可以在随意地方使用,父子组件之间的传值问题等. Vue.extend 创建一个组件构造器 template:''  组件要显示的内容 component('',);  注册组件,接收两个参数,第一个参数用来使用的标签,第二个参数标识要显示内容的构建器 详情请看vue的API: http://v1-cn.vuejs.org/guide/components.html 一.简单的组件 1 <!DOCTYPE

vue.js之路由

Vue.js本身只提供数据与视图绑定及组件化等功能,如果想用它来开发一个完整的SPA(单页面应用),我们就还需要使用一些Vue.js的插件.今天我学习一种叫做Vue-router的插件,用来提供路由管理这个功能. 一.安装vue-router插件 1.安装bower:和npm类似的 bower-> (前端)包管理器 npm install bower -g 验证: bower --version bower用法: bower install <包名> 安装包 bower uninstal

Vue在MVC中的进行前后端的交互

Vue在MVC中的进行前后端的交互 Preface: 由于最近在研究前端相关的技术,作为前端非常优秀的框架Vue,个人在学习的过程中遇到一些问题,网上相关资料有限,所以在这这里总结一下个人使用Vue的一点经验,以便后来者借鉴! 官方文档:Vue.js 使用Vue在ASP.NET MVC中进行前后端交互在阅读下面的文章之前你需要先了解一下Vue官方推荐的前后端交互的插件: 1.resource(官方在2.0版本之后取消了对此插件的维护) 2.axios 注:这里使用的都是异步的插件,因为这样才会在

【前端vue开发架构】vue开发单页项目架构总结

为营销活动设计的前端架构 主要的技术栈为 Vuejs,Webpack,请自行阅读如下技术或者框架的文档: 一.基础说明: node (https://nodejs.org/en/) npm (https://www.npmjs.com) webpack (https://github.com/webpack/webpack) vuejs (https://vuejs.org) babel (https://babeljs.io) 其他的比如sass等CSS预编译器,都可以先不考虑. 下面对以上涉