目录
PHP报错：unserialize(): Error at offset 0 of 100 bytes
Custom elements in iteration require 'v-bind:key' directives
webpack4:
// webpack 是node写出来的
let path = require('path');
module.exports = {
mode:'development’, //模式 默认两种 production(生产)/development(开发)
entry:'./src/index.js’, //入口
output:{
filename:'bundle.js’, //打包后的文件名
path:path.resolve(__dirname,'dist’), //路径必须是一个绝对路径
}
}webpack项目中的Failed to load resource: net::ERR_FILE_NOT_FOUND问题
修改webpack.base.conf.js中：
// publicPath: process.env.NODE_ENV === 'production'
// ? config.build.assetsPublicPath
// : config.dev.assetsPublicPath
// 改成：
publicPath: process.env.NODE_ENV === 'production'
? './' + config.build.assetsPublicPath
: './' + config.dev.assetsPublicPath
VueCli3项目vue.config.js配置文件
const path = require('path');
const envStr = process.env.env_config
const debugUrl = (envStr === 'prod') ?
'https://mobile-app.yizuodao.com' : 'https://test-/mobile-app.yizuodao.com'
module.exports = {
// 基本路径
publicPath: './',
// 输出文件目录
outputDir: 'dist',
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// webpack配置
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: () => {},
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
config.mode = 'production';
} else {
// 为开发环境修改配置...
config.mode = 'development';
}
Object.assign(config, {
// 开发生产共同配置
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'@c': path.resolve(__dirname, './src/components')
}
}
});
},
// 生产环境是否生成 sourceMap 文件
productionSourceMap: true,
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {},
// 启用 CSS modules for all css / pre-processor files.
modules: false
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length > 1,
// PWA 插件相关配置
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// webpack-dev-server 相关配置
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: { //设置代理
'/*.json': {
target: debugUrl
},
'/*.do': {
target: debugUrl
},
'/*.m': {
target: debugUrl
},
},
before: (app) => {
console.log(app)
}
},
// 第三方插件配置
pluginOptions: {
// ...
}
};module.exports = {
publicPath: './',
devServer: {
host: '0.0.0.0',
port: 1024, // 端口
// https: true
},
lintOnSave: false, // 取消 eslint 验证
// chainWebpack: config => {
// if (process.env.NODE_ENV === 'production') {
// // 清除css，js版本号
// config.output.filename('static/js/[name].js').end();
// config.output.chunkFilename('static/js/[name].js').end();
// // 为生产环境修改配置...
// config.plugin('extract-css').tap(args => [{
// filename: `static/css/[name].css`,
// chunkFilename: `static/css/[name].css`
// }])
// }
// },
};PHP报错：
unserialize(): Error at offset 0 of 100 bytes
function mb_unserialize($str) {
return preg_replace_callback('#s:(\d+):"(.*?)";#s',
function($match){return 's:'.strlen($match[2]).':"'.$match[2].'";';},$str);
-----------------------------------------------------------------------------
$str = preg_replace_callback('#s:(\d+):"(.*?)";#s',
function($match){return 's:'.strlen($match[2]).':"'.$match[2].'";';},$str);
移动端判断
<script>
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
console.log('移动端要执行的代码');
window.location.href = "http://baidu.com;
}
</script>Vue实例常用属性
数据
- data:Vue 实例的数据对象
- components：Vue实例配置局部注册组件
类方法
- computed:计算属性
- watch：侦听属性
- filters：过滤器
- methods:Vue实例方法
- render：渲染函数，创建虚拟DOM
生命周期
- created：在实例创建完成后被立即调用，完成初始化操作
- mounted：el挂载到Vue实例上了，开始业务逻辑操作
- beforeDestroy：实例销毁之前调用
Vue组件
- props:用于接收来自父组件的数据
- template：组件模板
Vue计算属性Computed
计算属性的应用场景，一般是在有一个变量的值需要其他变量计算得到的时候，会用到。
比如，例如用户在输入框输入一个数 x，则自动返回给用户这个数的平方 x²。你需要对输入框进行数据绑定，然后当数据修改的时候，就马上计算它的平方
<div id="vueInstance">
输入一个数字: <input type="text" v-model="value">
<p>计算结果：{{ square }}</p>
</div>
<script>
var V = new Vue({
el : '#vueInstance',
data : {
value : 1
},
computed : {
square : function(){
return this.value * this.value;
}
}
});
</script>Vue的双向数据绑定原理
是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
<input type="text" id="inp" />
<div id="box"></div>
<script>
let obj = {};
let oInp = document.getElementById('inp');
let oBox = document.getElementById('box');
Object.defineProperty(obj, 'name', {
configurable: true,
enumerable: true,
get: function() {
console.log(111)
return val;
},
set: function(newVal) {
oInp.value = newVal;
oBox.innerHTML = newVal;
}
});
oInp.addEventListener('input', function(e) {
obj.name = e.target.value;
});
obj.name = '内容';
</script>Custom elements in iteration require 'v-bind:key' directives
迭代中的自定义元素需要“v-bind：key”指令
尽管并不影响程序的正常运行但IDE的报错还是看着不爽
//改前:
<todoitm
v-for="item of list"
:com="item">
</todoitm>
//改后:
<todoitm
v-for="(item,index) of list"
:com="item"
v-bind:key="index">
</todoitm><template>
<div id="app">
<div id="nav">
<!-- <router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/info">Info</router-link> -->
<a @click="goto('/')">Home</a> |
<a @click="goto('/about')">About</a> |
<a @click="goto('/info')">Info</a> |
</div>
<router-view/>
</div>
</template>
<script>
export default {
methods: {
goto(path){
this.$router.replace(path);
// 1.this.$router.push() <<< 这个好用
// 描述：跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。
// 2.this.$router.replace()
// 描述：同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转
// 到上上一个页面。上一个记录是不存在的。
// 3.this.$router.go(n)
// 相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正
// 数返回上一个页面
}
},
}
</script>VueCli3运行单个 *.vue 文件
安装全局拓展
npm install -g @vue/cli-service-global运行.vue文件 > 先进入*.vue文件目录
vue serve Hello.vue
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
