Vue提高

Vue提高

后端主要是做数据交互，所以只需要了解单页面开发，知道怎么找在哪里放数据

• vue常用技巧:style/条件渲染，列表渲染，获取表单数据，声明周期，vue数据交互
• 不常用技巧:计算属性，侦听属性，过滤器，自定义指令
• vue的组件开发:js新语法规则!很重要、组件实现股票系统，组件开发单页面(同页面切换不同组件)
• 路由

1.选项卡demo

vue精髓是数据驱动视图，从数据出发，将数据和视图绑定。不同于jquery的精髓是dom操作：获取标签，绑定事件，业务逻辑功能；vue无论是条件渲染，列表渲染、获取表单数据，都是以数据为核心

2.常用属性

2.1控制style属性

style属性和class属性一样可放字典，对象，列表
列表表示多个对象的引入
用到很少

2.2条件渲染，控制标签显示隐藏用:v-if v-else v-else-if

<div v-if="bool1"> 显示 </div>
<div v-else> 隐藏 </div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			bool1:true,
			bool2:false
		}
	})
</script>

v-if false是删除标签隐藏，执行效率不太高
v-else 须和v-if连着用
多重渲染 就是v-if后面跟着v-else-if 和别的语言一样

v-show 和vi-if的区别就是vi-show隐藏标签是display=none

还有三元运算符

2.3脏检查机制 属性

一直轮询data看里面哪个属性改变了。一旦改变，脏检查就开启，把页面上所有关于改变了的属性重新去渲染

2.4列表和对象的循环渲染 v-for

循环显示到页面中,
列表要显示下标就v-for="(i,j) in list "
对象 v-for =“i in object1” i 表示的是value,想显示key就：v-for=’(i,j) in object’ i是valuej是key

与python里的拆包很像

<div id='app'>
	<ul>
		<li v-for='(i,j) in list1'>{{ j+1 }}、{{ i }}</li>
		<li v-for="(value,key) in object">{{key}}:{{value}}</li>
	</ul>
</div>

<script>
var vm = new Vue({
	el:'#app',
	data:{
		list1:[1,2,3],
		object1:{'name':'laowang','age':'50'}
	}
})
</script>

2.5所有表单form的控件数据双向绑定 指令 v-model=""

v-model的值是vue中接收value值的变量名字典的key名，表单数据双向绑定

下拉菜单select，数据双向绑定

用于～

<div id='app'>
	<input type='text' v-model="txt1">
</div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			txt1:''
		}
	})
</script>

区分单向双向数据绑定：
单向：data里面什么数据，页面就显示
双向：v-model指定data里的属性绑定，页面改动，data里改动，联动改变；数据可以驱动视图，视图也可以驱动数据

2.6单选框复选框数据绑定

radio单选框传的是value，radio再vue里不绑定name都可以实现只取一个

checkboc复选框传的也是value,在data里用列表保存多个状态

<input type="radio" v-model="myradio" value='nan'>男
<input type="radio" v-model="myradio" value="nv">女

<script>
	var vm = new Vue({
		el:'#app',
		data:{
			myradio:''
			mycheckbox:[]
		}
	})
</script>

3.聊天对话框实现

还是驱动视图，从数据出发设计怎么编写(先设计data)

4.todolist demo

5.Vue实例生命周期

Vue从出生到死亡做的事，抽象成一个对象
就是Vue什么时候生效
Vue的开始从一个对象开始，相比python init new

钩子函数：执行到这个方法的时候，如果挂载了函数就执行，没有挂载就不执行

new Vue()
BeforeCreated 有个空架子，没有挂任何属性和方法
Created 初始化完毕属性和方法，把属性，方法，添加到Vue实例对象上
BeforeMonunt 把数据(属性和方法)和视图即将绑定
mounted 把所有的数据给dom对象关联，Vue才能执行 这个相当于入口函数
BeforUpdate 数据发生变化前调用 轮训data发送变化，启动脏检查
Update 数据发送变化后，和数据有关的dom对象，都发生改变

！！！取数据monuted:function(dat){xxx}

6.通过 axios获取数据

axios就是简化压缩的ajax
axios的method就是ajax里的type
then相当于ajax里的done
catch 相当于ajax里的fail
axios里的this不指向Vue实例,因为axios也是一个实例，指向窗口对象，需要手动指向Vue的实例对象

//mounted取数据
,monuted:function(dat){
	axiaos({
		url:'/index_data',
		method:'get'
	}).then(function(dat){
		vm.list1 = dat.data
	})	
	}
}

demo