博客主题访问地址:https://github.com/logan70/logan70.github.io
模板语法、计算属性和观察者、Class 与 Style 绑定
数据绑定最常见的就是Mustache语法(双大括号)文本插值。可以进行响应式绑定
<span>Message: { { msg } }</span>
使用v-once指令,可以一次性的插值,当数据改变时不会更新
<span v-once>这个将不会改变: { { msg } }</span>
使用v-html,被插入的内容都会当做HTML处理。但容易导致XSS攻击
<p>Using mustaches: { { rawHtml } }</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
Mustache语法不能再属性里使用。在属性中需要使用v-bind
<div v-bind:id="dynamicId"></div>
对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。
{ { number + 1 } }
{ { ok ? 'YES' : 'NO' } }
{ { message.split('').reverse().join('') } }
<div v-bind:id="'list-' + id"></div>
介绍、Vue实例
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
Vue允许你采用简洁的模板语法来声明式将数据渲染进Dom。
此时app.message会进行双向绑定,修改的同时也会改变Dom渲染。称为响应式元素
<div id="app">
{ {message } }
</div>
<script type="text/javascript">
var app = new Vue( {
el: "#app",
data: {
message:"Hello Vue"
}
});
</script>
$ele.click( handler(eventObject) )
: 每次$ele元素触发点击操作会执行回调 handler函数,方法中的this是指向了绑定事件的元素$("button:eq(0)").click(function() {
alert(this);
})
$ele.click( [eventData ], handler(eventObject) )
: 可以接受一个数据参数,这样的处理是为了解决不同作用域下数据传递的问题$("button:eq(2)").click(1111, function (e) {
alert(e.data) //1111
})
$ele.mousedown( handler(eventObject) )
$ele.mouseup( [eventData ], handler(eventObject) )
用event 对象的which区别按键,敲击鼠标左键which的值是1,敲击鼠标中键which的值是2,敲击鼠标右键which的值是3
$("button:eq(0)").mousedown(function(e) {
alert('e.which: ' + e.which);
})
$("button:eq(2)").mousedown(1111, function (e) {
alert(e.data); //1111
})
document.createElement
setAttribute
innerHTML
appendChild
var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>");
$body.append(div);
append()
前面是被插入的对象,后面是要在对象内插入的元素内容appendTo()
前面是要插入的元素内容,而后面是被插入的对象A.append(B) // 将B添加到A
A.appendTo(B) // 将A添加到B
var oDiv = document.getElementById('box'); // DOM对象
var $oDiv = $('#box'); // jQuery对象
// 将jQuery对象转化为DOM对象的两种方法
var oDiv = $oDiv[0]; // 利用数组下标的方式
var oDiv = $oDiv.get(0); // 利用jQuery自带的get方法
// 将DOM对象转化为jQuery对象的方法
var $oDiv = $(oDiv);
通过jQuery方法包装后的对象是一个类数组对象,这个对象里面包含了DOM对象的信息,封装了很多的操作方法,唯一相似的是他们都能操作DOM。
$( "#id" )
$( ".class" )
$( "element" )
$( "*" )
$("parent > child")
选择指定父元素的指定的所有直接子元素$("ancenstor descendant")
选择所有给定祖先元素的所有指定后代元素$("prev + next")
选择所有紧接在prev
元素后的next
元素$("prev ~ next")
选择prev
元素后的所有next
兄弟元素概念:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到最不具体的那个节点(文档)
概念:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件
将事件处理程序直接加在HTML文档结构内
缺点:不满足结构、样式、行为分离的原则
较传统的方式:把一个函数赋值给一个事件的处理程序属性
btn.onclick = function(){
alert('hello world!')
}