自学vue（尚硅谷）
1.vue的配置和基础
vue的配置相当简单，说白了就像是在js里使用jQuery一样。只需要在head中引用vue.js即可.
<script src="./js/vue.js"></script>
配置完成可以去谷歌商店里下载一个vue的插件便于后续开发的使用
2.vue基础语法
创建容器
点击查看代码
<div id="root">
<h1>插值语法{{name}} , 你年龄是 {{age}}</h1>
</div>
<script>
Vue.config.productionTipe = false; // 禁止 vue启动时有生产提示
//创建vue实例
const vm = new Vue({
el : '#root',
data : {
name : 'lzy',
age : '22',
message:{
url:'http://www.baidu.com'
}
}
})
</script>
插值语法和指令语法
<h1>插值语法{{name}} , 你年龄是 {{age}}</h1>
<a v-bind:href="message.url">指令语法</a>
数据绑定
单向数据绑定：<input type="text" :value="name"><br>
双向数据绑定：<input type="text" v-model="name">
简写
- v-bind 可以简写成 ：
- v-model:value可以简写成v-model
其他写法
// el 的两种写法 第一种 直接再vue下写el：'#root'; 第二种 通过v.$mount('#root') 挂载;
// data的两种写法。
// 第一种 对象式：
data:{
}
第二种 函数式
data:function(){
return{
name : 'lzy'
}
}
mvvm原理
我不想写太复杂，就拿最好理解的话来描述
简单来说就是vue帮我们写了一个中间层 VM。
我们写在vue实例中的所有的数据，都被vue用数据代理或者劫持的形式，放在了vm中。
这里就是我们的vm，里面不仅仅有我们在data中定义的数据，vue贴心的用数据代理的方法放在vm里。
想要比较通透的了解vm的工作原理，先了解一下数据代理
关于数据代理
这个是一个比较有趣的知识点，可惜在学校没有老师讲过这个
数据代理并非一个复杂难懂的东西，只是it届尽喜欢取一些让人望而生畏的专业名词。
简单来说：数据代理就是一个对象对另一个对象的属性进行操作（读/写）
比如我们定义一个person的对象。
let person = {
name : 'lzy',
sex:'男',
}
我们在原生js中通过 Object.defineProperty方法来对它进行数据代理的操作。
Object.defineProperty(person,'age',{
// 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
get(){
console.log("有人读取了age");
return number
},
set(value){
console.log("有人修改了age,改成了:",value);
number = value;
}
})
我们并没有在person这个对象中直接添加age，而是通过 Object.defineProperty对age进行实时的“监视”。
有人读取或者是修改age时，这个属性会随之被动态的变化。
我们将读取age时访问get()得到返回值这一动作叫做getter；
同理将修改age时访问set()这一动作叫做setter;
这样一来，我们不难理解，vue做了一系类复杂的工作，将我们需要用到的vue实例中的东西放在了vm中，方便我们随时调用。
所以，当我们在html中需要调用vue中的数据时，一定要再三的从vm中去寻找数据，而不是在我们的vue实例中。
事件处理
我个人觉得事件处理在逻辑上不难理解，毕竟在开发过程中事件一旦被定义，就不要去修改。
因此，我们需要用到什么事件，再去查找该事件的语法即可。
事件处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件处理</title>
<script src="./js/vue.js"></script>
</head>
<body>
<style>
.div1 {
padding: 20px;
background-color: aqua;
}
.div2 {
background-color: blue;
}
.div3 {
padding: 20px;
background-color: aqua;
}
.div4 {
background-color: blue;
}
</style>
<!-- v-on: 可以简写成@ -->
<!-- <button id="root" v-on:click = "showInfo">点我</button> -->
<div id="root">
<button id="root" @click="showInfo1('lzy',$event)">点我</button>
<!-- 用$envet将event也传进来 -->
<h1>事件修饰符</h1>
<!-- @click.prevent 可以阻止默认事件(常用) -->
<a href="http://www.baidu.com" @click.prevent="showInfo2">点我提示但是不会跳转</a><br>
<!-- @click.stop 阻止事件冒泡(常用) -->
<div @click="showInfo2">
<button @click.stop="showInfo2">点我</button>
</div>
<!-- @click.once 事件只触发一次(常用) -->
<button @click.once="showInfo2">事件只触发一次</button>
<!-- @click.capture 只使用事件捕获的形式 -->
<div class="div1" @click.capture="showMsg(1)">
div1
<div class="div2" @click="showMsg(2)">
div2
</div>
</div>
<!-- @click.self 只有event.target是当前操作元素的时候才会触发 -->
<div class="div3" @click.self="showMsg(1)">
div3
<div class="div4" @click="showMsg(2)">
div4
</div>
</div>
<h1>键盘事件</h1>
<!-- @keyup.enter / @keydown.enter 按下回车时触发事件 注意tap键必须配合keydown使用 -->
<!-- 系统修饰键 ctrl alt shift win 如果用keyup需要配合其他按键一起使用，keydown则可以正常使用 -->
<input type="text" placeholder="输入回车确认" @keyup.enter = "show">
</div>
<script>
const nm = new Vue({
el: '#root',
methods: {
showInfo1(name, event) {
alert("你好啊" + name);
console.log(event);
},
showInfo2() {
alert("你好，我不跳转");
},
showMsg(msg) {
console.log(msg);
},
show(e){
console.log(e.target.value);
}
}
})
</script>
</body>
</html>
计算属性
计算属性（computed）很容易和函数（methods）混淆
怎么说呢，我之前在数据代理中说到，vue会贴心的将我们在实例中定义的数据给实现数据代理。
也就是我们在data中定义的数据，被代理后已经有了getter和setter，但是methods却没有。
我们不难看出这里是一个函数的标记。也就是不可被修改。
那么问题来了，如果有个需求，是我们要实时计算，我们是使用methods还是computed呢？
姓名案例：
输入姓和名，自动拼接一个 姓-名 的结果。
实际上这个案例，我们用简单的插值语法也能实现。用methods当然实现的更好。那么computed和methods区别在哪里。
当我们写完methods时，需要计算的地方会自动调用methods。那么如果我们的工程里有许多地方需要用到这个计算结果，我们用几次就需要调用几次，这样一来vue的工作量实在是太大了。
我们来看一下computed，你会发现里面有get()和set()。
computed: {
fullname: {
// get() 什么时候调用？ 1.初次读取fullname时 2.所依赖的数据发生改变时 （firstName / lastName）
get() {// 此时get中的this 已经指向了vm，所以可以直接拿vm里面的参数
return this.firstName + '-' + this.lastName;
},
// set() 什么时候调用？ 只有当fullname被修改的时候才会调用
set(){
}
}
}
// data经过数据代理之后在vm里成了属性
// computed经过数据代理之后在vm里成了计算属性
如果我们使用计算属性（computed），我只有第一次使用时会调用，之后会自动缓存下来，其他地方直接拿缓存的值。
如果计算所依赖的数据发生变化时，会重新调用一边computed（getter）。
计算属性的简写
既然你都用到了计算属性，你当然是不会去修改计算属性，所以我不用每次都写getter和setter。
计算属性默认的就是getter。只需要在计算属性下定义一个函数，在vm中就是拥有getter的计算属性
computed:{
fullname:function(){ //function 默认就是getter的形式，且 this已经指向 vm
return this.firstName+"-"+this.lastName;
}
}
