四、伊森商城前端基础-Vue 双向绑定&事件处理&安装插件 p22

1、双向绑定

双向绑定：

效果：我们修改表单项， num 会发生变化。我们修改 num ，表单项也会发生变化。为了实

时观察到这个变化，我们将 num 输出到页面。

我们不需要关注他们为什么会建立起来关联，以及页面如何变化，我们只需要做好数据和

视图的关联即可（ MVVM ）


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    
 
    
    <div id="app">
        
        <input type="text" v-model="num">
 
        
        <h1> {{name}} ,真不辍！有{{num}}个人给他点赞！h1>
    div>
 
    
    <script src="./node_modules/vue/dist/vue.js">script>
 
    
    <script>
        // 声明一个对象叫vm，相当于创建一个vue对象，让vue对象管控上面的div
        // 在new Vue()的时候传入一个对象
        let vm = new Vue({
            // element元素的意思，获取哪个元素
            // 让这个Vue对象管控哪个元素
            el: "#app",      //id选择器，现在已经管控了div
            // data数据信息
            // 可能有很多的数据，用{}代表这个数据是一个对象，里面可以有很多key value
            data: {
                name: "张三",
                // 我们只需要元素跟模型里面的某一个数据进行绑定
                // input跟num进行绑定，即修改data中的num，num变了，插值表达式获取到的值也变了
                num: 1
            }
        })
    script>
 
body>
html>

2、事件处理（单击事件）


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    
 
    <div id="app">
        <input type="text" v-model="num">
        
        
        <button v-on:click="num++">点赞button>
 
        <h1> {{name}} ,真不辍！有{{num}}个人给他点赞！h1>
    div>
 
    
    <script src="./node_modules/vue/dist/vue.js">script>
 
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                name: "张三",
                num: 1
            }
        })
    script>
 
body>
html>

v-xx：这些都是指令

操作流程：

1、创建vue实例，关联页面的模板，将自己的数据（data）渲染到关联的模板，响应式的 2、指令来简化对dom的一些操作。

3、声明方法来做更复杂的操作。methods里面可以封装方法。

3、事件处理（绑定方法）


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    
 
    <div id="app">
        <input type="text" v-model="num">
        
        
        <button v-on:click="num++">点赞button>
        
        <button v-on:click="cancle">取消点赞button>
 
        <h1> {{name}} ,真不辍！有{{num}}个人给他点赞！h1>
    div>
 
    
    <script src="./node_modules/vue/dist/vue.js">script>
 
    <script>
        let vm = new Vue({
            el: "#app", //绑定元素
            data: { //封装数据
                name: "张三",
                num: 1
            },
            // 将所有的方法都放在这里
            methods:{ //封装方法
                cancle(){
                    this.num--;
                }
            }
        })
 
 
        // v-xx: 都是指令
    script>
 
body>
html>