vue是什么：是一套用于构建用户界面的渐进式框架。
Vue js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
vue是什么：是一套用于构建用户界面的渐进式框架。
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
<div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
输出结果为：Hello Vue！
使用v-bind进行数据绑定，例子也是来自vue官方文档的例子，贴一段代码。
<div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span> </div> var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date().toLocaleString() } })
v-for循环用来绑定数组的数据来渲染一个项目列表。
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
v-on绑定事件监听器，通过它调用在 Vue 实例中定义的方法。
<div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">反转消息</button> </div> var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } })
v-model能轻松实现表单输入和应用状态之间的双向绑定。
<div id="app-6"> <p>{{ message }}</p> <input v-model="message"> </div> var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' } })
这是今天份的vue学习，另外还稍微将博客样式更新了一下。
然后就是复习JavaScript写了个轮播出来：
html部分：
<div class="banner-1"> <img src="img/banner1.jpg" alt="" class="banner1"> <div class="m1"> <span class="d2 d5" onmousemove="a1(0)" onmouseout="a3(0)"></span> <span class="d3 d5" onmousemove="a1(1)" onmouseout="a3(1)"></span> <span class="d4 d5" onmousemove="a1(2)" onmouseout="a3(2)"></span> </div> </div>
css样式部分：
.d1{ width: 100%; height: 100%; position: relative; overflow: hidden; } .d1 img{ width: 100%; } .d2{ display: block; width: 16px; height:16px; border-radius: 50%; float: left; position: absolute; bottom: 0px; border: 1px solid #ffffff; margin-left: 44%; } .d3{ display: block; width: 16px; height:16px; border-radius: 50%; float: left; position: absolute; bottom: 0px; margin-left: 48%; border: 1px solid #ffffff; } .d4{ display: block; width: 16px; height:16px; border-radius: 50%; float: left; position: absolute; bottom: 0px; margin-left: 52%; border: 1px solid #ffffff; } .d5{ background: #999999; }
js部分：
var arr = ["banner1.jpg", "banner2.jpg", "banner3.jpg"]; var banner1 = document.getElementsByClassName('banner1'); var d5 = document.getElementsByClassName('d5'); var o = 0; var time1; d5[0].style.background = "#a15605"; function lb1() { time1 = setInterval(function () { o++; if (o == arr.length) { o = 0; } for (q = 0; q < d5.length; q++) { d5[q].style.background = "#999" } banner1[0].setAttribute('src', 'img/' + arr[o]); d5[o].style.background = "#a15605"; }, 2000) } lb1(); //悬停暂停且清除计时器 function a1(a2) { clearInterval(time1); banner1[0].setAttribute('src', 'img/' + arr[a2]); for (q = 0; q < arr.length; q++) { d5[q].style.background = "#999"; }; d5[o].style.background = "#a15605"; o = a2; } // 移出正常显示 function a3(a4) { lb1(); }
思路是：利用计时器每过2秒更新图片地址达到轮播效果，鼠标移入角标增减来切换图片丰富体验感。
今天份的不足：犯懒，没弄明白vue-router的使用方式就放弃了。
