毕设：week2-vue.js之项目1：hello,vue!

最新推荐文章于 2024-01-21 23:08:15 发布

cs_rookie

最新推荐文章于 2024-01-21 23:08:15 发布

阅读量195

点赞数

分类专栏：毕设

本文链接：https://blog.csdn.net/qq_33516656/article/details/98217657

版权

毕设专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Vue.js项目1：hello,vue!

一、新建一个webpack应用

1、打开Windows PowerShell
在这里插入图片描述 2、进到你需要存储应用的文件夹目录（注意：文件目录不要带有中文）

3、新建一个名为hellovue的webpack应用,出现一下黄色的提示回车即可

vue init webpack hellovue

在这里插入图片描述 完成依赖安装
4、进到hellovue目录，并且运行webpack应用

cd hellovue
npm run dev

在这里插入图片描述 5、在浏览器中输入：localhost:8080看运行结果

二、在webpack模板基础上编写hellovue应用

1、用subline text3打开应用所在的文件夹
在这里插入图片描述

2、打开hellovue-src-App.vue

3、修改Helloword.vue

<template>
  <div class="hello">
  <input type="text" v-model="msg" placeholder="请输入文字">
    <h1>hello,{{ msg }}</h1>
  </div>
</template>

<script>
export default {
    name:'HelloWorld',
    data () {
      return {
        msg: ' '
      }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1{
  font-weight: normal;
}
</style>

在这里插入图片描述 4、查看运行结果：
6.在输入框输入：Vue,再查看结果!

Try to be yourself!