公共的css在app.vue中引入：
1516765681(1).jpg
1.清空除了index.html,app.vue以外的src文件夹文件内容
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 Icon from 'vue-svg-icon/Icon';
import ElementUI from 'element-ui';
import axios from 'axios';
import App from './App';
import router from './router';
+axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端
Vue.prototype.$http = axios;
Vue.use(ElementUI);
Vue.config.productionTip = false;//来关闭生产模式下给出的提示
app.vue
页面模块是
<template></template>
<script></script>
<style></script>
<template>
<div id="app">
<headCode></headCode>
</div>
</template>
<script>
注意路径./
import headCode from './components/public/header'
export default({
name:'App',
data(){
},
components:{
"headCode":headCode
},
})
</script>
1516787826(1).jpg
在学习的同时又扒到了一个好帖哈哈哈http://www.cocoachina.com/programmer/20170527/19378.html
：class表达式的写法：
HTML代码：
<div :class=" 'classA classB' ">Demo1</div>
渲染后的HTML:
<div class="classA classB">Demo1</div>
<div :class="classA ? 'class-a' : 'class-b' ">Demo3</div>
<div :class="{ 'class-a': isA, 'class-b': isB}">Demo4</div>
接下来我想在index模块中有一个带参页面跳转,还是做单页面应用，因为是最经典的。
//indexcon.vue
<router-link class="btn" :to='{name: "detail",params:{id:0}}'>详情</router-link>
//App.vue
<template>
<div id="app">
<headCode></headCode>
<router-view name="index"></router-view>
<router-view name="detial"></router-view>
</div>
</template>
<script>
import headCode from './components/public/header'
export default({
name:'App',
data(){
return {
}
},
components:{
"headCode":headCode
},
})
//router/index.js
import detial from '@/components/detail';
export default new Router({
routes:[
{path:'/',name:'App',components:{
index:Index
}
},
{ path: '/detail/:id',name:'detail',components:{
detial:detial
}
}
]
})
然后在新页面接受参数：
this.$route.params.id;//用$route报错的原因：we found solution, need to use `this.$route` except `$route` inside a component
好了，以上就是单页面带参跳转做好了
现在来处理跳转到的detail页面:
第一个问题：../src/json/data.json死活not found，改成../static/json/data.json就好了。不造是不是因为我的主文件就在src文件夹的原因
第二个问题：在 this.$http.get方法中，this指向发生了改变，要用的话要么定义在外面，要么this_
methods:{
getData:function () {
var this_ = this;
this.$http.get("../static/json/data.json",{}).then(function (res) { console.log(this);
console.log(res.data);//json文件内容（说好的在res.body呢。。。。）
this_.detailText = res.data[this_.$route.params.name];
}),function (res) {
};
}
}
第三个：不会影响效果但是会报错一片红，可以在方法里自定义一下再拿来用
<img :src="detailText.imgDetail['0']" alt="">
//or
<img :src="detailText.imgDetail[0]" alt="">
接下来写表单：
html部分：
<form action="" id="contact" @submit.prevent="contactSend">
<div class="input">
<input type="text" class="col-lg-6 col-sm-1" v-model="user.name" placeholder="昵称">
<input type="text" class="col-lg-6 col-sm-1" v-model="user.email" placeholder="email">
</div>
<textarea style="resize: none" name="" id="" v-model="user.talkToYou" cols="30" rows="10"></textarea>
<button type="submit" class="btn">发送</button>
</form>
js部分：
export default({
data (){
return {
openItem:false,
user:{"name":"","email":"","talkToYou":""}
}
},
methods:{
contactSend:function () {
var formData = JSON.stringify(this.user);
this.$http.post("addContact.php",{formData:formData}).then(function (res) {
}),function (res) {
};
}
}
})
嗯哼今天早上打开发现，路由跳转切换到新路由时，会保持原先的滚动位置
router/index.js
export default new Router({
modal:'history',//必须是这个模式
scrollBehavior:function () {
return {y:0}
},
routes:[
{path:'/',name:'App',components:{
index:Index
}
},
{ path: '/detail/:name',name:'detail',components:{
detial:detial
}
}
]
})
要做一个轮播了，代码贴一下
html部分：
css讲一下思路得了，ul的宽度ulImg在vue.computed里计算好，margin-left值sliderAnimate.ulImgLeft定义在data中随轮播变化具体在计数器slider()里。小点点也是这么走
//图片
<div class="nav-con-imgSlider">
<!--<img style="height:500px;width: 100%;" src="../../static/image/slider1.jpg" alt="">-->
<ul class="nav-con-imgSlider-ul" :style="'width:'+ulImg+'px;margin-left:'+sliderAnimate.ulImgLeft+'px'" :sliderSign="sliderSign">
<li v-for="(v,index) in sliderNove" :data-key="index">
<router-link :to="{name:'detail',params:{name:v.name}}"><img :src="v.url" alt="" ></router-link>
</li>
</ul>
</div>
//小点点
<ul class="nav-con-textSlider-circle">
<li v-for="(v,index) in sliderNove" @click="clickSlider($event)" :get-index="index" :class="{'active':index==sliderSign}"><span></span></li>
</ul>
js部分
export default ({
data() {
return {
sliderAnimate:{
"ulImgLeft":0,
"ulImgTextLeft":0
},
sliderAnimateFn:'',//计时器
sliderSign:0//走的那个数字，0，1，2，3......很重要哦
}
},
methods: {
//计时器里面的走马灯方法，index表示走到哪里了（点击小点点才有参数index）
slider:function (index) {
if(index == this.sliderSign){
this.sliderSign = index;
}else{
this.sliderSign++;
if(this.sliderSign == this.sliderNove.length){
this.sliderSign = 0;
}
}
this.sliderAnimate.ulImgLeft = -this.sliderSign*1920;
this.sliderAnimate.ulImgTextLeft = -this.sliderSign*300;
},
//这个绑定的是移入时暂停
stopSlider:function () {
clearInterval(this.sliderAnimateFn);
},
//这个绑定的是移出时重启
reSlider:function () {
this.sliderAnimateFn = setInterval(this.slider,3000);
},
//这个绑定的是点击选定时跳转（去点击时顺带也调用着移入动作，所以会暂停不会疯狗一样的自己跑）
clickSlider:function (e) {
this.sliderSign = e.currentTarget.getAttribute('get-index');
this.slider(this.sliderSign);
}
},
mounted: function () {
this.getData();
this.slider();
//开始定时器，注意这个方法的写法，错了就坑了。
this.sliderAnimateFn = setInterval(this.slider,3000);
},
computed:{
ulImg:function () {
var width = document.getElementsByClassName('nav-con-imgSlider');
return this.sliderNove.length*1920
},
ulImgText:function () {
var width = document.getElementsByClassName('nav-con-imgSlider');
return this.sliderNove.length*300
}
}
})
网友评论