尚硅谷天禹老师 Vue学习笔记总计（自己复习用）

004 Vue环境搭建

如何关掉这2个提示？

关闭第一个提示，下载Vue的开发者工具

安装 — Vue.js

Vue开发者工具GitHub下载地址：

https://github.com/vuejs/vue-devtools#vue-devtools

或者直接在这个地方下载：

Vue开发者工具扩展链接：
【下载开发者工具】：
https://pan.baidu.com/s/1MtYvMPew4lb14piIrs9x6w
提取码：6666

阻止Vue在启动时生成生产提示

005 Vue 小案例

006 Vue 分析hello案例

008 Vue 数据绑定

Vue中有2种数据绑定的方式：

1.单向数据绑定：v-bind 数据只能从data流向页面

2.双向数据绑定：v-model 数据不仅能从data流向页面，也能从页面流向data

备注：

1.双向数据绑定一般都应用在表单磊元素上（如input ，select 等有value值的）

2. v-model:value 可以简写为v-model 因为v-model默认收集的就是value的值。

举例

HTML代码

    <div id="root">单项数据绑定v-bind：<input type="text" v-bind:value="name" ><br>双项数据绑定v-model：<input type="text" v-model:value="name" ></div><script>Vue.config.productionTip = false;new Vue({el:"#root",data:{name:"abc"}})</script>

对应的界面效果：

修改单向数据绑定v-bind所在的文本框中的值，Vue下的name的值不会改变，v-model里面的值也不会改变。

但是修改双向数据绑定v-bind 所在文本框中的值，Vue下name的值会跟着同步改变，而且会影响到v-bind中文本框的值（看如上代码v-bind也调用的是Vue中name值）

009 Vue el，data的2种写法

011 Object.defineProperty讲解

具体内容参考如下代码。有案例详解

<script type="text/javascript">let number=39let person={name:"zhangsan",sex:"男",// age:19}Object.defineProperty(person,"age",{// value:20,// enumerable:true //控制属性是否可以枚举，默认值是false// writable:true ,//控制属性是否可以被修改，默认值是false// configurable:true, //控制属性是否可以被删除，默认值是falseget(){console.log("有人读取了age属性")return number},set(value){//如果不设置set函数，哪怕前台修改了person.age ，立马再去读取的时候，person.age的属性还是修改前的值console.log("有人修改了age属性，且值是",value)number=value}})console.log(person)

012 数据代理

数据代理：通过一个对象代理对另一个对象的属性的操作（读，写）

<script>let obj1={x:100}let obj2={y:100}Object.defineProperty(obj2,"x",{get(){return obj1.x},set(val){obj1.x = val}})</script>

014 事件处理（直接看代码）

事件的基本使用，总结：

1.使用v-on:xxx 或者 @xxx 绑定事件，其中xxx是事件名

2.事件的回调需要配置在methods对象中，最终会在vm上

3.methods中配置的函数，不要用箭头函数，否则this就不是vm（如果是箭头函数，自身没有this，会往上一层找，一般会找到window）

4.methods中配置的参数，都是被Vue所管理的函数，this的指向是vm或者组件的实例对象

5.@click="demo" 和 @click="demo($event)" 效果一样，但是后者可以传参，$event是关键词写法

<head>    <script src="vue.js"></script> </head>
<div id="root"><!-- <button v-on:click="showInfo">点我提示信息</button> //v-on 用法 --><!-- <button @click="showInfo">点我提示信息</button>  v-on 简写为@ 函数名不加括号，不传参可以不加括号,也可以加 --><button @click="showInfo()">点我提示信息</button> <!-- v-on 简写为@ --><button @click="showInfo2(233,$event)">点我提示信息-有传参</button> </div><script>new Vue({el:'#root',data:{},methods: {showInfo() {alert("nihao~")},showInfo2(val,event) {//console.log(event.target,innerText)alert("参数是"+val)},},})</script>

015 事件修饰符

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>事件修饰符</title><script src="vue.js"></script><style>*{padding: 10px;margin: 10px;}.demo1{height: 50px;background-color: blue;}</style>
</head>
<body><!--Vue中的时间修饰符：1.prevent：阻止默认事件（常用）2.stop：阻止事件冒泡（常用）3.once：事件只触发一次（常用）4.capture：使用事件的捕获模式。（正常情况：事件先捕获，然后冒泡。事件的处理是在冒泡阶段处理的。如果加了capture，时间的处理在捕获阶段就开始处理）5.self:只有event.target 是当前操作的元素时才触发事件6.passive：事件的默认行为立即执行，无须等待事件回调完毕再执行。--><div id="root" ><!--Vue里面阻止默认行为 @click.prevent--><a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a><!--Vue里面阻止事件冒泡 意思点击button 也会把事件冒泡到父级元素--><div  @click="showInfo" class="demo1"><button @click.stop="showInfo">阻止冒泡</button></div><!--事件只触发一次--><button @click.once="showInfo">once让事件只触发一次</button><!--事件先捕获，然后冒泡。事件的处理是在冒泡阶段处理的。capture--></div><script>new Vue({el:'#root',data:{},methods:{showInfo(){//showInfo(e) e.preventDefault()//原生的这个函数也可以用来阻止默认行为//showInfo(e) e.stopPropagation() //原生的这个函数也可以用来阻止冒泡alert("阻止行为！")}}})</script>
</body>
</html>