自学Vue ten day！！！

一、Devtools与Vscode开发配置（了解）

Vue-Devtools是vue在做项目开发时常用的浏览器插件。

1、安装方式

• 升级浏览器至最新版

• 点击浏览器右上角的 三个点 ，在 更多工具 中，选择 扩展程序

• 打开 扩展程序 的 开发者模式

• 将 Vue.js Devtools_5.3.3.crx 这个插件直接拽入当前界面，即可完成安装，如需此文件，滴滴me~~

2、打开控制台测试devtools

随意写一个点击事件，并查看点击效果

 

像一些使用Vue完成的项目，右上角的Vue图标会亮起：

1） https://www.bilibili.com （bilibili）

2） http://m.sohu.com （手机搜狐网）

3） http://element.eleme.io/#/en-US

 

3、配置VsCode用户片段

 {
     "demo": {
       "prefix": "vue",
       "body": [
         "<template>",
         "\t<div>",
         "\t\t$0",
         "\t</div>",
         "</template>",
         "",
         "<script>",
         "export default {",
         "\tdata () {",
         "\t\treturn {\n",
         " ",
         "\t\t}",
         "\t}",
         "}",
         "</script>",
         " ",
         "<style lang = \"less\" scoped>",
         "\t",
         "</style>"
       ],
       "description": "自定义的一个vue代码段"
     }
   }

4、“@/”路径提示配置

安装 Path Intellisense插件

打开设置 - 首选项 - 搜索 Path Intellisense - 打开 settings.json ，添加：

 "path-intellisense.mappings": {
      "@": "${workspaceRoot}/src"
  }

在项目 package.json 所在同级目录下创建文件 jsconfig.json：

 {
     "compilerOptions": {
         "target": "ES6",
         "module": "commonjs",
         "allowSyntheticDefaultImports": true,
         "baseUrl": "./",
         "paths": {
           "@/*": ["src/*"]
         }
     },
     "exclude": [
         "node_modules"
     ]
 }

最后重启打开即可

二、v-model语法糖（熟悉）

v-model作为语法糖，相当于：v-on搭配v-bind，如下：

 <input v-model="val" />
 ​
 // 相当于
 ​
 <input v-on:input="val = $event.target.value" v-bind:value="val" />

三、常用修饰符（熟悉）

vue中常用的修饰符分三种，分别是事件修饰符、按键修饰符和表单修饰符。

1、事件修饰符

• .stop 阻止事件冒泡(*)

• .prevent 阻止默认事件(*)

• .prevent.stop 阻止默认事件的同时阻止冒泡

• .once 阻止事件重复触发（once与stop不能一起使用，否则再次触发事件，依然会冒泡）(*)

 <template>
     <div>
         <div class="big" @click="cb">
             <div class="small" @click="cs">
                 <a href="#" @click.stop.prevent="ca">a标签</a>
             </div>
         </div>
         <button @click.once="cc">点我</button>
     </div>
 </template>
 ​
 <script>
 export default {
     
     methods:{
         cb(){
             console.log("点击大的");
         },
         cs(){
             console.log("点击小的");
         },
         ca(){
             console.log("点击a标签");
         },
         cc(){
             console.log("点击按钮");
         }
     }
 ​
 }
 </script>
 ​
 <style>
 .big{
     width: 300px;
     height: 300px;
     background-color: pink;
 }
 .small{
     width: 200px;
     height: 200px;
     background-color: skyblue;
 }
 </style>

 

2、按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

 <input v-on:keyup.enter="submit">
 <input v-on:keyup.13="submit">

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

• .enter (*)

• .tab

• .delete (捕获“删除”和“退格”键)

• .esc

• .space

• .up

• .down

• .left

• .right

3、表单修饰符

我们还有其他的修饰符，比如表单上常用的 trim 和 number ：

• 想去除用户输入的前后空格：

 <input v-model.trim="val" type="text">
 ​
 data(){
   return {
     val: "你好，世界"
   }
 }

• 希望在input的change之后再更新输入框的值

 <input v-model.lazy="val" type="text">

.trim与.lazy可以合并使用：

<input v-model.lazy.trim="val" type="text" />

二者没有先后顺序

 <template>
 <!-- 表单修饰符 -->
     <div>
         <!-- 加了.trim之后，获取到的是去除前后空格的结果 -->
         <input type="text" v-model.trim="iptVal">
         <button @click="handleClcik">按钮</button>
         <br>
         <!-- 加了.number之后, 获取到的用户输入的信息就是number类型了-->
         <input type="number" v-model.number="numVal">
         <button @click="handleClcik2">按钮</button><br><br>
         <!-- 加了.lazy, 用户每一次触发就不会马上更新这个值，等到用户按回车的时候，才更新这个值 -->
         <input type="text" v-model.lazy="ipt2Val">
         <p>{{ipt2Val}}</p>
     </div>
 </template>
 ​
 <script>
 export default {
     data () {
         return {
             iptVal:"",
             numVal:"",
             ipt2Val:""
  
         }
     },
     methods:{
         handleClcik(){
             console.log(this.iptVal);
         },
         handleClcik2(){
             console.log(this.numVal, typeof this.numVal);
         }
     }
 }
 </script>

 

4、系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

• .ctrl （实测结果：由于mac系统 ctrl+鼠标左键 = 右键 这个功能，所以mac上无法实现）

• .alt

• .shift

• .meta （meta在win上代表⊞键，在mac上代表⌘键）

 <!-- Alt + C -->
 <input v-on:keyup.alt.67="doSomething">
 ​
 <!-- Ctrl + Click -->
 <div v-on:click.ctrl="doSomething">Do something</div>