Vue.js_认识_简单介绍_谈谈你对vue.js的认识-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40601005/article/details/106072135

相信很多小伙伴都已经听说过前端的三大框架vue，angular，react；目前来说，这三大框架是现在非常流行的，但是在很多情况，我们会纠结于使用哪个框架比较好一些，所谓的“好一些”是指什么呢？也就是说，选择“好一些”的判断标准是什么呢？

（1）这个框架的使用场景：

根据项目是否适用于Web端还是原生的APP，或者快速搭建一个小型项目等等。

（2）可复用的组件：

框架中组件的复用性能够很大程度上减少了代码量，也方便了也方便了维护和管理。

（3）该框架能够解决什么问题：

选择框架还是主要要看它的优势和劣势有哪些。

Vue优点：

1.轻量级框架

2.双向数据绑定

3.简单，官方文档很清晰，比angular简单易学

4.快速，异步处理方式更新DOM

5.组合，用解耦的、可复用的组件组合应用程序

6.强大，表达式无需声明依赖的可推导性

7.对模块友好，不强迫你所有的代码都遵循angular的各种规定，使用场景更加灵活

Vue缺点：

1.新生儿，没有angular那么成熟

2.不支持IE8

Angular优点：

1.良好的应用程序结构

2.双向数据绑定

3.可嵌入、注入和测试

4.模板功能强大丰富，自带了极其丰富的angular指令

5.是一个比较完善的前端框架，包含服务、模板、数据双向绑定、路由、依赖注入等等

6.自定义指令可以在项目中多次使用

Angular缺点：

1.入门容易，深入后概念很多，学习中比较难理解

2.文档实例很少，理解起来很难

3.对IE6/7兼容不算特别好，需要自己使用jQuery来解决一些需求

React优点：

1.声明式设计，react采用声明范式，可以轻松描述应用。

2.高效，react通过对DOM的模拟，最大限度的减少与DOM的交互

3.灵活，可以和已知的库和框架很好的配合

4.速度快，在UI渲染过程中，react通过虚拟DOM中的微操作来实现对实际DOM的局部更新

5.跨浏览器兼容，虚拟DOM帮助我们解决了跨浏览器问题，提供了标准化的API

React缺点：

1.react本身只是一个“V”，并不是一个完整的框架，所以如果是大型的项目想要一套完整框架的话，基本上都需要加上ReactRouter和Flux才能写大型应用

（4）框架的生态系统：

是否有繁荣的生态系统提供我们学习使用

（5）跨平台性：

是否需要同时支持移动端和PC端

文章采取：

（1）链接：怎样在vue，angular，react快速选择一个合适的框架（猛码象）

（2）链接：web前端三大主流框架那个适合前端开发？

总之呢，具体使用哪种框架还是需要和自己项目相匹配，能够更好地符合自己需求和目标。合适是最大的标准。

好了，言归正传，我的主要目的是简单介绍一下新生儿——Vue.js。

希望不足的地方还请多多指教。

（1）什么是Vue.js

Vue.js是一个构建数据驱动的web界面库，技术上，它重点集中在MVVM模式中的ViewModel层，Vue.js的目标是通过尽可能简单的API实现响应式的数据绑定和组合的视图组件。

Vue.js的核心是是一个响应式的数据绑定系统，它让数据与DOM保持同步变得简单。

Vue.js的核心库只关注视图层，不仅容易上手，还便于与第三方库或其他项目整合。

（2）创建一个Vue实例

var vm = new Vue({

el:''#app''，

data:{}，

create:{加载完成之前执行，执行顺序：父组件--子组件}，

mounted:{加载完成后执行。执行顺序：子组件--父组件}，

methods:{事件方法执行}，

watch:{监听一个值的变化，然后执行相对应的函数}，

computed:{是计算属性，也就是依赖其他的属性计算所得出最后的值}

})

生命周期图：

（3）表单输入绑定

基础用法，可以使用v-model指令在表单<input>、<textarea>、<select>元素上创建双向数据绑定。

它会根据控件类型自动选取正确的方法来更新元素。

对于单选按钮、复选框以及选择框的选项，v-model绑定的值通常是静态字符串（对于复选框也可以是布尔值）

但是有时候我们需要把值绑定到Vue实例的一个动态property上，这时候可以用v-bind实现，并且这个property的值可以不是字符串

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue_表单</title>
		<script src="../vue/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- v-model指令在表单控件元素上创建双向数据绑定 -->
		<div id="app_1">
			<p>input 元素：</p>
			<input v-model="message" placeholder="编辑我..." />
			<p>消息是：{{message}}</p>
			
			<p>textarea 元素：</p>
			<p style="white-space: pre">{{message2}}</p>
			<textarea v-model="message2" placeholder="多行文本输入..."></textarea>
		</div>
		<!-- 复选框如果是一个为一个逻辑值，如果是多个则绑定到同一个数组 -->
		<div id="app_2">
			<p>单个复选框：</p>
			<input type="checkbox" id="checkbox" v-model="checked" />
			<label for="checkbox">{{checked}}</label>
			
			<p>多个复选框：</p>
			<input type="checkbox" id="baidu" value="百度" v-model="checkedNames"/>
			<label for="baidu">百度</label>
			<input type="checkbox" id="Google" value="谷歌" v-model="checkedNames"/>
			<label for="Google">谷歌</label>
			<input type="checkbox" id="taobao" value="淘宝" v-model="checkedNames"/>
			<label for="taobao">淘宝</label>
			<br />
			<span>选择的值为：{{checkedNames}}</span>
		</div>
		<!-- 单选按钮的双向数据绑定 -->
		<div id="app_3">
			<input type="radio" id="baidu" value="百度" v-model="picked"/>
			<label for="baidu">百度</label>
			<input type="radio" id="Google" value="谷歌" v-model="picked"/>
			<label for="Google">谷歌</label>
			<br />
			<span>选中的值为：{{picked}}</span>
		</div>
		<!-- select列表 -->
		<div id="app_4">
			<select name="fruit" v-model="selected">
				<option value="">请选择一个网址</option>
				<option value ="www.baidu.com">百度</option>
				<option value ="www.taobao.com">淘宝</option>
			</select>
			<span id="output">
				选择的网站是：{{selected}}
			</span>
		</div>
		<!-- script -->
		<script type="text/javascript">
			//app_1
			new Vue({
				el:'#app_1',
				data:{
					message:'百度一下',
					message2:'http://www.baidu.com'
				}
			})
			//app_2
			new Vue({
				el:'#app_2',
				data:{
					checked:false,
					checkedNames:[]
				}
			})
			//app_3
			new Vue({
				el:'#app_3',
				data:{
					picked:'百度'
				}
			})
			//app_4
			new Vue({
				el:'#app_4',
				data:{
					selected:''
				}
			})
		</script>
	</body>
</html>

（4）组件

组件是可以复用的Vue实例，并且带有名字，我们可以通过new Vue创建的Vue根实例中，把这个组件作为自定义元素来使用。

一个组件的data选项必须是一个函数，因此，每个实例可以维护一份被返回对象的独立的拷贝。

组件有两种注册类型：全局注册和局部注册。

详细的组件知识请看另一篇文档：Vue.js_组件_认识和理解

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue_组件</title>
		<script src="../vue/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 组件 
			组件(Component)是vue.js最强大的功能之一。
			组件可以扩展HTML元素，封装可重用的代码。
			组件系统让我们可以用独立课回复的小组件来构建大型应用，几乎任意类型的应用界面都可以抽象为一个组件树。
		-->
		<!-- 全局组件 -->
		<div id="app_1">
			<demo1></demo1>
		</div>
		<!-- 局部组件 -->
		<div id="app_2">
			<demo1></demo1>
		</div>
		<!-- Prop
			prop是子组件用来接收父组件传递过来的数据的一个自定义属性。
			父组件的数据需要通过props把数据传递给子组件，子组件需要显式地用props选项声明“prop”
			
			注意：
			prop是单向绑定，当父组件的属性变化时，将传导给组件。但是不会反过来
			
		 -->
		<div id="app_3">
			<child message="hello"></child>
		</div>
		<!-- 动态Prop 
			类似于用v-bind绑定HTML特性到一个表达式，也可以用v-bind动态绑定props的值到父组件的数据中
			每当父组件的数据变化时，该变化也会传导给子组件
		  -->
		<div id="app_4">
			<div id="">
				<input v-model="parentMsg" />
				<br />
				<child2 v-bind:message="parentMsg"></child2>
			</div>
		</div>
		<!-- 使用v-bind指令将todo传到每一个重复的组件中去 -->
		<div id="app_5">
			<ol>
				<todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
			</ol>
		</div>
		<!-- 自定义事件
			父组件是使用props传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件
			我们可以使用v-on绑定自定义事件，每个Vue实例都实现了事件接口，
			即：
			**使用$on(eventName)监听事件
			**使用$emit(eventName)触发事件
		 -->
		<div id="app_6">
			<div id="counter-event-example">
				<p>{{total}}</p>
				<button-counter v-on:increment="incrementTotal"></button-counter>
				<button-counter v-on:increment="incrementTotal"></button-counter>
			</div>
		</div>
		<!-- script -->
		<script type="text/javascript">
			//app_1
			Vue.component('demo1', {
				template: `<h1>自定义全局组件！</h1>`
			})
			new Vue({
				el: '#app_1'
			})
			//app_2
			var Child = {
				template: `<h3>自定义局部组件！</h3>`
			}
			new Vue({
				el: '#app_2',
				components: {
					//<demo1>将只在父模板可用
					'demo1': Child
				}
			})
			//app_3
			//注册
			Vue.component('child', {
				//声明props
				props: ['message'],
				//同样也可以在vm实例中像“this.message”这样使用
				template: `<span>{{message}}</span>`
			})
			//创建实例
			new Vue({
				el: '#app_3',
			})
			//app_4
			//注册
			Vue.component('child2', {
				//声明props
				props: ['message'],
				template: `<span>{{message}}</span>`
			})
			//创建根实例
			new Vue({
				el: '#app_4',
				data: {
					parentMsg: '父组件内容',
				}
			})
			//app_5
			Vue.component('todo-item', {
				props: ['todo'],
				template: `<li>{{todo.text}}</li>`
			})
			new Vue({
				el: '#app_5',
				data: {
					sites: [{
							text: '江苏省'
						},
						{
							text: '南京市'
						},
						{
							text: '鼓楼区'
						}
					]
				}
			})
			//app_6
			Vue.component('button-counter', {
				template: `<button v-on:click="incrementHandler">{{counter}}</button>`,
				data: function() {
					return {
						counter: 0
					}
				},
				methods: {
					incrementHandler: function() {
						this.counter += 1;
						this.$emit('increment')
					}
				}
			})
			new Vue({
				el: '#app_6',
				data: {
					total: 0,
				},
				methods: {
					incrementTotal:function() {
						this.total += 1
					}
				}
			})
		</script>
	</body>
</html>

（5）自定义指令

除了核心功能默认内置的指令(v-model)和(v-show)，Vue也允许注册之定义指令。

一个指令定义对象可以提供如下几个钩子函数：

（1）bind：只调用一次，指令第一次绑定到元素师调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
（2）inserted：被绑定元素插入父节点时调用（父节点存在即可调用。不必存在于document中）。
（3）update：被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
（4）componentUpdated：被绑定元素在模板完成一次更新周期时调用。
（5）upbind：只调用一次，指令与元素解绑时调用。

钩子函数参数：
el:指令所绑定的元素可以用来直接操作DOM
binding:一个对象。包含以下属性：
   name:指令名，不包括v-前缀
   value:指令的绑定值，例如:v-my-directive='1+1'，value的值是2
   oldValue:指令绑定的前一个值，仅在update和componentUpdate钩子中可用。无论值是否改变都可用
   expression:绑定值的表达式或变量名。例如v-my-directive='1+1',expression的值是'1+1'。
   arg:传给指令的参数，例如v-my-directive:foo，arg的值是："foo"
   modifiers:一个包含修饰符的对象。例如v-my-directive.foo.bar，修饰符对象modifiers的值是{foo:true,bar:true}
   vnode:Vue编译生成的虚拟节点。
   oldVnode:上一个虚拟节点，仅在update和componentUpdate中可用。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue_自定义指令</title>
		<script src="../vue/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 自定义指令
			除了默认设置的核心指令(v-model 和 v-show)，Vue也允许注册自定义指令
		 -->
		<!-- 获取元素焦点的全局指令v-focus -->
		<div id="app_1">
			<p>页面载入时，input元素自动获取焦点：</p>
			<input v-focus />
		</div>
		<!-- 演示钩子参数 -->
		<div id="app_2" v-runoob:hello.a.b='message'>

		</div>

		<!-- script -->
		<script type="text/javascript">
			//app_1
			//注册一个全局自定义指令 v-focus
			Vue.directive('focus', {
				//绑定元素插入到DOM中
				inserted: function(el) {
					//聚焦元素
					el.focus()
				}
			})
			//创建实例
			new Vue({
				el: '#app_1',
				/* 
				注册局部变量
				 directives:{
				 	//注册一个局部的自定义指令 v-focus
				 	focus:{
				 		inserted:function(el){
				 			//聚焦元素
				 			el.focus()
				 		}
				 	}
				 }
				 */
			})
			
			//app_2
			Vue.directive('runoob', {
				bind: function(el, binding, vnode) {
					var s = JSON.stringify
					el.innerHTML =
						'name:' + s(binding.name) + '<br>' +
						'value:' + s(binding.value) + '<br>' +
						'expression:' + s(binding.expression) + '<br>' +
						'argument:' + s(binding.arg) + '<br>' +
						'modifiers:' + s(binding.modifiers) + '<br>' +
						'vnode keys:' + Object.keys(vnode).join(',')
				}
			})
			new Vue({
				el:'#app_2',
				data:{
					message:'菜鸟教程！'
				}
			})
		</script>
	</body>
</html>

vue的知识就简单的介绍到这里，如有出错的或者借鉴不妥的地方，还望指出。