Vue2.0 入门基础介绍

Vue概述：

是一套用于构建用户界面的渐进式框架，简单，高效，生态丰富（插件多

特点：尤雨溪创造，v2与v3两个版本 ​；渐进式JavaScript框架； 结合了angular的指令与react的组件，虚拟dom

优点：中文文档完毕； 生态丰富； 上手简单（插件多）； 指令组件虚拟dom

Vue的安装与使用

直接
2、避免新版本造成的不可预期的破坏：

3、兼容 ES Module 的构建文件：

4、直接下载：

https://v2.cn.vuejs.org/v2/guide/installation.html

使用

new Vue 函数创建一个新的应用实例

     new Vue({

        el:"#box", //指定vue的模板css选择器

        data:{msg:"你好"} // 指定data数据

    })

模板指定

       

{{msg}}

   

文本渲染与指令

指令：指令是带有 v- 前缀的特殊 attribute。指令 的属性值预期是单个 JavaScript 表达式

指令特点：

可以渲染实例的值  v-text="msg"

数学运算  v-text="2=3"

使用js表达式   v-text="msg，length"  执行js的普通方法split分割, reverse反转数组

如果是文本需要/只能加单引号    v-text=" ‘我爱中国’+msg"

{{三元运算(不能使用if, for等多行命令)}}

声明式渲染：

 
	
		
		
		
		
	
 
	
		

			
{{msg}} 
			 
		
	
	  
	
 

条件 v-if    v-else-if    v-else

	
		
		
	
	
		

			
舞林大会{{score}}
			
独孤九剑
			
葵花宝典
			
三分归元气
			
小师妹嫁给你
			
面壁思过
			  
		
		
		
    // v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定
	

条件 v-show​​​​ 

 
v-if
            
v-show

        new Vue({
                        el:'#box',
                        data:{
                            flag:false,
                           }
                   })

        
            最大的不同就是隐藏方式

遍历 v-for

	
		
		
	
	
		

			
v-for
			
			
{{item}}
			
			
{{item}}
			
			
{{item}}
			
			
{{key}}:{{item}}
		
		
		
	

处理用户输入

	
		
		
	
	
		

			
{{msg}}
			  
		
		
		
	

属性渲染

v-bind指令 (通常缩写为 ：)给html标签动态的绑定属性 

这是一个title
  //:title是v-bind：title缩写

事件

我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。

	
		
		
	
	
		

			
事件
			 {{num}}
			{{num}}  //@是简写