VUE第一天学习

VUE

渐进式框架，数据驱动DOM
基本概念：引入vue.js
依赖于window对象，不能在小程序中使用
不支持IE8.0以下
注意：如果dom节点是jquery动态生成的，那么vue是渲染不到的 如果是Vue绑定的元素，jq也是选择不到
生命周期：Vue对象是一个闭包，如果不手动释放，那么就一直存在于环境中

基本语法:

	var vm = new Vue ({
			el:"#app",  //作用于范围 2.0不能在在body中添加id = “#app”
			data: {   //数据JSON储存
				name:"ly",
				myHtml:'<a href = "http://www.baidu.com">ajfdsklsdalf</a>',
				number:5,
				if_:true,
				url1:"http://www.baidu.com",
				age:18，
				color：”red“,
				font-size:30,
				ueseName:"",
				paddword:"",
				phone:""
				
			},
			//方法集合JSON形式
			methonds:{  
				fn1:function () {
					alert("Hello Word");
				}
			},
			
			
	});

模板语法：

• 插值：1.在data里面添加数据
  2.{{}} //data 内的数据变量放在里面就可以
  v-once :数据只更新一次(数据单项绑定)

  {{ly}}

  
  插入纯HTML代码：
  这样页面中自动解析成div 下生成a标签
  属性
  v-bind:
  使用javscript 表达式
  {{num +1}} //结果自动解析成6

• 指令:
  v-if = “if_” 如果if_为真，则渲染，否则不渲染,如果是中文则不渲染
  如果if_为真，则渲染，否则不渲染
  v-else 如果v-else 为假 那么内容不渲染data内的，如果为真，那么渲染data内的数据

  fsdajkfdsa

  注意：v-else 必须使用在v-if 元素的后面
  参数
  v-bind:href = “url1” //绑定href为data中url1的数据

v-on:完整写法
点击执行fn1
缩写:v-@click = “fn1”

Class 和Style
v-bind: 这是一个表达式，条件为真则绑定，条件为假则不绑定
需要注意！类名需要加单引号
v-bind:class = “{{‘classA’:age>18}}” 如果data下的age大于18，则显示，否则不显示
绑定style样式，在需要修改样式的时候可以用上
v-bind:style ="{ color: color,font-size: font-size+‘px’}" ;//自动解析data下的color属性和font-size属性应用在元素上

条件渲染：
v-if
v-show=“show”; 自动解析data下的show 变量，如果为真，就显示，如果为假，就隐藏
v-for =“value in arr” 根据arr数组的length来循环渲染，value是值
v-for = “(v,i) in obj” 根据obj 来遍历 v 是值，i是索引或者index

表单控件:
v-model = “userName” 内容双向绑定 一般使用与表单,如果修改表单，那么data下的userName 也会跟着改变
v-model.number = “phone” 如果绑定的数据不是数字，那么数据就绑定不上去
v-model.trim = “phone” 自动pass 前后的两个空格
……