VUE

VUE

（1）特点

渐进式的js框架

（2）传统jsp方式

• 传统‘

（3）使用

【3.1】引入vue.js

<!--引入vue.js-->
<srcipt src="vue.js"><.script>

【3.2】创建vue对象

var vue = new Vue({
	el:视图对应的标签
	data:模型数据
}) ;

【3.3】展示模型数据

• 两标签之间的普通文字，要从模型中获取数据
• 语法{{模型数据的名称}}
• 标签的属性需要从模型中获取值：v-bind:属性名（v-bind 绑定指令）
• 当模型数据发生变化，那么视图也会跟着变动（重新被渲染）

<!-- 视图 -->
<div id="app">
    <!-- 给文本赋值 用  {{模型变量名}}-->
    <h1>姓名：{{name}}, 年龄: {{age}}, 图片 {{photo}}</h1>

    <!--  给属性赋值需要用 v-bind 指令 -->
    <img v-bind:src="photo">
</div>
<script>
// el -> element
var vue = new Vue({
    el: '#app', /*vue 对象对应的视图是id为app的标签*/
    data: { /*data 中包含的是模型数据*/
        name:'zhangsan',
        age: 18,
        photo: '2_1.bmp'
    }
});
</script>

【3.3.1】v-for 用来遍历一个集合

v-for="(临时变量名,下标变量) in 集合名"

其中下标变量从0开始

【3.3.2】v-if

• 用来进行条件判断，当条件成立，才会渲染视图
• 如果条件不成立，不会生成html代码

<div id="app">
    <h3 v-if="hasError">用户名不正确</h3>
</div>

<script>
var vue = new Vue({
    el:"#app",
    data:{
        hasError:false /*没有错误*/
    }
});
</script>

【3.3.3】 v-show

• 用来进行条件判断，当条件成立，把此标签显示出来
• 如果条件不成立，会把此标签隐藏起来

【3.3.4】事件处理

传统方式处理事件

<input type="button" onclick="函数()">

vue 来处理事件 格式：v-on:事件名称， 事件名称前不需要再加on了

<input type="button" v-on:click="方法名">
<input type="button" v-on:mouseout="方法名">

var vue = new Vue({
    el:
    data:
    methods:{
        方法1：function(){},
        方法2：funciton(){},
        ...
    }
});

【3.3.5】 双向绑定 v-model

• v-bind 模型数据发生了改变，视图也会重新渲染，模型会影响视图，而反之不行
• v-model, 不仅是数据改变影响视图，而且视图改变也会影响数据，尤其配合表单使用

【3.3.6】简化写法

• v-bind:属性名 可以被简化为 :属性名
• v-on:事件名 可以被简化为 @事件名