Vue 插值语法与实例化
- 以对象形式声明 vue 实例 v
- 在 data(){}方法的 return 内写入我们需要注册的属性，以 key value 键值对的形式！
- { {name}} 插值语法格式，双大括号里面写 data 中定义的变量名称
- createApp(v) 注册 Vue 实例 v
- mount(‘#v’) 我们看到顶部 div 的 id 为 v，那么这条代码就是将 vue 实例的作用域控制于拥有该 id 的标签上
<!-- 插值语法 -->
<div id="v">
<div>这是我的名字:{
{name}}</div>
</div>
<script>
const v = {
data() {
return {
name: "lily",
};
},
};
Vue.createApp(v).mount("#v");
</script>
v-bind 模板绑定
- 专门绑定元素属性
- v-bind 后接元素属性，即可将属性内容变成 data 里面的变量（此时无需双大括号）
- v-bind:可以简写为一个冒号 :
<a v-bind:href="url">123456</a> // 完整形式 <a :href="url">123456</a> //
简写格式
双向数据绑定
- 单向数据绑定：使用 v-bind，只有后台修改值能影响网页内容，反过来不行
- 双向数据绑定：使用 v-model，后台和网页内容完全同步，任何一方修改都会影响对方
- 注意，v-model 仅可以对表单内部（即输入类）属性使用！
- v-model:value=““可以简写为 v-model=””，因为 v-model 的默认附加属性就是 value
- v-model.lazy 表示触发 change 事件后才执行数据同步
- v-model.number 自动将数据转换成数值形式后才同步
- v-model.trim 自动清除用户输入的空白字符
单向数据绑定：<input type="text" v-bind:value="name" /> 双向数据绑定：<input
type="text"
v-model:value="name"
/>
el 和 data 的另一种写法->使用原型格式
已下方代码为例，若我们直接使用 console.log(v)将会输出 v 实例的内容，在开发者模式下，我们点开该 vue 实例，里面加了
美元符号$的是我们可以操作的内容，而加了短下划线的是 vue 底层实现内容
最重要的是属性 proto 它是 vue 的原型
- $mount 可以直接指定该 vue 实例挂载的元素，代替 el
- data 的另一种写法就是函数式写法（这种写法的好处是可以在函数内部通过 this 取得当前 vue 实例）
<script>
const v = new Vue({
<!-- data函数式写法 -->
data:funtion(){
console.log(this)
return{
name:'helloworld'
}
}
})
v.$mount(".root") // 外部挂载写法
</script>
MVVM 模型
- M 模型(model):对应 data 内部数据
- V 视图(view):对应模板
- VM 视图模型(viewmodel):对应 vue 实例对象
设目前有 vue 实例名称为 vm，则有以下性质
- data 中的所有属性都出现在 vm 身上
- vm 身上所有的属性，以及 vue 实例中原型（proto）中的所有属性都可以直接作为模板调用
数据代理
以 JS 代码作为示例
- Object.defineProperty 设置单个数据代理（所谓代理就是让某个对象代替某个对象执行操作）
- 第一个参数为欲执行代理的对象，第二个参数为被执行对象的属性
- 第三个参数则写 getter 和 setter 方法，他表示当我调用对象 obj2 时应当执行的动作
- 因为 obj2 为 obj1 的代理，且重写了 obj2 的 getter、setter 方法，故执行 obj2.x 时返回 100
<script>
let obj1 = {
x: 100 };
let obj2 = {
y: 200 };
Object.defineProperty(obj2, "x", {
get() {
return obj1.x;
},
set(val) {
obj1.x = val;
},
});
</script>
以 vue 作为示例
假设目前有 vue 实例 vm，则
- 实例对象 vm 实际上是作为数据域 data 的代理而出现的
- vm.name === vm._data.name 从实例对象 vm 中取出 data 中的属性可以按照左边两种形式的写法
- 使用插值语法时，也可以按照上方格式来写，因为插值语法实际上就是对实例 vm 的调用！！！
<body>
<div class="root">
<div>{
{_data.name}}</div>
<div>{
{name}}</div>
</div>
</body>
<script>
const v = new Vue({
el: ".root",
data: {
name: "tomes",
},
});
</script>
事件处理
所谓事件处理，就是为 vue 实例内增加一些方法，方法全部写在 methods 里面
- 所有 methods 内的方法都写普通函数而最好避免写箭头函数
- 箭头函数的 this 指向 window； 而普通函数的 this 指向当前所在的 vue 实例对象
- v-on:click=““或者简写@click=”” 用来指定元素点击后使用的方法，双引号内直接写方法名称即可
- v-on 内部的方法如果要传参，务必加上小括号，不传参的直接省略小括号
<body>
<div class="root">
<button @click="swin($event,123)"></button>
<button v-on:click="svm"></button>
</div>
</body>
<script>
methods:{
svm:(e)=>{
console.log(this) // 不要用箭头函数
},
swin(e,num){
console.log(this) // 一般用普通函数
}
}
</script>
事件修饰符
vue 中最常用的事件修饰符
- prevent:阻止默认事件（常用）
- stop:阻止事件冒泡（常用）
- once:事件只触发一次（常用）4.capture:使用事件的捕获模式
- self:只有 event.target 是当前操作的元素是才触发事件
- passive:事件的默认行为立即执行，无需等待事件回调执行完毕
特殊：
@click.prevent.self 会阻止元素本身及其子元素的点击的默认行为
@click.self.prevent 只会阻止对元素自身的点击的默认行为
<body>
<div class="root">
<a href="#" @click.prevent="show">阻止默认事件</a>
<div class="demo1" @click="show">
<div @click.stop="show">阻止事件冒泡</div>
</div>
<button @click.once="show">事件只会被触发一次</button>
</div>
</body>
passive 和滚轮事件解析
- @wheel=“” 事件：每检测到一次鼠标滚轮滚动就触发一次方法；
- @scroll=“” 事件：鼠标滚轮滚动和滑动条滚动都可以触发该方法
- 给 wheel 加了 passive 修饰后，无需等待 show 回调方法执行完毕，就可马上执行 wheel 的初始动作（即滚动内容下移）
键盘事件
按下某个案件即触发方法，最常用的是@keyup
- 常见键代码：enter 回车 delete 退格 esc 退出 space 空格 tab 换行
- 在常见键代码中，除了 tab 必须使用@keydown 触发，其他都使用@keyup 触发
- 对于控制性按键如 ctrl alt shift 等
- 对于控制性按键，@keyup 表示按下修饰键后再按下其他键，待其他键松开后才触发事件
- 对于控制性按键，@keydown 表示正常触发事件
<body>
<div class="root">
<input type="text" @keyup.enter="show" />
<input type="text" @keydown.tab="show" />
<input type="text" @keyup.caps-lock="show" />
<input type="text" @keyup.ctrl="show" />
<input type="text" @keydown.ctrl="show" />
</div>
</body>