美文网首页
day1 vue起步

day1 vue起步

作者: 十佳少年 | 来源:发表于2019-03-06 21:13 被阅读0次

 Vue.js起步

在官网中介绍到,使用 Vue.js有两种方式:一种是通过引入CDN后直接使用或者下载后使用,另一种就是使用命令行工具CLI搭建脚手架去编写对应的内容。目前我们是最基础的教程,所以先介绍最简单的方法——引入CDN方式,后期我们再具体介绍脚手架方式。

引入CDN,只需要在创建的html文件中引入下图中的script代码,这样就成功地将Vue.js引入到我们的项目中并可以使用了。

第一个起步页面

<!DOCTYPE html>Vue.js快速起步<!-- 通过CDN引入Vue --><!-- vue-app根容器 --><!-- 渲染显示HTML代码 -->

{{message}}

// 实例化Vue对象varapp =newVue({                el:'#app',                data: {                    message:'Hello Vue!'}            })

el代表element,指需要获取的元素,一定是html中的根容器元素。

data用于数据的存储,可以设置对应的数据,data的值也是一个对象,类型可以是字符串、number、对象、数组。

花括号在这里是模板语法。如果data类型是字符串,花括号可以直接获取到相关数据的值,而且这个花括号是不会写入DOM结构的。因为Vue是将拥有的内容放在虚拟DOM中,通过DOM操作再把需要的值插入到真实DOM中。

相关文章

  • day1 vue起步

    Vue.js起步 在官网中介绍到,使用 Vue.js有两种方式:一种是通过引入CDN后直接使用或者下载后使用,另一...

  • vue-cli 起步配置步骤

    Vue-Cli 是 vue 专用起步工具,用 Vue-Cli 起步能够:① 项目直接安装了Vue、Vue-Rout...

  • Vue 2.0 起步(3) 数据流vuex和LocalStora

    参考: Vue 2.0 起步(2) 组件及vue-router实例 - 微信公众号RSS Vue 2.0 起步(1...

  • Vue 基础

    Vue 起步 Vue V-for循环 (一) Vue V-for 循环(二) Vue v-for表格

  • Vue起步

    1. hello world 项目 打开chrome devtools 感受双向绑定

  • VUE 起步

    单页面 SPA 网页应用的关键在于路由, 过去一个个按钮都会跳转到一个个独立的页面, 由服务器端渲染, 填充相应的...

  • vue起步

    vue官方文档:cn.vuejs.org/v2/guide 兼容性 Vue不支持IE8及以下版本,因为Vue使用了...

  • Vue起步

    1 Hello world 2 TodoList 3 TodoList 改进

  • vue起步

    今天是我学习vue框架的第一个月,我知道什么是spa,什么事单页应用。 什么是大前端!~

  • vue起步

    vue是什么? Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级...

网友评论

      本文标题:day1 vue起步

      本文链接:https://www.haomeiwen.com/subject/imhfpqtx.html