Vue的高级运用

<template>
  <div id="app">
    <!-- 4，使用自定义组件,其实就当做HTML标签用就行了 -->
    <Car></Car>
  </div>
</template>

<script>
    //1,导入自己的组件Car.vue
    //Car 是Car.vue里面的name属性的值
    //./components/Car.vue 是组件的路径(必须以 ./ 开始)
    import Car from './components/Car.vue'
export default {
  name: 'App',
  //2，注入组件（类似于局部组件的语法）
  components:{
    Car  //3，使用了第一部的名字
  }
}
</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>

----------------------------------------------

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';//
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

------------------------------------------

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

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

<!-- Add "scoped" attribute to limit CSS to this component only -->
<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>

----------------------------------

<!-- 1，写HTML代码 -->
<template>
  <div>
    <h1>{{msg}}</h1>
    <!-- 开始使用elementui的组件，本质上是一些标签 -->

        <!-- 2.icon图标,,使用i组件,class的值是 图标名称 -->
    <i class="el-icon-edit"></i>
    <i class="el-icon-s-home"></i>
    <i class="el-icon-user"></i>
    <!-- 1,layout布局，默认一行是24个分格 el-row是行 el-col是列 -->
    <el-row>
      <el-col :span="3">品牌</el-col>
      <el-col :span="10">价格</el-col>
      <el-col :span="11">描述</el-col>
    </el-row>
    <!-- 3,按钮el-button组件 -->
    <el-row>
      <el-button type="danger">普通按钮</el-button>
      <el-button type="danger" round>普通按钮</el-button>
      <el-button type="primary" circle icon="el-icon-edit"></el-button>
      <!-- 4,输入框el-input,添加属性实现输入效果v-model -->
      <el-input placeholder="输入姓名" v-model="msg" clearable show-password></el-input>
      <el-input placeholder="请输入内容" :disabled="true">
    </el-input>
        <!-- 5，表格标签 -->
        <el-table :data="arr">
          <el-table-column label="编号" prop="id"></el-table-column>
          <el-table-column label="品牌" prop="pinpai"></el-table-column>
          <el-table-column label="描述" prop="desc"></el-table-column>
          <el-table-column label="价格" prop="price"></el-table-column>
          <el-table-column label="更多">
            <!-- 圆形按钮，icon设置图标，type设置颜色 -->
            <el-button circle icon="el-icon-edit" type="danger"></el-button>
            <el-button circle icon="el-icon-delete" type="danger"></el-button>
          </el-table-column>
        </el-table>
    </el-row>
    <!-- 6，表单标签 -->
    <el-form>
      <el-form-item label="标题:">
        <el-input placeholder="请输入..."v-model="item.name"></el-input>
      </el-form-item>
      <el-form-item label="买点:">
        <el-input placeholder="请输入..." v-model="item.sellpoint"></el-input>
      </el-form-item>
      <el-form-item label="价格:">
        <el-input placeholder="请输入..." v-model="item.price"></el-input>
      </el-form-item>
      <el-form-item label="详情:">
        <el-input placeholder="请输入..." v-model="item.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click = "save()">保存</el-button>
        <el-button type="success">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<!-- 2，写JavaScript代码 -->
<script>
  export default{ //可导出的自定义组件
    name : 'Car',
    data(){
      return {
        msg : 'Hello Vue!!!',
        arr:[
          {
            id : 1,
            pinpai : '红星二锅头',
            desc : 'to be no.2',
            price : 999
          },
          {
            id : 2,
            pinpai : '五粮液',
            desc : 'to be no.1',
            price : 999999
          },
          {
            id : 3,
            pinpai : '贵州茅台',
            desc : '世界第一',
            price : 9999999
          },
          {
            id : 4,
            pinpai : '洋河大曲',
            desc : '超好喝',
            price : 6888
          }
        ],
        item : {
          name : '测试标题',
          sellpoint : '测试卖点',
          price : 99,
          desc : '测试详情'
        }
      }
    },
    methods:{
      save(){
        alert("保存成功");
      }
    }
  }
</script>
<!-- 3，写css代码 -->
<style>
</style>