Vue初阶入门笔记

VUE

• 关闭开发者版本提示
  • Vue.config.productionTip=false;
• 创建VUE实例
  *

<h1>{{name}}</h1>
const x=new Vue({
    el:"#root"    //el表示element，用于表示实例为哪个容器服务，通常为css选择器
    data:{
    name:"马辉"
})

• 注意区分：js表达式和js代码（语句）
  • 表达式：一个表达式会产生一个值，可以放在任何一个需要的值
    • （1）a
    • （2）a+b
    • （3）demo(1)
    • （4）x===y?“x”:“y”;
  • js代码（语句）
    • （1）if（）{}
    • （2）for（）{}
• 若要修改标签的属性，则再标签属性之前加v-bind:href:“url”,或者用简写:href:"url
• 差值语法用于标签体内容，可以直接读取到data中的内容
• 指令语法适用于解析标签（标签属性，标签体内容，绑定事件等等）
• v-bind，v-model
  • v-bind是单向绑定的，（数据从data流向页面）
  • v-model是双向绑定，针对value属性（表单类）
  • 因为v-model是只能应用在表单类元素（输入类元素）上
  • v-model:value 简写为v-model
• 绑定容器
  • 第一种：el:“#root”
  • 第二种： v.$mount(“#root”) mount有挂载的意思
• data的写法：
  • 对象式，参考之前的
  • 函数式： （必须返回一个对象）

data:function(){
console.log(this)   //此处的this是VUE实例对象，若改为箭头函数，则this指向window
return{name:"mahui"}

可直接写为
data(){}

• MVVM模型

  • M model模型：对应data中的数据
  • V view视图 ： 模板
  • VM viewModel视图模型 :VUE实例对象

• data的所有属性都会出现哎vue实例中，vue中的所有属性都可以使用

• Object.defineProperty方法

  • Object.defineProperty(对象名，key值，{value：“”,enumerable:false,writable:true,configurable:true})
  • value 控制属性的值，
  • enumerable 控制属性是否可以被枚举 都默认false
  • writable 控制属性是否可以被修改
  • configurable 控制属性是否被删除

  ---

  • Object.defineProperty(对象名，key值，{get:function(){return}} ）

  • 

  • 利用getter和setter设置数据代理

  • 

VUE中的数据代理

• 

• 个人总结：将写的代码中的data的内容传给vm的_data，，然后此处做代理，将_datad的键值利用Object.defineProperty中的setter和getter代理给vm实例对象，即可直接调用，且在vm实例对象中出现修改，在_data中也会出现修改

事件处理

• 事件指令

  • v-on-click 用在dom元素中的指令，简写方式为@
  • methods 可以写入指令所调用的方法
  • 如果需要传参则dom中调用函数加（）
  • 

• 阻止事件

  • preven t阻止默认事件
    • @click.prevent=“show()”
  • stop 阻止事件冒泡
    • @click.stop=“show()”
  • once 事件只触发一次
    • @click.once=“show()”
  • capture 使用事件的捕获阶段
    • 冒泡阶段就是先执行了所点击的元素，再向外冒泡
    • 捕获阶段就是先捕获外部最大的div的行为
    • @click.capture 加在最外面的最大的一层属性中
  • self 只有event.target是当前操作的元素时才是触发事件
    • @click.self=“show()” 这个加于外面的div，避免被冒泡（仅影响加了该属性的本元素）
  • passive 事件的默认行为立即执行，无需等待事件回调完毕

• 修饰符可以连缀，效果一样

  • @click.stop.prevent()

---

• 滚动条的滚动
  • @scroll=“demo”
• 滚动轮的滚动
  • @wheel=“demo”

键盘事件

• 使用@keydown或者@keyup
• 后面可以缀上按键别名
  • 回车enter/Enter
  • 删除delete（捕获退格和删除键）
  • 退出esc
  • 空格space
  • 换行tab（特殊，必须配合keydown使用）
  • 上下左右
• 若所需的按键未存在别名，则可以使用按键最原始的key值绑定事件或者键码（不推荐），如：capslock键，需要写为caps-lock
• 系统修饰键（用法特殊）：ctrl,alt,shift,meta
  • 配合keyup使用：按下修饰键的同时，再按下其他键，随后是放其他键，事件才被触发
  • 配合keydown使用，正常触发事件
• 定义别名按键
  • Vue.config.keyCodes.huiche=13 //定义一个按键的别名（不推荐）
• 键盘事件也可连缀
  • @keyup.ctrl.y