差值表达式{{}} 存在一个问题,为了解决这个闪烁问题使用:v-cloak
1、提供样式
<style type="text/css">
[v-cloak]{
display:none;
}
</style>
2、在差值表达式所在的标签中添加v-cloak指令
<div v-cloak>{{msg}}</div>
背后原理: 先通过样式隐藏内容,然后在内存中进行值的替换,替换好之后再显示最终的结果
v-once
<div v-once>{{info}}</div>
v-once的引用场景:如果显示的信息后续不再修改,可以使用v-once,可以提高性能
双向数据绑定
用户修改页面中表单中输入域的内容,会影响数据的内容变化
数据中的内容变化,会影响页面中表单数据内容
阻止冒泡、阻止默认行为
event.stopPropagation(); // 阻止冒泡
event.preventDefault(); // 阻止默认行为
事件修饰符形式
<a @click.stop = "handle">跳转</a> // 阻止冒泡
<a @click.prevent= "handle">跳转</a> // 阻止默认行为
<a @click.stop.prevent= "handle">跳转</a> // 既阻止冒泡又阻止默认行为
按键修饰符:回车也能触发表单提交
按键修饰符:按删除能全删除
表单操作
自定义指令
计算属性
需要有返回值return
计算属性是基于data中的数据变化,如果data变化计算属性也会跟着变
计算属性和方法的区别
监听器
会一直监听属性 一旦发生变化就会触发方法,从而执行watch业务逻辑
监听器处理异步,是计算属性做不到的
过滤器
Vue生命周期
响应式修改数组的方法
vm.$set(list, 1, 'lemon')
this.$set(list, 1, 'lemon')
监听器可以异步监听数据变化,一旦变化就会触发绑定的函数,函数中可以进行一些业务逻辑处理
组件化开发
组件注册、用法
驼峰式命名方式在使用的时候要转换小写+短横线
<my-component></my-component>
组件间数据交互
兄弟传值
组件插槽
具名插槽
作用域插槽
组件实例
https://www.jianshu.com/p/3b2caf500165
1、删除商品
子组件cart
<li @click='delEvent(item.id)'>删除</li>
delEvent(id) { // 事件触发
this.$event('del-li',id)
}
父组件监听事件
<cart @del-li="handleDel($event)'></cart> // $event接收传递的数据
handleDel(id) { // 监听
// 根据id删除list中对应的数据
// 找到id对应的数据索引
// 根据索引删除对应数据
let index = this.list.findIndex(item=> item.id == id)
this.list.splice(index,1)
}
2、购物车数值添加和删除
子组件cart
<a href='' @click.prevent='sub(item.id)'> -</a>
<input type="text" class="num" :value="item.num" @blur="changeNum(item.id, $event)"/>
<a href="" @click.prevent='add(item.id)'>+</a>
changeNum(id,event) { // $event事件input对象,可以通过$event.target.value获取输入的值
this.$emit('change-num', {
id: id,
type: 'change',
num: event.target.value
})
},
sub(id) {
this.$emit('change-num',{
id: id,
type: 'sub'
})
},
add(id) {
this.$emit('change-num',{
id: id,
type: 'add'
})
}
父组件监听事件
**父组件监听事件**
<cart @del-li="handleDel($event)' @change-num='handlechangeNum($event)'></cart> // $event接收传递的数
handlechangeNum(val) {
// 根据子组件传递过来的数据,更新list中对应的数据
if(val.type == 'change') {
this.list.some(item=>{
if (item.id == val.id) {
item.num = val.num
return true; // 终止遍历
}
})
}else if (val.type='sub') {
this.list.some(item=>{
if (item.id == val.id) {
item.num -=1;
return true; // 终止遍历
}
})
}else if (val.type=='add') {
this.list.some(item=>{
if (item.id == val.id) {
item.num +=1;
return true; // 终止遍历
}
})
}
}
restful形式的url
基于promise发送Ajax请求
vue-router路由
应用:
路由组件传递参数
法1:
命名路由
路由跳转
Fetch
get请求方式
post请求方式
put请求方式
Axios
返回
babel
ES6 按需导入导出、默认导入导出=》 import和export
webpack
快速初始化一个包管理配置文件
运行index.html报错,需要安装配置webpack 构建工具,使浏览器支持js
webpack配置打包入口与出口
webpack自动打包
html-webpack-plugin插件 运行localhost:8080即可运行项目index.html文件
webpack打包运行完成后自动运行浏览器
"dev": "webpack-dev-server --open", 即可
css文件loader
less文件loader
scss、sass文件loader
postcss自动添加css兼容前缀(浏览器兼容前缀)
图片、文字文件loader
打包处理高级js语法(如类)
配置vue组件的加载器