脚手架和VUE基础

脚手架和VUE基础

脚手架项目创建：

1.全局安装vue脚手架包：

yarn global add @vue/cli 或者 npm install @vue/cli -g

2.在项目文件夹下的终端使用命令：

vue create 脚手架项目名字（不能大写字母）

注：第一次使用这个命令，会弹出是否使用某个镜像源，直接回车即可

3.选择语法版本，这里选择Vue2的语法版本：

4.回车后，如果是第一次安装，则会让你选择使用yarn或者npm，选择一个即可

5.successfully即安装成功

注：如果创建项目失败；解决：将C盘用户文件夹下的 .vuerc 文件里的 false 改为 true

6.切换到脚手架项目路径，并且启动脚手架：

指令：cd 脚手架项目名 和 npm run serve

7.将上图中的Local网址在浏览器中打开

出现上图，即成功创建脚手架项目，并启动

8.vuecli脚手架默认会帮我们开启eslint检查，即服务器启动后，当我们写了多余或违规的变量，终端会报错

注：如果想要关闭exlint检查，只需要在vue.config.js文件中的modole.exports中加入lintOnSave : false //关闭eslint检查，然后重启服务器即可

9.在开始我们自己开发项目的时候，需要要将assets文件下的logo图片，components文件下的helloworld文件删除，

将App文件里的内容清空，并使用vue指令构建新的框架，并顺手给标签内部补一个

标签

注：解决 vscode 中 .vue文件代码白色问题：安装 vetur 插件

10.关于MVVM开发者模式：

首先在浏览器中安装 vue-devtools 插件：

在打开的vue项目中右击检查，点击控制台，点开github.com的那个网址，点击右侧的Releases中的+号，找到beta版的，点开找到Assets中的vuejs_devtools_beta-…，下载后将文件后缀改为 .rar 再解压，点开浏览器扩展程序，打开开发者模式，加载已解压的扩展程序，选择devtools后重启浏览器

MVVM模式的作用就是，让View端和Model端数据通过VM进行双向同步，即不需要我们自己操作DOM，Vue源码帮我们完成。

vue指令

1.插值表达式：{{插值内容在data函数的return对象中}}

<template>
  <div>
    <!-- 2.把值赋予到标签 -->
    <h1>{{msg}}</h1>
    <h2>{{obj.name}}</h2>
    <h3>{{obj.age >= 18 ? "成年了" : "未成年"}}</h3>
  </div>
</template>

<script>
export default {
//1.变量在data函数的return对象上
data() {
  return {
    msg: "hello vue",
    obj: {
      name: "小vue",
      age: 5
    }
  }
}
}
</script>

<style>

</style>

2.v-bind：给标签原生属性赋值；v-bind:属性名=“属性值” 或者 :属性名=“属性值”

3.v-on：绑定事件；

写法：v-on:事件名=“少量代码” 或者 v-on:事件名=“methods里面的方法名” 或者 v-on:事件名=“methods里面的方法名(值)” 或者 @事件名=“与上诉写法一致”

<template>
  <div>
    <p>你要购买的商品数量：{{count}}</p>
    <!-- 1.绑定事件
    语法：v-on:事件名="少量代码" -->
    <button v-on:click="count = count + 1">+1</button>
    <!-- 2.语法：v-on:事件名="methods里面的方法名" -->
    <button v-on:click="addFn">+1</button>
    <!-- 3.语法：v-on:事件名="methods里面的方法名(值)" -->
    <button v-on:click="addCountFn(5)">+5</button>
    <!-- 4.简化写法：@事件名="与上诉写法一致" -->
    <button @click="subFn">-1</button>
  </div>
</template>

<script>
export default {
data() {
  return {
    count: 1
  }
},
methods: {
  addFn() {
    //this指向的是export default后面的对象
    //data函数会将数据对象挂到组件对象上，所以不用.data
    this.count++
  },
  addCountFn(num) {
    this.count = this.count + num
  },
  subFn() {
    this.count--
  }
}
}
</script>

<style>

</style>

注：事件触发的时候如何拿到事件对象：

1.无传参的时候，直接在形参中使用e接受

2.有传参的时候，实参中使用$event传入形参

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

<script>
export default {
  methods: {
    //事件触发，没有传值的时候，可直接获取事件对象e
    one(e) {
      e.preventDefault()
    },
    two(num,e) {
      e.preventDefault()
    }
  }
}
</script>

<style>

</style>

事件修饰：

1.阻止事件冒泡（父元素中的事件不会因为子元素中的事件执行而被执行）：.stop

例如：@click.stop

2.阻止默认行为：.prevent

3.程序运行期间，事件只触发一次：.once

4.绑定键盘按下事件：@keydown.enter=“事件名”

4.v-model指令：

作用：将表单标签中的value属性值与vue中的data中的数据双向绑定到一起

<template>
  <div>
    <span>表单值：</span>
    <input type="text" v-model="username">
    <span>来自于：</span>
    <select name="from" id="" v-model="from">
      <option value="安庆市">安庆</option>
      <option value="北京市">北京</option>
      <option value="南京市">南京</option>
    </select>

    <br>
    <span>爱好：</span>
    <input type="checkbox" value="抽烟" v-model="hobby">抽烟
    <input type="checkbox" value="喝酒" v-model="hobby">喝酒
    <input type="checkbox" value="写代码" v-model="hobby">写代码
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      from: "",
      hobby: []
    }
  }
}
</script>

<style>

</style>

注：v-model的修饰符：.number :将表单的数据转化为数据类型同步到vue的data中

.trim :去除表单输入内容首尾两边的空格

.lazy :失去焦点才实时同步

5.v-show和v-if指令：

作用：控制标签的显示与隐藏

区别：v-show是display:none原理；v-if是直接将标签从DOM树中移除

注：v-if可以与v-else搭配使用，例如：

6.v-for指令的使用：

v-for=“(数组里的元素对象,索引index) in 数组” :key = “索引/主键”

补充说明：js中引入内部文件的方法，不能像CSS那样直接用url，要用import引入

.lazy :失去焦点才实时同步

5.v-show和v-if指令：

作用：控制标签的显示与隐藏

区别：v-show是display:none原理；v-if是直接将标签从DOM树中移除

注：v-if可以与v-else搭配使用，例如：

6.v-for指令的使用：

v-for=“(数组里的元素对象,索引index) in 数组” :key = “索引/主键”

补充说明：js中引入内部文件的方法，不能像CSS那样直接用url，要用import引入