认识单文件组件.vue 文件

Posted 2021-02-15 jianxian

    vuejs 自定义了一种.vue文件，可以把html, css, js 写到一个文件中，从而实现了对一个组件的封装， 一个.vue 文件就是一个单独的组件。由于.vue文件是自定义的，浏览器不认识，所以需要对该文件进行解析。 在webpack构建中，需要安装vue-loader 对.vue文件进行解析。在 sumlime 编辑器中，我们 书写.vue 文件，可以安装vue syntax highlight 插件，增加对文件的支持。

　　用vue-cli 新建一个vue项目，看一下.vue文件长什么样？ 在新建项目的过程中，命令行中会询问你几个问题，当询问是否安装vue-router 时，这里先选择否。项目完成后，我们看到src  目录下有一个componet 目录，里面有一个 Hello.vue 文件，内容如下，这里对template 里面的内容做了一些删减。

复制代码
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
  </div>
</template>

<script>
export default {
  name: ‘hello‘,
  data () {
    return {
      msg: ‘Welcome to Your Vue.js App‘
    }
  }
}
</script>

<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

    可以看到，在 .vue 文件中， template 中都是html 代码，它定义了在页面中显示的内容，由于里面还有变量，也可以说定义了一个模版；script中都是js 代码，它定义这个组件中所需要的数据和及其操作，style 里面是css 样式，定义这个组件的样式，scoped 表明这里写的css 样式只适用于该组件，可以限定样式的作用域。

 

（2）script 标签中 export defalut 后面的对象的理解

    在不使用.vue 单文件时，我们是通过 Vue 构造函数创建一个 Vue 根实例来启动vuejs 项目，Vue 构造函数接受一个对象，这个对象有一些配置属性 el, data, component, template 等，从而对整个应用提供支持。

new Vue({
  el: ‘#app‘,
  data: {
        msg: "hello Vue"     
  }  
})

    在.vue文件中，export default 后面的对象 就相当于 new Vue() 构造函数中的接受的对象，它们都是定义组件所需要的数据（data）, 以及操作数 据的方法等， 更为全面的一个 export default 对象，有methods, data, computed, 这时可以看到, 这个对象和new Vue() 构造函数中接受的对象是一模一样的。但要注意data 的书写方式不同。在 .vue 组件, data 必须是一个函数，它return（返回一个对象），这个返回的对象的数据，供组件实现。

　把项目中自带的hello.vue 内容清空，我们自己写一个组件来体验一下这种相同。

<template>
  <div class="hello">
    <input type="txet" placeholder="请输入文字" v-model="msg" @keypress.enter="enter">
    <p>{{upper}}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: ‘hello‘
    }
  },
  methods:{
    enter () {
      alert(this.msg);
    }
  },
  computed: {
    upper () {
      return this.msg.toUpperCase();
    }
  }
}
</script>

<style scoped>
  input {
    width: 200px;
    height: 20px;
  }
  p {
    color: red;
  }
</style>

    页面中有一个input输入框，当进行输入的时候，输入框下面的内容会进行同步显示，只不过它是大写，当输入完成后，按enter键就会弹出我们输入的内容。获取用户输入的内容，我们用的是v-model 指令，这个指令将用户输入的内容绑定到变量上，并且它响应式的，我们的变量值会随着用户输入的变化而变化，也就是说我们始终获取的都是用户最新的输入。下面大写的显示，用的是computed属性，弹窗则是给绑定了一个keypress事件，通过描述，你会发现，它简直就是一个vue实例，实际上它就是个vue实例。每一个vue组件都是一个vue实例，更容易明白 export default 后面的对象了。

    

 

 

.