Vue 框架-01- 入门篇 图文教程

Vue 官网：https://cn.vuejs.org/

关于 Vue 的基础大家可以在官网的【起步】去学习，本系列文章主要针对实例项目应用

一、Vue 的安装与使用

1.在线引用：

<!--  直接引用 -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.下载 js 文件（推荐）：

(1)在浏览器中打开下面链接：

https://cdn.jsdelivr.net/npm/vue/dist/vue.js

(2)全选，拷贝，新建 js 文件，粘贴，然后倒入本地的 js 文件即可

3.使用 npm 安装（待补链接）

二、创建项目，并使用数据模板

1.开发工具使用的是 HBuilder，先创建一个 web 项目：


2.在 js 下创建 app.js，在 css 下创建 style.css，截图：

注意介绍都写在注释里了

3.index.html 文件代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>VueLearn-cnblogs/xpwi</title>

		<!--引入自定义的样式-->

		<link rel="stylesheet" href="css/style.css" />

		<!--引入 vue 核心 js-->

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>

	<body>

		<!--vue-app 是根容器，定义一个 id，然后在 js 里操作-->

		<div id="vue-app">

			<!--name 具体的值是在 js 中定义的，{{}}不会显示在页面上 -->

			<h2>{{name}}</h2>

		</div>

		<!--引入自己的 js，注意必须写在 body 标签里最后，因为必须先加载你的整个 HTML DOM，才回去执行 vue 实例-->

		<script type="text/javascript" src="js/app.js" ></script>

	</body>

</html>

4.写 app.js 代码：

//实例化 vue 对象

new Vue({

	//注意代码格式

	//el：element 需要获取的元素，一定是 html 中的根容器元素

	el:"#vue-app",

	data:{

		name:"肖朋伟"

	}

});

5.截图：

三、使用方法：

1.app.js 文件：

//实例化 vue 对象

new Vue({

	//注意代码格式

	//el：element 需要获取的元素，一定是 html 中的根容器元素

	el:"#vue-app",

	data:{

		name:"肖朋伟"

	},

        //存储自己的方法

	methods:{

		welcome: function(){

			alert(" welcome to learn with me!");

		},

		good: function(time){

			alert("Good " + time + " " + this.name + "!" )

		}

	}

});

2.html 文件：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>VueLearn-cnblogs/xpwi</title>

		<!--引入自定义的样式-->

		<link rel="stylesheet" href="css/style.css" />

		<!--引入 vue 核心 js-->

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>

	<body>

		<!--vue-app 是根容器，定义一个 id，然后在 js 里操作-->

		<div id="vue-app">

			<!--welcome 具体的值是在 js 中定义的-->

			{{welcome()}}

			<!--方法传参数-->

			{{good("afternoon")}}

		</div>

		<!--引入自己的 js，注意必须写在 body 标签里最后，因为必须先加载你的整个 HTML DOM，才回去执行 vue 实例-->

		<script type="text/javascript" src="js/app.js" ></script>

	</body>

</html>

四、属性绑定（v-bind: ）

1.app.js 文件：

//实例化 vue 对象

new Vue({

	//注意代码格式

	//el：element 需要获取的元素，一定是 html 中的根容器元素

	el:"#vue-app",

	data:{

		name:"肖朋伟",

		blogUrl:"https://www.cnblogs.com/xpwi",

		csdnUrl:"https://blog.csdn.net/qq_40147863",

		/*定义 html 代码块，在 html标签中绑定获取

		【特别注意】：单引号和双引号交替使用，不然都不知道怎么蹦的

		*/

		csdnHtml:"<a href='https://blog.csdn.net/qq_40147863'>CSDN 地址</a>",

	},

	//存储自己的方法

	methods:{

		welcome: function(){

			alert(" welcome to learn with me!");

		},

		good: function(time){

			alert("Good " + time + " " + this.name + "!" )

		}

	}

});

2.html 文件：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>VueLearn-cnblogs/xpwi</title>

		<!--引入自定义的样式-->

		<link rel="stylesheet" href="css/style.css" />

		<!--引入 vue 核心 js-->

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>

	<body>

		<!--vue-app 是根容器，定义一个 id，然后在 js 里操作-->

		<div id="vue-app">

			<!-- v-bind 是 vue 中给标签属性绑定 js 中定义的值 -->

			<a v-bind:href="blogUrl">博客园地址</a>

			<br />

			<input type="text" v-bind:value="name" />

			<br />

			<!--v-html 是拿 js 中的数据然后将字符串转换成 html 代码-->

			<p v-html="csdnHtml"></p>

		</div>

		<!--引入自己的 js，注意必须写在 body 标签里最后，因为必须先加载你的整个 HTML DOM，才回去执行 vue 实例-->

		<script type="text/javascript" src="js/app.js" ></script>

	</body>

</html>

3.截图：

Vue 框架-01- 入门篇 图文教程的更多相关文章

  1. Spring Boot 2.0 的快速入门（图文教程）

    摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘要,谢谢! Spring Boot 2.0 的快速入门(图文教程) 大家都 ...

  2. Google C++测试框架系列入门篇：第三章 基本概念

    上一篇:Google C++测试框架系列入门篇:第二章 开始一个新项目 原始链接:Basic Concepts 词汇表 版本号:v_0.1 基本概念 使用GTest你肯定会接触到断言这个概念.断言是用 ...

  3. Google C++测试框架系列入门篇：第二章 开始一个新项目

    上一篇:Google C++测试框架系列入门篇:第一章 介绍:为什么使用GTest? 原始链接:Setting up a New Test Project 词汇表 版本号:v_0.1 开始一个新项目 ...

  4. 基于MAVEN使用IDEA创建dubbo入门项目图文教程

    花了很长时间没有找到一个很详细的图文教程来学习dubbo入门框架,故记录下来. 一: 项目工程目录 简单介绍项目目录结构: 二: 创建父工程 具体操作步骤: 1,打开IDEA,按下面步骤来 File- ...

  5. 如何在Visual Studio 2017中使用C# 7+语法 构建NetCore应用框架之实战篇（二）：BitAdminCore框架定位及架构 构建NetCore应用框架之实战篇系列 构建NetCore应用框架之实战篇（一）：什么是框架，如何设计一个框架 NetCore入门篇：（十二）在IIS中部署Net Core程序

    如何在Visual Studio 2017中使用C# 7+语法   前言 之前不知看过哪位前辈的博文有点印象C# 7控制台开始支持执行异步方法,然后闲来无事,搞着,搞着没搞出来,然后就写了这篇博文,不 ...

  6. 高性能NIO框架Netty入门篇

    http://cxytiandi.com/blog/detail/17345 Netty介绍 Netty是由JBOSS提供的一个java开源框架.Netty提供异步的.事件驱动的网络应用程序框架和工具 ...

  7. SpringBoot框架(1)--入门篇

     什么是SpringBoot? Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程. 特征 创建独立的Spring应用程序 直接嵌 ...

  8. vue 框架，入门必看

    vue 的 入门 el 的挂载点: el 是用来设置vue实例挂载,(管理)的元素 vue会管理el选项命中的元素以及内部的后代元素 可以使用其他的选择器,但是不建议使用ID选择器 可以使用其他的双标 ...

  9. vue.cli脚手架初次使用图文教程

    vue-cli作用 vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程. vue-cli使用 !!前提:需要vue和webpack 安装全局vue-cli npm ...

随机推荐

  1. python常用工具

    创建规范目录 import os BASE_PATH = os.path.dirname(__file__) li = ['bin', 'conf', 'core', 'db','interface ...

  2. Pycharm 报错 AttributeError: module 'pip' has no attribute 'main'

    1.打开文件packaging_tool.py: D:\Program files\pycharm\PyCharm 2016.3.2\helpers\packaging_tool.py 2.添加导入: ...

  3. Java Web入门学习（二） Eclipse的配置

    Java Web学习(二) Eclipse的配置 一.下载Eclipse 1.进入Eclipse官网,进行下载 上图,下载Eclipse IDE for JaveEE Developers 版本,然后 ...

  4. oracle建表时设置递增序列：序列，触发器

  5. Delphi下OpenGL2d绘图(03)-画线

    一.前言 画线与画点基本上代码是相同.区别在于glBegin()的参数.绘制的框架代码可以使用 Delphi下OpenGL2d绘图(01)-初始化 中的代码.修改的部份为 Draw 函数的内容. 二. ...

  6. vue面试题总汇

    active-class是哪个组件的属性? vue-router模块的router-link组件. 嵌套路由怎么定义? 在实际项目中我们会碰到多层嵌套的组件组合而成,但是我们如何实现嵌套路由呢?因此我 ...

  7. [转]EntityFramework Core技术线路（EF7已经更名为EF Core，并于2016年6月底发布）

    本文转自:http://www.cnblogs.com/VolcanoCloud/p/5572408.html 官方文档英文地址:https://github.com/aspnet/EntityFra ...

  8. FusionChart实现柱状图、饼状图的动态数据显示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Golang报错mixture of field:value and value initializers

    Golang 在使用匿名成员初始化时,如果出现 mixture of field:value and value initializers 是因为初始化的方式不对,见代码: package main ...

  10. TCP/IP Socket通信demo

    一个实例通过client端和server端通讯 客户端发送:“我是客户端,请多关照” 服务端回复:“收到来自于"+s.getInetAddress().getHostName()+" ...