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

傷城~ 2022-04-18 02:35 271阅读 0赞

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

Vue 官网：[https://cn.vuejs.org/][https_cn.vuejs.org]

![1483449-20181105203036380-471567877.jpg][]

关于 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 文件即可

![1483449-20181106132701418-1933720313.jpg][]

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

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

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

![1483449-20181105211015508-1967345175.png][] ![1483449-20181105211026085-518398144.jpg][]

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

![1483449-20181105211646964-1506252071.jpg][]

注意介绍都写在注释里了

3.index.html 文件代码：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>VueLearn-cnblogs/xpwi</title>
    		
    		<link rel="stylesheet" href="css/style.css" />
    		
    		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    		
    		
    	</head>
    	<body>
    		
    		
    		<div id="vue-app">
    			
    			
    			<h2>{
       {name}}</h2>
    		</div>
    		
    		
    		<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.截图：

![1483449-20181105213319841-1686534014.jpg][]

### 三、使用方法： ###

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" />
    		
    		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    		
    		
    	</head>
    	<body>
    		
    		
    		<div id="vue-app">
    			
    			
    			{
       {welcome()}}
    			
    			
    			{
       {good("afternoon")}}
    			
    		</div>
    		
    		
    		<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" />
    		
    		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    		
    	</head>
    	<body>
    		
    		
    		<div id="vue-app">
    			
    			
    			<a v-bind:href="blogUrl">博客园地址</a>
    			<br />
    			<input type="text" v-bind:value="name" />
    			<br />
    			
    			<p v-html="csdnHtml"></p>
    			
    		</div>
    		
    		
    		<script type="text/javascript" src="js/app.js" ></script>
    	</body>
    </html>

3.截图：

![1483449-20181105235001406-1230363699.png][]

[https_cn.vuejs.org]: https://cn.vuejs.org/
[1483449-20181105203036380-471567877.jpg]: /images/20220418/b87b64d9cf8b44449a1d3cef23cbefb6.png
[1483449-20181106132701418-1933720313.jpg]: /images/20220418/f3ea2d365cfb4bf298cf7174f0d8e1f1.png
[1483449-20181105211015508-1967345175.png]: https://img2018.cnblogs.com/blog/1483449/201811/1483449-20181105211015508-1967345175.png
[1483449-20181105211026085-518398144.jpg]: /images/20220418/8edec58140334639b0fff4aa45209fab.png
[1483449-20181105211646964-1506252071.jpg]: /images/20220418/64751a89df344e9da5b39e713ad49740.png
[1483449-20181105213319841-1686534014.jpg]: /images/20220418/4b0e921ec3be427396fa0c401789b0a0.png
[1483449-20181105235001406-1230363699.png]: /images/20220418/fdecc87f3d4342b583aa61fe1fd9ff86.png