1. vue-cli 文件的作用
- index.html 和App.vue都是指同一个页面，App.vue中是组价化的写法，template指的是html结构，script指的是逻辑代码，在script中时要写export defaule，将所有代码暴露出去，别的组件才能用
- main.js指的是全局的逻辑和包，在全局都需要的包在main中引入
import Vue from 'vue'
import App from './App.vue'
import Loading from './components/loading'
import jQuery from 'jquery'
import VueRouter from 'vue-router'
import jquery from 'jquery'
//使用路由
Vue.use(VueRouter);
window.Event = new Vue();
//当然如果需要有组件进来的时候也是需要引入的
import Ru from './components/ru.vue';
import Yang from './components/yang.vue';
import Total from './components/total.vue';
//创建路由实例
const router = new VueRouter({
mode: 'history',
routes: [
{path:'/ru',component:Ru},
//path:路径 component:把你需要的组件挂载进来
{path:'/yang',component:Yang},
{path:'/total',component:Total},
{path:'*',redirect:'/ru'} //404
//当路径错误或没有这个路径的时候我们会给予一个默认路径
]
});
var Event = new Vue();
new Vue({
Event,
router,
el: '#app',
render: h => h(App)
})
- node_modules,项目中所依赖的包全部放在该文件夹中，注意npm下载包的时候记得写上--save或者--Dev-save，将包名配置到package.json中，下次直接npm install，可以把所有包下载
2. 引入外部文件
全局范围内需要使用的比如，vue-router,jquery等，需要在main.js中引入，注意，路由写完之后一定要挂载到标签上
3 引入路由
引入完路由之后需要Vue.use(VueRouter)才能使用
4. tab切换
在vue中实现tab切换，不能再操作dom，script中的this指向的是vue实例，不再是dom对象，所以tab切换需要操作数据来实现
给标签绑定点击事件，该事件中给属性赋值，点击的样式class类名，通过属性值是否等于某个值来控制显示或者隐藏
<li role="presentation" :class="{'active':this.item==1}" @click="toggle(1)"><router-link to="/ru">小茹茹</router-link></li>
toggle:function(num){
this.item=num
}
5. 组件间传递
组件之间的传递，vue2.0中推荐使用Event
var Event = new Vue();
Event.$emit(事件名称，数据)// 将数据绑定到事件名称上，
Event.$on(事件名称，处理函数)// 监听事件名称，通过事件处理函数中的参数接收组件传递过来的数据
注意：在事件处理函数中注意缓存this，当前的this不再指定vue实例。
6. vue中获取select框选中的option
<div id="example-5">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
new Vue({
el: '...',
data: {
selected: ''
}
})
注意：获取的是value值，所以有标签value时，写上你想要获取的值
7. vue中的localstorage
window.localstorage.setItem('data',JSON.stringify('数据'))
window.localstorage.getItem('data')
var item=JSON.parse(item)
注意：存储的时候要转化成字符串的格式，使用的时候再将其转化为json字符串的形式
8. vue中不支持媒体查询，要是想使用媒体查询，需要写到css文件中，在index.html中直接直接引入即可
9. 样式得优先级
在js中对css样式进行操作时，要注意优先级
- 外部样式<内部样式< 内联样式
- !important 权值最高
- 内联样式得权值1000
- ID选择器的权值为100
- Class类选择器的权值为10
- HTML标签选择器的权值为1
css优先级法则： - 权值越大越优先
- 当权值相等时，后出现的样式表设置要优于先出现的样式表设置
- 创作者的规则高于浏览者，即网页编写者设置的css样式得优先级高于浏览器所设置的样式
- 继承的css样式不如后来指定的css样式
- 在泳衣组属性设置中标有“！important” 规则的优先级最大
10. 父子标签
当多个子标签需要添加样式的时候，控制父元素，给父元素添加active，当父元素active的时候，设置所有子元素的样式
.deposit-B-left-img ul li.active div div {
background-position:bottom !important;
}
.deposit-B-left-img ul li.active p {
color:#F5C603 !important;
}
网友评论