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. WC2019退役记

    sb题不会,暴力写不完,被全场吊着打,AFO

  2. slatstack高效运维

    一.简介 saltstack是由thomas Hatch于2011年创建的一个开源项目,设计初衷是为了实现一个快速的远程执行系统. 二.诞生的背景 系统管理员日常会进行大量的重复性操作,例如安装软件, ...

  3. shiro学习笔记_0600_自定义realm实现授权

    博客shiro学习笔记_0400_自定义Realm实现身份认证 介绍了认证,这里介绍授权. 1,仅仅通过配置文件来指定权限不够灵活且不方便.在实际的应用中大多数情况下都是将用户信息,角色信息,权限信息 ...

  4. java的SSH的baseDao,巧用泛型

    BaseDao接口: import java.util.List; public interface BaseDao<T,PK> { public void add(T t); publi ...

  5. smarty 教程 及 常用点

    1. 简单例子 有助回忆基本知识点 define("DIR",dirname(__FILE__)); require_once(DIR."/libs/Smarty.cla ...

  6. AngularJS国际化配置

    AngularJS国际化配置 下载angular-translate 下载zip包:https://github.com/angular-translate/bower-angular-transla ...

  7. Python DataFrame导出CSV、数据库

    写入Oracle from sqlalchemy import create_engine import pandas as pd import numpy as np df = pd.DataFra ...

  8. Android6.0内核移植（1）：分析编译日志

    在下面命令之后产生的编译日志进行分析 source build/envsetup.sh lunch sabresd_6dq-user make -j20 ======================= ...

  9. IOS Runtime属性关联实现表格编辑文本

    要实现在表格里编辑文本, 表格让我想到了CollectionView,文本让我想起TextView, 做之前想了好久怎么样来获得编辑的是哪个TextView,要获取对应的IndexPath啊,想着之前 ...

  10. Vue组件库

    滴滴cube-ui https://didi.github.io/cube-ui/#/zh-CN/docs/quick-start 有赞开源Vant(适合做商城) https://tech.youza ...