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. 收集vcftools所有用法

    VCFtools用来处理VCF文档. 筛选特定突变 比较文件 总结突变 转化文件格式 验证并合并文件 取突变交集和差集 Get basic file statistics input可以为VCF或BC ...

  2. 语言模型预训练方法（ELMo、GPT和BERT）——自然语言处理（NLP）

    1. 引言 在介绍论文之前,我将先简单介绍一些相关背景知识.首先是语言模型(Language Model),语言模型简单来说就是一串词序列的概率分布.具体来说,语言模型的作用是为一个长度为m的文本确定 ...

  3. 2019.4.24 3D效果滚筒导航练习

    效果图: 彩千圣天下第一!(小声bb) 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  4. Mac 10.12安装OpenVPN客户端

    说明: 1.在Mac下有很多漂亮的客户端可以安装,比如Tunnelblick这些等等. 2.但这里直接先原版的OpenVPN进行搭建,这个比较爽. 安装: brew install openvpn 提 ...

  5. 用Python写了一个postgresql函数，感觉很爽

    用Python写了一个postgresql函数,感觉很爽 CREATE LANGUAGE plpythonu; postgresql函数 CREATE OR REPLACE FUNCTION myfu ...

  6. IT人生的价值和意义 感觉真的有了

     为了做新闻APP,我居然短短一个月利用业余时间做了: 一个通用新闻采集器. 一个新闻后台审核网站. 一个通用采集器下载网站. 一个新闻微网站. 一个新闻APP, 而且还给新闻微网站和新闻 APP练就 ...

  7. django notes 七：Using Forms

    form 也没什么可说的,我只给一个例子大家就懂了 form model from django import forms class UserForm(forms.Form): username = ...

  8. css3基础下

    box-shadow:0 5px 5px rgba(0,0,0,0.5) 文本 text-shadow:5px 5px 4px green; word-wrap: 背景: background:#ff ...

  9. 关于Input输入框蓝色外框的操作

    1.去掉input外框的css: input { outline : none; //去掉外框 //outline:medium; } input:focus { outline : none; } ...

  10. js Array vs []，以及是否为空的判断

    两者基本相同,唯一不同点在于初始化: var a = [], // these are the same b = new Array(), // a and b are arrays with len ...