VUE的组件使用
一、组件基础
格式1:
<div id="id的名字">
<组件的名字>组件的名字>
div>
<script type="text/javascript">
//把这个组件加载到VUE容器中
Vue.component('组件的名字',{
//第二个参数的形式，都是{data:function(){xxx},template}
//其中，data是可选的，template是必填的
data:function () {
return{
//return也是必须写的，哪怕里面啥都没有
//这里可以用来写某些值，这样就可以在一个网页运行两个同样的VUE组件也不冲突
}
},
template:'这里写组件的元素，就把这里的东西映射到上面body的div中'
});
//这里还是要new一个VUE的，因为上面只是把东西加在容器中，还没有创建VUE
var vm=new Vue({
el:'#id的名字',
data:{
}
});
script>
例子：
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
head>
<body>
<div id="app">
<button-counter>button-counter>
<button-counter>button-counter>
div>
<script type="text/javascript">
//第一个参数是名字，第二个template必填，data可选
Vue.component('button-counter',{
props:['title'],
data:function () {
return{
//这里就，默认有一个count变量，起始为0
//这里可以理解为data:{count:0},看起来是在return里面怪怪的，不要管他
count:0
}
},
//这里就写元素了，这个组件就只有一个button，template必填
template:'',
//在这里面写方法，写法和平时的一样
methods:{
add:function () {
this.count++;
}
}
});
//创建VUE对象
var vm=new Vue({
el:'#app',
data:{
}
});
script>
body>
html>
格式2：
<div id="id的名字">
<test>test>
div>
<script type="text/javascript">
var app=new Vue({
el:"#id的名字",
data:{
//data数据
},
methods:{
//方法
},
//这里开始写模板
components:{
//模板的名字，然后里面是各个属性
test:{
template:'这里写组件的元素，就把这里的东西映射到上面body的div中',
//props可选
props:['标题'],
//data可选，data里面return相当于data:{count:0}
data:function () {
return{
count:0
}
},
//方法
methods:{
//方法
}
}
}
});
script>
例子
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
head>
<body>
<div id="app">
<test>test>
<test>test>
div>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
//data数据
},
methods:{
//方法
},
//这里开始写模板
components:{
//模板的名字，然后里面是各个属性
test:{
template:'',
props:['title'],
data:function () {
return{
count:0
}
},
methods:{
add:function () {
this.count++;
}
}
}
}
});
script>
body>
html>
二、单文件使用
1、环境配置(又长又臭)
VUE官方教程
按照官网的说法，要下载npm，然后在里面安装vue-cli和webpack
1）下载node.js
node.js官网下载，自带npm
下好后：
2）下载vue-cli
然后下载VUE-cli
最后查看版本vue --version
2、创建项目
先自己找个地方创个目录，比如我是D:\网页\HBuilder\VUE测试项目
vue create testapp创建项目，第一次进去y然后继续
- 第一个就是默认的，第二个是手动的，我们选手动
- 控制选择确定与取消，回车就下一步了
- Babel，编译，必带的
- TypeScript:如果用的不是JS就选
- Proxxxx：大项目的
- Router：路由
- Vuex：状态管理
- CSS xxx：css处理器
- Linter：代码格式化规范
- unit Testing：单元测试
- 不知道
- 配置文件分开来写还是在一个文件里面写，分开就第一个，在一个文件写就第二个。这里选集合在一起
- 刚才做的配置是否想要保存一下，下次就用这个配置就行
- 他就自己生成了，等很久
创建成功了，打开文件看看
- 其他的不用管，都是一堆配置
- src里面，就是我们写代码的东西，把东西都写在.vue文件，然后node.js通过解析，把vue文件转化为html文件，让浏览器识别
三、运行项目
这个图，也告诉我们，先进入testapp，再npm run serve，那么我们就来吧
好了，我们localhost:8080打开
1、看里面的代码
HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentationa>.
p>
<h3>Installed CLI Pluginsh3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babela>li>
ul>
<h3>Essential Linksh3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docsa>li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Foruma>li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chata>li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twittera>li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">Newsa>li>
ul>
<h3>Ecosystemh3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-routera>li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuexa>li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtoolsa>li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loadera>li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vuea>li>
ul>
div>
template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
script>
<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>
- 可以看到，是3段式的，template、script、style
export default：name这个组件的名字，props，里面的每一个参数都有{}，msg:String这个msg参数类型为String。后面还可以加default，默认值为什么
App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
div>
template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
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>
import HelloWorld from './components/HelloWorld.vue'，导入什么组件的名字，在哪里导入export default：这个VUE文件叫啥，components要用到哪些组件
2、流程
流程呢，就是运行D:\网页\HBuilder\VUE测试项目\testapp\public\index.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %>title>
head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.strong>
noscript>
<div id="app">div>
body>
html>
里面有个idv，id为app，哪里找？
在D:\网页\HBuilder\VUE测试项目\testapp\src\main.js
然后到了App.vue
到了HelloWorld.vue
所以流程就是，先把小部分的做好，放到App.vue中，然后main.js再.$mount('#app')。最后，html文件使用，加载所有东西
3、打包
你直接打开那个index.html文件，浏览器是不会识别的，因为里面又VUE的一堆环境什么的
在cmd中使用命令打包生成html
进入到D:\网页\HBuilder\VUE测试项目\testapp，输入npm run build
生成了文件，打开看看
里面的代码全是经过压缩的
但是！！！！你双击还是不能运行！！！直接空白
双击显示错误提示
构建文件务必放在一个HTTP服务器。直接打开index.html文件将不工作。
所以，就是当你用spring boot的时候，放在正确的位置，就可以看了，至于正确的位置是哪里，还在研究。