vue
attribute 是元素标签的属性，property 是元素对象的属性
实例与容器之间只能是一对一的关系
vue模板语法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AS1sz0Yg-1667352039768)(C:\Users\冷\AppData\Roaming\Typora\typora-user-images\image-20221004150016465.png)]
<div id="root">
<h1>插值语法</h1>
<h3>你好</h3>
<hr/>
<h1>指令语法</h1>
<a v-bind:href="url">点我去学习</a>
</div>
<script>
new Vue({
el:'#root',
data:{
url:'https://www.baidu.com/'
}
})
</script>
数据绑定
<body>
<div id="root">
<h1>{{name}}</h1>
</div>
</body>
<script>
// el的两写法
const v = new Vue({
// el: '#root',第一种写法
data: {
name: 'shangguigu'
}
})
console.log(v)
v.$mount('#root')//第二种写法
// data的两种写法
new Vue({
el: '#root',
//第一种
data: {
name: 'shangguigu'
}
//第二种v
data:function(){
return{
name:'shangguohi'
}
}
})
</script>
MVVM模型
data中所用的属性，到最后都出现在了vm身上
vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用
Object.defineProperty方法
数据代理
通过一个对象代理对另一个对象中属性进行操作（读/写）
vue的事件处理
事件的基本使用
事件修饰符
修饰符可以连续写
键盘事件
tab必须配合keydown去使用
Vue.config.keyCodes.huiche = 13
//自定义了一个按键
计算属性
计算属性简写
只有在计算属性只读不改的时候才可以使用简写
完整写法
computed:{
fullName:{
get(){
return this.firstName+'-'+this.lastName
}
}
}
简写
computed: {
fullName() {
return this.firstName + '-' + this.lastName
}
}
监视属性
深度监视
样式绑定
绑定class样式
：class
绑定style样式
：style
条件渲染
列表渲染
列表过滤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<input type="text" placeholder="搜索" v-model="keyWord">
<ul>
<li v-for="(p, index) in persons" :key="p.id">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>
</body>
<script>
new Vue({
el: '#root',
data: {
// 用于得到输入框信息
keyWord: '',
persons: [],
person: [
{
id: '001',
name: '马东梅',
age: 18,
sex: '男'
},
{
id: '002',
name: '周东雨',
age: 17,
sex: '女'
},
{
id: '003',
name: '周杰伦',
age: 20,
sex: '男'
}
]
},
watch: {
keyWord: {
immediate: true,
handler(newvalue) {
this.persons = this.person.filter((p) => {
return p.name.indexOf(newvalue) !== -1
})
}
}
}
})
</script>
</html>
vue监测数据变化的原理
收集表单数据
过滤器
内置指令
v-text
作用：向其所在的节点渲染文本内容
与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会
v-html
v-html支持结构的解析
v-clock
v-clock指令没有值，本质是一个特殊的属性，Vue实例创建完毕并接管容器后，会删掉v-clock属性。
使用css配合v-clock可以解决网速慢时页面展示出现的{{xx}}的问题
v-once
v-once所在的节点在初次渲染后，就视为静态内容了
以后数据的改变不会引起v-once所在结构的更新，可用于优化性能
v-pre
跳过其所在节点的编译过程
可利用他跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译
通俗的说就是代码里面写的什么他就展示什么
自定义指令
自定义指令何时被调用：
1.指令与元素成功绑定时
2.指令所在的模板被重新解析时。
指令里面的this指向window
生命周期
mounted函数：VUE完成模板的解析并把真实的DOM元素放入（挂载到）页面后调用mounted函数
实例生命周期钩子
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
比如 created 钩子可以用来在一个实例被创建之后执行代码：
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// => "a is: 1"
也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。
不要在选项Property或回调上使用箭头函数
如：
created: () => console.log(this.a)
实例生命周期
在beforupdate时是生命周期钩子与页面数据未同步
组件
对组件的理解
组件--------实现应用中局部代码和资源的集合
非单文件组件
一个组件中包含n个组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<!-- 使用组件 -->
<school></school>
<hr>
<student></student>
<hr>
<hello></hello>
</div>
<div id="root1">
<hello></hello>
</div>
</body>
<script>
// 组件的使用：创建、注册、使用
// 创建school组件
const school = Vue.extend({
template: `
<div>
<h2>学校名称：{{schoolName}}</h2>
<h2>学校地址：{{address}}</h2>
<button @click="showName">点我提示</button>
</div>
`,
// 不要写el配置项，最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
data() {
// 此处data写成一个方法，是为了避免修改一个时，整个组件的数据都被修改
return {
schoolName: '尚硅谷',
address: '北京昌平'
}
},
methods: {
showName() {
alert(this.schoolName)
}
},
})
// 创建student组件
const student = Vue.extend({
template: `
<div>
<h2>学生姓名：{{studentName}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>`,
data() {
return {
studentName: '张三',
age: 20
}
},
})
// 注册全局组件
const exam = Vue.extend({
template: `
<div>
<h2>学生姓名：{{studentexam}}</h2>
<h2>学生年龄：{{age1}}</h2>
</div>
`,
data() {
return {
studentexam: 'hhh',
age1: 18
}
}
})
// 使用component注册全局组件，传入两个参数第一个是该组件使用时叫什么名字，第二个是该组件注册时的名字
Vue.component('hello', exam)
// 注册组件
new Vue({
el: '#root',
// 局部注册,只能在本容器内使用
components: {
school: school,
student: student
}
})
new Vue({
el:'#root1',
})
</script>
</html>
vueComponent
单文件组件
一个文件中值包含一个组件
vue脚手架
第一步：全局安装@vue/cli
npm install -g @vue/cli
第二步：切换到你要创建项目的目录，然后使用命令创建项目
vue create xxxxx
第三步：启动项目
npm run serve
ref
props
mixin（混入）
插件
组件的自定义事件
全局事件总线
任意组件间的通信
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
// 在创建dom之前创建一个公共的$bus，用于各个组件之间的通信，这个$bus在vue身上，代表的是vm
beforeCreate(){
// 安装全局事件总线
Vue.prototype.$bus = this
}
}).$mount('#app')
消息订阅与发布
nextTick
Vue封装的过度与动画
vue-resourse
对xml的封装
vuex
vuex工作原理
搭建vuex环境
1.通过npm i vuex下载vuex
2.通过Vue.use(Vuex)使用vuex
3.创建一个store去管理vuex
// 该文件用于创建Vuex中最为核心的store
// 引入vue
import Vue from "vue";
// 引入Vuex
import Vuex from "vuex";
// 准备actions---用于响应组件里面的动作
const actions={}
// 准备mutations---用于操作数据state
const mutations={}
// 准备state---用于存储数据
const state = {}
Vue.use(Vuex)
// 创建store
const store = new Vuex.Store({
// ...
actions,
mutations,
state
})
// 向外暴露store（导出store）
export default store
4.让所有的组件实例对象vc都能看见store
vue2只能用vuex的3版本，vue3只能用vuex的4版本
_getters配置项
vuex中的map使用
路由
vue-router是vue的一个插件库，专门用来实现SPA应用
路由的基本使用
实现样式切换
active-class
展示指定位置
<router-view></router-view>
嵌套路由
路由的query参数
命名路由
作用：简化路由的跳转路径
路由里的params参数
路由的props配置
route-link的replace属性
编程式路由导航
缓存路由组件
新的生命周期钩子
路由守卫
前置路由守卫和后置路由守卫
独享路由守卫
组件内路由守卫
路由器的两种模式
333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
