svelte目前没有提供官网路由组件，不过可以在社区中找到。本文介绍的是svelte-spa-router的使用方法。
npm i svelte-spa-router 参考以下目录结构创建文件（不是必须）
router.js:
import index from './index/index.svelte'; import a from './a/a.svelte'; import b from './b/b.svelte'; export const routes = { '/': index, '/a': a, '/b': b } 动态导入组件和代码分割：
import { wrap } from 'svelte-spa-router/wrap' import index from './index/index.svelte'; export const routes = { '/': index, '/a': wrap({ asyncComponent: () => import('./a/a.svelte') }), // '/b': b // 动态加载 '/b': wrap({ asyncComponent: () => import('./b/b.svelte') }), } 动态导入组件的优点是组件不会一起打包，而是单独的组件文件，在打开对应的页面时才会请求，可以有效减少包文件大小。 App.svelte:
Nuxt.js 2.13+可以扫描并自动导入您的组件，不再需要在该script部分中手动导入它们！
nuxt.config配置：
export default { components: true } 设置为true或使用对象时，它将包含nuxt / components依赖项，并且~/components在模板中使用它们时会自动导入您的组件。
组件目录：
components/ ComponentFoo.vue ComponentBar.vue 使用
<template> <ComponentFoo /> <component-bar /> </template> 注意：如果使用nuxt 2.10…2.13，则还必须手动安装并添加@nuxt/components到buildModulesinside nuxt.config。
vue在子组件中直接修改父组件传递下来的数据会报错： Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "json"
原因是vue子组件不能直接修改父组件的数据，可以使用this.$emit发送通知，让父组件来修改。 示例代码：
子组件：
this.$emit("changeData", "要修改的数据"); 父组件：
<mycomponent :json="JsonData" @changeData="changeData"></mycomponent> data(){ return { JsonData:{} } } methods:{ changeData(newData){ this.JsonData = newData; } } 子组件发送changeData事件， 父组件绑定changeData事件并接受数据，赋值给父组件的JsonData属性，子组件的值也会改变。从而实现子组件修改父组件的属性值。
不依赖jquery也可以实现图片预览功能：
<!--图片放大后的div 开始 这块粘贴在你的html中最后body前 --> <div id="outerdiv" style="text-align: center;position: fixed;z-index: 9999;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(28,28,28,0.9);"> <img id="bigimg" style="max-height: 800px;max-width: 100%;border: 0;margin: auto;position: absolute;top: 0;bottom: 0;left: 0;right: 0;" src="" /> </div> <!--图片放大后的div 结束 这块粘贴在你的html中最后body前--> <!--js开始 是放大点击的触发事件 这块粘贴在你的html中最后body前--> <script type="text/javascript"> //图片放大 document.querySelector("#outerdiv").style.display = "none"; document.querySelectorAll("img").forEach(function (item) { item.style.cursor = "pointer"; }); document.querySelectorAll("img").forEach(function (item) { item.addEventListener("click", function () { imgShow("#outerdiv", "#bigimg", this); }) }) function imgShow(outerdiv, bigimg, _this) { var src = _this.
//上传图片 var imagesBase64 = []; $("input[type=file]").on("change", function (e) { var image = e.target.files[0]; var imgFile = new FileReader(); var imgShow = new Image(); imgFile.readAsDataURL(image); imgFile.onload = function () { var imgData = this.result; //base64数据 imagesBase64.push({ teaId: teacherInfo.id, fileType: "award",//图片 fileName: image.name, file: imgData, }); imgShow.src = imgData; imgShow.style.width = "100px"; imgShow.style.height = "100px"; imgShow.title = "双击删除"; $("#imageShow").append(imgShow); } }); $("#imageShow").on("dblclick ", "img", function () { var index = $("#imageShow > img").
bundle.js:935 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. (found in <Root>) 解决方案：与entry属性平级添加
resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' //该路径为node_modules下的vue目录 } } // 需要编译器 new Vue({ template: '<div>{{ hi }}</div>' }) // 不需要编译器 new Vue({ render (h) { return h('div', this.hi) } }) 出现警告的原因是使用了template属性。 文文点到为止，详情请直接访问中文官方文档https://cn.vuejs.org/v2/guide/installation.html#对不同构建版本的解释
http://yuedun.github.io/copy.html
点击链接查看:js复制
$('#calendar').fullCalendar({ lang: "zh-cn", header: { left: 'prev, next, today', center: 'title', right: 'month' }, height: 500, dayClick: function(date, jsEvent, view) { //点击空白日期调用 }, eventClick: function(calEvent, jsEvent, view) { //点击已有数据的日期调用 }, defaultDate: moment(),//默认日期 events:function(start, end, callback){ //点击prev上一月, next下一月等事件时调用 } });
用vue.js做的后台管理系统，有一个列表搜索功能，正常登陆进去，直接点击搜索功能，页面就会刷新一遍，原因是url地址变化了
原本地址是：
http://www.mydomain/#!/index
点击搜索以后就变成了
http://www.mydomain/?#!/index
在#!前面自动加了?，导致页面刷新一遍，这样第一次搜索就没意义了.
经过初步排查后发现点击其他按钮不会改变URL地址，对比后发现搜索按钮的type=“submit”，可能是提交表单导致跳转了，那么将type改为button或者直接去掉试试，结果还是不行，干脆也改为标签（加了bootstrap按钮样式），结果好了。为什么将button type改为button不行呢，原因是在标签内标签type会被默认当做submit，（IE浏览器默认type=button）
Vue.js可以传递$event对象
<body id="app"> <ul> <li v-on:click="say('hello!', $event)">点击当前行文本</li> <li>li2</li> <li>li3</li> </ul> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, methods: { say: function(msg, event) { //获取点击对象 var el = event.currentTarget; alert("当前对象的内容："+el.innerHTML); } } }) </script> </body> 函数调用处传递$event
v-on:click="say('hello!', $event)"
函数中获取到的event.currentTarget对象就是当前元素
在线示例
请查看HTML页面示例源码