Vue 进阶路由的简单使用计算属性组建的简单使用 Vue-cli webpack打包

最新推荐文章于 2024-02-18 16:46:07 发布

会摄影的程序员

最新推荐文章于 2024-02-18 16:46:07 发布

阅读量175

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_42998796/article/details/103779588

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

组件的使用

什么是组件
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素标签，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 js特性进行了扩展的原生 HTML 元素。
作用：
组件是对特定功能代码(html,css,js)的封装, 通过组件的名字可以重复利用该组件中的代码.
分类：
全局组件:在所有vue实例中(.在它所挂载元素下面有效)有效
局部组件:在自己vue实例中(.在它所挂载元素下面有效)有效

全局组件的使用：

<div id="app">
    <mycomponent1></mycomponent1>
    <mycomponent2></mycomponent2>
</div>

<div id="app1">
    <mycomponent1></mycomponent1>
    <mycomponent2></mycomponent2>
</div>
-------------------------------------------------------------------------------
//定义第一个全局组件
Vue.component("mycomponent1",{
	template : "<h1>这是第一个全局组件</h1>"
})

//定义第二个全局组件
var component2Config = {
	template : "<h1>这是第二个全局组件</h1>"
};
Vue.component("mycomponent2",component2Config);

var app = new Vue({
	el: "#app",
	data: {
	}
});

var app1 = new Vue({
	el: "#app1",
	data: {
	}
});

主要事项：template中的html必须在一个标签中. 仅且只能有一个根节点。不然是不能被vue渲染的！

局部组件：

<div id="app1">
    <mycomponent></mycomponent>
</div>
<div id="app2">
    <mycomponent></mycomponent>
</div>


//>>1. 在id=app1挂载的实例的components中定义局部组件
var app1 = new Vue({
	el: "#app1",
	data: {},
	components : {
		"mycomponent" : {
			template : "<h1>这是一个局部组件</h1>"
		}
	}
});

//>>2. 在id=app2的标签中是不能够使用上面app2对象的局部组件.
var app2 = new Vue({	
	el: "#app2",
	data: {}
});

动态获取组件中的值：
语法：
“组件的名字”:{
template: “”,
data : function(){
return {
键1:值1,
键2:值2
}
}
}
从语法中可以看出，组件中的数据必须是函数
注意：
 data数据只能够以函数的形式返回,因为函数中可以写其他的业务代码
 只能够在各自的组件模板中使用各自的组件中的data数据
 Vue对象中的数据不能够在组件中使用. 组件的数据也不能够在挂载的html标签上使用.

测试代码：

<body>

    <div id="app">
        <mycomponent></mycomponent>
    </div>
    <template id="mytemplate">
        <form method="post">
            {{name1}}:<input type="text" /> <br>
            密码:<input type="password" /><br>
            <input type="button" @click="login" value="登录" />
        </form>
    </template>

<script type="text/javascript">

   var mytabConfig = {
       template:"#mytemplate",
       data(){
           return {"name1":"xxxx"}
       }
   }
   Vue.component("mycomponent",mytabConfig);
   var app = new Vue({
       el: "#app",
       data: {
       }

   });

</script>
</body>

路由的简单使用

定义：
路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源。路由不包含子啊vue中，是一个插件，需要单独下载。
官方地址：[https://router.vuejs.org/zh/]
地址：添加链接描述

入门：

//引用路由的核心js文件
<script src="node_modules/vue-router/dist/vue-router.js"></script>

<div id="app">
	<!-- 使用 router-link 组件来导航. -->
	<!-- 通过传入 `to` 属性指定链接. -->
	<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
	<!-- 使用app中的路由：匹配到product路由地址，然后在router-view标签中展示这个地址对应的资源 -->
	<router-link to="/product">公司产品</router-link>
	<router-link to="/about">关于我们</router-link>
	<hr />
	<!-- 路由出口 -->
	<!-- 路由匹配到的组件将渲染在这里 -->
	<router-view></router-view>
</div>

import Vue from 'vue';
import VueRouter from 'vue-router'
es语法需要换成js导入
//Vue.use(VueRouter)

//>>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 : "/",//路由地址
        component : index
        //路由对应的资源
    }, {
        path : "/about",//路由地址
        component : about
        //路由对应的资源
    }, {
        path : "/product",
        component : product
    }, ]
});

//创建一个vue对象
var app = new Vue({
    el : "#app",//挂载在app上
    router : router
//使用路由对象
});

计算属性

计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。

var vm = new Vue({
      el:"#app",
      data:{
          birthday:1429032123201 // 毫秒值
      },
      computed:{
          birth(){// 计算属性本质是一个方法，但是必须返回结果
              const d = new Date(this.birthday);
              return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
          }
      }
  })


 		<div id="app">
         <h1>您的生日是：{{birth}} </h1>
        </div>

**watch：**监控一个值的变化。从而做出相应的反应。

 <div id="app">
      <input type="text" v-model="message">
  </div>
  <script src="./node_modules/vue/dist/vue.js"></script>
  <script type="text/javascript">
      var vm = new Vue({
          el:"#app",
          data:{
              message:""
          },
          watch:{
              message(newVal, oldVal){
                  console.log(newVal, oldVal);
              }
          }
      })
  </script>

webpack打包

1、为什么需要打包

将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。
将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
将代码打包的同时进行混淆，提高代码的安全性。
2、是什么
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分
析，然后将这些模块按照指定的规则生成对应的静态资源。

Vue-cli

**简介：**

在开发中，需要打包的东西不止是js、css、html。还有更多的东西要处理，这些插件和加载器如果我们一一去添加就会比较麻烦。
幸好，vue官方提供了一个快速搭建vue项目的脚手架：vue-cli
使用它能快速的构建一个web工程模板。
官网：添加链接描述
安装命令：npm install -g vue-cli

总结

到这里，vue的核心就简单的介绍完成了！当然，只是vue的简单使用，如果需要了解更多！请到vue官网：添加链接描述

会摄影的程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 进阶路由的简单使用计算属性组建的简单使用 Vue-cli webpack打包

组件的使用什么是组件组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素标签，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 js特性进行了扩展的原生 HTML 元素。作用：组件是对特定功能代码(html,css,js)的封装, 通过组件的名字可以重复利用该组件中的代码....
复制链接

扫一扫