页面初始化 渲染列表
mounted () {
this.getList()
}
11-表格案例-axios版-删除
-
给删除按钮绑定事件 @click.prevent="del()"
-
在methods定义一个del()函数
-
删除逻辑在del函数实现
<a href="#" class="btn btn-danger" @click.prevent="del(item.id)">删除
del (id) { // 确认提示框 if (confirm('亲，确认删除吗？')){ // 删除的是还需要ID // axios 去发送删除请求 axios.delete(
http://localhost:3000/brands/${id}) .then(res=>{ // 处理成功时候 更新列表 this.getList() }).catch(err=>alert('删除品牌失败')) } },
12-表格案例-axios版-搜索-分析
- 要完成搜索功能 首先需要服务端支持
- 是支持模糊查询的。http://localhost:3000/brands?brandName_like=关键字
- 当输入的内容修改的时候，把输入的内容发送给服务器。
- 通过axios来进行请求。把获取的数据更新data中的list即可。
13-侦听器watch-文档分析
- 使用场景：在依赖data数据的时候，如果获取新数据的时候有异步操作，使用侦听器。
- 当依赖的数据没有改变的时候 不会触发侦听器。
14-侦听器watch-基本使用
data: {
message: 'hi vue'
},
// 侦听器 其实就是 watch 选项
watch: {
// 监听数据的改变 监听的字段做为函数的名称
message (now, old) {
console.log(now, old)
setTimeout(() => {
this.str = '321'
}, 1000)
}
},
15-表格案例-axios版-搜索-实现
<input type="text" class="form-control" v-model="searchValue">
data: {
list: [],
brandName: '',
searchValue: ''
},
watch: {
searchValue (now, old) {
//改变时候 去发送xhr请求
axios.get(`http://localhost:3000/brands?brandName_like=${now}`)
.then(res => {
//搜索成功 更新列表 依赖搜索结果
this.list = res.data
}).catch(err => alert('搜索失败'))
}
},
16-vue组件-体验组件（重点）
- 在功能一致的时候 且会多次实现 封装组件
17-vue组件-组件特点
- 复用
- 组件内的数据是独立的
18-vue组件-全局组件
/*定义组件*/
/*1. 使用 Vue.component() 定义全局组件*/
/*2. 两个参数 第一个参数
组件名称 规则：小写字母加中线 a-b 或者 使用驼峰命名 userName 使用时 user-name */
/*3. 第二个参数 组件的选项 配置对象和你实例Vue的选项一样 没有el选项*/
Vue.component('button-count', {
// methods computed mounted ...
// data选项必须是带返回值是一个对象的函数
data () {
return {
//数据申明在这里
count: 0
}
},
// 使用 template 选项去配置
template: `<button class="btn btn-success" @click="count++">点击了{{count}}次</button>`
})
19-vue组件-局部组件
/*定义 局部 组件 需要使用选项 components */
components: {
// key 就是组件名称
// value 组件的配置选项
'span-com': {
template: `<div><span>span1</span><span>span2</span></div>`
}
},
20-vue组件-组件嵌套
<div id="app">
<h1>{{message}}</h1>
<div-com></div-com>
</div>
<script>
Vue.component('div-com',{
template:`<div>父组件 <span-com></span-com></div>`
})
Vue.component('span-com',{
template:`<span>子组件</span>`
})
21-vue组件-组件通讯几种情况
- 通讯：组件与组件数据交换
- 父子情况：
- 父组件向子组件传值
- 子组件向父组件传值
- 兄弟组件传值
- 毫无关系的组件传值
22-vue组件-父向子传值-props
<custom-div count="100" name="xxx"></custom-div>
</div>
<script>
// 子组件
Vue.component('custom-div', {
// props 是组件的一个选项 定义多个属性
// 定义书写在组件标签上的属性 需要关联
// 通过 props 配置 可以使用 自定义组件的属性
// 通过 props 配置 数据可以在插值表达式中使用
// 和data申明的数据一样的特点 响应式数据
props: ['count','name'],
template: `<div>子组件{{count}}--{{name}}</div>`
})
23-vue组件-父向子传值-v-bind
<custom-div :count="count" name="xxx"></custom-div>
</div>
<script>
// 子组件
Vue.component('custom-div', {
props: ['count', 'name'],
template: `<div>子组件{{count}}--{{name}}</div>`
})
// 根组件 父组件
var vm = new Vue({
el: '#app',
data: {
message: '父组件',
count: 400
},
methods: {}
})
24-vue组件-父向子传值-总结
- 子组件的选项 定义一个选项 props
- props 关联的是 使用组件时候的 定义的属性
- 父组件 通过v-bind绑定父组件的数据
