Vue包含异族观察数组的变异方法,所以他们将会触发视图更新;这些方法如下:
push()/pop()/shift()/unshift()/splice()/sort()/reverse()
methods:{ deleteP(index){ //删除persons中指定的index的p this.persons.splice(index,1) }, updateP(index,newP){ // this.persons[index] = newP //并没有改变person本身,数组内部发生了变化,但并没有调用变异方法,此时vue不进行界面的更新! //如下操作,则是进行替换,splice是变异方法 this.persons.splice(index,1,newP) } }使用v-model绑定后,在Vue的data中设置初值即可!
data:{ username:'admin', pwd:'123457', sex:'女',//进行默认勾选value=女的选项 fonts:['football'], allCitys:[{id:1,name:'北京'},{id:2,name:'南京'},{id:3,name:'福建'}]}下面两种写法一致:
<button type="button" @click="test3($event)">test3</button><button type="button" @click="test3">test3</button> .prevent : 阻止事件的默认行为,如何链接标签将不再发生跳转动作; event.preventDefault() .stop : 停止事件冒泡(阻止单击事件继续传播,单击后续触发的效果停止) event.stopPropagation() .keycode : 操作的是某个keycode值的健 .enter : 操作的是enter键触发相应test8函数(.13同理,下面是keyup的等价写法)<input type="text" @keyup="test8" />test8(event){ if(event.keyCode==13)alert('按下enter键,context:'+event.target.value+'--keycode:'+event.keyCode) } .once : 只被触发一次fPersons是一个数组,function(p1,p2){...}为自动生成;
fPersons.sort(function(p1,p2){ //如果返回负数,p1在前面;如果返回正数,p2在前面; //1升序,2降序 if(orderType==2){ return p2.age-p1.age }else{ return p1.age-p2.age } return p2.age-p1.age; })mounted() {//初始化之后进行立即调用 , => 函数初始化时可以从外部调用内容,function()不可以 setInterval(() => { this.isShow =!this.isShow },1000)// setInterval((function (){// this.isShow =!this.isShow// },1000) },
format || ‘YYYY-MM-DD HH:mm:ss‘ 解决传入空值的情况
//自定义过滤器 ,函数对象 Vue.filter('dateString',function(value,format='YYYY-MM-DD HH:mm:ss'){ return moment(value).format(format); // return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss'); })? 按照三步进行, 引入组件, 映射到标签,使用组件标签
<template> <div> <div class="container"> <Add :addComment="addComment"/> <List :comments="comments" :deleteComment="deleteComment"/> </div> </div></template>// 按照三步进行,导入,映射到组件里,添加标签<script> import Add from './components/Add.vue' import List from './components/List.vue' export default { components: { Add, List } }</script>指定接受的属性名和属性值的类型**
<script> export default { // props: ['comment'] -->这种写法只制定了属性名,接受的内容 props: { // 指定接受的属性名和属性值的类型 comment: Object, deleteComment: Function, index: Number },方式三: 指定名称/类型/必要性/默认值
props: { name: {type: String, required: true, default:xxx}, }==注意==
? 1)此方式用于父组件向子组件传递数据
? 2) 所有标签属性都会成为组件对象的属性, 模板页面可以直接引用
? 3) 问题:a. 如果需要向非子后代传递数据必须多层逐层传递b 兄弟组件间也不能直接 props 通信, 必须借助父组件
计算属性
在computed属性对象中定义计算属性的方法
在页面中使用{{方法名}}来显示计算的结果
监视属性:
通过vm对象的$watch()或watch配置来监视指定的属性
当属性变化时, 回调函数自动调用, 在函数内部进行计算;
因此需要先赋值,避免出现warning!
计算属性高级:
通过getter/setter实现对属性数据的显示和监视
计算属性存在缓存(对象), 多次读取只执行一次getter计算
<script>computed:{ //初始化的时候就进行显示,相关的data属性发生改变的时候;就会执行计算属性 fullName1(){ //声明计算属性中的一个方法,方法的返回值作为属性值 // console.log('fullName1()',this) return this.firstName+'-'+this.lastName; }, fullName3:{ //回调函数: 1.你定义的,2.你没有调用;3.但最终它执行了 get(){ //回调函数,读取当前属性值时进行回调,计算并返回当前属性的值 return this.firstName+'-'+this.lastName; }, //set回调函数,监视当前属性值的变化;当属性值发生变化的时候进行回调,更新相关的属性数据 set(value){ //value就是fullName3的最新属性值; const names=value.split('-') this.firstName=names[0] this.lastName=name1[0] } } }, watch:{//配置监视 firstName:function(){ //监视的firstName发生变化时,执行下面的函数 // console.log(this) //就是vm对象 this.fullName2=this.firstName+'--'+this.lastName } } }) // vm.$watch 来监视lastName// vm.$watch('lastName',function(newvalue){// //更新fullName3// this.fullName3=this.firstName+'---'+this.lastName// })data
<script> data () { return { // 从localStorage中读取todos // parse解析字符串函数,将string转换成对象! 添加'[...]'防止null空值! todos: JSON.parse(window.localStorage.getItem('todos_key') || "[{title: '睡觉', complete: false},{title: '打豆豆', complete: false},{title: 'Coding', complete: true}]") // 深度进行监视todos的任何改变,就进行存取 // todos: [ // {title: '吃饭', complete: false}, // {title: '睡觉', complete: false}, // {title: '打豆豆', complete: false}, // {title: 'Coding', complete: true} // ] } },监视信息
<script> watch: {// 深度监视 todos: { deep: true,// 深度监视 handler: function(newValue){ //将todos最新的值(json数据),先转换成String保存到localStorage window.localStorage.setItem('todos_key',JSON.stringify(newValue)) } } }绑定事件监听
触发事件// 触发事件(只能在父组件中接收)
注意:
1) 此方式只用于子组件向父组件发送消息(数据) 2) 问题: 隔代组件或兄弟组件间通信此种方式不2.8.1. 订阅(接受)消息 接收方
import PubSub from 'pubsub-js'PubSub.subscribe('msg', function(msg, data){})....<script> mounted () {// 执行异步代码 //订阅消息 ,改为 => 函数(才可以调用本函数范围外的deleteTodo函数) //msg不能省略!!多余的! PubSub.subscribe('deleteTodo', (msg, index) => { this.deleteTodo(index) }) }2.8.2. 发布消息 发送方
import PubSub from 'pubsub-js'PubSub.publish('msg', data)...<script> deleteItem () { const {todo,index,deleteTodo} = this const nowtitle=todo.title if(window.confirm('确认删除'+nowtitle+' 吗?')){ // this.deleteTodo(index) PubSub.publish('deleteTodo', index) } }2.8.3. 注意1)
? 优点: 此方式可实现任意关系组件间通信(数据)
2.8.4. 事件的 2 个重要操作(总结)
? 1) ==绑定事件监听 (订阅消息==)
? 目标: 标签元素
? 事件名(类型): click/focus
? 回调函数: function(event){}
? 2) ==触发事件 (发布消息)==
? DOM 事件: 用户在浏览器上对应的界面上做对应的操作自定义: 编码手动
2.9.1. 理解
? 此方式用于父组件向子组件传递标签数据 (即在子组件中仅预留好slot标签体,在父组件中保留数据供子组件调用)
2.9.2. 子组件: Child.vue ==[只需要书写slot +name 标签调用即可! 不需要调用的,自行书写]==
<template> <div class="todo-footer"> <!-- <input type="checkbox" v-model="isAllCheck"/> --> <slot name="AllCheck"></slot> <!-- <span>已完成{{completeSize}} / 全部{{todos.length}}</span> --> <span> <slot name="count"></slot> </span> <!-- <button class="btn btn-danger" v-show="completeSize>0" @click="deleteCompleteTodos">清除已完成任务</button> --> <slot name="delete"></slot> </div></template>2.9.3. 父组件: Parent.vue ==[在script中完善每个标签体/slot的对应的方法等功能]==
<template><todo-footer> <input type="checkbox" v-model="isAllCheck" slot="AllCheck"/> <span slot="count">已完成{{completeSize}} / 全部{{todos.length}}</span> <button class="btn btn-danger" v-show="completeSize>0" @click="deleteCompleteTodos" slot="delete">清除已完成任务</button> </todo-footer></template>/* src/util/StorageUtil.js 使用localStorage存储数据的工具模块 1. 函数 2. 对象 需要向外暴露1个功能,还是多个功能 : 两个方面*/// export default {} 向外暴露一个对象!export default { saveTodos (newValue){ //将todos最新的值(json数据),先转换成String保存到localStorage window.localStorage.setItem('todos_key',JSON.stringify(newValue)) }, readTodos () { // 从localStorage中读取todos // parse解析字符串函数,将string转换成对象! 添加'[...]'防止null空值! return JSON.parse(window.localStorage.getItem('todos_key') || '[]') }}调用方法
<script> import storageUtil from './util/storageUtil' data () { return { // 从localStorage中读取todos // parse解析字符串函数,将string转换成对象! 添加'[...]'防止null空值! // todos: JSON.parse(window.localStorage.getItem('todos_key') || '[]') todos: storageUtil.readTodos() .... watch: {// 深度监视 todos: { deep: true,// 深度监视 /* handler: function(newValue){ //将todos最新的值(json数据),先转换成String保存到localStorage // window.localStorage.setItem('todos_key',JSON.stringify(newValue)) storageUtil.saveTodos(newValue) }, */ handler: storageUtil.saveTodos, //14K的写法水平 } }, 在线文档 https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
下载 npm install vue-resource --save
可在main.js中进行声明,步骤
? // 引入模块 import VueResource from ‘vue-resource‘
? // 使用插件 Vue.use(VueResource)
编码
mounted () { //使用VueResource 发ajax 请求获取数据,在生命周期的初期就开始执行 const url='https://api.github.com/search/repositories?q=vu&sort=start' this.$http.get(url).then( response => { //成功了 const result = response.data //得到第一个最受欢迎的repo const mostRepo =result.items[0] this.repoUrl = mostRepo.html_url this.repoName = mostRepo.name }, response => { //失败了 alert('请求失败了!') } )在线文档
https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
下载:
npm install axios --save
编码
? // 在script中引入模块 import axios from ‘axios
//使用axios 发ajax 请求获取数据 axios.get(url).then( response => { //成功了 const result = response.data //得到第一个最受欢迎的repo const mostRepo =result.items[0] this.repoUrl = mostRepo.html_url this.repoName = mostRepo.name }).catch(error =>{ //失败了 alert('请求失败了!') })
