1、使用v-cloak 解决插值表达式在页面加载的时候出现闪烁的问题
标签中加上v-cloak
<style>
[v-cloak]{
dispaly: none;
}
</style>
<p v-cloak>{{ msg }}</p>2、
<script>
var vm = new Vue({
el: '绑定区域',
data: { 数据
msg: '消息'
},
methods:{ 定义当前vue实例所有可用的方法
show:function(){
alert('')
}
或者
show(){
}
}
})
</script>
<p v-cloak>{{ msg }}</p> 只会替换自己的占位符，不会把整个元素中的内容清空
效果相同
<p v-text="msg"></p> 默认无闪烁问题、会覆盖元素中原本的内容
上面的两种方式都只输出文本。不识别标签
v-text 插入文本
v-cloak 解决闪烁
v-html 能识别标签
v-bind:绑定属性的指令 缩写 " : " 只能实现数据的单向绑定
v-on:绑定事件 缩写 " @ " 例如：@click=show()
v-model 实现数据双向绑定 但是只能用于表单元素中
3、vm实例会监听自己身上data中所有数据的改变，只要数据发生变化，就会自动把变化后的数据从data中同步到页面中
4、事件修饰符（可串连）
事件.stop 阻止冒泡(从内往外) 事件.prevent 阻止事件默认行为 事件.capture 采用捕获模式（从外往里）
事件.self 忽略冒泡 捕获，只有点击当前元素的时候才会触发事件（只会阻止自己身上的冒泡行为，并不会真正阻止冒泡）
事件.once 事件只触发一次
在Vue中使用样式
使用class样式
-
数组
<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>2.数组中使用三元表达式
<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>3.数组中嵌套对象
<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>4.直接使用对象
<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>
5、切换路由动画效果常见问题
<transition>
<router-view></router-view> //动画包裹区域
</transition>
<style lang="scss" scoped>
.app-container {
padding-top: 40px;
padding-bottom: 50px;
overflow-x: hidden; //解决滑动底部出现进度条问题
}
.v-enter { //进入样式
opacity: 0;
transform: translateX(100%); //从右侧进入
}
.v-leave-to { //退出样式
opacity: 0;
transform: translateX(-100%); //从左侧退出
position: absolute; // 解决进入和退出动画同时出翔的问题
}
.v-enter-active,
.v-leave-active {
transition: all 0.5s ease;
}
</style>import Vue from 'vue'
// 配置vuex的步骤
// 1. 运行 cnpm i vuex -S
// 2. 导入包
import Vuex from 'vuex'
// 3. 注册vuex到vue中
Vue.use(Vuex)
// 4. new Vuex.Store() 实例，得到一个 数据仓储对象
var store = new Vuex.Store({
state: {
// 大家可以把 state 想象成 组件中的 data ,专门用来存储数据的
// 如果在 组件中，想要访问，store 中的数据，只能通过 this.$store.state.*** 来访问
count: 0
},
mutations: {
// 注意： 如果要操作 store 中的 state 值，只能通过 调用 mutations 提供的方法，才能操作对应的数据，不推荐直接操作 state 中的数据，因为 万一导致了数据的紊乱，不能快速定位到错误的原因，因为，每个组件都可能有操作数据的方法；
increment(state) {
state.count++
},
// 注意： 如果组件想要调用 mutations 中的方法，只能使用 this.$store.commit('方法名')
// 这种 调用 mutations 方法的格式，和 this.$emit('父组件中方法名')
subtract(state, obj) {
// 注意： mutations 的 函数参数列表中，最多支持两个参数，其中，参数1： 是 state 状态； 参数2： 通过 commit 提交过来的参数；
console.log(obj)
state.count -= (obj.c + obj.d)
}
},
getters: {
// 注意：这里的 getters， 只负责 对外提供数据，不负责 修改数据，如果想要修改 state 中的数据，请 去找 mutations
optCount: function (state) {
return '当前最新的count值是：' + state.count
}
// 经过回顾对比，发现 getters 中的方法， 和组件中的过滤器比较类似，因为 过滤器和 getters 都没有修改原数据， 都是把原数据做了一层包装，提供给了 调用者；
// 其次， getters 也和 computed 比较像， 只要 state 中的数据发生变化了，那么，如果 getters 正好也引用了这个数据，那么 就会立即触发 getters 的重新求值；
}
})
// 总结：
// 1. state中的数据，不能直接修改，如果想要修改，必须通过 mutations
// 2. 如果组件想要直接 从 state 上获取数据： 需要 this.$store.state.***
// 3. 如果 组件，想要修改数据，必须使用 mutations 提供的方法，需要通过 this.$store.commit('方法的名称'， 唯一的一个参数)
// 4. 如果 store 中 state 上的数据， 在对外提供的时候，需要做一层包装，那么 ，推荐使用 getters, 如果需要使用 getters ,则用 this.$store.getters.***
7、webpack.config.js
// 由于 webpack 是基于Node进行构建的，所有，webpack的配置文件中，任何合法的Node代码都是支持的
var path = require('path')
// 在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部
// 如果要配置插件，需要在导出的对象中，挂载一个 plugins 节点
var htmlWebpackPlugin = require('html-webpack-plugin')
// 当以命令行形式运行 webpack 或 webpack-dev-server 的时候，工具会发现，我们并没有提供 要打包 的文件的 入口 和 出口文件，此时，他会检查项目根目录中的配置文件，并读取这个文件，就拿到了导出的这个 配置对象，然后根据这个对象，进行打包构建
module.exports = {
entry: path.join(__dirname, './src/main.js'), // 入口文件
output: { // 指定输出选项
path: path.join(__dirname, './dist'), // 输出路径
filename: 'bundle.js' // 指定输出文件的名称
},
plugins: [ // 所有webpack 插件的配置节点
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'), // 指定模板文件路径
filename: 'index.html' // 设置生成的内存页面的名称
})
],
module: { // 配置所有第三方loader 模块的
rules: [ // 第三方模块的匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 处理 CSS 文件的 loader
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 处理 less 文件的 loader
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 处理 scss 文件的 loader
{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader' }, // 处理 图片路径的 loader
// limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法
{ test: /\.vue$/, use: 'vue-loader' } // 处理 .vue 文件的 loader
]
},
resolve: {
alias: { // 修改 Vue 被导入时候的包的路径
// "vue$": "vue/dist/vue.js"
}
}
}8、vue加载图片实现点击预览功能
# 安装
npm install vue-photo-preview --save
# 引入
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)
#配置
<script type="text/javascript">
var options={
fullscreenEl:false //关闭全屏按钮
}
Vue.use(vuePhotoPreview,options)
new Vue({
el:'#app'
})
</script>
#使用
//在img标签添加preview属性 preview值相同即表示为同一组
<img src="xxx.jpg" preview="0" preview-text="描述文字">
//分组
<img src="xxx.jpg" preview="1" preview-text="描述文字">
<img src="xxx.jpg" preview="1" preview-text="描述文字">
<img src="xxx.jpg" preview="2" preview-text="描述文字">
<img src="xxx.jpg" preview="2" preview-text="描述文字">
<img src="xxx.jpg" large="xxx_3x.jpg" preview="2" preview-text="缩略图与大图模式">
#加载完成需要进行数据刷新
this.$previewRefresh()9、设置日期默认值
//el-date-picker设置默认值 页面初始化时调用
date() {
const end = new Date();
var seperator1 = "-";
var year = end.getFullYear();
var month = end.getMonth() + 1;
var strDate = end.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var endDate = year + seperator1 + month + seperator1 + strDate;
const start = new Date();
var startYear = start.getFullYear() - 5;
var startMonth = start.getMonth() + 1;
var startDate = start.getDate();
if (startMonth >= 1 && startMonth <= 9) {
startMonth = "0" + startMonth;
}
if (startDate >= 0 && startDate <= 9) {
startDate = "0" + startDate;
}
var startDat =
startYear + seperator1 + startMonth + seperator1 + startDate;
this.value2 = [startDat, endDate];
this.value5 = [startDat, endDate];
this.value8 = [startDat, endDate];
},
10、element-ui 上传文件显示上传进度
参考：https://blog.csdn.net/qq_42809973/article/details/84834813
