Vue概念理解
构建用户界面：将一个个数据变成页面展现出来给用户看。
组件化模式开发：将一个完整页面分割成几个大小不一的板块进行遍写开发，进行了板块分离后，板块将会被封装成一个盒子，互不影响。
板块还可以复用，一个.vue文件就是一个组件，一个组件包含三要素HTML的template模板，样式表css，脚本Js。
渐进式框架：按需引入，从小到大、从易到难。
命令式编程：被动（代码自上而下一步步按死规矩、按顺序执行，纯js）
声明式编程：主动、灵活（代码不需要按顺序执行）
比如老师渴了要喝水的例子。
命令式（老师吩咐你执行，你处于被动）：“老师渴了，xxx同学，你先站起来，凳子往后挪一下，把讲台上的水杯拿去开水间，给老师装满水，然后把茶叶烫一下，再泡。”
声明式（主动递水）：“老师你喝水！”
虚拟dom理解:其实就是三个环节，数据---虚拟dom---真实页面，直接将虚拟dom这个环节看成一个数据的中转缓存站或者是一个桥梁，将拿到的数据先经过虚拟dom进行第一轮的加工，加工过后，虚拟dom的数据就变成真正的dom，然后就可以进行页面的渲染，显示界面。
diff算法：差异对比算法，当数据发生变化时，vue是这样更新节点的，找到要更新的数据进行对应更新，计算出虚拟dom中被改变的部分,然后针对该部分进行原生DOM操作,而不用重新渲染整个页面。
vue的cdn版本引入：
- 开发版本：有报错提示信息，编写代码的时候用，vue.js未经过压缩。
- 生产版本：没有报错提示，是项目上线的时候采用，vue.min.js经过压缩。
将 Vue 应用挂载到一个 DOM 元素上(绑定容器)。
传统方式：
vue3.0的写法：先创建vue应用，然后挂载到跟节点上作为渲染的起点。
<div id="app">
{{ message }}
</div>
const App = {
data() {
return {
message: 'Hello Vue!!'
}
}
}
Vue.createApp(App).mount('#app') //关联容器
data 选项是一个函数，返回一个对象，Vue 在创建新组件实例的过程中调用此函数。
computed对比methods
- computed 依赖缓存、重新取值
- methods 重新渲染、重新调用
可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
监听属性 watch
watch 来查看data函数当中响应数据的变化。
全局配置: Vue.config.productionTip 阻止 vue 在启动时生成生产提示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title></title>
</head>
<body>
<script type="text/javascript">
Vue.config.productionTip = false
</script>
</body>
</html>
一个容器只能对应一个vue实例，当多个同名容器对应一个实例，Vue默认是自上而下执行，只会在第一个容器生效。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入vue3.0 -->
<script src="https://unpkg.com/vue@next"></script>
<title></title>
</head>
<body>
<!-- 容器1 -->
<div id="app">
{{ message }}
</div>
<!-- 容器2 -->
<div id="app">
{{ message }}
</div>
<!-- 容器3 -->
<div id="app">
{{ message }}
</div>
<script type="text/javascript">
const App = {
data() {
return {
message: 'Hello Vue!!'
}
}
}
Vue.createApp(App).mount('#app')
</script>
</body>
</html>
多个vue实例对应同一个容器的情形，也只会在最先定义的容器生效：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入vue3.0 -->
<script src="https://unpkg.com/vue@next"></script>
<title></title>
</head>
<body>
<!-- 容器1 -->
<div id="app">
{{ message }} {{message1}} {{message2}}
</div>
<script type="text/javascript">
const App = {
data() {
return {
message: 'Hello Vue!!'
}
}
}
Vue.createApp(App).mount('#app')
const App1 = {
data() {
return {
message1: 'this is a nice day'
}
}
}
Vue.createApp(App1).mount('#app')
const App2 = {
data() {
return {
message2: 'beautiful day!'
}
}
}
Vue.createApp(App2).mount('#app')
</script>
</body>
</html>
所以vue实例和容器只能是一对一的关系。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入vue3.0 -->
<script src="https://unpkg.com/vue@next"></script>
<title></title>
</head>
<body>
<!-- 容器1 -->
<div id="app">
{{ message }}
</div>
<!-- 容器1 -->
<div id="app2">
{{message1}}
</div>
<!-- 容器1 -->
<div id="app3">
{{message2}}
</div>
<script type="text/javascript">
const App = {
data() {
return {
message: 'Hello Vue!!'
}
}
}
Vue.createApp(App).mount('#app')
const App1 = {
data() {
return {
message1: 'this is a nice day'
}
}
}
Vue.createApp(App1).mount('#app2')
const App2 = {
data() {
return {
message2: 'beautiful day!'
}
}
}
Vue.createApp(App2).mount('#app3')
</script>
</body>
</html>
vue的胡子语法：即使未经data函数定义数据，{{}}双大括号里是支持js表达式和运算符的。
<div id="app">
{{1+1}}
{{10*2}}
{{Date.now()}}
{{message.toUpperCase()}}
{{a?'true':'false'}}
</div>
<script type="text/javascript">
const App = {
data() {
return {
message: 'Hello Vue!!'
}
}
}
Vue.createApp(App).mount('#app')
插值语法和指令语法
- 插值语法就是双大括号，用于读取data中定义的数据。
- 指令语法就是v-开头的，比如v-bind
单向数据绑定和双向数据绑定
v-bind 单向数据绑定：当页面进行修改值时，并不会直接影响data中的数据，数据是写死的 (数据只能单向地从data流向页面)。
v-model 双向数据绑定：当页面进行修改值时，data中定义的数据也会随之更新，值得注意的是，v-model只针对表单元素使用，其他标签使用会报错。（数据不仅能从data流向页面，还可以从页面回流到data当中。）
<div id="app">
<input type="text" :value="message">
<input type="text" v-model="message">
<input type="text" v-model:value="message">
<span v-model="message"></span>
</div>
<script type="text/javascript">
const App = {
data() {
return {
message: 'Hello Vue!!',
}
}
}
Vue.createApp(App).mount('#app')
</script>
因为v-model默认收集value值，所以v-model等价于v-model:value，也就是一个语法糖。
v-model实现原理：
vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变。
vue中获取dom元素是经过$ref绑定获取：
给元素添加ref属性 通过this.$refs.domName获取
key的作用:
key作为列表循环的唯一标识，作用主要应用了diff算法来高效的更新虚拟DOM。
路由懒加载和图片懒加载：
核心：按需加载
图片懒加载：鼠标滚轮滚到底部某个位置再加载出图片，而不是一开始就把所以图片加载出来呈现，那样会导致页面加载缓慢，卡顿。提高页面加载速度，不在可视区域内的图片先不加载，只有滚动到可视区域的时候才加载。
路由懒加载：鼠标点击的时候才加载跳转到某个位置，不点击就不加载该组件，避免页面一开始就加载所有的。 当页面很多，组件很多的时候，SPA页面在首次加载的时候，就会变的很慢。这是因为vue首次加载的时候把可能一开始看不见的组件也一次加载了，这个时候就需要对页面进行优化，就需要异步组件了。
vue路由的2种方式：hash模式和H5的history模式
- hash模式的url带#号
- history模式是我们正常看到url地址，history模式利用了 pushState() 和 replaceState() 方法（其中 replaceState() 方法是不能回退网页的），浏览器的历史记录栈： back()、forward()、go()
$route和$router的区别：
- $router为VueRouter的实例对象，里面有很多路由器对象，指向整个大的路由对象。
- $route相当于当前正在跳转的路由对象，指向我们当前映射配置中处于活跃状态的路由。
v-show和v-if的区别：
- v-show指令: 控制css的display隐藏属性变为none，只会编译⼀次；
- v-if指令: 是动态的向DOM树内添加或者删除DOM元素，不停的销毁和创建⽐较消耗性能。
- 如果某个场景下需要频繁点击则考虑使用v-show
常见的组件传值方式有哪些？
- 父子组件之间的通讯传值
- 兄弟组件传值
- 复杂组件之间的传值，Vuex状态管理
父子组件之间的通讯传值是如何实现的？
父传子：父组件先通过v-bind指令进行自定义属性的绑定，子组件在data函数中使用props选项进行接收父组件传过来的属性。
父组件：
<template>
<view>
父组件
<test :poetry="poetry"></test>
</view>
</template>
<script>
import test from '../../components/test.vue'
export default {
data () {
return {
poetry:'昨夜星辰昨夜风,画楼西畔桂堂东。'
}
},
methods: {
},
components:{
test
}
}
</script>
子组件：
<template>
<view>
子组件:{{poetry}}
</view>
</template>
<script>
export default {
props:['poetry'],
data () {
return {
}
}
}
</script>
子传父：
子组件先绑定@click事件，然后在子组件的methods定义该函数，
在该函数里头通过$emit()触发自定义事件（第一个参数的事件名，第二个参数是携带参数），
父组件通过@绑定子组件通过$emit()传递过来的事件名，然后自己再重新定义一个新的事件名，在父组件的methods里使用传递过来的参数。
--------------------------------------------------------------------------------------------------------------------------------
以下也是一种理解方式：
子组件想要给父组件传值，需要绑定事件处理函数，
然后使用$emit()进行触发通知，告诉父组件，我要发送数据了，记得签收，
$emit()接受2个参数，第一个参数：事件处理函数的事件名称，第二个参数：传递的数据。
父组件想要接收子组件的传过来的值，需要在注册的子组件上通过@符
绑定在子组件$emit()里面事件处理函数的名称，然后再命一个新的事件处理函数。
在methods定义，再使用形参来接收。
把子组件传递过来的数据做一个保存，然后渲染在视图层上。
子组件：
<template>
<view>
子组件:
<button type="default" @tap="sendInfo()">发送信息</button>
</view>
</template>
<script>
export default {
data () {
return {
title: '今天天气不错！'
}
},
methods:{
sendInfo:function(){
this.$emit('send',this.title)
}
}
}
</script>
父组件：
<template>
<view>
父组件:{{showTitle}}
<test @send="getInfo"></test>
<!-- <test @send="getInfo()"></test> 多了小括号是undefined -->
</view>
</template>
<script>
import test from '../../components/test.vue'
export default {
data () {
return {
showTitle:''
}
},
methods: {
getInfo:function(title){
console.log(title)
this.showTitle = title
}
},
components:{
test
}
}
</script>
vue-router路由使用
<router-link></router-link> 标签相当于<a></a>，用于跳转，<router-link to="/home">
当中的to属性是进行导航跳转，相当于a标签的href路径指定
动态绑定to属性：<router-link :to="/home">
如果在其他标签上使用导航跳转，只需如此打个tag标签：<router-link to="/home" tag="li"> </router-link>
<router-view></router-view>标签 将显示与 url 对应的组件，可以把它放在任何地方，纯属就是个摆位置用的，以适应你的布局。
