Vue的快速入门（01）

今日份学习目标：

一、vue简介

二、Vue入门

1、导入js依赖

五、Vue的生命周期 *****（2个面试题）

一、vue简介

问题：

Vue.js是什么？

Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架。
官网：https://cn.vuejs.org/
Vue作者：尤雨溪/中国无锡

Vue呢，从大的角度思考就是将我们的传统开发模式颠覆掉了，传统模式呢是写完后端写前端，这样的话通常是一个人做，先得要有原型页先由前端工程师把这个写好，才能进行后台的编码工作；Vue大概是在2017-2018的时候火起来的，那个时候Vue有一个代名词是“前后端分离”，即使不知道前端是什么样的也可以进行后台的开发。

前后端分离：

1、约定数据交互格式 json

书籍查询 [{bid:1,bname:"西游记"},{bid:2,bname:"红楼梦"}]

订单查询 {oid:1,......[oiid,1,.....]}

2、优点：

前后端工程师可以并行开发，项目交付更快

3、专业的人做专业的事

二、Vue入门

1、导入js依赖

进入BootCDN进行下载官网：BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

但是由于我所用的HBuildeX的版本是2.0几的，而官网是3.0以上的，所以这里我们需要找到与自己相匹配的js版本。

回车之后就会出现以下效果，如果没有出现以下效果，那么肯定就是错误的：

然后再选重地址栏这段路径放入代码里：https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js

放入代码块中：

CDN网站也有很多，比如：

同样的在代码块里面换成这个地址栏链接也是可以的

版本问题对于开发而言的影响是极大的，所以大家一定要细心选择版本！！！

2、定义vue所管理的边界

3、创建vue实例

4、挂载边界

代码块如图所示：

代码块展示：


 
html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
		<title>Vue入门title>
	head>
	<body>
		<div id="app">
			
			{{msg}}
		div>
	body>
	<script type="text/javascript">
		/* 创建vue实例 */
		new Vue({
			el:'#app',
			data(){
				// 设置vue所管理的边界中可以使用的变量
				return{
					msg:'hello vue!!! 我是一杯咖啡.'
				};
			}
		})
	script>
html>

运行效果如下：

三、数据的双向绑定

数据的双向绑定是Vue的最大一个特色。

在数据边界里添加

代码块展示：


 
html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
		<title>数据的双向绑定title>
	head>
	<body>
		<div id="app">
			
			<input v-model="msg"/>
			{{msg}}
			{{msg}}
			{{msg}}
		div>
	body>
	<script type="text/javascript">
		/* 创建vue实例 */
		new Vue({
			el:'#app',
			data(){
				// 设置vue所管理的边界中可以使用的变量
				return{
					msg:'hello vue!!! 我是一杯咖啡.'
				};
			}
		})
	script>
html>

运行结果展示：

注意：

如果写在数据边界外面的话是失效的，效果展示：

四、Vue事件

v-on:click 实现vue事件的属性

效果展示：这个时候点击打印就可以弹出输入内容啦~

还有一个属性，也是实现同样的效果：

@click 实现vue事件的属性

在没有使用vue以前，实现一个弹幕发送的功能步骤：

①拿到弹幕对应的输入框dom对象

document.getElementById("inputId");

②拿到输入框dom对象的value值

var text = input.value;

③通过点击事件弹出输入框内容

alert(text)