WEB前端（五）--Vue

Vue概念

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
学习vue一定要有扎实的前端基础知识否则会相当吃力！！！

MVVM框架

和传统框架不同的是，Vue采用了最新的MVVM框架，它最大的特点就是，我们原来操作的是页面，页面和页面里的数据混杂在一起。而MVVM框架体系引入后端早已深入人心的分层思想，是MVC架构的延伸，实现把数据和页面分离。我们可以在页面布局好后，只对数据进行操作，当数据改变，页面上的内容会自动随之改变，而无需开发者开发专门的代码去改变，如之前ajax技术实现的局部刷新。

MVVM是一种设计思想，对早期的web前端开发做了增强，将前端代码按其职责的不同分成了三部分：

• 界面(View)部分：由html+css构成，并允许在html,css中直接使用变量，表达式，语句等。
• 模型部分(Model)：一般为一个JSON格式的对象，用于存储view中需要的数据和函数。
• 视图模型(ViewModel):专门负责自动维护模型对象中的变量与界面中的变量同步。

因为有了ViewModel的存在，数据可以自动同步到界面上，几乎避免了大量重复的编码！

Vue设计思想（观察者设计模式）

观察者模式（Observer）：通常又被称作为发布-订阅者模式。它定义了一种一对多的依赖关系，即当一个对象的状态发生改变的时候，所有依赖于它的对象都会得到通知并自动更新，解决了主体对象与观察者之间功能的耦合。

Vue基本用法

实例化Vue

每个Vue应用都需要通过实例化 Vue 来实现。

var vm = new Vue({ 
    // 选项 
})

对象参数

el:绑定到指定html标签上（挂载点）
data：绑定的数据与view中的数据实现双向绑定（数据）
methods：绑定的方法与view中的事件方法绑定（方法）
mounted：表示当Dom完全加载完成后执行的函数方法

模板语法

插值

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值

<div id="app">
     <p>{{ message }}</p>
</div>
<script>D
new Vue({
        el: '#app',
        data: {
            message: '数据绑定'
        }
})
</script>

HTML

使用 v-html 指令用于输出 html 代码

<div id="app">
    <div v-html="message"></div>
</div>
<script>
new Vue({
    el: '#app',
    data: {
        message: '<h1>测试文本</h1>'
     }
})
</script>

属性绑定

HTML 属性中的值应使用 v-bind 指令
如果为 true 使用 class1 类的样式，否则不使用该类

<div id="app">
    <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
    <br><br>
    <div v-bind:class="{'class1': use}">
        v-bind:class 指令
    </div>
</div>
<script>
    new Vue({
        el: '#app',
         data:{
             use: false
        }
    })
</script>

表达式

完全支持 JavaScript 表达式

<div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
   <div v-bind:id="'list-' + id">支持JavaScript</div>
</div>
<script>
new Vue({
     el: '#app',
    data: {
         ok: true,
         message: 'RUNOOB',
         id : 1
    }
})
</script>

Vue特色指令

v-bind

在html中假如希望元素的属性值随程序内容的发生而变化，可以借助v-bind或:代替，其基本语法如：

<元素 v-bind:属性名="变量或js表达式">

也可以采用其简化形式，其基本语法如：

<元素 :属性名="变量或js表达式">

案例分析：

 <div id="app">
        <font :color="color">hello</font>
    </div>
    <script> new Vue({
            el:"#app",
            data:{
                color:"red"
            }
        }); </script>

v-show

v-show为一个专门控制元素的显示隐藏的特殊指令，其基本语法为：

<元素 v-show="bool类型的变量或返回bool类型的js表达式">

当Vue对象扫描到v-show时，就会立刻执行""中的变量或js表达式,
如果变量或js表达式的值为true，则什么也不干，元素保持原样显示。如果变量或js表达式的值为false，则new Vue()自动为当前元素添加display:none。

示例关键代码如下：

 <style> .pop{
      width:300px; height:150px;
      background-color:lightGreen;
    }
    .pop>.close{
      float:right;
      padding:5px 10px;
      cursor:pointer;
    } </style>

 <div id="app">
    <button @click="show">show</button>
    <div v-show="display" class="pop">
      <span class="close" @click="hide">×</span>
    </div>
 </div>

 <script> //2. 创建new Vue对象
        new Vue({
          el:"#app",
          data:{
            display:false
          },
          methods:{
            show(){
              this.display=true;
            },
            hide(){
              this.display=false;
            }
          }
        }) </script>

v-if 和 v-else

v-if 和 v-else 是在html实现分支控制，二选一的一种实现方式，在使用时，v-if和v-else对应的的两个元素必须紧挨着写！中间不能插入其他元素，其基本语法为：

<元素1 v-if="boolean类型的变量或js表达式">
<元素2 v-else> 

示例关键代码如下：

 <div id="app">
    <!--第一个div是已登录时显示的内容-->
    <div v-if="isLogin"><h3>Welcome, dingding | <a href="javascript:;" @click="logout">注销</a></h3></div>
    <!--第二个div是未登录时显示的内容-->
    <div v-else><a href="javascript:;" @click="login">登录</a> | <a href="javascript:;">注册</a></div>
  </div> 

 <script> new Vue({
      el:"#app",
      data:{
        isLogin:false //开局用户默认是未登录的
      },
      methods:{
        login(){
          this.isLogin=true;
        },
        logout(){
          this.isLogin=false;
        }
      }
    }) </script> 

v-else-if

v-else-if专门和v-if搭配使用，控制多个元素多选一显示的特殊的指令。其基本语法为：

<元素1 v-if="条件1">

<元素2 v-else-if="条件2">

<元素3 v-else-if="条件3">

... ...
<元素n v-else>

注意，v-if和v-else-if和v-else之间必须连着写，不能插入其他元素。

示例关键代码如下：

<div id="app">
    <span v-if="score>=90">优秀</span>
    <span v-else-if="score>=80">良好</span>
    <span v-else-if="score>=70">及格</span>
    <span v-else>及格</span>
 </div>

 <script> var vm=new Vue({
      el:"#app",
      data:{
        score:95
      }
    })
    //在控制台中: vm.socre=85 </script> 

v-for

v-for是一个专门用于根据数组内容反复生成多个相同结构的元素的特殊指令。其语法为：

<要反复生成的元素 v-for="(当前元素值, 当前位置) of 数组">

示例关键代码如下：

<div id="app">
    <!--需求: 根据tasks数组中的任务列表反复生成多个li-->
    <ul>
      <li v-for="(t,i) of tasks" :key="i">
      {{i+1}} - {{t}}
      </li>
    </ul>
  </div>

 <script> var vm=new Vue({
      el:"#app",
      data:{
        //用一个数组保存待办事项列表
        tasks:["吃饭", "睡觉"]
      }
    }) </script>

v-for还可以遍历对象属性，例如：

<div id="app">
    <!--需求: 遍历lilei对象，在页面显示李磊对象的详细信息-->
    <ul>
      <li v-for="(value,key) of lilei" :key="key">
        {{key}} : {{value}}
      </li>
    </ul>
  </div>

 <script> var vm=new Vue({
      el:"#app",
      data:{
        lilei:{
          name:"Li Lei",
          age:11
        }
      }
    }) </script>

v-for 还可以进行计数，例如：

 <div id="app">
    <ul>
      <li v-for="i of pageCount" :key="i">{{i}}</li>
    </ul>
  </div>

 <script> new Vue({
      el:"#app",
      data:{
        pageCount:5 //共5页
      }
    }) </script>

v-on

v-on 是一个专门绑定事件处理函数的指令，其基本语法为：

<元素 v-on:事件名="事件处理函数名()">

v-on 也可以使用@符号代替，其基本语法结构为：

 <元素 @事件名="事件处理函数名() 

如果事件处理函数不需要传入实参值，则()也可省略,例如：

<元素 @事件名="事件处理函数名">

凡是在页面中定义的事件处理函数，都要在new Vue()中的methods成员内添加对应的函数实体。

示例关键代码如下：

<div id="app">
<!--点哪个div，哪个div就可以喊自己疼！-->
<div id="d1" @click="say('html')">d1</div>
<div id="d2" @click="say('css')">d2</div>
</div> 

 <script>
    new Vue({
      el:"#app",
      methods:{
        say(name){
          console.log(`hello ${name}!`)
        }
      }
    })
  <script>

v-html

如果{{}}绑定的是一段HTML片段时，是不会交给浏览器解析的。而是原样显示HTML片段的内容——和DOM中的textContent是一样的,假如希望html可被解析可以使用v-html代替{{}}。其基本语法结构为：

<元素 v-html="变量"> 这个位置显示变量内容 </元素>

示例关键代码如下：

 <div id="app">
    <h3>{{msg}}</h3>
    <h3 v-html="msg"></h3>
  </div>

 <script> new Vue({
      el:"#app",
      data:{
        msg:`来自&lt;&lt;<a href="javascript:;">新华社</a>&gt;&gt;的消息`
      }
    }) </script>

v-text

v-text是可代替{{}}绑定元素内容的特殊指令,用于设置元素内部的文本内容，而且可以防止因网络延迟短暂显示{{}}的现象。其语法为：

<元素 v-text="变量或js表达式"> </元素>

示例关键代码如下：

 <div id="app">
            <!--js的天下         -->
    <h3 v-text=`用户名:${uname}`></h3>
            <!--js的天下         -->
    <h3 v-text=`积分:${score}`></h3>
  </div>

 <script> setTimeout(function(){
      new Vue({
        el:"#app",
        data:{
          uname:"dingding",
          score:1000
        }
      })
    },6000) </script>

v-model

v-model 是用于实现双向绑定的指令，既能将程序中的变化，自动更新到页面上(model->view)，又能将页面上发生的变化，更新回程序中的变量中(view->model),其基本语法为：

<表单元素 v-model:value="变量">

示例关键代码如下：

 <div id="app">
    <!--单向绑定: (Model->View 不能View->Model)-->
    <!-- <input :value="keyword"> -->
    <!--双向绑定: (Model->View 又能View->Model)-->
    <input v-model:value="keyword">
    <button @click="doUpdate">更新</button>
  </div>

 <script> var vm=new Vue({
      el:"#app",
      data:{
        keyword:"ABC" //开局用户没有输入任何关键词
      },
      methods:{
        doUpdate(){
          console.log(`查找 ${this.keyword} 相关的内容...`)
        }
      }
    })
  <script>

单选操作的双向绑定：

单选操作的value因为是写死的固定的备选值！用户在不同radio之前切换选中状态时，其实改变的是radio的checked属性值。所以，想用双向绑定获得当前选中的radio的值，应该绑定checked属性:

<input type="radio" value="固定值" v-model:checked="变量">

示例代码如下：

<div id="app">
    性别:
    <label><input type="radio" name="sex" value="1" v-model:checked="sex">男</label>
    <label><input type="radio" name="sex" value="0" v-model:checked="sex">女</label>
    <h3>您选的性别是:{{sex==1?"男":"女"}}</h3>
 </div>

 <script> new Vue({
      el:"#app",
      data:{
        sex:1
      }
    }) </script> 

select元素的双向绑定

一个select下包含多个option元素。所有备选值value，都分布在每个option上。但是每个备选值value也是写死的。用户每次选择不同的option时，其实select元素会将选中的option的value值，修改到select的value属性上。其语法为：

<select v-model:value="变量">
 <option value="值1">xxx</option>

 ... ...

 ... ...
</select>

示例代码如下：

 <div id="app">
    <select v-model:value="src">
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
      <option value="hangzhou">杭州</option>
    </select><br/>
    <img :src="src">
  </div>

 <script> new Vue({
      el:"#app",
      data:{
        src:"beijing"
      }
    }) </script>

axios

封装了ajax支持更好，特别在异步处理方面，Vue中推荐使用axios（ajax input output system）

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script type="text/javascript">
    var config={
        el:"#app",
        data:{
            goodsList:[],
        },
        mounted:function (){
            this.selectAll();
        },
        methods:{
            selectAll:function (){
                var serverUrl="/goods/doGoodsUI";
                axios.get(serverUrl).then(function (res) {
                    this.vue.goodsList=res.data;
                }).catch();
            },
            deleteById:function (id){
              var serverUrl="/goods/doDeleteById/"+id;
              axios.get(serverUrl).then(function (res) {
                  window.alert(res.data);
                  this.vue.selectAll();
              }).catch();
            },
        },
    };
    var vue = new Vue(config);
</script>