vue框架的简单介绍和基础语法(入门必看)

1、Vue的简单介绍

什么是Vue.js？

Vue（读音 /vju:/，发音类似于 view）是一套用于构建用户界面的渐进式的JavaScript框架。

Vue.js的优点：

• 体积小：压缩后只有33k；
• 更高的运行效率：基于虚拟DOM，一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这种DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM；
• 双向数据绑定：让开发者不用再去操作DOM对象，把更多的精力投入到业务逻辑上；
• 生态丰富、学习成本低：市场上拥有大量成熟、稳定的基于vue.js的ui框架及组件，拿来即用实现快速开发；对初学者友好、入门容易、学习资料多；

为什么要使用Vue.js?

随着前端技术的不断发展，前端开发能够处理的业务越来越多，网页也变得越来越强大和动态化，这些进步都离不开JavaScript。在目前的开发中，已经把很多服务端的代码放到了浏览器中来执行，这就产生了成千上万行的JavaScript代码，他们连接着各式各样的HTML和CSS文件，但是缺乏正规的组织形式。这也是为什么越来越多的前端开发者使用JavaScript框架的原因，目前比较流行的前端框架有Angular、Reac、Vue等。

Vue是一款友好的、多用途且高性能的JavaScript框架，它能够帮助你创建可维护性和可测试性更强的代码库。Vue是渐进式的JavaScript框架，也就是说，如果你已经有了现成的服务端应用，你可以将Vue作为该应用的一部分嵌入其中，带来更加丰富的交互体验。或者如果你希望将更多业务逻辑放到前端来实现，那么Vue的核心库及其生态系统也可以满足你的各式需求。

和其他框架一样，Vue允许你将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方。如果我们构建了一个大型的应用，可能需要将东西分割成为各自的组件和文件，使用Vue的命令行工具，使快速初始化一个真实的工程变得非常简单。

vue init webpack my-project

我们甚至可以使用Vue的单文件组件，它包含了各自的HTML、JavaScript以及带作用域的CSS或SCSS。

2、Vue的初体验

<div id="app">
	<h2>hello {{name}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
	let app = new Vue({
		el:'#app',
		data:{
			name:'Vue.js'
		}
	})
</script>

在浏览器中可以看到下面的结果：

下面是，对代码的解释：
{{ }} 用于输出对象属性和函数返回值。
el : 在Vue中表示一个挂载点。
了解：

• el 是用来设置vue实例挂载，（管理）的元素
• vue会管理el选项命中的元素以及内部的后代元素
• 可以使用其他的选择器，但是不建议使用ID选择器
• 可以使用其他的双标签，不能使用HTML和body

data : 数据对象

• vue 中 用到的数据定义在data中
• data中可以写复杂类型的数据
• 渲染复杂数据时，遵守js的语法即可
• code

3、Vue的基础语法

3.1、文本输出

普通输出
a.使用`{{}}方式

<div id="app">
	<h2>hello {{name}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
	let app = new Vue({
		el:'#app',
		data:{
			name:'Vue.js'
		}
	})
</script>

b.使用v-text的指令 和普通的{{ }}的用法一样(在这里引入的vue.js文件是我的本地文件，可以换成自己文件所在的本地路径)

代码：
<div id="app">
	<!-- 将数据显示出来，一样的效果 -->
	<h2>{{message}}</h2>
	<h2 v-text="message"></h2>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	let app = new Vue({
		el: "#app",
		data: {
			// message: "你好，杨柳！！"
			message:"<h1>hello</h1>"
			}
		})
</script>
结果:
	上面的结果:
		你好，杨柳！！
		你好，杨柳！！
	下面的结果:
		<h1>hello</h1>
		<h1>hello</h1>

在上面的代码中可以看出：v-text和{{}}在标签中显示文本数据，数据对象中的数据会被原样输出。都是表达式渲染数据，不解析标签
渲染HTML
c.使用v-html指令

代码:
<div id="app">
	<h2>{{link}}</h2>   <!-- 结果： <a href="http://www.baidu.com">百度一下</a>-->
	<h2 v-html="link"></h2>    <!-- 会跳转 -->
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	let app = new Vue({
		el: '#app',
		data: {
			link: '<a href="http://www.baidu.com">百度一下</a>'
		}

	})
</script>
结果:
	<a href="http://www.baidu.com">百度一下</a>
	百度一下(会跳到网站)

v-html指令可以将HTML标签进行渲染，然后输出。
总结：
v-text和 {{}} 表达式渲染数据，不解析标签；

v-html不仅可以渲染数据，而且可以解析标签；

3.2、条件语句

a.v-if:指令

代码:
<div id="app">
	<h2 v-if="isShow">{{message}}</h2>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	let app = new Vue({
		el: "#app",
		data: {
			message: "hello",
			isShow:true
		}
	})
</script>
结果:
	hello

当条件为 false 时，不会将 h2标签嵌入到网页代码中。
b.v-else-if、v-else的指令(注：在这里我用了两种方式：一种在代码里使用指令；另一种就是我们平常用的if、else if、 else的用法)

<div id="app">
	<h3 v-if="score>=90">优秀</h3>
	<h3 v-else-if="score>=80">良好</h3>
	<h3 v-else-if="score>=60">及格</h3>
	<h3 v-else>不及格</h3>
    
	{{result}}
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	let app = new Vue({
		el: "#app",
		data: {
			score:99
		},
		computed:{
			result(){
				let showMessage = "";
				if(this.score >= 90){
					showMessage = "优秀"
				} else if(this.score >= 80){
					showMessage = "良好"
				} else if(this.score >= 60){
					showMessage = "及格"
				} else {
					showMessage = "不及格"
				}
				return showMessage
			}
		}
	})
</script>

c.v-show指令

<div id="app">
	<p v-show="isShow">Hello</p>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			isShow: true
		}
	});
</script>

v-show是通过display:none CSS样式来控制是否显示的切换操作。
v-if和v-show的区别:
v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

3.3、循环语句

遍历数组
基本用法：

代码:
<div id="app">
	<!-- 1.在遍历的过程中，没有使用索引值(下标值) -->
	<ul>
		<li v-for="item in names">{{item}}</li>
	</ul>
	<!-- 2.在遍历的过程中，获取下标值 -->
	<ul>
		<li v-for="(item,index) in names" v-bind:key="index">{{index+1}}.{{item}}</li>
	</ul>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	let app = new Vue({
		el: "#app",
		data: {
			names: ["why", "kobe", "html", "css", "html5", "css3", "javascript"]
		}
	})
</script>
结果:
	why
	kobe
	html
	css
	html5
	css3
	javascript

	1.why
	2.kobe
	3.html
	4.css
	5.html5
	6.css3
	7.javascript

v-for遍历数组时有两个参数，参数1为数组的元素值，参数2为元素的下标。
遍历对象
基本用法：

代码:
<div id="app">
	<!-- 1.在遍历对象的过程中，如果只是一个值，那么获取的是value -->
	<ul>
		<li v-for="item in info">{{item}}</li>
	</ul>

	<!-- 2.获取key和value ====> (value,key) -->
	<ul>
		<li v-for="(value,key) in info">{{value}}----{{key}}</li>
	</ul>
			
	<!-- 3.获取key和value和index ====> (value,key,index) -->
	<ul>
		<li v-for="(value,key,index) in info">{{value}}----{{key}}----{{index}}</li>
	</ul>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	let app = new Vue({
		el: "#app",
		data: {
			info: {
				name: "html",
				age: 20,
				height: 1.70
			}
		}
	})
</script>
结果:
	html
	20
	1.7

	html----name
	20----age
	1.7----height

	html----name----0
	20----age----1
	1.7----height----2

v-for 遍历对象时，有3个参数，参数1为对象属性的值（键值），参数2为对象的属性名（键名），参数3为属性在对象中的索引。

3.4、属性绑定

基本用法：

• v-bind 指令的作用就是：为元素绑定属性
• 完整的写法是 v-bind 属性名
• 简写的话直接省掉v-bind ，只保留： 属性名
• 需要动态的增删class建议使用对象的方式
• code

<!-- 挂载点 -->
<div id="app">
	<a v-bind:href="url" :title="title">打开链接</a>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			url: 'http://www.taobao.com',
			title: '淘一下，你就喜欢'
		}
	});
</script>

3.5、事件处理

基本用法：

<div id="app">
	<button v-on:click="num++">按钮</button>
	<p>计算：{{num}}</p>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			num: 0
		},
	});
</script>

执行上述代码，当点击按钮时，会对 num 属性做累加操作。
事件函数：

<div id="app">
	<button v-on:click="add">按钮</button>
	<p>计算：{{num}}</p>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			num: 0
		},
		methods: {
			add: function() {
				this.num++;
			}
	});
</script>

事件函数传参

<div id="app">
	<button v-on:click="reset(0)">重置</button>
	<p>计算：{{num}}</p>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			num: 0
		},
		methods: {
			add: function() {
				this.num++;
			},
			reset: function(val) {
				this.num = 0;
			}
		}
	});
</script>

绑定多个事件:

<div id="app">
	<div :style="{color:styleStr}" 
		 @mouseenter="changeColor('red')" 
		 @mouseleave="changeColor('blue')"
		>
		Hello
	</div>

</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			styleStr: 'blue'
		},
		methods: {
			changeColor: function(str) {
				this.styleStr = str;
			}
		}
	});
</script>

3.6、数据的双向绑定（表单绑定）

a.文本输入框

<div id="app">
	<!-- 输入框 -->
	<input v-model="val" />
	<p>内容：{{val}}</p>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			val: 'hello'
		}
	});
</script>

b.文本域

<div id="app">
	<!-- 文本域 -->
	<textarea v-model="val"></textarea>
	<p>内容：{{val}}</p>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			val: 'hello'
		}
	});
</script>

c.单选按钮

<div id="app">
	<!-- 单选按钮 -->
	<input type="radio" name="sex" value="男" v-model="sex" />男
	<input type="radio" name="sex" value="女" v-model="sex" />女
	<p>性别：{{sex}}</p>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			sex: '男'
		}
	});
</script>

d.复选框

<div id="app">
	<!-- 复选框 -->
	<input type="checkbox" value="篮球" v-model="hobby" />篮球
	<input type="checkbox" value="足球" v-model="hobby" />足球
	<input type="checkbox" value="排球" v-model="hobby" />排球
	<p>爱好：{{hobby}}</p>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			hobby: ['篮球']
		}
	});
</script>

e.下拉框

<div id="app">
	<!-- 下拉框 -->
	<select v-model="xueli">
		<option value="">请选择</option>
		<option value="大专">大专</option>
		<option value="本科">本科</option>
		<option value="研究生">研究生</option>
		<option value="博士">博士</option>
	</select>
	<p>学历：{{xueli}}</p>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			xueli: ''
		}
	});
</script>

f.修饰符
1)、.lazy 修饰符，v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符lazy ，从而转变为在 change 事件中同步：

<div id="app">
	<!-- 修饰符 -->
	<input v-model.lazy="msg" />
	<p>内容：{{msg}}</p>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			msg: ''
		}
	});
</script>

2)、.number 修饰符， 如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model来处理输入值：

<input v-model.number="msg" />

3)、.trim修饰符， 如果要自动过滤用户输入的首尾空格，可以添加trim修饰符到 v-model上过滤输入：

<input v-model.trim="msg" />
<p>内容：{{msg}}</p>
<p>长度：{{msg.length}}</p>