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. CentOS下搭建DHCP服务

    DHCP的原理这里就不多说了,这里直接贴配置加解说 1.安装dhcp yum -y install dhcp-4.1.1-63.P1.el6.centos.x86_64 2.编辑/etc/dhcp/d ...

  2. 微信 oauth 登录 ，回调两次，一个坑，记录一下。

    在做微信某个功能的时候,大致需求是:静默授权,得到openId ,然后拿着openId调用接口,判断是否关注.如果是关注的,则发放礼券.每个我网站的会员只会发放一次礼券.如果第二次则会提示已领取过礼券 ...

  3. FindLine把多行查找改为多行替换

    Sub FindLine() Dim textSelection As TextSelection textSelection = DTE.ActiveDocument.Selection textS ...

  4. winform FormBordStyle=none 及 wpf FormBordStyle=none 的鼠标点击移动问题

    winform: //bool formMove = false;//窗体是否移动 //Point formPoint;//记录窗体的位置 private void Login_MouseDown(o ...

  5. python描述符学习

    目录 一.对象属性的访问控制 二.描述符基本理解 三.基本使用 四.使用描述符完成property.classmethod.staticmethod自定义实现 1.property的自定义实现 2.c ...

  6. jquery的animate关于background-position属性

    jQuery 的 animate 虽然能直接使用 CSS 的方式来进行动画,但有些属性其实是不支持的,例如:background-position. 谷歌支持 background-position- ...

  7. 【ZooKeeper】单机伪集群搭建(适用于mac)

    1.配置 .zookeeper下载地址:http://apache.mirrors.lucidnetworks.net/zookeeper/ 可以选择需要的版本,我下载的是zookeeper-3.4. ...

  8. Java程序员的面试经历和题库

    最近打算换城市了,受不了北京的雾霾了,所以准备逃离啦.所以一直在面试中,整理了下最近遇到的一些面试题,供大家参考.其中会包含一些面试的小经验,如果您是面霸,希望能给予指导.自己不是大牛,如果您是大牛, ...

  9. 【es6】let和const

    let 1.不存在变量提升      es5中var和function都存在变量提升,但let声明的变量不存在.     在代码块内,使用let命令声明变量之前,该变量都是不可用的.这在语法上,称为“ ...

  10. 使用VNC访问Linux桌面

    在一个严重依赖Windows的工作环境中,比如电子邮件被限定为Outlook(因为加密要求), VPN软件不支持Linux版本,那么,只使用Linux桌面是不够的,还需要在Linux桌面上跑个虚拟机运 ...