vue第一天

央央yo
158 阅读4分钟

vue基础第1天

vue基础

vue是什么

渐进式JavaScript框架

官网地址: cn.vuejs.org/

@vue/cli脚手架

作用

帮助我们搭建项目

@vue/cli脚手架安装

  • 全局安装

    命令：npm install -g @vue/cli

  • 查看vue脚手架版本

    命令：vue -V

    如果版本号出现即安装成功 否则失败

@vue/cli 创建项目启动服务

==注意: 项目名不能带大写字母, 中文和特殊符号==

  • 创建项目

    命令：vue create vuecli-demo

vue和create是命令, vuecli-demo是文件夹名（文件夹名可自定义）

==注意: 项目名不能带大写字母, 中文和特殊符号==

  • 选择模板

​ ==可以上下箭头选择, 弄错了ctrl+c重来==

1652445446411.png

  • 回车等待生成项目文件夹+文件+下载必须的第三方包们
  • 输入命令：npm run serve

只要看到绿色的 - 啊. 你成功了(底层node+webpack热更新服务)

1652445667789.png

@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指令

插值表达式

又叫: 声明式渲染/文本插值

作用/目的: 在dom标签中, 直接插入内容

语法：{{表达式}}

<template>
  <div>
    <!-- 插值表达式 -->
    <h1>{{ msg }}</h1>
    <h2>{{ obj.name }}</h2>
    <h3>{{ obj.age >= 18 ? "成年" : "未成年" }}</h3>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "大漂亮",
      obj: {
        name: "zyz",
        age: "23",
      },
    };
  },
};
</script>
<style>
</style>

注： dom中插值表达式赋值, vue的变量必须在data里声明

MVVM设计模式

  • MVVM，一种软件架构模式，决定了写代码的思想和层次

    M： model数据模型 (data里定义)

    V： view视图 （html页面）

    VM： ViewModel视图模型 (vue.js源码)

  • MVVM通过数据双向绑定让数据自动地双向同步 不再需要操作DOM

    V（修改视图） -> M（数据自动同步）

    M（修改数据） -> V（视图自动同步）

1. 在vue中，不推荐直接手动操作DOM！！！

2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！(思想转变)

v-bild

vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头每个指令, 都有独立的作用

给标签属性设置vue变量的值

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

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

  <div>
    <!-- Vue指令-v-bind -->
    <a v-bind:href="baiduUrl">百度一下你就知道</a><br />
    <img :src="imgSrc" alt="" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      baiduUrl: "https://www.baidu.com/",
      imgSrc:
        "https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics6.baidu.com%2Ffeed%2Fe4dde71190ef76c60bc69dc3a4b4aef0ae51676a.jpeg%3Ftoken%3D8d7d5b0005f3a1eba9aabf85d3633ce4&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1652547600&t=4789162c3d7ad4af28a9eb3cd4bd9199",
      count: 0,
    };
  },
};
</script>

总结: 把vue变量的值, 赋予给dom属性上, 影响标签显示效果

vue-on

给标签绑定事件

语法：

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

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

<template>
  <div>
    <!-- Vue指令-v-on -->
    <p>数量:{{ count }}</p>
    <button v-on:click="count = count + 1">+1</button>
    <button v-on:click="addFive">+5</button>
    <button v-on:click="addFn(10)">+10</button>
    <button @click="addFn(15)">+15</button>
    <br />
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    addFive() {
      this.count += 5;
    },
    addFn(num) {
      this.count += num;
    },
    fn(event) {
      event.preventDefault();
    },
    gg(num, e) {
      e.preventDefault();
    },
    hello() {
      console.log("点击了未跳转");
    },
  },
};
</script>
<style>
</style>

v-on修饰符

作用/目的: 在事件后面.修饰符名 - 给事件带来更强大的功能

语法：@事件名.修饰符="methods中的函数"

  • .stop - 阻止事件冒泡
  • .prevent - 阻止默认行为
  • .once - -程序运行期间，只触发一次事件处理函数
<template>
  <div>
    <!-- 调用方法阻止默认事件 -->
    <a v-bind:href="baiduUrl" @click="fn">不带参数</a><br />
    <a v-bind:href="baiduUrl" @click="gg(10, $event)">带参数</a><br />

    <!-- .prevent修饰符阻止默认行为 -->
    <a v-bind:href="baiduUrl" @click.prevent="hello">.prevent阻止跳转</a><br />

    <!-- .stop修饰符 阻止事件冒泡 -->
    <div @click="faFN">
      父
      <div @click.stop="sonFN">子</div>
    </div>

    <!-- .once修饰符 只触发一次 -->
    <button @click.once="one">抽奖</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      baiduUrl: "https://www.baidu.com/",
    };
  },
  methods: {
    fn(event) {
      event.preventDefault();
    },
    gg(num, e) {
      e.preventDefault();
    },
    hello() {
      console.log("点击了未跳转");
    },
    faFN() {
      console.log("父");
    },
    sonFN() {
      console.log("子");
    },
    one() {
      console.log("中了");
    },
  },
};
</script>

<style>
</style>

总结：修饰符给事件扩展额外功能

v-on案件修饰符

给键盘事件，添加修饰符

语法：

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

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

<template>
  <div>
    <input type="text" @keydown.enter="enterFn">
    <hr>
    <input type="text" @keydown.esc="escFn">
  </div>
</template>

<script>
export default {
 methods: {
   enterFn(){
     console.log("enter回车按键了");
   },
   escFn(){
     console.log("esc按键了");
   }
 }
}
</script>

总结：多使用事件修饰符, 可以提高开发效率, 少去自己判断过程

课堂案例-反转世界

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="reverseWorld">反转世界</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: "Hello,world",
    };
  },
  methods: {
    reverseWorld(){
      //获取message字符串并转换成数组
      let arr = this.message.split("");
      //数组倒转
      arr.reverse();
      // console.log(arr);
      //倒转后的数组转字符串
      let newStr = arr.join("");
      // 赋值给message
      this.message = newStr;
    }
  },
};
</script>
<style>
</style>

v-model

把value属性和vue数据变量, 双向绑定到一起

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

双向数据绑定

  • 数据变化 -> 视图自动同步

  • 视图变化 -> 数据自动同步

<template>
  <div>
    <p>用户名: <input type="text" v-model="admin" /></p>
    <p>密码: <input type="password" v-model="password" /></p>
    <button @click="login">登录</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      admin: "",
      password: "",
    };
  },
  methods: {
    login() {
      console.log(this.admin,this.password);
    },
  },
};
</script>
<style>
</style>

<template>
  <div>
    <p>
      来自于:
      <select v-model="city">
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
        <option value="东莞">东莞</option>
      </select>
    </p>

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

    <p>
      性别: <input type="radio" value="男" v-model="gender">男
            <input type="radio" value="女" v-model="gender">女
    </p>

    <p>
      自我介绍: <textarea v-model="intro"></textarea>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      city:"",
      hobby:[],
      gender:"",
      intro:"",
    };
  },
  methods: {},
};
</script>

<style>
</style>

v-model修饰符

让v-model拥有更强大的功能

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

  • .number 把数字字符串转成数字类型

  • .trim 去除首尾空白字符

  • .lazy 在chang时触发(input失去焦点才出发)

<template>
  <div>
    <!-- v-model修饰符.语法: v-model.修饰符="变量" -->
    <!-- .number作用是转换为数字类型赋值给变量 -->
    <p>年龄: <input type="number" v-model.number="age" /></p>

    <!-- .trim去除首尾的空白符 -->
    <p>用户名: <input type="text" v-model.trim="username" /></p>

    <!-- .lazy  对于input而言 失去焦点才去更新变量 -->
    <p>搜索: <input type="text" v-model.lazy="serach" /></p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      age: 18,
      username: "",
      serach: "",
    };
  },
  methods: {},
};
</script>
<style>
</style>

总结: v-model修饰符, 可以对值进行预处理, 非常高效好用

vue-for

列表渲染, 所在标签结构, 按照数据数量, 循环生成

语法：

  • v-for="值 in 数据(目标结构)"

  • v-for="(值,索引)in 数据(目标结构)"

目标结构：可以遍历数组/对象/数字/字符串

注意：v-for的临时变量名不能用到v-for范围外

<template>
  <div>
    <h3>数组遍历</h3>
    <ul>
      <!-- v-for作用:列表渲染 -->
      <!-- v-for="值变量 in 数据" -->
      <li v-for="item in arr">{{ item }}</li>
    </ul>
    <ul>
      <!-- v-for="(值变量，索引变量) in 数据" -->
      <li v-for="(item, index) in arr">{{ index + 1 }}:{{ item }}</li>
    </ul>

    <h3>对象遍历</h3>
    <ul>
      <!-- 对象遍历 item是对象的属性值 -->
      <li v-for="item in obj">{{ item }}</li>
    </ul>

    <ul>
      <!-- 第二个参数是对象的key -->
      <li v-for="(item, key) in obj">{{ key }}:{{ item }}</li>
    </ul>

    <h3>字符串遍历</h3>
    <ul>
      <!-- 字符串遍历，单独遍历每一个字符 -->
      <li v-for="item in '大漂亮'">{{ item }}</li>
    </ul>
    <ul>
      <li v-for="item in str">{{ item }}</li>
    </ul>
    <h3>数字遍历</h3>
    <ul>
      <!-- 数字遍历  从1到当前数字  负数报错 -->
      <li v-for="item in 9">{{ item }}</li>
    </ul>
    <ul>
    <li v-for="item in num">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["六一", "小宝", "千金"],
      obj: {
        name: "小宝",
        age: "0",
        hobby: "踢腿",
      },
      str: "大聪明",
      num: 6,
    };
  },
  methods: {},
};
</script>

<style>
</style>

总结：vue最常用指令，铺设页面力气，快速把数据赋予到相同的dom结构上循环生成

avatar
文章
阅读
粉丝