如何查看vue源码
- github git clone下源码，现在使用的是pnmp包管理工具，
- npm install pnpm -g，
- pnpm dev就会将项目打包至packages/vue/dist/vue.global.js下
- 此时就可以创建一个demo利用createApp方式使用
02学习
methods中使用箭头函数，this对象将会改变
公众号codewhy看this的各种情况
const foo = function() {
console.log(this)
}
foo(); //隐式绑定，相当与执行window.foo();因此this绑定window
const obj = {bar: foo};
obj.bar(); //this指向obj
const foo = () => {
console.log(this)
} //当foo为箭头函数时，this全为window
vue遍历methods中的方法，将方法bind（this)再返回，因此方法中的this是proxy对象；
设置mastache
snippet-generator网站帮助生成模板 设置里的usersnippet里设置html.json 将要自动生成的模板粘贴自动生成，prefix中就是快捷指令
基本指令
<!-- 只显示一次之后不会被渲染，其下的子组件也不会渲染 用做优化 -->
<h2 v-once>{{message}}</h2>
<!-- 等同于双括号写法 -->
<h2 v-text="message"></h2>
<!-- v-html将文本解析成html显示 -->
<div v-html="txt"></div>
<!-- v-pre不解析双括号的值 -->
<div v-pre>{{message}}</div>
<!-- v-clock 编译完成之前div css有v-clock属性当编译完成后去除，配合css display:none使用-->
<div v-clock></div>
<img v-bind:src="src"></img>
<img :src="src"></img> //语法糖写法
class对象式写法
<div class="abc" :class="{'active': isActive, 'title': true}">喜喜</div> //isActive为data中true或false
<!-- 绑定class数组写法 -->
<div :class="['abc', name, {active: isActive}]">数组绑定写法</div>
<!-- 动态绑定属性，属性名不一定时 -->
<div :[name]="value">啊哈</div>
v-bind绑定style对象语法
<!-- v-bind绑定style -->
<div :style="{color: 'red', fontSize: '20px'}">style样式</div>
<div :style="finalStyle">style样式</div>
<div :style="[style1Obj, style2Obj]">style样式</div>
动态绑定属性
<!-- 动态绑定属性 -->
<div v-bind="info">动态绑定属性</div>
结果
<div name="juju" age="18"><div>
v-on绑定事件
<!-- v-on绑定一个对象 其中有多个事件 -->
<div v-on="{click: btnClick, mousemove: mouseMove}">喜喜</div>
参数传递
<button @click="btnClick($enent, 'juju')">鼠标点击</button>
//什么都不传默认会有event参数
v-on修饰符
.stop 防止冒泡 .once 只触发一次 .left 只点击鼠标左键 .right 只点击鼠标右键 .enter 当@keyup键盘输入为回车触发
