Vue 实例之数据绑定，事件，组件，生命周期！！！

关于 vue 设计模式的简介

今天讲实例，原理请参照这篇文章！vue 设计模式的简介

1.Vue实例

下面是vue 中一些属性的说明~

data	说明
el	唯一根元素
data	Vue实例数据对象
watch	监听数据变化
filters	过滤器
methods	定义Vue实例中的方法
computed	计算属性
components	定义子组件

创建简单 vue 实例

<script>
  //需要使用 new 关键字
  var vm = new Vue({
    // 内容
  })
<script>

声明一下，以下所有案例均引用 vue.js 文件< script src="…/js/vue2.6.10.js"> </ script> 注意引用的路径~如果怕错的话，src中可以使用这个网址"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"，代码中出现的 yzx ,可以忽略，这是我加的作者标识~

el 唯一根标签：

在创建Vue实例时，el表示唯一根标签，class或id选择器可用来将页面结构与Vue实例对象vm中的el绑定。

<!-- 定义唯一根元素div -->
<div id="app">{{yzxname}}</div>
<script>
var vm = new Vue({
  el: '#app', // 通过 el 与 div 元素绑定
  data: {yzxname: 'yzx成功创建Vue实例！'}
})
</script>

data:

data初始数据：Vue实例的数据对象为data，Vue会将data的属性转换为getter、setter，从而让data的属性能够响应数据变化。data选项的值是对象，对象里面可以写多个值。

<!-- 定义唯一根元素 div -->
<div id="app"><p>{{name}}</p></div>
<script>
var vm = new Vue({
  el: '#app', // 通过el与div元素绑定
  data: {name: 'yzx定义初始数据'}
})
// js中获取 data数据 两种方法都可以~
console.log(vm.$data.name)
console.log(vm.name)
</script>

methods：

methods属性用来定义方法，通过Vue实例可以直接访问这些方法。在定义的方法中，this指向Vue实例本身。定义在methods属性中的方法可中的事件处理方法使用。

<div id="app">
    <!-- 为button按钮绑定click事件 -->
    <button @click="showInfo">请单击</button>
    <p>{{msg}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
  msg: '原始的值'
},
methods: {
   // 定义事件处理方法showInfo
   	showInfo () {
        this.msg = 'yzx触发单击事件'
     }
  }
})
</script>

computed：

computed 计算属性：计算属性结果会被缓存起来，当依赖的响应式属性发生变化时，才会重新计算，返回最终结果。

    <div id="app">
        <p>总价格：{{totalPrice}}</p>
        <p>单价 yzx：{{price}}</p>
        <p>数量 yzx：{{num}}</p>
        <div>
            <button @click="num == 0 ? 0 : num--">减少数量</button>
            <button @click="num++">增加数量</button>
            <button @click="logTotalPrice">计算总价格</button>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                price: 20,
                num: 0
            },
            computed: {   
                // 总价格totalPrice
                totalPrice() {
                    console.log("totalprice执行了")
                    return this.price * this.num
                }
            },
            methods:{
                logTotalPrice(){
                    console.log('totalprice的计算结果为'+this.totalPrice)
                }
            }
        })
    </script>

watch:

通过 watch 获取 cityName 的新值和旧值

<div id="app">
        <!-- input中的v-model用于在表单控件元素上创建双向数据绑定 -->
        <input type="text" v-model="cityName">
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                cityName: 'yzxyzx'
            },
            watch: {
                cityName(newName, oldName) {
                    console.log(newName, oldName)
                }
            }
        })
    </script>

filters:

filters过滤器：在页面中直接操作数据，返回最终结果

    <div id="app">
        <div>{{message | toUpcase}}</div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'hello yzx'
            },
            filters: {
                // 将 hello yzx 转换为 HELLO YZX
                toUpcase(value) {
                    return value ? value.toUpperCase() : ''
                }
            }
        })
    </script>

2.Vue 数据绑定

绑定样式：

Vue提供了样式绑定功能，可以通过绑定内联样式和绑定样式类这两种方式来实现。

绑定内联样式：

在vm实例的data中定义myDiv样式对象，通过v-bind绑定data中定义的myDiv对象。

    <div id="app">
        <!-- 绑定样式属性值 -->
        <div v-bind:style="{backgroundColor:pink,width:width,height:height}">
            <!-- 绑定样式对象 -->
            <div v-bind:style="myDiv"></div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                pink: 'pink',
                width: '100%',
                height: '200px',
                myDiv: {
                    backgroundColor: 'red',
                    width: '100px',
                    height: '100px'
                }
            }
        });
    </script>

绑定样式类名：

通过绑定data中的类名实现元素的样式。

    <style>
        .box {
            background-color: pink;
            width: 100%;
            height: 200px;
        }
        .inner {
            background-color: red;
            width: 100px;
            height: 50px;
            border: 2px solid white;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-bind:class="{box}">我是 box,,,yzx
            <div v-bind:class="{inner}">我是inner1</div>
            <div v-bind:class="{inner}">我是inner2</div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                box: 'box',
                inner: 'inner'
            }
        })
    </script>

内置指令

v-model指令：

v-model主要实现数据双向绑定，通常用在表单元素上，例如input、textarea、select等。

v-text指令：

v-text是在DOM元素内部插入文本内容，页面结构代码如下:

    <div id="app">
        <p v-text="msg"></p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '我是v-text'
            }
        })
    </script>

v-html指令：

v-html（单向绑定）是在DOM元素内部插入HTML标签内容，页面结构代码如下：

  <div id="app">
    <div v-html="msg"></div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '<h2>我是v-html yzx </h2>'
      }
    })
  </script>

v-bind指令：

v-bind可以实现单向数据绑定，页面结构代码如下:

<div id="app">
   <input v-bind:value="msg">   
</div>  
<script>
   var vm = new Vue({
       el: '#app',
       data: {
       msg: '我是v-bind yzx'
       }
     })
</script>

v-on指令：

v-on是事件监听指令，直接与事件类型配合使用，页面结构代码如下：

    <div id="app">
        <p>{{msg}}</p>   
        <button v-on:click="showInfo">请单击 yzx</button>   
      </div>   
      <script> 
        var vm = new Vue({  
          el: '#app',   
          data: {msg: '请单击按钮查看内容'},   
          methods: {    
            showInfo () { 
              this.msg = '我是v-on指令'  
            }  
          }   
        })   
      </script>

【重要】v-for指令：

v-for可以实现页面列表渲染，常用来循环数组，页面结构代码如下。
注意：核心技能，通过遍历循环读取数组或序列，来依次展示对应的内容。索引是从 0开始的，JavaScript 数组可以存不同类型的数据,一般不建议存不同数据类型~🤗

  <div id="app">
    <div v-for="(value,key) in list" data-id="key">
      索引是：{{key}}，元素内容是：{{value}}
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        list: [1, 2, 3,'y','z','x']
      }
    })
  </script>

v-if和v-show指令：

v-if用来控制元素显示或隐藏，属性为布尔值，页面结构代码如下:

    <div id="app">
        <div v-if="isShow" style="background-color:#ccc;">我是v-if yzx</div>
        <button @click="isShow=!isShow">显示/隐藏</button>  
      </div>  
      <script>  
        var vm = new Vue({ 
          el: '#app',  
          data: { 
            isShow: true   
          }  
        }) 
      </script>

3.VUE数据绑定测验

写一个添加的功能，添加可以是固定的写法,删除默认删除最后一个的学生的记录，代码如下：

<div id="app">
        <button @click="add">添加学生</button>
        <button @click="del">删除学生</button>
        <hr/>
        <table border="1" width="36%" style="border-collapse:collapse">
         <tr align="center">
             <td>班级</td>
             <td>姓名</td>
             <td>性别</td>
             <td>年龄</td>
         </tr>
         <tr align="center" v-for="student in students">
             <td>{{student.grade}}</td>
             <td>{{student.name}}</td>
             <td>{{student.gender}}</td>
             <td>{{student.age}}</td>
         </tr>
        </table>
    </div>   
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                students:[{
                    grade:'1',
                    name:'yzx',
                    gender:'女',
                    age:'20'
                },{
                    grade:'2',
                    name:'yzx',
                    gender:'女',
                    age:'20'},
                    {
                    grade:'3',
                    name:'yzx',
                    gender:'女',
                    age:'20'},
                    {
                    grade:'4',
                    name:'yzx',
                    gender:'女',
                    age:'20'}]
            },
            methods:{
                add(){
                    var student={
                        grade:'1',
                    name:'yzx',
                    gender:'女',
                    age:'20' 
                    };
                    this.students.push(student)
                },
                del(){
                    this.students.pop();
                }
            }
        })

4. Vue 事件

v-on绑定事件：

在Vue中可以使用内置指令v-on监听DOM事件，并在触发时运行一些JavaScript代码，或绑定事件处理方法。

获取随机数 random

    <div id="app">
        <button v-on:click="count+=Math.random()">随机数</button>
        <p>yzx 自动生成的随机数是{{count}}</p>  
      </div>   
      <script>   
        var vm = new Vue({  
          el: '#app', 
          data: {
            count: 0   
          }
        })
      </script>

监听按键(回车键)：

    <div id="app">
        <input type="text" v-on:keyup.enter="submit">
      </div>  
      <script>
        var vm = new Vue({
          el: '#app',
          methods: {
            submit () {
              console.log('表单提交 yzx')
            }
          }
        })
      </script>

常见的事件修饰符

.stop事件修饰符：

在前端开发中，复杂的页面结构需要很多事件来完成交互行为。默认的事件传递方式是冒泡，同一事件类型会在元素内部和外部触发，有可能会造成事件的错误触发，所以就需要使用.stop修饰符阻止事件冒泡行为。

    <div id="app">
        <div v-on:click="doParent">
          <button v-on:click="doThis">事件冒泡</button>
          <button v-on:click.stop="doThis">阻止事件冒泡</button>
        </div>
      </div>   
      <script>
        var vm = new Vue({
          el: '#app',  
          methods: { 
            doParent () {  
              console.log('我是父元素单击事件 yzx')
            },
            doThis () {  
              console.log('我是子元素单击事件 yzx')  
            }   
          }
        })
      </script>

.prevent事件修饰符：

HTML标签具有自身特性，例如，标签被单击时会自动跳转。在实际开发中，如果标签的默认行为与事件发生冲突，此时可以使用.prevent修饰符来阻止标签的默认行为。

    <div id="app">
        <a href="https://www.baidu.com" v-on:click.prevent>yzx 阻止默认行为</a> 
        <a href="https://www.baidu.com">yzx 不阻止默认行为</a> 
      </div> 
      <script>
        var vm = new Vue({  
          el: '#app'
        })   
      </script>

.capture事件修饰符：

事件捕获的执行顺序是由外部结构向内部结构执行，与事件冒泡的顺序相反。

    <div id="app">
        <div v-on:click.capture="doParent">   
          <button v-on:click="doThis">事件捕获 yzx</button>
        </div>
      </div> 
      <script> 
        var vm = new Vue({
          el: '#app',
          methods: {
            doParent () {
              console.log('我是父元素的单击事件 yzx')
            },
            doThis () {
              console.log('我是当前元素的单击事件 yzx')    
            }  
          }
        })
      </script>

.self 事件修饰符：

事件修饰符.self 用来实现只有DOM元素本身会触发事件。

    <style>
      .Odiv1{
        width: 80px;
        height: 80px;
        background: #f00;
        margin: 5px;
      }
      .Odiv2{
        width: 50px;
        height: 50px;
        background: #fff;
      }
    </style>
------------------------------------------------------------------------------------
    <div id="app">
        <div class="Odiv1" v-on:click.self="doParent">a
          <div class="Odiv2" v-on:click="doThis">b</div>
        </div>
        <div class="Odiv1" v-on:click="doParent">c
          <div class="Odiv2" v-on:click="doThis">d</div>  
        </div>  
      </div>
      <script>
        var vm = new Vue({
          el: '#app',
          methods: { 
            doParent () {
              console.log('我是父元素的单击事件 yzx')
            },
            doThis () { 
              console.log('我是当前元素的单击事件 yzx')
            }  
          }  
        })
      </script>

.once事件修饰符：

只触发一次事件处理函数，案例页面结构代码如下

  <div id="app">
    <button v-on:click.once="doThis">yzx 只执行一次</button>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      methods: {
        doThis () {
          console.log('我是当前元素的单击事件且只执行一次')
        }
      }
    })
  </script>

5. Vue 组件

组件：

在Vue中，组件是构成页面中独立结构单元，组件主要以页面结构形式存在，不同组件也具有基本交互功能。

组件特性：

• 能够减少重复代码的编写，提高开发效率。
• 根据业务逻辑实现复杂的项目功能。
• 降低代码之间的耦合程度，使项目更易维护和管理。
  

实现计数器

  <div id="app">
    <my-component></my-component>
    <my-component></my-component>
    <my-component></my-component>
  </div>
  <script>
    Vue.component('my-component', {
      data () {
        return {
          count: 0
        }
      },
      template: '<button v-on:click="count++">被单击 yzx {{count}}次</button>'
    })
    var vm = new Vue({ el: '#app' })
  </script>

注册局部组件：

Vue.component()方法用于全局注册组件，除了全局注册组件外，还可以局部注册组件，通过Vue实例的components属性来实现。

  <div id="app">
    <my-component></my-component>
  </div>
  <script>
    var com1 = {
      template: '<p>我是vm实例中的局部组件 yzx</p>'
    }
    var vm = new Vue({
      el: '#app',
      // 注册局部组件
      components: { myComponent: com1 }
    })
  </script>

template模板：

Vue提供了标签来定义结构的模板，可以在该标签中书写HTML代码，然后通过id值绑定到组件内的template属性上，这样就有利于在编辑器中显示代码提示和高亮显示，不仅改善了开发体验，也提高了开发效率。

    <div id="app">
        <p>{{title}}</p>
        <my-component></my-component>
      </div>  
      <template id="tmp1"> 
        <p>{{title}}</p> 
      </template>
      <script>  
        Vue.component('my-component', { 
          template: '#tmp1',
          data () {
            return {  
              title: '我是组件内的title数据 yzx', 
            }
          }
        })
        var vm = new Vue({
          el: '#app',
          data: {  
            title: '我是vm实例的title数据 yzx'  
          }  
        })
      </script>

props传值：

props即道具，用来接收父组件中定义的数据，其值为数组，数组中是父组件传递的数据信息。
子组件接收父组件传递的数据“title”。

  <div id="app">
    <my-parent name="title"></my-parent>
  </div>
  <script>
    Vue.component('my-parent',{
      props: ['name'],
      template: '<div> yzx 我是父组件 {{name}}</div>'
    })
    var vm = new Vue({
      el: '#app'
    })
  </script>

$emit传值：

$ emit 能够将子组件中的值传递到父组件中去。$emit可以触发父组件中定义的事件，子组件的数据信息通过传递参数的方式完成。触发父组件中绑定的childfn事件，并传递子组件中的message数据。

  <div id="app">
    <parent></parent>
  </div>
  <template id="child">
    <div>
      <button @click="click">Send</button>
      <input type="text" v-model="message">
    </div>
  </template>
   <script>
    Vue.component('parent', {
      template: '<div><child @childfn="transContent"></child>' +
                  '子组件传来的值 : {{message}}</div>',
      data () {
        return {
          message: ''
        }
      },
      methods: {
        transContent (payload) {
          this.message = payload
        }
      }
    })
    // child组件
    Vue.component('child', {
      template: '#child',
      data () {
        return {
          message: '子组件的消息 '
        }
      },
      methods: {
        click () {
          this.$emit('childfn', this.message);
        }
      }
    })
    var vm = new Vue({ el: '#app' })

v-if与v-else ：

Vue中的页面结构是由组件构成的，不同组件可以表示不同页面，适合进行单页应用开发。实现登录和注册界面点击按钮进行切换（方法一）：

    <div id="app">
        <a href="#" @click.prevent="flag ? flag : flag = !flag">登录 yzx</a>
        <a href="#" @click.prevent="flag ? flag = !flag : flag">注册 yzx</a>
        <login v-if="flag"></login>
        <register v-else="flag"></register>
      </div>
      <script>
        Vue.component('login', {
          template: '<div>登录页面</div>'
        })
        Vue.component('register', {
          template: '<div>注册页面</div>'
        })
        var vm = new Vue({
          el: '#app',
          data: { flag: true }   
        })   
     </script>

方法二：效果如上图，不展示了哈✌

  <div id="app">
    <a href="#" @click.prevent="comName='login'">登录 yzx</a>
    <a href="#" @click.prevent="comName='register'">注册 yzx</a>
    <component v-bind:is="comName"></component>
  </div>
  <script>
    Vue.component('login', {
      template: '<div>登录页面</div>'
    })
    Vue.component('register', {
      template: '<div>注册页面</div>'
    })
    var vm = new Vue({
      el: '#app',
      data: { comName: '' }
    })
 </script>

6. Vue 生命周期

Vue实例为生命周期提供了回调函数，用来在特定的情况下触发，贯穿了Vue实例化的整个过程，这给用户在不同阶段添加自己的代码提供了机会。

钩子函数：

钩子函数用来描述Vue实例从创建到销毁的整个生命周期。

beforeCreate和created：

创建实例对象之前或实例对象创建之后执行，案例演示如下。

  <div id="app">{{msg}}</div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: { msg: 'yzx' },
      beforeCreate () {
        console.log('实例创建之前')
        console.log(this.$data.msg)
      },
      created () {
        console.log('实例创建之后')
        console.log(this.$data.msg)
      }
    })
 </script>

beforeMount和mounted：

在实例创建后，如果挂载点el存在，就进行页面挂载。

    <div id="app">{{msg}}</div>
    <script>
        var vm = new Vue({
          el: '#app',
          data: { msg: 'yzx' },
          beforeMount () {
          console.log('挂载之前')
          console.log(this.$el.innerHTML) // 通过this.$el获取el的DOM元素
          },
          mounted () {
            console.log('挂载之后')
            console.log(this.$el.innerHTML)
          }
        })
    </script>

beforeUpdate和updated：

Vue实例挂载完成后，当数据发生变化时，会执行beforeUpdate和updated钩子函数。

    <div id="app">
        <div v-if="isShow" ref="self"> yzx </div>
        <button @click="isShow = !isShow">更新</button>
        </div>
        <script>
            var vm = new Vue({
              el: '#app',
              data: { isShow: false },
              beforeUpdate () {
                console.log('更新之前')
                console.log(this.$refs.self)
              },
              updated () {
                console.log('更新之后')
                console.log(this.$refs.self)
              }
            })
         </script>

beforeDestroy和destroyed：

生命周期函数的最后阶段是实例的销毁，会执行beforeDestroy和destroyed钩子函数。

  <div id="app">
    <div ref="self">test</div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: { msg: 'yzx' },
      beforeDestroy () {
        console.log('销毁之前')
        console.log(this.$refs.self)
        console.log(this.msg)
        console.log(vm)
      },
      destroyed () {
        console.log('销毁之后')
        console.log(this.$refs.self)
        console.log(this.msg)
        console.log(vm)
      }
    })
    // 在控制台执行：vm.$destroy()，查看效果
 </script>

---

未经允许，禁止转载~我都不敢信我写了 18500多 字数，910 行🤔🤔 加油，不会的可以问我，觉得喜欢可以收藏 [ 暗示三连💖💖💖~~]