vue加强

最新推荐文章于 2025-07-21 20:52:11 发布

原创最新推荐文章于 2025-07-21 20:52:11 发布 · 302 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#我的前端学习生涯

vue加强专栏收录该内容

0 篇文章

订阅专栏

一.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/vue-router@3.0.1/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