前言

这一节讲Vue

Vue_5">1. Vue概述

这些都是DOM的操作

原来模型和视图不能实现同步变化，但是Vue就可以了

2. 快速入门

1.

2.

    <script src="js/vue.js"></script><div id="app">
<!--        准备一个input输入框,绑定一个模型，这个模型的名字就是username,,,,{{username}}这个是差值表达式，把username里面的模型的数据取出来-->
<!--        后面input输入框的数据产生变化，模型跟着变，取出来的数据也跟着变化--><input v-model="username">{{username}}</div><script>//1.创建vue核心对象---->它有两个属性，一个el--->指定vue的作用范围--->id为app的就可以被Vue作用//data属性就是返回一个username的空字符串的属性new Vue({el:"#app",// data:function () {//     return {//         username:""//     }// }或data(){return {username:""}}})</script>

这里我们输入什么，就展示出来什么

3. 常用指令

v-model就是用来数据双向绑定的

    <div id="app">
<!--        <a href=""></a>  以前这样写href，href就写死了，现在我们换一下,,这个url加上v-bind就是模型里面的url--><a v-bind:href="url">点击一下</a></div><script>new Vue({el:"#app",data(){return {username:"",//     增加一个属性，urlurl:"http://www.baidu.com"}}})</script>

        <a :href="url">点击一下</a>

可以这样写，省略v-bind
所以改变模型里面的url就可以改变地址了

或者可以用v-model，来改变url

        <a :href="url">点击一下</a><input v-model="url">

这个是因为一开始初始化的模型里面的值就是百度的

我们就是一边书写，它就会对应一边变化的

    <div id="app">
<!--        click是单击事件，blur是光标失去焦点事件    v-on:click="show()"  单击调用模型里面的show方法，没有传参的话，show的括号可以不写 --><input type="button" value="一个按钮" v-on:click="show()"></div><script>new Vue({el:"#app",data(){return {username:"",//     增加一个属性，urlurl:"http://www.baidu.com"}},//定义方法要用methodsmethods:{show(){alert("我被点了。。。。");}}})</script>

        <input type="button" value="一个按钮" @click="show()">

当然也可以这样写，没什么区别

    <div id="app">
<!--        如果count==3才展示div1   else，如果count==4，展示div2，else展示div3--><div v-if="count == 3">div1</div><div v-else-if="count==4">div2</div><div v-else>div3</div><br><input v-model="count"></div><script>new Vue({el:"#app",data(){return {username:"",url:"http://www.baidu.com",count:3}},methods:{show(){alert("我被点了。。。。");}}})</script>

            <div v-if="count == 3">div1</div><div v-show="count == 3">div1</div>

v-if和v-show,两个的效果是一模一样的

两个的区别就是，真正的html代码，count！=3的话，v-if是不存在的，v-show是存在的，只不过打印的隐藏了而已

    <div id="app"><div v-for="addr in addrs">{{addr}}<br>
<!--        addr这个是局部变量，就是取得数组里面的每个值而已    --></div></div><script>new Vue({el:"#app",data(){return {username:"",url:"http://www.baidu.com",count:3,addrs:["北京","上海","西安"]}},methods:{show(){alert("我被点了。。。。");}}})</script>

    <div id="app"><div v-for="(addr,i) in addrs">{{i}}-{{addr}}<br>
<!--        addr这个是局部变量，就是取得数组里面的每个值而已    --></div></div>

这样写的话，那个i就是索引

4. 生命周期

加载完成的话，mounted会被自动的执行

    <script>new Vue({el:"#app",data(){return {username:"",url:"http://www.baidu.com",count:3,addrs:["北京","上海","西安"]}},methods:{show(){alert("我被点了。。。。");}},// mounted:function(){//    // }mounted(){alert("加载完成")}})</script>

5.案例

5.1 查询所有

vue创建

绑定app

针对status有方法


只需要在在brand类里面添加一个getStatusStr就可以直接用brand.statusStr得到了

<div id="app">
<a href="addBrand.html"><input type="button" value="新增"></a><br>
<!--<hr>-->
<table id="brandTable" border="1" cellspacing="0" width="100%"><tr><th>序号</th><th>品牌名称</th><th>企业名称</th><th>排序</th><th>品牌介绍</th><th>状态</th><th>操作</th></tr>
<!--    使用v-for--><tr  v-for="(brand,i) in brands" align="center"><td>{{i+1}}}</td><td>{{brand.brandName}}</td><td>{{brand.companyName}}</td><td>{{brand.ordered}}</td><td>{{brand.description}}</td><td>{{brand.statusStr}}</td><td><a href="#">修改</a> <a href="#">删除</a></td></tr></table>
</div><script src="js/axios-0.18.0.js">
</script>
<script src="js/vue.js"></script><script>new Vue({el: '#app',data(){return{brands:[]}},mounted() {//页面加载完成之后，就发送异步请求，来查询数据//我们用v-for来遍历---》app里面var _this = this;axios({method: 'get',url:"http://localhost:8080/brand1-demo/selectAllServlet"}).then(function (resp) {// var brands=resp.data;//这个目前是局部变量，要给v-for使用，，所以需要把brands变成一个模型--->Data里面声明一下// this.brands = resp.data;--->但是这个this指的是axios的window的_this.brands = resp.data;})}})</script>

5.2 新增品牌

增加一个brand的对象值，这个就是我们添加的值

<div id="app"><h3>添加品牌</h3>
<form action="" method="post">品牌名称：<input id="brandName" v-model="brand.brandName" name="brandName"><br>企业名称：<input id="companyName" v-model="brand.companyName" name="companyName"><br>排序：<input id="ordered" v-model="brand.ordered" name="ordered"><br>描述信息：<textarea rows="5" cols="20" id="description" v-model="brand.description" name="description"></textarea><br>状态：<input type="radio" name="status" v-model="brand.status" value="0">禁用<input type="radio" name="status" v-model="brand.status" value="1">启用<br>
<!--submitForm是一个方法--><input type="button" id="btn" @click="submitForm" value="提交">
</form>
</div>
<script src="js/axios-0.18.0.js">
</script>
<script src="js/vue.js"></script><script>new Vue({el: '#app',data(){return {//brand是一个对象,就用{}，没有属性现在---->v-model的时候就会添加属性值了brand:{}}},methods: {submitForm() {//发送ajax请求,完成添加功能var _this=this;axios({method: 'post',url: "http://localhost:8080/brand1-demo/addServlet",data: _this.brand,}).then(function (resp) {//判断响应数据是否为success,如果是说明添加成功，并跳回展示页面if (resp.data == "success") {location.href = "http://localhost:8080/brand1-demo/brand.html";}})}}})
</script>

总结

下一节讲Element