Vue基础篇一：编写第一个Vue程序

系列文章目录Vue基础篇一：编写第一个Vue程序文章目录系列文章目录环境搭建一、编写第一个Hello Vue程序二、编写第一个Vue组件2.1 使用Vue.component方式的缺点三、使用脚手架Vue CLI总结环境搭建浏览器：ChromeIDE: VS CodeNode.js 10+，npm一、编写第一个Hello Vue程序<!DOCTYPE html><html>

文章共3,697字 · 阅读需要大约13分钟

一键AI生成摘要，助你高效阅读

问答

智慧zhuhuix

18608人浏览 · 2020-10-02 15:42:32

智慧zhuhuix · 2020-10-02 15:42:32 发布

系列文章目录

Vue基础篇一：编写第一个Vue程序

环境搭建

浏览器：Chrome
IDE: VS Code
Node.js 10+，npm

一、编写第一个Hello Vue程序

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" media="screen" href="main.css">
        <script src="main.js"></script>
    </head>
    <body>
        <div id="app">
            {{message}}
        </div>
        <!--官方推荐： 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script>
            var app=new Vue({
                el: '#app',
                data: {
                    message: 'hello Vue!',
                }
            })
        </script>
        </div>
    </body>
</html>

在这里插入图片描述

二、编写第一个Vue组件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css">
    <script src="main.js"></script>
</head>

<body>
    <div id="app">
        {{message}}
        <ol>
            <todo-list v-for="item in list" v-bind:todo="item" v-bind:key="item.id"></todo-list>
        </ol>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('todo-list', {
            props: ['todo'],
            template: '<li class="text">{{todo.text}}</li>'
        })
        var app = new Vue({
            el: '#app',
            data: {
                message: 'hello Vue!',
                list: [{
                    id: 0,
                    text: '读书'
                }, {
                    id: 1,
                    text: '写字'
                }, {
                    id: 2,
                    text: '看电视'
                }
                ]
            }
        })
    </script>
    </div>
</body>

</html>

在这里插入图片描述

2.1 使用Vue.component方式的缺点

全局定义：强制要求每个component中的命名不得重复
字符串模板：缺乏语法高亮，在HTML有多行的时候，需要用到“\”
不支持css：意味着当HTML和JavaScript组件化时，css无效
不支持构建：只能使用HTML和ES5 JS，不能使用预处理器等

三、使用脚手架Vue CLI

通过脚手架创建一个Hello World程序

> npm install -g @vue/cli
> vue create hello-world

选择版本
选择包的管理方式：
成功创建项目
添加一个单文件组件

<!-- TodoItem.vue -->
<template>
  <li class="text">{{ todo.text }}</li>
</template>
<script>
export default {
  props: ["todo"],
};
</script>

<style scoped>
.text {
  color: #2c3e50;
}
</style>

修改App.vue与HelloWorld.vue

<!-- HelloWorld.vue -->
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

<!-- app.vue -->
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Hello Vue!" />
    <ol>
      <todo-item
        v-for="item in list"
        v-bind:todo="item"
        v-bind:key="item.id"
      ></todo-item>
    </ol>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import TodoItem from "./components/TodoItem.vue";

export default {
  name: "App",
  data() {
    return {
      list: [
        {
          id: 0,
          text: "读书",
        },
        {
          id: 1,
          text: "写字",
        },
        {
          id: 2,
          text: "看电视",
        },
      ],
    };
  },
  components: {
    HelloWorld,
    TodoItem,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
}
</style>