1.给鼠标换图标(相对路径)
全局更换:在App.Vue中<style>添加如下代码
html,body{
/*cursor: pointer;*/
cursor: url('../static/image/2.png'),auto;
}
目录结构如图,注意图片要32*32以下
2.Vue中添加live2d
效果:
参考:https://www.jianshu.com/p/29500e047d7c
注意一定要把live2dw放入static文件夹中(Vue-cli3.0以下),相对路径自己调
注意一定要把live2dw放入public文件夹中(Vue-cli3.0以上),相对路径自己调
3.获取本地json的值
效果: 第一行是json的文本,第二行是“test“对应”的值
实现:xxx.Vue代码如下 使用JSON.stringify将Object变成string
<div>
<p>{{json}}</p>
<p>{{json.test}}</p>
</div>
<script>
import axios from 'axios'
export default {
data(){
return {
msg:"hello",
json:""
}
},
methods:{
getJson(){
axios({
url: '/static/json/1.json',
method: 'get',
}).then((res)=>{
this.json=res.data;
console.log("???"+JSON.stringify(res.data));
})
}
},
created(){
this.getJson();
}
}
</script>
注意相对路径
4.Vue的自适应高度布局 采用flex布局示例
效果:
xxx.Vue 如下
<div class="flex">
<div class="header">top</div>
<div class="flex-item">
<div>
<p>{{json}}</p>
<p>{{json.test}}</p>
<p>{{json.test}}</p>
<p>{{json.test}}</p>
<p>{{json.test}}</p>
<p>{{json.test}}</p>
<p>{{json.test}}</p>
<p>{{json.test}}</p>
<p>{{json.test}}</p>
<p>{{json.test}}</p>
<p>{{json.test}}</p>
<p>{{json.test}}</p>
</div>
</div>
<div class="footer">bottom</div>
</div>
重点是下面的css(带注释)
<style>
.flex {
display: flex; /*父级元素:声明是flex布局*/
flex-direction: column;/*使得子级div里面的块 竖向排列 */
height: 100vh /*vh就是当前屏幕可见高度的1%,也就是说height:100vh == height:100%;*/
}
.flex-item {
flex: 1;/*假设有3个元素123排列flex,2加上"flex:1" => 2展开铺满。
假设有4个元素1234排列flex,2、3都加上"flex:1" => 2、3平均展开铺满。
生效的前提是父级元素声明了flex布局跟100%高度*/
overflow: auto;/*如果内容被修剪,则浏览器会显示滚动条,以便查看其余内容。*/
}
.footer,.header{
background:black;
color: blanchedalmond;
min-height: 60px;
}
</style>
5.css插入图片
<img src="../../static/image/2.png" />
目录结构:
6.垂直居中的骚操作
知识点:当父元素设置了弹性布局flex并且设置了高度后,只要设置元素的margin:auto就可以实现元素的垂直居中了
然后用<el-col>来水平布局,好看一点
效果:
父级元素:
子级元素:
7.试试导航栏菜单el-menu:
效果:http://localhost:8080/#/Hellocopy/Son1
http://localhost:8080/#/Hellocopy/Son2
实现:在index.js 声明父子组件 如果是Vue-cli3.0以上这里就别用懒加载
{
path: '/Hellocopy',
name: 'Hellocopy',
component: Hecopy, //爸爸
children: [
{
path: 'Son1',
name: 'Son1',
component: () => import('@/components/Son1')//绑定儿子组件,懒加载
},
{
path: 'Son2',
name: 'Son2',
component: () => import('@/components/Son2')//绑定儿子组件,懒加载
}
]
}
项目结构图
主页面Hecopy.Vue分为header+中间+footer三层,
用flex布局解决垂直布局,el-col解决水平布局。
header里引入导航菜单栏(须有element-ui依赖)
<div class="header">
<el-col span="6">
<h3>title</h3>
</el-col>
<el-col span="9">
<h3></h3>
</el-col>
<el-col span="6">
<el-menu
:default-active="this.$route.path"
class="el-menu-demo"
@open="handleOpen"
@close="handleClose"
background-color="white"
text-color="#2E131B"
active-text-color="#FA6690"
router="true"
mode="horizontal"<!-- 竖着,可以改成横着 -->
>
<el-menu-item index="/Hellocopy/Son1">
<!-- 配置子页面 -->
<i class="el-icon-menu"></i>
<span slot="title">列表</span>
</el-menu-item>
<el-menu-item index="/Hellocopy/Son2">
<!-- 配置子页面 -->
<i class="el-icon-menu"></i>
<span slot="title">个人中心</span>
</el-menu-item>
</el-menu>
</el-col>
</div>
中间层加入这个,router-view声明儿子的路由出口
<div class="flex-item">
<div class="item">
<router-view></router-view>
</div>
</div>
这样就能用el-menu导航了
8.导入element-ui
在命令行跑npm i element-ui -S 、 npm install
main.js加入如下代码
import ElementUI from "element-ui"
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false;
Vue.use(ElementUI);
9.取消ul的偏移与点点
ul{
list-style: none;
margin:0;padding:0;
}
10.Vue函数
关键词:Es6 箭头函数 普通函数 this
xxx.Vue,代码如下
功能:按年龄age查找数组lists1的函数
data(){
return {
lists1:[{name:"123",age:"32"},{name:"1123",age:"323"}]
}
},
methods:{
Add2(id){ //写法1
console.log(this.lists1.find(todo=>todo.age===id))
return this.lists1.find(todo=>todo.age===id)
}
Add2:function(id){ //写法2
console.log(this.lists1.find(todo=>todo.age===id))
return this.lists1.find(todo=>todo.age===id)
}
Add2:(id)=>{//写法3 报错:this.lists1找不到
console.log(this.lists1.find(todo=>todo.age===id))
return this.lists1.find(todo=>todo.age===id)
}
}
ES6中 写法1,2等价。
坑点1::methods中用箭头函数的话(比如写法3)(写法3会报错:找不到list1),
报错原因: 在XXX.vue中,支持Vue实例.xxx来访问data(){}中的数据
用了箭头函数后,this不是指向Vue实例了,而是指向前一花括号method,表示undefined,所以报错。
然后咱们来细品,看下面, 箭头函数实际上就是一个缩写(第一、第二行等价(不考虑this的话))
箭头函数的XX => { } , XX是参数,后面{ }是函数体
this.lists1.find(todo=>todo.age===id)
this.lists1.find(function (todo) { return todo.age === id; });
let x=todo=>todo.age===id
console.log(this.lists1.find(x))
里面todo表示数组元素,相当于 c++ for(auto i:list){} 里面的i
第三行可以看到数组.find() 支持函数变量作为参数。
坑点3:如果是非Vue,比如说store.js里面用Vuex,访问state的变量就有问题了,this.list,this.state.list,都找不到
store.js如下: 功能跟上面一样:按title1 查找数组lists的函数
export default new Vuex.Store({
state:{//状态
lists:[{title1:"test",content1:"test"}]
},
getters: {
getTodoById: (state) => (id) => { //写法1
return state.lists.find(todo => todo.title1 === id)
},
getTodoById2:function(state,actions){//写法2
let x=function(id) {
console.log("action:",actions)
return state.lists.find(todo => todo.title1 === id)
}
return x;
},
getTodoById2(id) { //写法3
return this.lists.find(todo => todo.title1 === id)
}
}
})
你会发现,写法3此时报错了,原因看红字
写法12是等价的。多箭头函数,把第一层的state传进去,
利用函数闭包(嵌套函数)的性质(里层函数能访问到外层函数的变量),访问到最外层的state
11.this.$xxxx
文档:https://cn.vuejs.org/v2/api/#vm-data
目前用过 this.$options.name 访问当前Vue中的name变量
this.$root.xx可以访问main.js里的变量
export default {
name:'List',
}
12 v-bind v-on v-model {{}}
https://blog.csdn.net/xiaolongqinghua/article/details/86702609
v-bind等于 : 绑定标签的属性值 比如<a>的href <a :href="url"/> data(){return {url:"xxx.com"}}
v-bind一定是绑定data里的变量,如果data没有,就不加双引号,视为属性,比如 <div style="xxx">
v-on 等于@ 绑定触发事件 比如 @click 点击事件 <p @click="xxx()"> methods:{xxx(){} }
v-model 双向绑定 html跟js里同时变化, 比如 <input type='text' v-model='content'/> data(){return {content:""}}
{{}}只能在html里面,可以是变量,字符串,函数,正则表达式
13 v-if v-for
<p v-if="sum>3">{{sum}}>3</p>
<p v-else>{{sum}}<=3</p>
export default {
data(){
return {
sum:1,
}
},
}
<ul>
<li v-for="(item,idx) in pageLists" :key="idx" style="color:black;">
<!-- for 绑定 pageLists事件返回的 lists + 绑定下标idx,元素item -->
<!-- {{item.title1}}-{{item.content1}} -->
<el-col :span="12" >
<el-card shadow="hover" >
<span >{{item.title1}}</span>
<el-divider></el-divider>
<span>{{item.content1}}</span>
</el-card>
</el-col>
</li>
</ul>
export default {
computed:{ //动态监听变化
pageLists:()=>store.state.lists,
},
}
v-for 绑定 pageLists事件返回的 lists + 绑定下标idx,元素item
v-for加唯一标识:key的原因 https://www.jianshu.com/p/4bd5e745ce95
官方v-for文档:https://cn.vuejs.org/v2/guide/list.html#%E7%BB%B4%E6%8A%A4%E7%8A%B6%E6%80%81
就是为了数组有变化时(排序,增加,删除),下标指向保持稳定
14.试试走马灯
效果:默认2s自动切换
<el-carousel height="400px">
<el-carousel-item v-for="i in urls" :key="i">
<el-image style="opacity:0.9;height:400px" :src="i" fit="cover"></el-image>
<h3 class="small">{{ fit }}</h3>
</el-carousel-item>
</el-carousel>
data() {
return {
urls:
["/img/12.jpg",
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"/img/2.jpg"]
//fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
};