1 按键修饰符
-@keyup.enter
2 数据双向绑定
-v-model：input
3 单选和多选
-checkbox=true
-checkbox=[value,value]
-radio='' --->value值
4 购物车
-基本的
-带全选的
-带加减的
5 v-model
-lazy
-number
-trim
6 生命周期钩子
-8个
-mounted：定义再vue对象中的变量，函数，初始化完成了
7 前后端交互三种方式
-jq的ajax（不建议使用）
-fetch（内置：可能会有浏览器不支持）
-axios：基于它再封装一层
-跨域问题
-后端解决（常用的）
-前端使用代理（测试阶段，正式上线不会用）
-nginx转发
8 计算属性
computed：写个函数，函数名，直接当变量用
9 虚拟dom替换的diff算法
1 组件化开发介绍
扩展 HTML 元素，封装可重用的代码，目的是复用
-例如：有一个轮播，可以在很多页面中使用，一个轮播有js，css，html
-组件把js，css，html放到一起，有逻辑，有样式，有html
全局组件：整个项目中都能使用的组件
局部组件：只能再局部使用
2 注册全局组件和局部组件
3 组件间通信
3.1 父传子
在子组件上新增属性
<myhead myname="lqz"></myhead>
在子组件中：定义，myname要跟新增的属性名一致
props:['myname']
在子组件中就可以使用myname变量了，从父组件传入的
注意加不加:的区别
<myhead :myname="lqz"></myhead>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- <myhead myname="lqz"></myhead>-->
<!-- <hr>-->
<!-- <myhead :myname="name"></myhead>-->
<hr>
<myhead :mybool="false"></myhead>
</div>
</body>
<script>
Vue.component('myhead', {
template: `
<div>
<button>我是按钮</button>
我的名字是：
<br>
传入的布尔值是：{{typeof mybool}}
</div>
`,
// props:['myname','mybool']
//类型限制
props: {
mybool: Boolean,
}
})
var vm = new Vue({
el: '#app',
data: {
name: '迪丽热巴'
},
})
</script>
</html>
3.2 通过事件实现子传父
3.2 通过ref实现父子通信
3.3 通过事件总线实现组件通信
4 动态组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="who='myhead1'">显示组件1</button>
<button @click="who='myhead2'">显示组件2</button>
<button @click="who='myhead3'">显示组件3</button>
<keep-alive>
<component :is="who"></component>
</keep-alive>
</div>
</body>
<script>
Vue.component('myhead1', {
template: `
<div>
<button> myhead1的按钮</button>
<div>
我是组件1111的样子
</div>
</div>
`,
})
Vue.component('myhead2', {
template: `
<div>
<button >myhead2的按钮</button>
<div>
我是组件222的样子
<input type="text">
</div>
</div>
`,
})
Vue.component('myhead3', {
template: `
<div>
<button >myhead3的按钮</button>
<div>
我是组件333的样子
<button>点我</button>
<hr>
<span>xxx</span>
</div>
</div>
`,
})
var vm = new Vue({
el: '#app',
data: {
who: 'myhead1'
},
})
//ref属性如果加在普通标签上，通过this.$refs.myinput，取到的就是这个标签
//ref属性如果加在组件上，通过this.$refs.mychild，取到的就是这个组件,拿到组件的值，拿到组件的方法，并且可以执行
</script>
</html>
5 vue-cli创建项目
1 安装node环境：最新是14
-跟python比较
-node python
-npm pip3
-安装cnpm，淘宝做的npm，以后使用npm的地方，都是用cnpm
2 安装cli脚手架
-cnpm install -g @vue/cli
3 创建项目
vue create my-project # 命令行
# OR
vue ui #图形化界面
6 目录介绍
node_moduls:当前项目依赖的所有第三方包，把项目给别人，这个文件夹删掉
-npm install 就会又把依赖装上
-pi3 install -r request.txt
public:(你不用动)
index.html 单页面开发（整个vue项目就这一个页面）
favicon.ico 网站图标
src：（经常动，你的所有代码）
assets ：静态资源，图片，js，css
components：组件，小组件
router：装了Router才有，否则没有，页面跳转
store：vuex才有的，状态管理器
views：组件，页面组件
App.vue 根组件
main.js 整个项目的入口js
.gitignore # git的忽略文件，讲到git才知道
babel.config.js # 不用动
package.json #依赖的模块
package-lock.json #依赖的模块
README.md # 介绍
重点
每一个组件都有三部分
#html内容写在这
<template>
<div class="home">
</div>
</template>
#js内容
<script>
export default {
name: 'Home',
data(){
return {
a:'asdfasdfasdfasdfasd'
}
},
}
</script>
#style的内容
<style>
</style>
把vue项目编译成纯html，css，js
webpack:模块化
npm run build
在项目路径下有个dist文件夹：html，css，js