vue脚手架及简单vue指令

1.vue脚手架vue/cli

1.0全局安装脚手架

yarn global add @vue/cli or npm i -g @vue/cli

1.1初始化脚手架，生成脚手架文件

vue create 文件名

1.2启动内置的热更新本地服务器

yarn serve or npm run serve

1.3vue/cli自定义配置

/* 覆盖webpack的配置 */
module.exports = {
  devServer: { // 自定义服务配置
    open: true, // 自动打开浏览器
    port: 3000
  }
}

1.4eslint了解

默认代码要求非常严谨，需要在module.exports里配置一下属性

lintOnSave:false

1.5vue/cli单vue文件讲解

Vue推荐采用.vue文件来开发项目

template里只能有一个根标签

vue文件-独立模块-作用域互不影响

style配合scoped属性, 保证样式只针对当前template内标签生效

vue文件配合webpack, 把他们打包起来插入到index.html

2.vue指令

2.0 MVVM模型

2.1插值语法

<template>
    <div>
        <div><span>姓名：</span>{{ name }}</div>
        <div><span>年龄：</span>{{ age }}</div>
        <div>
            <span>是否成年：{{ age >= 18 ? '成年' : '未成年' }}</span>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name: '张三',
            age: 18,
        };
    },
};
</script>

{{}}里可以写变量或者表达式

2.2v-bind单项绑定

• 语法：v-bind:属性名="vue变量"

• 简写：:属性名="vue变量"

•  <a :href="url">去百度</a>

2.3v-on绑定事件

             <button v-on:click="count = count + 1">+1</button>

            <button @click="addFn">+1</button>

            <button @click="addMore(3)">+3</button>

ttention:methods里定义的函数用data里的变量要用this.变量名

2.4v-on事件对象

传参用$event

 <a href="http://www.baidu.com" @click="turn">去百度</a>
 <a href="http://www.baidu.com" @click="getadd(10, $event)">去百度</a>

2.5v-on修饰符

@click.stop   阻止事件冒泡

@click.prevent 阻止事件默认行为

@click.once 事件只触发一次

2.6v-on 按键修饰符

• @keyup.enter - 监测回车按键

• @keyup.esc - 监测返回按键

2.7v-model双向绑定

 // 特别注意: v-model, 在input[checkbox]的多选框状态
 // 变量为非数组, 则绑定的是checked的属性(true/false) - 常用于: 单个绑定使用
 // 变量为数组, 则绑定的是他们的value属性里的值 - 常用于: 收集勾选了哪些值

 <input type="text" v-model="username" />

 <input type="password" v-model="pass" />

 <select v-model="area">
      <option value="北京" checked>北京</option>
      <option value="南京">南京</option>
      <option value="天津">天津</option>
  </select>

  <input v-model="hobby" type="checkbox" value="抽烟" />抽烟
  <input v-model="hobby" type="checkbox" value="喝酒" />喝酒
  <input v-model="hobby" type="checkbox" value="烫头" />烫头

  <input v-model="gender" value="男" type="radio" name="sex" />男
  <input v-model="gender" value="女" type="radio" name="sex" />女


  <textarea v-model="intro"></textarea>

2.8v-model修饰符

• .number 以parseFloat转成数字类型

• .trim 去除首尾空白字符

• .lazy 在change时触发而非inupt时