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