Vue 入门之概念

Vue 简介

Vue 是一个前端的双向绑定类的框架,发音[读音 /vju?/, 类似于 [view]。新的 Vue 版本参考了 React 的部分设计,当然也有自己独特的地方,比如 Vue 的单文件组件开发方式都很有创新,另外 Vue 自身的一些绑定的语法、用法等都非常精炼,很容易上手,而且第三方的插件都非常丰富,社区非常活跃,最新的文档都有中文版本。而且 Vue 配合官方的和第三方的库可以实现单文件的组件化开发、SPA 等现代化前端开发。
详情请参考Vue 官网

Vue 的入门 demo

Vue 可以直接把它当做一个 js 库使用,所以它可以很容易的接入到你的项目或者单个页面中。甚至你可以只使用它的双向绑定功能。所以它很容易上手。

比如:我们有一个需求,一个网页上一个 Div 标签,我们有一个 json 对象数据,现在要把 json 对象上的数据放到 Div 上去。

接下来是步骤:

第一步: 创建一个文件夹并创建一个html文件 比如:index.html.
当如你可以选择你自己的编辑器,我就用VSCode。

第二步:引入Vue库
<script src="https://unpkg.com/vue/dist/vue.js"></script>
当然了你可以直接下载Vue的js文件,推荐你直接用上面的cdn即可。

第三步:创建一个Div,给它一个id,比如:app

第四步:创建Vue的对象,并把数据绑定到上面创建好的div上去。

最终的代码如下:

<!DOCTYPE html> <!--第一步:创建文件夹及html文件-->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入门之Helloworld</title>
  <!--第二步:引入Vue库-->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <!--第三步:创建一个Div-->
  <div id="app">
    <!--Vue的模板的绑定数据的方法, 类似于很多其他前端的模板,可以用两对花括号进行绑定Vue中的数据对象的属性 -->
    {{ message }}
  </div>

  <!--第四步:创建Vue的对象,并把数据绑定到上面创建好的div上去。-->
  <script>
    new Vue({         // 创建Vue对象。Vue的核心对象。
      el: ‘#app‘,               // el属性:把当前Vue对象挂载到 div标签上,#app是id选择器
      data: {                   // data: 是Vue对象中绑定的数据
        message: ‘Hello Vue!‘   // message 自定义的数据
      }
    });
  </script>
</body>
</html>

最终的结果就是:

Hello Vue!

Vue 的 Helloworld 总结

  • Vue 构造函数的:选项 el 属性,就是 element 缩写,当前 Vue 对象挂载到哪个标签上的语法,支持 CSS 选择器或者 dom 对象,一般用 id 选择器选择当前页面的标签。
  • Vue 的选项:data 属性是自定义数据。这里我们只是演示了一个 message 属性,vue 会把自定义的数据可以与 html 的模板数据进行绑定。
  • Vue 数据绑定的方式就是用 {{}},类似于 handlebars.
  • 上面这个 demo 就是演示了 Vue 的绑定数据的基本模型。注意点,标签先创建好了之后,再创建 Vue 对象,具体你应该懂吧。

原文地址:https://www.cnblogs.com/NightTiger/p/10399881.html

时间: 2024-10-09 16:35:15

Vue 入门之概念的相关文章

vue入门——基本概念

1. 挂载点,模板,实例的关系? 首先附上一个基本demo: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>vue 入门</title> 6 <script src="./vue.js"></script> 7 </head>

Vue入门之Vuex实战

引言 Vue组件化做的确实非常彻底,它独有的vue单文件组件也是做的非常有特色.组件化的同时带来的是:组件之间的数据共享和通信的难题. 尤其Vue组件设计的就是,父组件通过子组件的prop进行传递数据,而且数据传递是单向的.也就是说:父组件可以把数据传递给子组件,但是 反之则不同.如下图所示: 单向数据流动 单方向的数据流动带来了非常简洁和清晰的数据流,纯展示性或者独立性较强的模块的开发确实非常方便和省事. 但是复杂的页面逻辑,组件之间的数据共享处理就会需要通过事件总线的方式解决或者使用Vue的

Vue 入门指南 JS

Vue 入门指南 章节导航 英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式的ViewModel层,它连接视图和数据绑定模型通过两种方式.实际的DOM操作和输出格式被抽象的方式到指令(Directives)和过滤器(Filters) 在哲学领域内,尽量让MVVM数据绑定API尽可能简单.模块化和可组合性也是重要的设计考虑.vue不是一个全面的框架,它被设计成简单的和灵活的.

Vue入门篇

一  ES6语法 1  ECMAScript 1995年,网景工程师Brendan Eich 花了10天时间设计了JavaScript语言. 1996年,微软发布了JScript,其实是JavaScript的逆向工程实现. 1997年,为了统一各种不同script脚本语言,ECMA(欧洲计算机制造商协会)以JavaScript为基础,制定了ECMAscript标准规范.JavaScript和JScript都是ECMAScript的标准实现者,随后各大浏览器厂商纷纷实现了ECMAScript标准.

1.Vue入门基础

Vue学习 1.Vue简介 Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动. 中文网:https://vuejs.bootcss.com/ 2.如何使用Vue CDN链接 对于制作原型或学习,你可以这样使用最新版本: <sc

MongoDB入门必读(概念与实战并重)

MongoDB入门必读(概念与实战并重) 一.概述 MongoDB是一个基于分布式文件存储的数据库开源项目.由C++语言编写.旨在为WEB应用提供可护展的高性能数据存储解决方案. MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的.他支持的数据结构非常松散,是类似json的bjson格式,因此可以存储比较复杂的数据类型.Mongo最大的特点是他支持的查询语言非常强大,其语法有点类似于面向对象的查询语言,几乎可以实现类似关系数据库单表查询的绝

vue入门(二)----模板与计算属性

其实这部分内容我也是参考的官网:http://cn.vuejs.org/v2/guide/syntax.html,但是我还是想把自己不懂的知识记录一下,加深印象,也可以帮助自己以后查阅.所谓勤能补拙. 首先我们说一下模板,其实如果看过第一节vue入门----组件,我们会知道更好更科学的办法是通过创建组件的方式,这种方式允许我们任意进行组件的嵌套.而通过模板的方式的话,个人觉得效果并没有组件好.行,开始切入正题,现在我们首先通过一下几点来进行学习(其实是按照官网的顺序记录自己不懂的知识点). 1.

1、数据结构笔记之一入门基本概念

1.蛤蟆的数据结构笔记之一入门基本概念 最近一段时间一句名言一直徘徊在我的耳畔,并非警示名言,而是老子中的一句平常话,"合抱之木.生于毫末;九层之台.起于累土;千里之行.始于足下;千里之堤.毁于蚁穴".这句初中便能开口套用的熟语,这么多年后还是久久不能行于实践.怪世人太急于成功,还是怪自己过于浮夸? 不管是什么,让我们再一次的从脚下走起. 从哪里走起?汇编?C?操作系统?组成原理?离散数学?形式语言?数理逻辑?还是其他?对比分析良久,最后还是选定了数据结构.因为数据结构的内容不仅是一般

vue入门(三)----使用vue-cli搭建一个单页富应用

上面两节我们说了vue的一些概念,其实说的知识一点基础,这部分知识我觉得更希望大家到官网进行学习,因为在这里说的太多我觉得也只是对官网的照搬照抄而已.今天我们来学习一下vue-cli的一些基础知识,并且用vue-cli来搭建一个单页富应用.那么我们首先介绍一下什么是vue-cli? 首先要学习vue-cli,我觉得我们需要知道什么是cli吧!首先回到"原始"前端,什么是前端?无非就是html,css,js,虽然定义有些粗略.但是随着前端的不断发展,前端的内容越来越多,也越来越丰富.前端