Vue入门教程 第一篇 (概念及初始化)

注:为了本教程的准确性,部分描述引用了官网及网络内容。

安装Vue

1、使用npm安装vue:

npm install vue

2、下载使用js文件:

https://vuejs.org/js/vue.min.js

Vue概念

Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。

Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

由于其响应式设计依赖于ES6中的一些特性,因此Vue 不支持 IE8 以及更低版本浏览器(ES5)。

初始化

每个 Vue 应用都需要通过实例化 Vue 来实现。

1 var vm = new Vue({
2   // 选项
3 })

范例:

 1 <div id="vue_det">
 2     <h1>name : {{name}}</h1>
 3     <h1>{{details()}}</h1>
 4 </div>
 5 <script type="text/javascript">
 6     var vm = new Vue({
 7         el: ‘#vue_det‘,
 8         data: {
 9             name: "Jimmy"
10         },
11         methods: {
12             details: function() {
13                 return  this.name + " welcome! ";
14             }
15         }
16     })
17 </script>

执行结果:

data 用于定义属性,实例中有三个属性分别为:site、url、alexa。

methods 用于定义的函数,可以通过 return 来返回函数值。

{{ }} 用于输出对象属性和函数返回值。

原文地址:https://www.cnblogs.com/JHelius/p/11684069.html

时间: 2024-10-07 12:13:27

Vue入门教程 第一篇 (概念及初始化)的相关文章

微信公众号开发入门教程第一篇

关键字:微信公众平台开发作者:方倍工作室 在这篇微信公众平台开发教程中,我们假定你已经有了PHP语言程序.MySQL数据库.计算机网络通讯.及HTTP/XML/CSS/JS等基础. 我们将使用微信公众账号方倍工作室作为讲解的例子,二维码见底部. 本系列教程将引导你完成如下任务: 创建新浪云计算平台应用 启用微信公众平台开发模式 体验常用接收消息及发送消息类型 了解数据收发原理及消息格式 第一章 申请服务器资源 创建新浪云计算应用 申请账号 我们使用SAE新浪云计算平台作为服务器资源,并且申请PH

Node.js入门教程 第一篇 (环境配置及概念原理)

Node.js 概念 Node.js本质上是使用Google的V8引擎制作出来的服务框架.V8本身是Google为了解决Chrome浏览器的性能问题而制作的前端引擎(开源).本身依托于浏览器引擎,这也是为什么Node.js使用的是前端的JavaScript语言编程. V8的诞生是Google为了解决JavaScript的性能问题,用了内联缓存和隐藏类技术实现的前端引擎.V8使用C++编写,也因此V8可以在C++项目中完美兼容使用. V8被Google使用在大多数产品中,如Chrome浏览器,安卓

Vue入门教程 第二篇 (数据绑定与响应式)

数据绑定 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统: 1 <div id="app"> 2 {{ message }} 3 </div> 1 var app = new Vue({ 2 el: '#app', 3 data: { 4 message: 'Hello Vue!' 5 } 6 }) 执行结果:Hello Vue! 除了上面的绑定方式,还有另外一种: 1 <div id="app"

CodeIgniter 入门教程第一篇:信息发布

一.MVC CodeIgniter 采用MVC架构即:控制层.模型层和视图层. 对应Application下面的文件夹   (图1): 所有新建文件以.php结尾 视图层 view 文件夹放入HTML模板 模型层 model 存放对数据库操作的代码 控制层 controllers 存放进行逻辑判断的代码,从模型层取得数据然后输入到视图层,发送给用户. 图1 功能: 1. 模板增加输入表单 2. 控制器增加接收表单数据的代码,并对用户输入进行简单校验. 3. 在表单上方输出标题和正文,以及发布时间

Java小白入门系列 第一篇 写在前面

2018年8月30日  22:00:17 郑州  多云 Sue Java小白入门系列 第一篇  写在前面 写在前面: 首先声明一下,本人也是正在学Java,并不是多么专业人士,只是最近受老师的启发,所以准备写个关于java新手入门系列的博客,包括搭建Java开发环境.Java入门知识,也会分享一些好用的软件及破解器之类的,一方面是巩固所学的知识,另一方面是给有兴趣的小白做练手.入门之用,本系列博客完全开放,所有资源不收任何费用,欢迎大家转发留言,入门之用,不喜勿喷,恶人绕道! Java是不是很难

Windsor入门教程---第一部分 获取Windsor

介绍 从开发环境的角度看,Windsor只是一个类库.不需要安装,也不需要额外的工具,你直需要获取Windsor的类库到你的电脑上就可以了. 获取 有几个方法可以获取到Windsor,可以使用包管理工具OpenWrap,也可以使用微软的NuGet,或者也可以手动下载Windsor.最简单的方法就是使用Nuget,我们接下来就是使用NoGet. 新建解方案 启动Visual Studio 新建项目---ASP.NET MVC 3 Web Application 选择Internet 和 Razor

Swing:LookAndFeel 教程第一篇——手把手教你写出自己的 LookAndFeel

本文是 LookAndFeel 系列教程的第一篇. 是我在对 Swing 学习摸索中的一些微薄经验. 我相信,细致看全然系列之后.你就能写出自己的 LookAndFeel. 你会发现 Swing 原来能够这样美. -------------------------------------------------------------------------------- 引言: 我第一次接触 Java 要追溯到非常多年前做毕业设计的时候. 那天我和同学来到了一个微型软件公司(三程序猿.一会计.

VMware虚拟机从安装到激活再到解决黑屏、卡、死机系列问题教程第一篇

第一篇:首先下面是VMware虚拟机的安装教程: 首先从官网上下载VMware,然后安装,具体安装步骤如下: 1.双击下载好的应用程序,后出现如下页面,会等待1~3分钟: 2.等待完毕后会出现这个页面,点击下一步: 3.出现以下页面就直接点接受和下一步: 4.接下来这个页面是自定义安装页面,点击更改安装到你想要安装的目录,如果不需要则直接点击下一步(个人建议不要安装在C盘(系统盘)): 5.用户体验设置可根据自己想法自行选择,勾不勾选对安装并无影响,之后点击下一步: 6.快捷方式页面直接默认下一

Vue入门教程

Vue入门基础基础 TypeScript 为 JavaScript 带来静态类型检查,让 JavaScript 编写中大型应用的时候可以应用工具来避免部分错误. Vue 很早就支持 TypeScript,但配置起来比较麻烦,幸好有了 Vue CLI 3.0.安装好 vue-cli 之后,使用 vue create 项目名称 来创建项目,vue 脚本手架自动创建以项目名称命名的目录. vue-cli 3 生成的项目结构比较科学,尤其是通过 components 和 views 将作为控件的组件和作