vue基础一

vue是javascript渐进式框架。

脚手架创建：@vue/cli是vue官方提供的全局模块包。

yarn global add @vue/cli npm i -g @vue/cli 创建脚手架命令

运行vue -V 命令，出现版本信息则安装成功。

创建项目

vue create 项目名  注意项目名不能带中文、大写字母、特殊符号

进入脚手架项目

cd 项目名

yarn serve 或 npm run serve

@vue/cli目录和代码分析

 vuecil-demo        # 项目目录
    ├── node_modules # 项目依赖的第三方包
    ├── public       # 静态文件目录
      ├── favicon.ico# 浏览器小图标
      └── index.html # 单页面的html文件(网页浏览的是它)
    ├── src          # 业务文件夹
      ├── assets     # 静态资源
        └── logo.png # vue的logo图片
      ├── components # 组件目录
        └── HelloWorld.vue # 欢迎页面vue代码文件 
      ├── App.vue    # 整个应用的根组件
      └── main.js    # 入口js文件
    ├── .gitignore   # git提交忽略配置
    ├── babel.config.js  # babel配置
    ├── package.json  # 依赖包列表
    ├── README.md    # 项目说明
    └── yarn.lock    # 项目包版本锁定和缓存地址

主要文件及含义

node_modules下都是下载的第三方包
public/index.html – 浏览器运行的网页
src/main.js – webpack打包的入口文件
src/App.vue – vue项目入口页面
package.json – 依赖包列表文件

@vue/cli自定义配置

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

eslint代码检测工具

暂时关闭的方法

module.exports = {
    lintOnSave: false,
}

单vue项目，独立作用域，互不影响。

template里只有一个根标签。

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

vue命令

插值表达式 {{ 表达式 }} （声明式渲染/文本插值）

<template>
    <div>
     <h1>{{a}}</h1>
     <h2>{{obj.name}}</h2>
     <h3>{{obj.age >= 18 ? '成年' : '未成年'}}</h3>
    </div>
</template>

<script>
export default {
    data() {
        return {
            a: '你好',
            obj:{
              name:'小vue',
              age:20
            }
        }
    },
}
</script>

<style scoped>
</style>

设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。

vue是MVVM设计模式

M: model数据模型（data里的数据）

V:view视图（html页面）

VM:viewmodel视图模型（vue.js源码）

MVVM双向监听绑定数据，自动双向同步，不需要再操作dom

v-bind指令：给标签属性设置vue的值

语法：v-bind:属性名=“vue变量”/:属性名=“vue变量”

v-on指令：给标签绑定事件

语法：v-on:事件名="要执行的少量代码/methods中的函数/methods中的函数(实参) "

简写：@事件名="methods中的函数"

<template>
    <div>
        <p>您要购买的商品数量是{{count}}</p>
        <button v-on:click='count = count + 1'>+1</button>
        <button v-on:click='addFn'>+1</button>
        <button v-on:click='Fn(5)'>+5件</button>
        <button @click='count--'>-1了</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            count: 1,
        }
    },
    methods:{
      addFn() {
        this.count++
      },
      Fn(num) {
        this.count = this.count + num
      }
    }
}
</script>

<style></style>

this代表export default 后{}对象，data和methods里的属性都是直接挂在它身上。

v-on事件对象：

1、无传参，通过形参直接接受

2、传参，通过$event指代事件对象传给事件处理函数

<template>
  <div>
    <a href="http://www.baidu.com" @click='one'>百度</a>
    <br>
    <a href="http://www.taobao.com" @click='two($event,10)'>淘宝</a>
  </div>
</template>

<script>
export default {
  methods:{
    one(e) {
      e.preventDefault()
    },
     two(e,num) {
      e.preventDefault()
    },
  }
}
</script>

<style>
</style>

v-on修饰符：

• .stop阻止冒泡
• .prevent阻止默认事件
• .once程序运行期间只执行一次事件处理函数

v-on按键修饰符：

• @keydown.enter 监测回车按键
• @keydown.esc监测返回按键

更多修饰符

v-model指令：把value属性和vue数据变量双向绑定在一起

语法：v-model="vue数据变量"

<template>
    <div>
        <div>
            <span>来自于：</span>
            <select v-model="from">
              <option value="南京市">南京</option>
              <option value="北京市">北京</option>
              <option value="上海市">上海</option>
            </select>
        </div>
        <div>
          <span>爱好：</span>
          <input type="checkbox" value="吃饭" v-model="hobby">吃饭
          <input type="checkbox" value="睡觉" v-model="hobby">睡觉
          <input type="checkbox" value="敲代码" v-model="hobby">敲代码
        </div>
        <div>
          <span>性别：</span>
          <input type="radio" name="sex" value="男" v-model="gender">男
          <input type="radio" name="sex" value="女" v-model="gender">女
        </div>
        <div>
          <span>个人介绍</span>
          <textarea v-model="useinfo"></textarea>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            from: '',
            hobby:[],
            gender:'',
            useinfo:''
          
        }
    },
}
</script>

<style></style>

注意：下拉选择框绑定在select上

复选框对应的数据变量是数组的情况下，获取的是value的值，非数组的情况下获取的是选中的状态。

v-model修饰符：

语法：v-model.修饰符="vue数据变量"

• .number 以parseFloat转成数字类型
• .trim 去除首尾空白字符
• .lazy 在失去焦点时触发