一.VUE组件
vue的组件就是一个自定义标签:全局与局部
注意: 1.必需有根标签 2.必定义组件,再挂载 3.标签命名 myTag -> my-tag
1.1 我们可以使用模板来完成我们的:template
①.写法一:直接写到template属性里面
Vue.component("myform",{
//如果模板内容太多,写在这里会很麻烦
template:"<div>内容</div>"
})
②.写法二:直接写到template标签里面
<template id="mytemp">内容</template>
Vue.component("myform",{
template:"#mytemp"
})
③.写法三:直接写到script标签里面(type="text/template")
<script id="mytemp" type="text/template">内容</script>
Vue.component("myform",{
template:"#mytemp"
})
1.2 如果有数据与方法应该写在咱们模板配置中
new Vue({
el:"#app",
data:{
message:"你好啊!"
},
components:{
//myform模板名
myform:{
template:"#mytemp",
//这个data必需是一个函数
data() {
return {
count: 0,
message:"我也是一个中国人"
}
},
methods:{
say(){
alert("点我啊");
}
}
}
}
})
2.路由
定义
路由是负责将进入的浏览器请求映射到特定的 组件 代码中。 即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源(组件)的映射,通过一个路径的url地址,可以唯一找到一个资源。
路由不包含在vue中,是一个插件,需要单独下载。
地址:https://unpkg.com/[email protected]/dist/vue-router.js
引入
<script src="vuejs/vue.js"></script>
<script src="vuejs/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<!-- 使用app中的路由:匹配到product路由地址,然后在router-view标签中展示这个地址对应的资源 -->
<p>
<router-link to="/product">公司产品</router-link>
<router-link to="/about">关于我们</router-link>
<router-link to="/index">欢迎</router-link>
</p>
<hr />
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<script type="text/javascript">
//>>1.定义首页:组件
var index = Vue.component("index", {
template : "<h1>首页</h1>"
});
//>>2.公司产品:组件
var product = Vue.component("product", {
template : "<h1>公司产品</h1>"
});
//>>3.关于我们:组件
var about = Vue.component("about", {
template : "<h1>关于我们</h1>"
});
//>>4.创建一个路由:
var router = new VueRouter({
routes : [ {
path : "/index",//路由地址
component : index
//路由对应的资源
}, {
path : "/about",//路由地址
component : about
//路由对应的资源
}, {
path : "/product",
component : product
}, ]
});
//创建一个vue对象
var app = new Vue({
el : "#app",//挂载在app上
router : router
//使用路由对象
});
</script>
</body>
3.常用的vue组件
<script src="vuejs/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="vuejs/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="vuejs/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<!--创建一个button,绑定一个点击事件,点击后设置visible为true -->
<el-button @click="visible = true">Button</el-button>
<!--绑定一个visible属性:当为true时,弹出一个dialog,
title:标题;
-->
<el-dialog :visible.sync="visible" title="Hello world" >
<p>Try Element</p>
</el-dialog>
</div>
<script>
new Vue({
el : '#app',//挂载在app上
data () {
return {
visible : false
}
}
})
</script>
</body>
4.如果业务需要,就可以到下面的这个地址去下载相应的组件和代码
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,类似于easyui一样,提供了很多的ui组件。
资料下载网站:http://element-cn.eleme.io/#/zh-CN/component/layout