测试开发笔记

前端技术

vue框架html中的script内容转换成.vue文件的script内容

By 李镇伟 2018年10月31日

问题：
1.因为前段时间学习vue，都是在一个index.html中添加<html>和<script>
2.如果使用.vue文件，<template>对应index.html<html>作为展示层，<script>作为逻辑层对应index.html的<script>
html中用的是new vue。而.vue文件中用的是export default。下面是对比

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>vueapp01</title>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<style>
  .class1{
    background: #444;
    color: #eee;
  }
</style>
<body>
  <div id="app"></div>
  <div id='example-3'>
    <input type="checkbox" id="jack" value="白金会员" v-model="checkedNames">
    <label for="jack">白金会员</label>
    <input type="checkbox" id="john" value="黄金会员" v-model="checkedNames">
    <label for="john">黄金会员</label>
    <input type="checkbox" id="mike" value="王者会员" v-model="checkedNames">
    <label for="mike">王者会员</label>
    <br>
    <span>选择会员种类: {{ checkedNames }}</span>
  </div>
  <div id="app2">
    <input v-model="username" placeholder="用户名">
    <p>用户名是: {{ username }}</p>
    <input  type="password" v-model="password" placeholder="密码">
    <p>密码是: {{ password }}</p>
    <button v-on:click="login">登录</button>
  </div>
</body>
<script type="text/javascript">
  var chenames=new Vue({
    el: '#example-3',
    data: {
      checkedNames: []
    }
  })
  var user=new Vue({
    el :'#app2',
    data: {
      username:'',
      password:''
    },
    methods :{
      login:function(event){
        alert('用户名是:'+this.username+',密码是:'+this.password+'，选择的是:'+chenames.checkedNames)
      }
    }
  })
</script>
</html>

.vue文件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div id='example-3'>
    <input type="checkbox" id="jack" value="白金会员" v-model="checkedNames">
    <label for="jack">白金会员</label>
    <input type="checkbox" id="john" value="黄金会员" v-model="checkedNames">
    <label for="john">黄金会员</label>
    <input type="checkbox" id="mike" value="王者会员" v-model="checkedNames">
    <label for="mike">王者会员</label>
    <br>
    <span>选择会员种类: {{ checkedNames }}</span>
  </div>
  <div id="app2">
    <input v-model="username" placeholder="用户名">
    <p>用户名是: {{ username }}</p>
    <input  type="password" v-model="password" placeholder="密码">
    <p>密码是: {{ password }}</p>
    <button class="btn btn-large btn-primary" v-on:click="login">登录</button>
  </div>
  </div>
</template>
<script>
export default {
  name: "hello",
  data() {
    return {
      msg: "欢迎来到测试开发笔记！",
      checkedNames:[],
      username: "",
      password: "",
    };
  },
  methods:{
    login(){
       alert('用户名是:'+this.username+',密码是:'+this.password+'，选择的是:'+this.checkedNames)
    }
  }
};
</script>