Javaweb Day3

DOM

Docunment:整个文档对象

Element:元素对象

Attribute:属性对象

Text：文本对象

Comment:注释对象

JS的事件监听

事件：HTML事件是发生在HTML元素上的“事情"比如

按钮被点击

鼠标移动到元素上

按下键盘按键

事件监听：JavaScript可以在事件被侦测到是执行代码

事件绑定

方式一：通过HTML标签中的事件属性进行绑定

通过onclick绑定函数，表示将来按钮被点击了将执行哪个函数

 <input type="button" id="btn1" value="事件绑定" onclick="on()">

 function on(){

        alert("按钮被点击了")

       }

方式二：通过DOM元素属性绑定

<input type="button" id="btn2" value="事件绑定2" >

 document.getElementById("btn2").onclick=function(){

        alert("按钮二北电家里")

       }

Veu

什么是Veu

Veu是一个前端框架，免除原生JavaScipt中的Dom操作

基于MVVM思想，实现数据的双向绑定，将编程的关注点放在数据上

Veu快速入门

新建HTML页面，引入Veu.js文件   <script src="js/veu.js></script>

在JS代码区域，创建Vue核心对象，定义数据模型

<script>

 new Vue({

    el:"#app"  规定管理的区域

    data:{  

      message："Hello Vue!";;

    }

})

</script>

编写视图

<div id="app>

    <input type="text" v-model="message">

    {{message}}

</div>

Veu常用指令

v-bind  为HTML绑定属性值，如设置href,css样式等

v-model 在表单元素上创建双向数据绑定

v-on 为HTML标签绑定事件

v-if 

v-else-if       

v-else

条件性的渲染某元素，判断为true是渲染，否则不

v-show   根据条件展示某元素，区别在于切换的是display属性的值

v-for 列表渲染，遍历容器的元素或者对象的属性