自学Vue第一天
1.vue的创建
1.想让Vue.工作，就必须创建-个Vue实例， 且要传入 一个配置对象; 2.root容器里的代码依然符合htm1规范，只不过混入了-一些特殊的Vue语法; 3.root容器里的代码被称为[Vue模板] ;
如果有重名就第一个 后面的不再执行
容器和实例是一对一的关系
//容器
// <div id="root">
// <!-- {{插值}} -->
// <p>你好我是{{name}}</p>
// </div>
<script type="text/javascript">
//实例
new Vue({
el: "#root", //数据绑定到root这个id
data: {
name:'张三',//data存放数据
}
})
</script>
2.{{}} 与v-bind
Vue模板语法有2大类:
1.插值语法:
功能:用于解析标签体内容。
写法: {{xxx}}, xxx是js表达式， 且可以直接读取到data中的所有属性。
2.指令语法:
功能:用于解析标签(包括:标签属性、标签体内容、绑定事件.)。
举例: v-bind:href="xxx" 或简写为 ;href="xxx", xxx同样要写js表达式
且可以直接读取到data中的所有属性。
3.v-bind和v-model的区别
Vue中有2种数据绑定的方式: 1.单向绑定(v-bind):数据只能从data流向页面。 2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data. 备注: 1.双向绑定般都应用在表单类元素 上(如: input、 select等 ) 2.v-model:value可以简写为v-model, 因为v- model默认收集的就是value值。
4.el和data的两种写法
data与e1的2种写法
1.e1有2种写法
(1) .new Vue时候配置e1属性。
(2).先创建Vue实例，随后再通过vm. $mount('#root')指定e1的值。
2. data有2种写法
(1).对象式
(2).函数式
如何选择:目前哪种写法都可以，以后学习到组件时，data必 须使用函数式，否则会报错。
3.个重要的原则:
由Vue管理的函数，一定不要写箭头函数，一旦写 了箭头函数，this就不再是Vue实例了。
5.MVVM模型
1.M: 模型(Model) : data中的数据 2.V:视图(View) :模板代码 3.VM: 视图模型(ViewModel): Vue实例 观察发现: 创建vue实例都用vm接受 1.data中所有的属性，最后都出现在了vm身上。 2.Vm身上所有的属性及Vue原型上所有属性,在Vue模板中都可以直接使用。
6.复习Object.defineProperty()方法
let age = 18
let person = {
name: '张三'
}
// 往对象里面添加元素
Object.defineProperty(person,'age',{
// value:18,
//还有不能枚举 修改
get(){
console.log('读取了属性')
return age
},
set(value){
console.log("有人修改了")
age = value
}
})
console.log(person)
7.数据代理
1.Vue中的数据代理: 通过vm对象来代理data对象中属性的操作(读/写) 2.Vue中数据代理的好处: 更加方便的操作data中的数据 3.基本原理: 通过0bject . defineProperty()把data对象中所有属性添加到vm上。 为每一个添加到Ivm.上的属性，都指定个getter/setter 。 在getter/setter内部去操作(读/写) data中对应的属性。
8.事件基本使用
<div id="root">
<button @click="demo">点击弹窗</button></button>
</div>
<script>
// 事件的基本使用:
// 1.使用v-on:xxx或@xxx绑定事件，其中xxx是事件名;
// 2.事件的回调需要配置在methods对象中，最终会在vm上;
// 3. methods中配置的函数，不要用箭头函数!否则this就不是vm了;
// 4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象;
// 5. @click="demo"和@click="demo($event)" 效果一致， 但后者可以传参;
let vm = new Vue({
el: "#root",
data: {
name: "zhangsan"
},
methods: {
demo(){
console.log('aa')
alert("你点击了我")
}
}
})
</script>
9.Vue中常用的事件修饰符
1. prevent:阻止默认事件(常用) ;
2.stop:阻止事件冒泡(常用) ;
3.once: 事件只触发一一次(常用) ;
4.capture:使用事件的捕获模式;
5.self:只有event. target是当前操作的元素是才触发事件;
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕;
10.Vue中常用的按键别名
1.Vue中常用的按键别名:
回车=> enter
删除=> delete (捕获“删除”和“退格”键)
退出=> esc
空格=> space
换行=> tab
上=> up
下=> down
左=> left
右=> right
2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case (短横线命名)
3.系统修饰键(用法特殊) : ctrl、alt、 shift、 meta
(1).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2) .配合keydown使用:正常触发事件。
4.也可以使用keyCode去指定具体的按键(不推荐)
5. Vue. config. keyCodes.自定义键名=键码，可以去定制按键别名
11.Vue计算属性
计算属性: 1.定义: 要用的属性不存在，要通过已有属性计算得来。 2.原理:底层借助了objcet。defineproperty方法提供的getter和Isetter. 3.get函数什么时候执行? (1).初次读取时会执行一次。 (2).当依赖的数据发生改变时会被再次调用。 4.优势:与methods 实现相比，内部有缓存机制(复用)，效率更高，调试方便。 5.备注: 1.计算属性最终会出现在Vm上，直接读取使用即可。 2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要 引起计算时依赖的数据发生改变
计算属性的使用
<div id="form">
<input type="text" v-model="filseName" /><br /><br />
<input type="text" v-model="lastName" /><br /><br />
<!-- 第一种可以让两遍同时改变 -->
<!-- <p>{{filseName}}-{{lastName}}</p> -->
<!-- 第二种使用方法来显示 -->
<!-- <p>{{fallName()}}</p> -->
<!-- 第三种用计算属性来检测 -->
<p>{{fallName}}</p>
</div>
<body>
<script>
const vm = new Vue({
el: "#form",
data: {
filseName: "张",
lastName: "三"
},
// methods: {
// fallName(){
// return this.filseName+'-'+this.lastName
// }
// }
computed: {
// fallName:{
// get() {
// console.log("查看了")
// return this.filseName +'-'+this.lastName
// },
// set(value) {
// // console.log(value)
// console.log('set',value)
// const arr = value.split('-')
// this.filseName = arr[0]
// this.lastName = arr[1]
// }
// }
// 一般计算属性只读 只读的情况下可以用以下方法简写
fallName() {
console.log("查看了");
return this.filseName + "-" + this.lastName;
},
}
});
12.watch
深度监视:
(1).Vue中的watch默认不监测对象内部值的改变(1层)
(2).配置deep : true可以监测对象内部值改变(多层)。
备注:
I
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
//监听
watch: {
flag:{
handler(newVal,oldVal){
//初始化就执行一次
immediate:true
//默认不开起深度监视 因为效率
deep:true
console.log('flag被修改了'+newVal,oldVal)
}
}
}
//简写
watch: {
flag(newVal,oldVal){
console.log('flag被修改了'+newVal,oldVal)
}
}
}
13.计算属性与watch的区别
computed和watch之间的区别:
1. computed能完成的功能，watch 都可以完成。
2. watch能完成的功能，computed不一 定 能完成，例如: watch 可以进行异步操作。
两个重要的小原则:
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等)，最好写成箭头函数，
这样this的指向才是vm或组件实例对象。
14动态绑定class 和style
绑定样式:
- class样式 写法:class="xxx" xxx可以是字符串、对象、数组。 字符串写法适用于:类名不确定，要动态获取。 对象写法适用于:要绑定多个样式，个数不确定，名字也不确定。 数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用。
- style样式 :style=" {fontSize: xxx}" 其中xxx是动态值。 :style=" [a,b]"其中a、b是样式对象。
<div id="root">
<!-- 绑定class样式--字符串写法，适用于:样式的类名不确定，需要动态指定-->
<div class="basic" :class="mood" @click=" changeMood" >{{name}}</div> <br/><br/>
<!-- 绑定class样式--数组写法，适用于:要绑定的样式个数不确定、名字也不确定-->
<div class="basic" :class=" classArr" >{{name}}</div> <br/><br/>
<!--绑定class样式--对象写法，适用于:要绑定的样式个数确定、名字也确定，但要动态决定用不用-->
<div class="basic" :class="class0bj">{ { name}}</div>
</div>
动态绑定style形式
<div class="basic" :sty1e=" sty1e0bj">{{name}}</div> <br/><br/>
