深圳网站建设列表网seo网站推广的主要目的是什么
该笔记是记录尚硅谷的Vue学习视频的笔记，视频地址为：学习视频地址
初始Vue
Vue组件化的特点
- 组件化
- 声明式编码
- 虚拟DOM+Diff算法，尽量复用DOM节点
H5的组件，是把某一个模块封装，里面写HTML\CSS\JS等，算是一个页面里面的某个模块。在移动端，可能算是一个单独的view
移动端的组件，指的是将某些功能类似或者业务封装为组件
脚手架，即是一种安装Vue的方法
创建Vue实例
var vueName = new Vue()
Vue创建后，需不需要传递参数？传几个参数？
只传一个参数，并且该参数是一个对象类型（对象类型，使用{}），该对象被称为配置对象
配置对象里面，是key: value的形式
key是约定好的，不能修改
value可以改，但是value的类型不能改
<div id="app"><h2>学校:{{schoolName}}</h2><p>年龄:{{age}}</p>
</div>var vueName = new Vue({el:"#app"//el用于指定当前Vue实例为哪个容器服务data:{//data中用于存储数据，数据供el所指定的容器去使用schoolName:"Vue一中",age: "18"}
})
el: '#root'
el是element的简称
#app，是一个id选择器
作用是：将Vue创建的实例，与div容器建立链接
Vue实例和容器是一一对应
模板语法
Vue模板语法有2大类：
- 插值语法（双大括号表示）
功能：用于解析标签体内容
语法：{{xxx}}，xxx是js表达式，且可以直接读取到data中所有属性。 - 指令语法（v-开头）
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
举例：v-bind:href="xxx"或者 简写为:href="xxx"，xxx同样要写js表达式，且可以直接读取到data中所有属性，
<a href="url">链接地址</a>
这样，a标签的url地址仅仅就是“url”字符串
<a v-bind:href="url">链接地址</a>
使用v-bind，会将url字符串，看成表达式执行，替换为data里面的key为url的value值
在控制台可以看到，上面的代码，转换为：
<a href="https://www.baidu.com">链接地址</a>
v-bind会将原来的字符串，当做表达式去执行
Vue中有2种数据绑定的方式：
v-bind是单向绑定，数据只能从data流向页面
v-model是双向绑定
v-model只能应用在表单元素（输入类元素）上
el与data的两种写法
el
方法一：el:"#app"
方法二：vueName.$mount('#app')
data
方法一：对象式
data:{//data中用于存储数据，数据供el所指定的容器去使用schoolName:"Vue一中",age: "18",url: "https://www.baidu.com"
}
方法二：函数式
data:function(){//data中用于存储数据，数据供el所指定的容器去使用return{schoolName:"Vue一中",age: "18",url: "https://www.baidu.com"}
}
可简写为：
data(){//data中用于存储数据，数据供el所指定的容器去使用return{schoolName:"Vue一中",age: "18",url: "https://www.baidu.com"}
}
MVVM模型
M：模型（Model）：data中的数据
V：视图（View）：模板代码
VM：视图模型（ViewModel）：Vue实例
data中所有的属性，最后都出现在了vm身上
vm身上所有的属性，及Vue原型上所有属性，在Vue模板中都可以直接使用
数据代理
defineProperty动态添加一个属性：
let person = {name: '张三',sex: '男'}//需要三个值：要加属性的对象，要加属性的名字，要加属性的值（配置项）Object.defineProperty(person, 'age', {value: 18})console.log(person);//{name: '张三', sex: '男', age: 18}
数据代理：通过一个对象代理，对另一个对象中属性的操作（读/写）
主要是通过 get、set方法实现
事件绑定
- 使用
v-on:xxx或者@xxx绑定事件，其中xxx是事件名； - 事件的回调需要配置在methods对象中，最终会在vm上
- methods中配置的函数，不要使用箭头函数！否则this就不是vm了
- methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象
@click = "demo"和@click = 'demo($event)'效果一致，但后者可以传参
传参，只需要在方法后面加()即可
如果@click后面跟的调用函数没有写()，则函数的实现里面有默认参数event
如果()有自定义参数，则没有event；想要event则 需要写上参数 $event
Vue中的事件修饰符：
- prevent：阻止默认事件（常用）
- stop：阻止事件冒泡（常用）
- once：事件只触发一次（常用）
- capture：使用事件的捕获模式
- self：只有event.target是当前操作的元素时，才触发事件
- passive：事件的默认行为立即执行，无需等待事件回调执行完毕
<a href="https://www.baidu.com" @click.prevent="showInfo">这是链接地址</a>
<a href="https://www.baidu.com" @click.once="showInfo">这是链接地址</a>
键盘事件
@keydown 键盘按键按下
@keyup 键盘按键松手
Vue中常用的按键别名：
回车 enter
删除 delete
退出 esc
空格 space
换行 tab
上 up
下 down
左 left
右 right
计算属性
在引入计算属性之前，先看几个不用计算属性的例子，慢慢引出 计算属性
需求：
分别输入姓和名字，最后组合成姓名
插值法
即，使用{{}}
<div id="app"><!-- v-model双向绑定 -->姓：<input type="text" v-model:value="firstName"><br><!-- v-model:value 可简写为 v-model -->姓：<input type="text" v-model="firstName"><br>名：<input type="text" v-model="lastName"><br>全名：<span>{{firstName +"-"+ lastName}}</span><br><!-- 或者 -->全名：<span>{{firstName}}-{{lastName}}</span><br><!-- 不管输入几位，姓只要前三位 -->全名：<span>{{firstName.slice(0, 3)}}-{{lastName}}</span><br></div><script type="text/javascript">var vueName = new Vue({el:"#app",data:{firstName: "张",lastName: "三"}})</script>在firstName.slice(0, 3)里面，仅仅是截取前三位的需求，如果里面还有各种sao操作，那{{}}里面要写的代码太多了，因此，可以写到一个methods里面
使用methods方法
<div id="app">全名：<span>4{{fullName()}}</span><br></div>var vueName = new Vue({el:"#app",data:{firstName: "张",lastName: "三"},methods:{fullName(){return this.firstName +"-"+ this.lastName;}}})
计算属性
什么是属性？
对于Vue来说，data里面的数据，都是属性
计算属性：
要用的属性不存在，要通过已有属性计算得来
拿现有的属性，去加工、计算，生成一个全新的属性
- 计算属性不放在data里面，要放在computed里面
里面的属性，是一个对象
对象里面有一个get方法
get方法里面的this是vm
计算属性最终会出现在vm上，直接读取使用即可
<body><div id="app"><!-- v-model双向绑定 -->姓：<input type="text" v-model:value="firstName"><br><!-- v-model:value 可简写为 v-model -->姓：<input type="text" v-model="firstName"><br>名：<input type="text" v-model="lastName"><br><!-- 写4个调用，只被调用一次，get有缓存 -->全名：<span>计算属性: {{fullName}}</span><br>全名：<span>计算属性: {{fullName}}</span><br>全名：<span>计算属性: {{fullName}}</span><br>全名：<span>计算属性: {{fullName}}</span><br>全名：<span>计算属性: {{fullName}}</span><br></div><script type="text/javascript">var vueName = new Vue({el:"#app",data:{firstName: "张",lastName: "三"},computed:{fullName:{// get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值// get什么时候调用？1. 初次读取fullName的时候 2.所依赖的数据发生变化时get(){console.log('get被调用');return this.firstName + '-' + this.lastName;},// set什么时候被调用？当fullName被修改时set(value){console.log("set被调用", value);const array = value.split('-')this.firstName = array[0];this.lastName = array[1];}}}})</script></body>
当只读不改（只使用get不使用set），可以简写
computed:{// 是一个函数fullName2:function(){console.log("当get使用");},fullName3(){console.log("当get使用");}}2023年
监听属性
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- <script src="../js/v2.6.10/vue.js"></script> --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><style type="text/css">.active{color: red;}</style></head><body><div id="app"><h2>今天天气很{{info}}</h2><button @click="changeWeather">切换天气</button></div><script type="text/javascript">var vueName = new Vue({el:"#app",data:{isHot: true},computed:{info(){return this.isHot ? "炎热" : '凉爽'}},methods:{changeWeather(){this.isHot = !this.isHot;}},watch:{//监听isHot:{immediate: true,//初始化的时候，让handler调用一次//handler什么时候调用？当isHot发生改变的时候handler(newValue, oldValue){//可以有两个参数console.log("天气被修改了");}}}})</script></body>
</html>
//监视多级结构中某个属性的变化"numbers.a":{//监视多级结构中，所有属性的变化deep:true,handler(){console.log("a被改变了")}}