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

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

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

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

一、Vue 的安装与使用

1.在线引用：

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 文件代码：

	
		
		
		
		
		
		
		
		
	
	
		
		
		

			
			
			
{{name}}
		
		
		
		
	

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 文件：

	
		
		
		
		
		
		
		
		
	
	
		
		
		

			
			
			{{welcome()}}
			
			
			{{good("afternoon")}}
			
		
		
		
		
	

四、属性绑定（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:"CSDN 地址",
	},
	//存储自己的方法
	methods:{
		welcome: function(){
			alert(" welcome to learn with me!");
		},
		good: function(time){
			alert("Good " + time + " " + this.name + "!" )
		}
	}
});

2.html 文件：

	
		
		
		
		
		
		
		
	
	
		
		
		

			
			
			博客园地址
			

			
			

			
			

			
		
		
		
		
	

3.截图：