【一文学会】vue.js入门到放弃

最近正好学习了vue.js就准备将此记录下来，希望能给各位做个参考，当然因为技术有限所以出现很多错误，烦请大佬们能够不吝赐教，此篇博客会一直保持更新，以后关于vue就在本篇博文上填加内容了。

VueJs简单入门

1.1、vuejs概述

Vue.js是一个渐进式框架(主张少：调用多少算多少，没有赠品)

---

1.2 mvvm模式

mvc的改进版，主要目的是分离视图（View）和模型（Model）

---

1.3 vuejs快速入门

    

        {{message}}
    
 

主要分为两部分，一部分网页内容使用插值表达式{{}}将要显示的内容变量名圈起来，一部分定义vue，el是不可或缺的，代表需要圈起来给vue管理的区域，另外的内容后面实例中慢慢述说。

---

2、常用系统指令(加入和普通js的对比)

1.  v-on  简写'@ ' 可以用 v-on 指令监听 DOM 事件，例如：v-on:click
2.  v-text 与 v-html  对应js的innerText和innerHTML
3.  v-bind 简写':'   属性修饰  
4.  v-model  获取对象的属性  如：student.name
5.  v-for	循环
6.  v-if 与 v-show  v-if是根据表达式的值来决定是否渲染元素
					v-show是根据表达式的值来切换元素的display css属性

2.1.1 v-on:click

js实现代码：

 	

        hello
    
    点击改变
    

*vue实现代码 ： *

	

        {{message}}
    
    点击改变
    

主要做了一个带参的方法，方法内部其实和普通方法一样的，随意定义逻辑就好。

---

2.1.2 v-on:keydown

*js实现代码： *

vue实现代码：

本实例主要做了输入框内只能输入数字的方法，输入其他键盘自动不起作用。具体event事件后面会有叙述。

---

2.1.3 v-on:mouseover

js实现代码：

		

			

				这是一个文件域
			
		
	
	
	
	//css自己添加到合适位置
	

vue实现代码：

		

			

				这是一个文件域
			
		
		
	
	

经过三个常用实例，应该可以了解到v-on的使用方法了吧，举一反三，这可是举三岂不是全部精通了。

---

2.1.4 按键修饰符(常用按键在v-on的别名）

全部的按键别名：

• .enter 回车
• .tab tab
• .delete 删除和退格
• .esc esc
• .space 空格
• .up 方向上
• .down 方向下
• .left 方向左
• .right 方向右
• .ctrl ctrl
• .alt alt
• .shift shift
• .meta 很多键盘没有的键

随便举个按键例子吧_回车键

---

2.2 v-text与v-html

这边就不对比了，v-text相当于jq的text()，v-html相当于jq的html()，很简单的。一个会解析标签，一个原样输出这就不用说了吧。

---

2.3 v-bind

	

        {{message}}
        {{message2}}
    
    

---

2.4 v-model 获取对象属性

			

		            姓名：
		            
            
            

---

2.5 v-for

• 操作array

	

        

            
{{item}}
        
    
    

• 操作对象 （很奇怪的一点是key不是最先获取到的，value才是，尚未理解）

	

        

            
{{key}}=={{value}}
        
    
    

• 操作对象数组

	

        

            

                
序号
                
名称
                
价格
            
            

                

                    {{p.id}}
                
                

                    {{p.name}}
                
                

                    {{p.price}}
                
            
        
    
    

---

2.6 v-if 与 v-show(if是直接不进行编译，而show则类似于display编译了，但是有可能隐藏或显示）

v-if是根据表达式的值来决定是否渲染元素
v-show是根据表达式的值来切换元素的display css属性

	

        百度
        阿里
        切换
    
    

---

3 生命周期(了解)

先放上一张官方图片，对应的内容仔细看还是挺简单的，当然如果后期用到，深入理解会很难的，不过我们还是来简单的了解一下就好了。后面放上一张运行时的控制台输出内容，以及运行的代码，代码都是只包含body以及script所以引用js这些请自己进行。


我们可以看到在创建前状态只进行了new vue和生命周期初始化和事件初始化，当前元素和数据都没有值，创建完毕状态就可以看出，vue是先有数据然后在寻找挂载点，这就很好解释了为什么要先new vue然后再在界面中使用插值符{{}}，（原先自己都是先插值）然后再new vue,之后就是挂载过程了，介于知识有限，所以以后使用过程中再详细解释，只需要知道几个阶段：创建前->创建后->挂载前->挂在后->[更新数据前后(可选)]->销毁前->销毁后

    
{{message}}

4 ajax （axios） （暂定）