vue2.0如何指定vue组件渲染到某一个html页面上呢= =

vue小白求教,vue项目创建完毕,都是渲染到index.html页面上的,假如我创建了一个页面page.html,我想把vue组件渲染到page.html页面上,我要怎么改代码呢T T。。。

VegasLemon
VegasLemon 回复weixin_42405897: index.html配置在webpack.dev.config.js下,修改 new HtmlWebpackPlugin({ filename: 'index.html', template: path.join('./src/index.html') , inject: true }),中的template就好啦
一年多之前 回复
VegasLemon
VegasLemon 回复weixin_42405897: 我选择了妥协...
一年多之前 回复
weixin_42405897
weixin_42405897 你解决了这个问题了吗
一年多之前 回复

2个回答

vue是单页网站,你需要使用vue-router

我不是要页面跳转,,,我只是不想将内容渲染到index,想渲染到其他单页上,,,比较好做文件管理= =

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Vue2.0使用ElementUI的组件报错

问题截图: ![图片说明](https://img-ask.csdn.net/upload/201903/29/1553828313_461442.png) 问题描述: 编译工具webstorm,使用npm命令 dev运行项目报错。 搭建过程: 按照官方教程执行了 1.使用命令安装element组件 ``` npm i element-ui -S ``` 2.安装babel组件 ``` npm install babel-plugin-component -S ``` 3.main.js引用 ``` import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.config.productionTip = false Vue.use(ElementUI); ``` 4.页面中使用element组件 ``` <template> <div>2</div> <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> </template> ``` .babelrc文件修改后报错,es2015,安装后无法使用,还原成系统默认配置。 以下为相关文件的具体内容: package.json ``` { "name": "vuetest3", "version": "1.0.0", "description": "A Vue.js project", "author": "811204266@qq.com <123456>", "private": true, "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "unit": "jest --config test/unit/jest.conf.js --coverage", "e2e": "node test/e2e/runner.js", "test": "npm run unit && npm run e2e", "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs", "build": "node build/build.js" }, "dependencies": { "axios": "^0.18.0", "babel-polyfill": "^6.26.0", "vue": "^2.5.2", "vue-router": "^3.0.1" }, "devDependencies": { "autoprefixer": "^7.1.2", "babel-core": "^6.22.1", "babel-eslint": "^8.2.1", "babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-jest": "^21.0.2", "babel-loader": "^7.1.1", "babel-plugin-component": "^1.1.1", "babel-plugin-dynamic-import-node": "^1.2.0", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", "babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-vue-jsx": "^3.5.0", "babel-preset-env": "^1.3.2", "babel-preset-es2015": "^6.24.1", "babel-preset-stage-2": "^6.22.0", "babel-register": "^6.22.0", "chalk": "^2.0.1", "chromedriver": "^2.27.2", "copy-webpack-plugin": "^4.0.1", "cross-spawn": "^5.0.1", "css-loader": "^0.28.0", "eslint": "^4.15.0", "eslint-config-standard": "^10.2.1", "eslint-friendly-formatter": "^3.0.0", "eslint-loader": "^1.7.1", "eslint-plugin-import": "^2.7.0", "eslint-plugin-node": "^5.2.0", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^3.0.1", "eslint-plugin-vue": "^4.0.0", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^1.1.4", "friendly-errors-webpack-plugin": "^1.6.1", "html-webpack-plugin": "^2.30.1", "jest": "^22.0.4", "jest-serializer-vue": "^0.3.0", "nightwatch": "^0.9.12", "node-notifier": "^5.1.2", "optimize-css-assets-webpack-plugin": "^3.2.0", "ora": "^1.2.0", "portfinder": "^1.0.13", "postcss-import": "^11.0.0", "postcss-loader": "^2.0.8", "postcss-url": "^7.2.1", "rimraf": "^2.6.0", "selenium-server": "^3.0.1", "semver": "^5.3.0", "shelljs": "^0.7.6", "uglifyjs-webpack-plugin": "^1.1.1", "url-loader": "^0.5.8", "vue-jest": "^1.0.2", "vue-loader": "^13.3.0", "vue-style-loader": "^3.0.1", "vue-template-compiler": "^2.5.2", "webpack": "^3.6.0", "webpack-bundle-analyzer": "^2.9.0", "webpack-dev-server": "^2.9.1", "webpack-merge": "^4.1.0" }, "engines": { "node": ">= 6.0.0", "npm": ">= 3.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] } ``` 页面文件home.vue ``` <template> <div>2</div> <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> </template> <script> export default { name: 'home', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <style scoped> </style> ``` main.js ``` // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.config.productionTip = false Vue.use(ElementUI); /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) ``` router/index.js ``` import Vue from 'vue' import Router from 'vue-router' import Home from '@/page/Home' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Home', component: Home } ] }) ```

vue组件html元素渲染

<div class="post-text" itemprop="text"> <p>I am developing a multi-page web application (MPA) using Laravel version 5.6 with vue.js version 2.0.</p> <p>I am using multiple vue components e.g. Demo.vue and using that component in php blade file.</p> <p>The issue is when I try to see the page view source (ctrl+u) it shows only html tags used in php blade file but doesn't show vue component's HTML elements.</p> <p>I want the Vue component HTML elements also to be shown in page view source since my google crawling is majorly dependent on vue components used. Could you help me out for this issue?</p> <p>Also attaching the screenshots of the page source and example code snippet for the same.</p> <ul> <li><p>Demo.vue file code</p> <pre><code>&lt;template&gt; &lt;div class="container"&gt; &lt;div class="row justify-content-center"&gt; &lt;div class="col-md-8"&gt; &lt;div class="card card-default"&gt; &lt;div class="card-header"&gt;Example Component&lt;/div&gt; &lt;div class="card-body"&gt; I'm an example component. &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { mounted() { console.log('Component mounted.') } } &lt;/script&gt; </code></pre></li> <li><p>App.js</p> <pre><code>require('./bootstrap'); window.Vue = require('vue'); window.axios = require('axios'); import VModal from 'vue-js-modal'; Vue.use(VModal); Vue.component('demo-component', require('./components/Demo.vue')); const app = new Vue({ el: '#app', }); </code></pre></li> <li><p>Layout.blade.php</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="{{ app()-&gt;getLocale() }}"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;form method="POST" action="path_to_action"&gt; &lt;meta name="csrf-token" content="{{ csrf_token() }}"&gt; &lt;/form&gt; &lt;!--&lt;link href="css/style.css" rel="stylesheet"&gt;--&gt; &lt;link href="https://fonts.googleapis.com/css?family=Roboto:300,500,700,900" rel="stylesheet"&gt; &lt;link href="/css/app.css" rel="stylesheet" type="text/css"&gt; &lt;/head&gt; &lt;body id="body"&gt; &lt;div class="content" id="app"&gt; &lt;demo-component&gt;&lt;/demo-component&gt; &lt;/div&gt; &lt;script type="text/javascript" src="/js/app.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre></li> </ul> <p>i.e. We want the HTML code of to be rendered in view source.</p> <p>We even tried to check various articles on SSR, but those examples are shown using static content, whereas our data is dynamic coming from database and is a multi-page application.</p> <p>e.g. We tried below approach :-</p> <p><a href="https://vuejsdevelopers.com/2017/11/06/vue-js-laravel-server-side-rendering/" rel="nofollow noreferrer">https://vuejsdevelopers.com/2017/11/06/vue-js-laravel-server-side-rendering/</a></p> <p>The above article is showing for static data only...</p> <p>Thanks, Charlize</p> </div>

如何在Vue2.0的mounted钩子函数里获取指定dom对象?

我使用原生js的document.getElementById()和Vue的ref属性均获取不到指定dom对象 ![使用原生js的html代码:](https://img-ask.csdn.net/upload/201710/31/1509417422_410474.png) ![js代码:](https://img-ask.csdn.net/upload/201710/31/1509417441_477280.png) ![页面显示](https://img-ask.csdn.net/upload/201710/31/1509417460_68487.png) 使用Vue2.0的ref属性 ![html代码:](https://img-ask.csdn.net/upload/201710/31/1509417700_300550.png) ![js代码:](https://img-ask.csdn.net/upload/201710/31/1509417714_685933.png) ![页面显示](https://img-ask.csdn.net/upload/201710/31/1509417739_391307.png) 不知道问题出在哪里,请各位大神帮帮忙!

vue2.0 项目中引入一个只能选择年月的日期控件

vue2.0项目中 需求:只能选择年月的日期控件,可以返回年月值,有直接例子最好!感谢!

vue2.0 vue-scroller

求一个vue中使用scroller的例子,为什么我的不能上拉,拉了还会回弹,还有一个页面有tab切换的时候需要一个scroller包括,还是几个tab分成几个

vue中echarts图无法渲染

我在父组件中定义了一个容器,然后定义了echarts图的基本配置项,在created中调用一个方法,获取后台数据,然后将数据传递到子组件中渲染echarts图,现在数据都能成功传递,但是一直无法成功渲染echarts图 以下为父组件代码 ``` // 父组件代码 <template> <div> <div class="leftChart"> <linegraph :id="'leftChart'" :data="option1" style="height:330px;width:100%"></linegraph> </div> </div> </template> <script> // 引入子组件 import linegraph from "./EchartsShow.vue"; // 引入网络请求方法 import { getSumData } from "@/api/crd/orgLimitView/orgView" export default { data () { return { // echarts图基本配置项,未定义具体数据 option1: { title: { text: '授信额度结构', subtext: '行业维度', x: 'center', top: '3%' }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: '2%', top: '2%' }, series: [ { name: '行业', type: 'pie', radius: '55%', center: ['50%', '55%'], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }, } }, created () { this.getSum() }, methods: { getSum () { // 调用get请求方法,获取后台数据,由于进度问题,目前只能传递固定的参数,才能获取到测试数据 getSumData('1', '01000').then(res => { if (res.status != 200) { return this.$message.error('获取数据失败,请重试') } const datas = res.data.data // 由于拿到的数据非常复杂繁多,需要进行一些处理,才能拿到需要的数据 this.option1.legend.data = this.tableDatas.map(item => { // 由于后台拿到的数据,都是数字类的码值,this.dicInd[item.industry] 用来翻译后台数据 return this.dicInd[item.industry] }) this.option1.series[0].data = this.tableDatas.map(item => { return { value: item.approveExpAmount, name: this.dicInd[item.industry] } }) console.log(this.option1.legend.data, '行业'); console.log(this.option1.series[0].data, '行业带数据'); }) } }, components: { linegraph } } </script> ``` 以下为子组件代码 ``` // 子组件代码 <template> <div v-bind:id="id" v-bind:data="data"></div> </template> <script> import echarts from "echarts"; export default { name: "echartsShow", data () { return { ChartLineGraph: null }; }, // 深度监听 父组件刚开始没有值,只有图标的配置项 // 父组件ajax请求后改变数据的值,传递过来,图标已生成,监听传过来的值的改变 watch: { data: { deep: true, handler: function (newVal, oldVal) { if (newvalue) { this.drawLineGraph(this.id, newVal) } else { this.drawLineGraph(this.id, oldVal) } } } }, props: ["id", "data"], created() { console.log(this.data, '打印传递过来的图表数据') }, mounted () { this.drawLineGraph(this.id, this.data); console.log(this.id, '打印id值') console.log(this.data, '打印data值') }, methods: { drawLineGraph (id, data) { let _this = this; let myChart = document.getElementById(id); this.ChartLineGraph = echarts.init(myChart); this.ChartLineGraph.setOption(data); window.addEventListener("resize", function () { _this.ChartLineGraph.resize(); }); } }, beforeDestroy () { if (this.ChartLineGraph) { this.ChartLineGraph.clear(); } } }; </script> ``` 从后台获取数据后,成功传递给子组件,但是echarts无法成功渲染 ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578384445_959195.png) ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578384684_683561.png) ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578384616_880352.png) ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578384792_786796.png) 经过多次尝试,我遇到了一个奇怪的问题 ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578385072_241075.png) ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578385147_470918.png) 求各位大佬指点,我的代码哪个地方写错了,如何才能成功渲染echarts

【VUE 父子组件属性传递问题】VUE 父组件向子组件传递异步请求数据怎么办呢?

VUE 父组件向子组件传递数据时如果数据是通过异步请求后,将请求结果作为 prop 参数传递给子组件,此时子组件得到的可能为空,怎么才能保证非空呢? 空的话子组件渲染就会有问题。

关于webpack打包vue后无法渲染页面的一个问题

webpack打包vue后.vue文件中内容无法挂载到html文件中,使用$mount()方法后页面只显示一段被注释掉的函数。附上代码截图,求解!!!![图片说明](https://img-ask.csdn.net/upload/201806/28/1530170889_494317.png)![图片说明](https://img-ask.csdn.net/upload/201806/28/1530170907_209257.png)![图片说明](https://img-ask.csdn.net/upload/201806/28/1530170940_944627.png)![图片说明](https://img-ask.csdn.net/upload/201806/28/1530171093_807941.png)

在vue中的一个页面上把另一个页面当做组件使,出现查询和分页错误

![图片说明](https://img-ask.csdn.net/upload/202003/02/1583117123_520290.png)![图片说明](https://img-ask.csdn.net/upload/202003/02/1583117199_327422.png)![图片说明](https://img-ask.csdn.net/upload/202003/02/1583117246_347867.png) 结果:查询一直在加载,分页数据不对,但是在原来的页面一切正常 ![图片说明](https://img-ask.csdn.net/upload/202003/02/1583117391_949758.png)

关于vue修改属性后页面没有渲染的问题

我不知道这是啥问题 为啥这跟我在官网看的不一样,不是说修改了属性就会自动渲染的么。。。 第一步就给我搞这一出,有大神能告诉我这是什么原因么?修改属性页面没有自动渲染

【VUE异常】Vue 子组件引用父组件传递的参数异常了

写了半天代码,结果控制台报了这个错,是怎么回事呢? ``` vue.runtime.esm.js?2b0e:619 [Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option. warn @ vue.runtime.esm.js?2b0e:619 set @ vue.runtime.esm.js?2b0e:1082 reset @ BusinessChainSearch.vue?bffc:299 invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854 invoker @ vue.runtime.esm.js?2b0e:2179 invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854 Vue.$emit @ vue.runtime.esm.js?2b0e:3888 handleClick @ element-ui.common.js?5c96:9412 invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854 invoker @ vue.runtime.esm.js?2b0e:2179 original._wrapper @ vue.runtime.esm.js?2b0e:6917 ```

Vue.js怎么嵌套后,页面渲染失败?求解答

``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <script src="node_modules/vue-router/dist/vue-router.js"></script> <style> .router-link-active { font-size: 20px; color: red; } </style> </head> <body> <div id="box"> <ul> <li> <router-link to='/home'>主页</router-link> </li> <li> <router-link to='/news'>新闻</router-link> </li> </ul> <!--路由配置的组件将会渲染在这里--> <div> <router-view></router-view> </div> </div> <template id="home"> <h3>我是主页</h3> <div> <ul> <li> <router-link to='/home/login'>登陆</router-link> </li> <li> <router-link to='/home/resgist'>注册</router-link> </li> </ul> </div> <h2>{{$route.params.id}}</h2> <div> <router-view></router-view> </div> </template> <template id="news"> <div> <h3>我是新闻</h3> <ul> <li> <router-link to='/news/detail'>详细</router-link> </li> </ul> </div> <div> <router-view></router-view> </div> </template> <template id="login"> <div> <p>请登录</p> </div> <div> <router-view></router-view> </div> </template> <template id="resgist"> <div> <p>请注册</p> </div> <div> <router-view></router-view> </div> </template> <template id="detail"> <div> <!-- <h2>Details:{{$route.params.id}}</h2>--> </div> <div> <router-view></router-view> </div> </template> </body> <script> var Home = { template: '#home' }; var News = { template: '#news' }; var Login = { template: '#login' } var Resgist = { template: '#resgist' } var Detail = { template: '#detail' } //创建router实例 var router = new VueRouter({ routes: [ { path: '/home/:id', component: Home, children: [ {path: 'login', component: Login}, {path: 'resgist', component: Resgist} ] }, { path: '/news/:id', component: News, children: [ {path: 'detail', component: Detail} ] } ] }); //创建和挂载根实例 var app = new Vue({ router: router }).$mount('#box'); </script> </html> ```

【Vue 问题】页面上有一个组件依赖于某个查询结果,它的属性总是为空怎么办?

页面上有一个组件依赖于某个查询结果,它的属性总是为空怎么办? 页面引用一个组件,传递 一个 id 属性,但是父组件没有初始化完成时,这个默认默认值是空的,所以子组件渲染是得到的 id 都是空的,怎么办呢?

html引入vue路由组件,怎么设置路由根目录?

``` <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> ```Vue.use(VueRouter); const router=new VueRouter({ }) new Vue({ router, ```this.$router.push({ path: 'http://localhost:8080/', query: { tit: this.username, price: this.phone, sid: this.date, } ``` 我的项目是html的,但是里面引入vue组件,想进行带参跳转页面,但是跳转时路径是拼接在当前路径后面,相当于又拼接了一段路径。怎么解决,这个只是html引入vuejs

vue父组件夏多个子组件,子组件分别修改后其他子组件如何同步更新数据?

现在有一个课程为父组件,下面分别有 详情,教师,文件库,章节课时 等子组件。 我获取到课程数据之后父子组建传值给子组件,子组件中数据更新之后其他子组件里面数据依旧是原来数据, 比如我在课时中需要获取到文件库的数据,但是如果先在文件库组件里添加了文件,切换到章节课时 组件中获取的还是原来的组件 我该怎么做? # 代码: ## 父组件: ``` <el-tab-pane label="默认计划设置" name="默认计划设置" :style="contnetn_height"> <el-tabs type="border-card" :value="setupIndex" tab-position="left" class="corse-tabs-info" :style="contnetn_height" @tab-click="setupTab" > <el-tab-pane label="基础信息" name="基础信息" :style="contnetn_height"> <setup :setupData="setupDatas"></setup> </el-tab-pane> <el-tab-pane label="详细信息" name="详细信息" :style="contnetn_height"> <details-setup :setupData="setupDatas"></details-setup> </el-tab-pane> <el-tab-pane label="课程大纲" name="课程大纲" :style="contnetn_height"> <chapter :chapterInfo="chapterInfo"></chapter> <!-- <tree :courseData="courseDatas" v-show="courseDatas"></tree> --> </el-tab-pane> <el-tab-pane label="教师管理" name="教师管理" :style="contnetn_height"> <teachers :teacherData="teacherList"></teachers> </el-tab-pane> <el-tab-pane label="学员管理" name="学员管理" :style="contnetn_height"> <student :studentData="studentData"></student> </el-tab-pane> <el-tab-pane label="试卷批阅" name="试卷批阅" :style="contnetn_height"></el-tab-pane> <el-tab-pane label="作业批阅" name="作业批阅" :style="contnetn_height"></el-tab-pane> <el-tab-pane label="数据预览" name="数据预览" :style="contnetn_height"></el-tab-pane> <el-tab-pane label="订单统计" name="订单统计" :style="contnetn_height"></el-tab-pane> </el-tabs> </el-tab-pane> ``` ## 子组件 获取到父组件数据 ``` props: { teacherData: { type: Object } }, ``` -------------------补充------------- 然后子组件向父组件传值 ``` this.$emit('success',false); ``` ``` <el-tab-pane label="课程文件" name="课程文件" :style="contnetn_height"> <file @success="getCourse"></file> </el-tab-pane> ``` 父组件中的值也更新了,但是其他子组件的值没有变化

vue 完全独立的两个组件可以做到数据共享,数据监听吗?

vue 完全独立的两个组件可以做到数据共享,数据监听吗? 例:a组件改变store 中的数据,b组件computed:{li(){return store 中的数据}}, watch:{li(newV,old):{console.log(newV)}}监听, a,b组件不在同一个父组件中,是完全独立的两个组件,没有任何关系, 为什么监听不到数据的变化呢?求解!!!!!!

VUE项目找到某个组件,求大佬指教

第一次看别人的开源项目代码,用的在GitHub上开源的学之思考试系统,想找到管理员端页面的侧边导航栏用在学生端的页面上,该怎么找,求大神指导 ![图片说明](https://img-ask.csdn.net/upload/201911/05/1572926555_74744.png) ![管理员段页面](https://img-ask.csdn.net/upload/201911/05/1572926561_930724.png) ![学生端页面](https://img-ask.csdn.net/upload/201911/05/1572926568_240477.png) ![图片说明](https://img-ask.csdn.net/upload/201911/05/1572935862_909027.png) ![图片说明](https://img-ask.csdn.net/upload/201911/05/1572935875_241350.png)

Vue.js页面渲染生命周期问题

使用Vue.js做瀑布流布局时,在mounted中直接调用waterFall函数,页面上图片布局是乱的,设置了setTimeout延迟0ms渲染也不起作用。 在safari和chrome上页面正常了,设置延迟100ms,页面加载后布局正常,但是明显的可以看到布局的变化过程,效果不好,延迟值再设置低一些,就不起作用; 在火狐浏览器,要设置延迟150ms以上才起作用,而且也是可以看到页面布局的变化过程,体验不好。 求各位大师指点明路。 ```, <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../../../vue.js"></script> <style> *{margin: 0;padding: 0} #main{position: relative;margin:0 auto;} #main::after{content: '';display: block;height: 0;clear: both;visibility: hidden;} .pic{float: left;padding: 15px 0 0 15px;} .pic img{padding: 10px;width: 165px;height: auto;border: 1px solid #ccc;border-radius: 5px;box-shadow: 0 0 5px #ccc;} </style> </head> <body> <div id="main"> <div class="pic" v-for='img in images'> <img :src="img"> </div> </div> <script type="text/javascript"> var vm = new Vue({ el : '#main' , data : { images:[ 'images/0.jpg','images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg','images/6.jpg','images/7.jpg','images/8.jpg','images/9.jpg', 'images/10.jpg','images/11.jpg','images/12.jpg','images/13.jpg','images/14.jpg','images/15.jpg','images/16.jpg','images/17.jpg','images/18.jpg','images/19.jpg', 'images/20.jpg','images/21.jpg','images/22.jpg','images/23.jpg','images/24.jpg','images/25.jpg','images/26.jpg','images/27.jpg','images/28.jpg','images/29.jpg', 'images/30.jpg','images/31.jpg','images/32.jpg','images/33.jpg','images/34.jpg','images/35.jpg','images/36.jpg' ] }, mounted:function(){ var _this = this ; setTimeout(function(){ _this.waterFall('main','pic'); },0); //safari浏览器下必须迟延30ms执行waterFall,布局才会正常渲染,其他浏览器下设置为0即可。 }, methods:{ getByClass:function(oParent,clsName){ return oParent.getElementsByClassName(clsName); }, waterFall:function(Parent,clsName){ var _this = this ; var oParent = document.getElementById(Parent); var oBoxs = _this.getByClass(oParent,clsName); var oBoxW = oBoxs[0].offsetWidth ; //获取每列的宽度 var pageW = document.documentElement.clientWidth ; var cols = Math.floor(pageW / oBoxW) ; //判断页面列数 oParent.style.cssText = 'width:' + cols*oBoxW +'px;'; //设定main的宽度并居中 var arr = [] ; //用于存放每列的高度 for(var i=0;i<oBoxs.length;i++){ if( i<cols ){ arr.push(oBoxs[i].offsetHeight); }else { var minH = Math.min.apply('null',arr); //求出高度最低列的值 var index = _this.getMinIndex(arr,minH) ; //高度最低列的索引值 oBoxs[i].style.position = 'absolute' ; oBoxs[i].style.top = minH + 'px' ; oBoxs[i].style.left = oBoxs[index].offsetLeft + 'px' ; arr[index] += oBoxs[i].offsetHeight ; //更新数组中每列的高度 } } }, getMinIndex:function(arr,value){ //获取数组arr中,值为value的索引值 for(var i=0;i<arr.length;i++){ if(arr[i] == value){ return i ;} } } }, }); </script> </body> </html> ```

导入页面组件替代vue.js

<div class="post-text" itemprop="text"> <p>I'm using a plain PHP site with vue.js and want to import components, As I see import only works for node and vue? Is there a solution? I'm really not that good.</p> <p>import and require js pages</p> <p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>import settings from 'settings.html'; Vue.component('app-settings', settings); import Form from 'settings.js';</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/vue"&gt;&lt;/script&gt;</code></pre> </div> </div> <blockquote> <p>Uncaught SyntaxError: Unexpected identifier</p> </blockquote> </div>

MySQL数据库面试题(2020最新版)

文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别?InnoDB引擎的4大特性存储引擎选择索引什么是索引?索引有哪些优缺点?索引使用场景(重点)...

人工智能-计算机视觉实战之路(必备算法+深度学习+项目实战)

系列课程主要分为3大阶段:(1)首先掌握计算机视觉必备算法原理,结合Opencv进行学习与练手,通过实际视项目进行案例应用展示。(2)进军当下最火的深度学习进行视觉任务实战,掌握深度学习中必备算法原理与网络模型架构。(3)结合经典深度学习框架与实战项目进行实战,基于真实数据集展开业务分析与建模实战。整体风格通俗易懂,项目驱动学习与就业面试。 建议同学们按照下列顺序来进行学习:1.Python入门视频课程 2.Opencv计算机视觉实战(Python版) 3.深度学习框架-PyTorch实战/人工智能框架实战精讲:Keras项目 4.Python-深度学习-物体检测实战 5.后续实战课程按照自己喜好选择就可以

linux2.6.1内核源码注释

包含LINUX内核同步、信号、内存、调度、文件系统、网络系统、时钟等部分的源码注释。前后历时三年,算是干货。

Python可以这样学(第四季:数据分析与科学计算可视化)

董付国老师系列教材《Python程序设计(第2版)》(ISBN:9787302436515)、《Python可以这样学》(ISBN:9787302456469)配套视频,在教材基础上又增加了大量内容,通过实例讲解numpy、scipy、pandas、statistics、matplotlib等标准库和扩展库用法。

u-boot-2015.07.tar.bz2

uboot-2015-07最新代码,喜欢的朋友请拿去

Vue.js 2.0之全家桶系列视频课程

基于新的Vue.js 2.3版本, 目前新全的Vue.js教学视频,让你少走弯路,直达技术前沿! 1. 包含Vue.js全家桶(vue.js、vue-router、axios、vuex、vue-cli、webpack、ElementUI等) 2. 采用笔记+代码案例的形式讲解,通俗易懂

MySQL 8.0.19安装教程(windows 64位)

话不多说直接开干 目录 1-先去官网下载点击的MySQL的下载​ 2-配置初始化的my.ini文件的文件 3-初始化MySQL 4-安装MySQL服务 + 启动MySQL 服务 5-连接MySQL + 修改密码 先去官网下载点击的MySQL的下载 下载完成后解压 解压完是这个样子 配置初始化的my.ini文件的文件 ...

零基础学C#编程—C#从小白到大咖

本课程从初学者角度出发,提供了C#从入门到成为程序开发高手所需要掌握的各方面知识和技术。 【课程特点】 1 由浅入深,编排合理; 2 视频讲解,精彩详尽; 3 丰富实例,轻松易学; 4 每章总结配有难点解析文档。 15大章节,228课时,1756分钟与你一同进步!

微信公众平台开发入门

本套课程的设计完全是为初学者量身打造,课程内容由浅入深,课程讲解通俗易懂,代码实现简洁清晰。通过本课程的学习,学员能够入门微信公众平台开发,能够胜任企业级的订阅号、服务号、企业号的应用开发工作。 通过本课程的学习,学员能够对微信公众平台有一个清晰的、系统性的认识。例如,公众号是什么,它有什么特点,它能做什么,怎么开发公众号。 其次,通过本课程的学习,学员能够掌握微信公众平台开发的方法、技术和应用实现。例如,开发者文档怎么看,开发环境怎么搭建,基本的消息交互如何实现,常用的方法技巧有哪些,真实应用怎么开发。

java jdk 8 帮助文档 中文 文档 chm 谷歌翻译

JDK1.8 API 中文谷歌翻译版 java帮助文档 JDK API java 帮助文档 谷歌翻译 JDK1.8 API 中文 谷歌翻译版 java帮助文档 Java最新帮助文档 本帮助文档是使用谷

Java基础知识面试题(2020最新版)

文章目录Java概述何为编程什么是Javajdk1.5之后的三大版本JVM、JRE和JDK的关系什么是跨平台性?原理是什么Java语言有哪些特点什么是字节码?采用字节码的最大好处是什么什么是Java程序的主类?应用程序和小程序的主类有何不同?Java应用程序与小程序之间有那些差别?Java和C++的区别Oracle JDK 和 OpenJDK 的对比基础语法数据类型Java有哪些数据类型switc...

编程实现学生基本信息管理程序

编程实现学生基本信息管理程序。学生基本信息包括:学号、姓名、性别、年龄、班级、学院、专业等。具体实现的管理功能如下: (1) 输入并显示多个学生的基本信息; (2) 可根据需要实现学生信息的添加; (

机器学习实战系列套餐(必备基础+经典算法+案例实战)

机器学习实战系列套餐以实战为出发点,帮助同学们快速掌握机器学习领域必备经典算法原理并结合Python工具包进行实战应用。建议学习顺序:1.Python必备工具包:掌握实战工具 2.机器学习算法与实战应用:数学原理与应用方法都是必备技能 3.数据挖掘实战:通过真实数据集进行项目实战。按照下列课程顺序学习即可! 课程风格通俗易懂,用最接地气的方式带领大家轻松进军机器学习!提供所有课程代码,PPT与实战数据,有任何问题欢迎随时与我讨论。

YOLOv3目标检测实战:训练自己的数据集

YOLOv3是一种基于深度学习的端到端实时目标检测方法,以速度快见长。本课程将手把手地教大家使用labelImg标注和使用YOLOv3训练自己的数据集。课程分为三个小项目:足球目标检测(单目标检测)、梅西目标检测(单目标检测)、足球和梅西同时目标检测(两目标检测)。 本课程的YOLOv3使用Darknet,在Ubuntu系统上做项目演示。包括:安装Darknet、给自己的数据集打标签、整理自己的数据集、修改配置文件、训练自己的数据集、测试训练出的网络模型、性能统计(mAP计算和画出PR曲线)和先验框聚类。 Darknet是使用C语言实现的轻型开源深度学习框架,依赖少,可移植性好,值得深入探究。 除本课程《YOLOv3目标检测实战:训练自己的数据集》外,本人推出了有关YOLOv3目标检测的系列课程,请持续关注该系列的其它课程视频,包括: 《YOLOv3目标检测实战:交通标志识别》 《YOLOv3目标检测:原理与源码解析》 《YOLOv3目标检测:网络模型改进方法》 敬请关注并选择学习!

Python+OpenCV计算机视觉

Python+OpenCV计算机视觉系统全面的介绍。

土豆浏览器

土豆浏览器可以用来看各种搞笑、电影、电视剧视频

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

玩转Linux:常用命令实例指南

人工智能、物联网、大数据时代,Linux正有着一统天下的趋势,几乎每个程序员岗位,都要求掌握Linux。本课程零基础也能轻松入门。 本课程以简洁易懂的语言手把手教你系统掌握日常所需的Linux知识,每个知识点都会配合案例实战让你融汇贯通。课程通俗易懂,简洁流畅,适合0基础以及对Linux掌握不熟练的人学习; 【限时福利】 1)购课后按提示添加小助手,进答疑群,还可获得价值300元的编程大礼包! 2)本月购买此套餐加入老师答疑交流群,可参加老师的免费分享活动,学习最新技术项目经验。 --------------------------------------------------------------- 29元=掌握Linux必修知识+社群答疑+讲师社群分享会+700元编程礼包。 &nbsp;

基于STM32的电子时钟设计

时钟功能 还有闹钟功能,温湿度功能,整点报时功能 你值得拥有

Python数据清洗实战入门

本次课程主要以真实的电商数据为基础,通过Python详细的介绍了数据分析中的数据清洗阶段各种技巧和方法。

Git 实用技巧

这几年越来越多的开发团队使用了Git,掌握Git的使用已经越来越重要,已经是一个开发者必备的一项技能;但很多人在刚开始学习Git的时候会遇到很多疑问,比如之前使用过SVN的开发者想不通Git提交代码为什么需要先commit然后再去push,而不是一条命令一次性搞定; 更多的开发者对Git已经入门,不过在遇到一些代码冲突、需要恢复Git代码时候就不知所措,这个时候哪些对 Git掌握得比较好的少数人,就像团队中的神一样,在队友遇到 Git 相关的问题的时候用各种流利的操作来帮助队友于水火。 我去年刚加入新团队,发现一些同事对Git的常规操作没太大问题,但对Git的理解还是比较生疏,比如说分支和分支之间的关联关系、合并代码时候的冲突解决、提交代码前未拉取新代码导致冲突问题的处理等,我在协助处理这些问题的时候也记录各种问题的解决办法,希望整理后通过教程帮助到更多对Git操作进阶的开发者。 本期教程学习方法分为“掌握基础——稳步进阶——熟悉协作”三个层次。从掌握基础的 Git的推送和拉取开始,以案例进行演示,分析每一个步骤的操作方式和原理,从理解Git 工具的操作到学会代码存储结构、演示不同场景下Git遇到问题的不同处理方案。循序渐进让同学们掌握Git工具在团队协作中的整体协作流程。 在教程中会通过大量案例进行分析,案例会模拟在工作中遇到的问题,从最基础的代码提交和拉取、代码冲突解决、代码仓库的数据维护、Git服务端搭建等。为了让同学们容易理解,对Git简单易懂,文章中详细记录了详细的操作步骤,提供大量演示截图和解析。在教程的最后部分,会从提升团队整体效率的角度对Git工具进行讲解,包括规范操作、Gitlab的搭建、钩子事件的应用等。 为了让同学们可以利用碎片化时间来灵活学习,在教程文章中大程度降低了上下文的依赖,让大家可以在工作之余进行学习与实战,并同时掌握里面涉及的Git不常见操作的相关知识,理解Git工具在工作遇到的问题解决思路和方法,相信一定会对大家的前端技能进阶大有帮助。

计算机组成原理算法实现

计算机组成原理算法实现,能够实现定点小数的机器数表示、定点小数的变形补码加减运算、定点小数的原码一位乘法运算和浮点数的加减运算。

为linux系统设计一个简单的二级文件系统

实验目的: 通过一个简单多用户文件系统的设计,加深理解文件系统的内部功能及内部实现。 实验要求: 为linux系统设计一个简单的二级文件系统。要求做到以下几点: (1)可以实现下列几条命令(至少4条)

几率大的Redis面试题(含答案)

本文的面试题如下: Redis 持久化机制 缓存雪崩、缓存穿透、缓存预热、缓存更新、缓存降级等问题 热点数据和冷数据是什么 Memcache与Redis的区别都有哪些? 单线程的redis为什么这么快 redis的数据类型,以及每种数据类型的使用场景,Redis 内部结构 redis的过期策略以及内存淘汰机制【~】 Redis 为什么是单线程的,优点 如何解决redis的并发竞争key问题 Red...

机器学习初学者必会的案例精讲

通过六个实际的编码项目,带领同学入门人工智能。这些项目涉及机器学习(回归,分类,聚类),深度学习(神经网络),底层数学算法,Weka数据挖掘,利用Git开源项目实战等。

网络工程师小白入门--【思科CCNA、华为HCNA等网络工程师认证】

本课程适合CCNA或HCNA网络小白同志,高手请绕道,可以直接学习进价课程。通过本预科课程的学习,为学习网络工程师、思科CCNA、华为HCNA这些认证打下坚实的基础! 重要!思科认证2020年2月24日起,已启用新版认证和考试,包括题库都会更新,由于疫情原因,请关注官网和本地考点信息。题库网络上很容易下载到。

2019全国大学生数学建模竞赛C题原版优秀论文

2019全国大学生数学建模竞赛C题原版优秀论文,PDF原版论文,不是图片合成的,是可编辑的文字版。共三篇。 C044.pdf C137.pdf C308.pdf

土豆SDK(Java版)-非官方

由于土豆SDK一直建设中,最近几天抽空写了一套java的SDK。包含了现有的所有请求协议。本套SDK中仅提供了oAuth的方式(引用oAuth.net的java版示例),并没有在框架中实现,涉及到登录

Android小项目——新闻APP(源码)

Android小项目——新闻APP(源码),一个很简单的可以练手的Android Demo Ps:下载之前可以先看一下这篇文章——https://blog.csdn.net/qq_34149526/a

实用主义学Python(小白也容易上手的Python实用案例)

原价169,限时立减100元! 系统掌握Python核心语法16点,轻松应对工作中80%以上的Python使用场景! 69元=72讲+源码+社群答疑+讲师社群分享会&nbsp; 【哪些人适合学习这门课程?】 1)大学生,平时只学习了Python理论,并未接触Python实战问题; 2)对Python实用技能掌握薄弱的人,自动化、爬虫、数据分析能让你快速提高工作效率; 3)想学习新技术,如:人工智能、机器学习、深度学习等,这门课程是你的必修课程; 4)想修炼更好的编程内功,优秀的工程师肯定不能只会一门语言,Python语言功能强大、使用高效、简单易学。 【超实用技能】 从零开始 自动生成工作周报 职场升级 豆瓣电影数据爬取 实用案例 奥运冠军数据分析 自动化办公:通过Python自动化分析Excel数据并自动操作Word文档,最终获得一份基于Excel表格的数据分析报告。 豆瓣电影爬虫:通过Python自动爬取豆瓣电影信息并将电影图片保存到本地。 奥运会数据分析实战 简介:通过Python分析120年间奥运会的数据,从不同角度入手分析,从而得出一些有趣的结论。 【超人气老师】 二两 中国人工智能协会高级会员 生成对抗神经网络研究者 《深入浅出生成对抗网络:原理剖析与TensorFlow实现》一书作者 阿里云大学云学院导师 前大型游戏公司后端工程师 【超丰富实用案例】 0)图片背景去除案例 1)自动生成工作周报案例 2)豆瓣电影数据爬取案例 3)奥运会数据分析案例 4)自动处理邮件案例 5)github信息爬取/更新提醒案例 6)B站百大UP信息爬取与分析案例 7)构建自己的论文网站案例

相关热词 c# 开发接口 c# 中方法上面的限制 c# java 时间戳 c#单元测试入门 c# 数组转化成文本 c#实体类主外键关系设置 c# 子函数 局部 c#窗口位置设置 c# list 查询 c# 事件 执行顺序
立即提问
相关内容推荐