vue学习记录②(hello world!)

2018-06-24 00:17:41来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

接着上篇vue-cli脚手架构建项目结构建好项目之后,就开始写个“hello world!”吧~~~

vue玩的都是组件,所以开发的也是组件。

1.新建helloworld.vue。(删除Hello.vue)代码如下:

<!--模板部分-->
<template>
    <div class="container">
        <h1>hello,world!</h1>
        <p>{{test}}</p>
    </div>
</template>
<!--js部分-->
<script>
export default {
    name: 'helloworld',
    data() {
        return {
            test: 'this is a test'
        };
    }
}
</script>
<!--样式部分-->
<style>
.container {
    background: #aaa;
    color: blue;
}
</style>

一个简单的组件就完成了。

2.我们打开入口组件App.vue并把里面的代码替换成如下代码:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!--使用组件-->
    <helloworld></helloworld>
  </div>
</template>

<script>

import helloworld from './components/helloworld'
export default {
  components: { helloworld }
}
</script>

<style>
#app {


  font-family: 'Avenir', Helvetica, Arial, sans-serif;


  -webkit-font-smoothing: antialiased;


  -moz-osx-font-smoothing: grayscale;


  text-align: center;


  color: #2c3e50;


  margin-top: 60px;
}
</style>

这个时候还要将router文件夹下的index.js里面的代码屏蔽。因为这个栗子还没涉及到路由功能。

3.紧接着我们就可以启动服务了,在命令行下输入:

npm run dev

如果不报错,说明编译成功了,就会在浏览器中看到如下页面:

新建的helloworld.vue这个组件就运行成功了,hello world !也就出世了。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:前端js优化方案(二)持续更新

下一篇:LeetCode 1:Two Sum