vue组件引入

/src/route/index.js
import Demo2 from ‘@/pages/demo2/index.vue‘
 {
    	path : ‘/demo2‘,
    	name : ‘demo2‘,
    	component: Demo2
    },

/src/pages/demo1/index.vue
    <template>
	<div>

		<div>自定义组件</div>

		<div>--------------------</div>
		<countdown></countdown>
	</div>

    </template>
    <script>
	import countdown from ‘@/components/countdown.vue‘
	export default{
		data(){
			return {

			}
		},
		components : {
			countdown
		},

	}
    </script>

/src/components/countdown.vue
    <template>
        <p>{{time}}</p>
    </template>

    <script>
	export default{
		data(){
			return {
				time: 10,
			}
		},
		mounted : function(){
			let vm = this;
			let t = setInterval(function(){
				vm.time--;
				if(vm.time == 0){
					clearInterval(t);
					vm.$emit(‘end‘);
				}
			},1000)
		}

	}
    </script>

  

原文地址:https://www.cnblogs.com/cl94/p/12216025.html

时间: 2024-11-07 08:22:10

vue组件引入的相关文章

Vue 组件引入子组件v-for

当父组件引入子组件时,v-for 遍历对象,会显示对象有多少个属性和方法,为遍历出显示次数. 而v-for 遍历数组,则遍历显示一次. 父组件 <!--引入子组件 子组件,在子组件 v-for 指令遍历对象,会循环显示次数为对象有多少属性和方法--> <compontentA v-for="(value, key) in ObjList" :key="key" :class="{odd: key % 2}"> {{ val

vue组件引入jquery

步骤: 1.安装jquery:npm install jquery 2.修改配置:在webpack.base.conf.js文件加入 var webpack=require('webpack'); module.exports = { plugins:[ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery&q

vue组件

require.js 加载 vue组件 r.js 合并压缩 require.js 参考阮一峰 Javascript模块化编程(三):require.js的用法r.js 合并压缩 参考司徒正美 r.js合并实践 准备: vue.js 原本是学习vue组件 require.js 然后想到用require 加载 r.js 文件太多 合并 文件目录 忽略部分文件及文件夹 一.先说vue 组件 先引入vue 再引入vue组件 Vue.extend({}) 定义组件 template data method

关于vue组件的一个小结

用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维护成本更加的适合,而且最近看到Apache对react的相关许可限制:这里不讨论react和vue的对比哪个好,技术框架没有最好的,只有适合项目才是最好的. 进入主题....... 组件,是vue的核心之一. 我们可以把页面各个子模块看成一个组件,可以独立拆分出来.这样不仅维护变得简单了,而且代码复

Vue组件开发分享

在开始本文之前,你可能需要先了解以下相关内容: Vue.js  一款高性能轻量化的MVVM框架 Webpack  前端模块化代码构建工具 Vue组件介绍 基于vue.js高效的双向数据绑定特性,让我们在开发高可用组件时可以更加专注于数据逻辑开发: 忘记DOM操作,忘记事件绑定,让开发的专注力集中于数据上: 1.定义需要使用的数据及类型 2.在合适的时机更新数据 3.在模板上绑定数据与视图的映射关系 4.开放对外调用接口 代码 https://github.com/xiaoyunchen/vue-

vue 组件属性props,特性驼峰命名,连接线使用

今天在学习vue的时候碰到了一个有趣的问题 是这样的,先来个话题引入,后面会用到 var myname={ 'first-name':'9', 'last-name':'l o n g' } console.log(myname.first-name); console.log(myname['first-name']); 打印出来是  NaN  9 解释下,之所以没有前面没有打印出来9,是因为程序走的时候,把我们认为的英文连接符当做减号看待,myname.first是undefined,nam

vue组件的引用:

本文是基于vue-cli脚手架的基础上对vue组件的引用做简单介绍,关于vue-cli脚手架,请见:vue脚手架的安装流程(vue-cli). 在src文件夹下创建components文件夹,并在其下面创建Home.vue和List.vue两个文件: 在App.vue中引入Home.vue和List.vue两个组件: 这样Home.vue和List.vue两个组件就被引入到App.vue组件里面了,效果图如下: 注意:引入组件的component是要带s的,而配置路由的component不要带s

webpack单独构建scss文件与.vue组件里构建scss的一个坑

在入口main.js里构建scss是通过引入模块的方式 import './assets/_reset.scss'; import './assets/_flex.scss'; import './assets/_functions.scss'; 在.vue组件里是单独构建的 <style lang="scss" scoped> img { width: rem(300px); } #product, .gallery, .detail { width: rem(750px

非常简单的vue里面引入jquery

如何在vue里面引入jq了,只需四部就完成 第一步 cnpm install jquery 第二步 打开build文件夹 , 打开webpack.base.conf.js文件找到下面module.exports module.exports = { resolve: { alias: { 'jquery':path.resolve(__dirname,'../node_modules/jquery/src/jquery') //添加这段代码 } }, 第三步 还是在build文件夹,打开webp