前端基础（二）—— Vue

Vue

0. 介绍

1. MVVM思想

• M：Model，模型，包括数据和一些基本操作
• V：View，试图，页面渲染结果
• VM：View-Model，模型与视图间的双向操作（无需开发人员干涉）

2. Vue

   Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

1. 基本语法

0. Vue使用总结

   1. 创建vue实例，关联页面的模板，将自己的数据渲染到关联的模板，响应式的；
   2. 指令简化对DOM的一些操作；
   3. 声明方法来做更复杂的操作(methods)

1. Vue声明式渲染

//自动绑定，{{}}插值表达式
<div id="app">
       <h1> {{name}},非常美</h1>
   </div>

   <script src="./node_modules/vue/dist/vue.js"></script>

   <script>
       let vm = new Vue({
           el:"#app",//绑定元素
           data:{    //封装数据
               name:"Xixi"
           }

       });
   </script>

2. 双向绑定

   模型变化，视图变化，反之亦然

   将元素与模型的某个数据进行绑定

   <div id="app">
       <input type="text" v-model="num">
       <h1> {{name}},非常美,有{{num}}个人喜欢他</h1>
   </div>

   <script src="./node_modules/vue/dist/vue.js"></script>

3. 事件处理

​ v-xx：指令

<button v-on:click="num++"> 点赞</button>

4. 调用方法

<div id="app">
        <input type="text" v-model="num">
        <button v-on:click="num++"> 点赞</button>
        <button v-on:click="cancel"> 取消</button>
        <h1> {{name}},非常美,有{{num}}个人喜欢他</h1>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        let vm = new Vue({
            el:"#app",        //绑定元素
            data:{            //封装数据
                name:"Xixi",
                num:1
            },
            methods:{          //封装方法 
                cancel(){
                    this.num--;
                }
            }
        });


    </script>

2. 指令

插值表达式

• 花括号

  格式：{{表达式}}

  说明：

  • 该表达式支持JS语法，可以调用JS内置函数（必须有返回值）
  • 必须有返回结果
  • 可以直接获取Vue实例中定义的数据和函数

单项绑定

数据变化，页面元素随之变化，反之不成立

1. v-text、v-html

<div id="app">
       {{msg}} <br/>
         <!--不转义  -->
       <span v-html="msg"></span>    

       <br/>
       <span v-text="msg"></span>
   </div>

   <script src="./node_modules/vue/dist/vue.js"></script>
   
   <script>
       new Vue({
           el:"#app",
           data:{
               msg:"<h1>Hello</h1>"
           }
       })
   </script>

插值闪烁：网络慢时会短暂显示插值表达式

2. v-bind

给html标签的属性绑定

<div id="app">
        <a v-bind:href="link">gogogo</a>

        <!-- class,style {class名：加上?(跟某个属性有关)}-->
        <!-- 当两个参数都是true时，会动态将active和text-danger添加到class -->
        <!-- 单引号是因为变量名包含非法字符：“-” -->
        <!-- v-bind可省略 -->
        <span v-bind:class="{active:isActive,'text-danger':hasError}"
            :style="{color: color1,fontSize: size}">你好</span>

    </div>


    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                link: "http://www.baidu.com",
                isActive: true,
                hasError: true,
                color1: 'red',
                size: '40px'
            }
        })
    </script>

双向绑定

3. v-model

表单项，自定义组件

    <div id="app">
        精通的语言：
            <input type="checkbox" v-model="language" value="Java">Java<br/>
            <input type="checkbox" v-model="language" value="PHP">PHP<br/>
            <input type="checkbox" v-model="language" value="Python">Python<br/>

        选中了{{language.join(",")}}
    </div>


    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                language:[]
            }
        })
    </script>

4. v-on

前面介绍过

• 事件中直接写js片段

• 指定回调函数，必须是vue实例中定义的函数

• v-on可以简写成@

• 事件修饰符：又点开头的指令后缀实现

  阻止事件冒泡（递归）等

//冒泡：点击小div，大div自动也发生点击事件
//.stop阻止冒泡
   <div id="app">
       <button v-on:click="num++">点赞</button>
       <button @click="cancle">取消</button>
       <h1>有{{num}}个赞</h1>


       <!-- 事件修饰符 -->
       <div style="border: 1px solid red;padding: 20px;" v-on:click="hello">
           大div
           <!-- .stop阻止冒泡 -->
           <div style="border: 1px solid blue;padding:20px;" @click.stop="hello">
               小div<br />
               <!-- .prevent阻止跳转超链接，可以设置点击后的行为如hello，且阻止默认行为 -->
               <a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
           </div>
       </div>

       <!-- 按键修饰符 -->
       <input type="text"><br />
       提示：

   </div>

   <script src="./node_modules/vue/dist/vue.js"></script>

   <script>
       let vm = new Vue({
           el: "#app",
           data: {
               num: 0
           },
           methods: {
               cancle() {
                   this.num--;
               },
               hello() {
                   alert("点击了")
               }
           }
       })
   </script>

• 按键修饰符

  <!-- 按键修饰符 -->
  <!-- keyup后跟键码或别名 -->
  <!-- 实现：鼠标位于下图红圈位置，点击up num+2，down num-2；组合键：ctrl+单击num=10 -->
  <input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2" @click.ctrl="num=10"><br />
          
  

5. v-for

遍历循环

6. v-if、v-show

7. v-else、v-else-if

和v-for结合：

3. 计算属性和侦听器

1. 计算属性和侦听器

• watch可以监控一个值的变化，从而做出相应的x反应
  

2. 过滤器

• 过滤器常用来处理文本格式化的操作
• 可以用在两个地方：双花括号插值和v-bind表达式

<li v-for"user in userList">
    {{user.id}} ==> {{user.name}} ==>{{user.gender == 1?:"男":"女"}} ==>
    {{user.gender | genderFilter}}
</li>

...
//局部过滤器
genderFilter(val){
    if(val == 1){
        return "男";
    }else{
        return "女"
    }
}
...

//全局过滤器
Vue.filter("gFilter",funciton(val){
           ...
})

4. 组件化

在vue里，所有的vue实例都是组件

1. 全局声明一个组件

• 组件其实是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
• 不同的是组件不会与页面元素绑定，否则无法复用，因此没用el属性
• 组件渲染需要html模板，增加了template属性，值就是html模板
• 全局组件定义完毕，任何实例都可以直接在html中通过组件名称来使用组件
• data必须是一个函数，不再是一个对象

//使用多次
//每次调用都是独立的新对象，即count=1
<counter></counter>
<counter></counter>
...

2. 局部声明一个组件

7. 生命周期钩子函数

1. 生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

8. vue模块化开发

1. npm install webpack -g

​ 全局安装webpack

2. npm install -g @vue/cli-init

​ 全局安装vue脚手架

3. 初始化vue项目

vue init webpack appname：vue脚手架使用webpack模板初始化一个appname项目

4. 启动vue项目

• 项目的package.json中又scrips，代表能运行的命令

• npm start = npm run dev ： 启动项目

5. 组件三要素

• template
• script
• style