指令13种

一. 指令: 13种:

1. v-on:

对应小程序视频:小程序->在线->VUE->day02 1. 绑定事件
(1). 什么是: 专门绑定事件处理函数的指令
(2). 何时: 今后只要一个元素可能触发事件,都用v-on绑定
(3). 如何:

  1. 标准:
    <元素 v-on:事件名="事件处理函数名()">
  2. 简写:
    1). v-on:可用@代替: <元素 @事件名="事件处理函数名()"

2). 如果事件处理函数不需要传入实参值,则()也可省略
<元素 @事件名="事件处理函数名"

  1. 凡是在页面中定义的事件处理函数,都要在new Vue()中的methods成员内添加对应的函数实体。
    (4). 其实,事件也可以传参:
  2. <元素 @事件名="处理函数(实参值, ... , ...)"
  3. methods:{
    处理函数(形参,...,...){

}

  1. 示例: 点哪个div,哪个div喊疼
    1_v-on.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
  <style>
    #d1,#d2{
      width:200px; height:100px;
    }
    #d1{
      background-color:#afa
    }
    #d2{
      background-color:#aaf
    }
  </style>
</head>
<body>
  <div id="app">
    <!--点哪个div,哪个div就可以喊自己疼!-->
    <div id="d1" @click="say('d1')">d1</div>
    <div id="d2" @click="say('d2')">d2</div>
  </div>
  <script>
    new Vue({
      el:"#app",
      methods:{
        say(id){
          console.log(`${id} 疼!`)
        }
      }
    })
  </script>
</body>
</html>

结果

(5). 其实,vue中也可以获得事件对象:

  1. 如果不需要传入其它自定义实参值,只需要获得事件对象时: 和DOM中获得事件对象的方式是完全相同的!
    1). <元素 @事件="处理函数">

强调: 此时,一定不要加(),因为空的()表示什么参数都不传的意思!连事件对象也不传!
2). methods:{ event

处理函数(e){ //同DOM

}
}
3). 示例: 点哪个位置,就喊哪个位置疼
1_v-on2.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
  <style>
    #d1,#d2{
      width:200px; height:100px;
    }
    #d1{
      background-color:#afa
    }
    #d2{
      background-color:#aaf
    }
  </style>
</head>
<body>
  <div id="app">
    <!--点哪个位置,喊哪个位置疼!-->
    <div id="d1" @click="say">d1</div>
    <div id="d2" @click="say">d2</div>
  </div>
  <script>
    new Vue({
      el:"#app",
      methods:{
        say(e){
          console.log(`x:${e.offsetX},y:${e.offsetY} 疼!`);
        }
      }
    })
  </script>
</body>
</html>

运行结果

  1. 但是,如何既获得事件对象,又能传入其它自定义实参值?
    1). 错误1:

<元素 @事件名="处理函数(实参值)">
methods:{ event
×
处理函数(e, 形参) {

}
}
2). 错误2:
<元素 @事件名="处理函数(实参值)">
methods:{ event只能自动传给第一个形参变量,
无法自动传给第二个形参
处理函数(形参, e) {

}
}
3). 正确: 借助vue中一个关键字: $event

  1. 什么是$event:vue将DOM原生的事件对象封装后形成的一个关键词。就代表着DOM中原生的事件对象。只不过,可以自己控制何时,以及在哪里使用。
  2. 说明: 将来在vue中,只要看到$开头的词汇,都是vue中的关键字,不能改名!
  3. 何时: 其实在vue中只要想获得事件对象,都可以用$event。
  4. 如何:
    DOM中的event


<元素 @事件名="处理函数($event, 实参值,...)"
methods:{
处理函数(e, 形参,...){

}

}
强调: $event不一定非要在第一个,但是实参值列表的顺序,必须和形参列表的顺序保持一致
4). 示例: 点哪个div,就喊哪个div的哪个位置疼
1_v-on3.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
  <style>
    #liang,#ran{
      width:200px; height:100px;
    }
    #liang{
      background-color:#afa
    }
    #ran{
      background-color:#aaf
    }
  </style>
</head>
<body>
  <div id="app">
    <!--点谁,就喊谁的哪个位置疼!-->
    <div id="liang" @click="say($event,'liang')">liang</div>
    <div id="ran" @click="say($event,'ran')">ran</div>
  </div>
  <script>
    new Vue({
      el:"#app",
      methods:{
        say(e, who){
          console.log(`${who} 的 x:${e.offsetX},y:${e.offsetY} 位置 疼!`);
        }
      }
    })
  </script>
</body>
</html>

运行结果

对应小程序视频: 小程序->在线->VUE->day02 2. 其它指令 绑定HTML内容 v-html

2. v-html:

(1). 问题: 如果{{}}绑定的是一段HTML片段时,是不会交给浏览器解析的。而是原样显示HTML片段的内容——和DOM中的textContent是一样的
(2). 解决: 今后,只要绑定的内容时一段HTML片段时,都用v-html代替{{}}
(3). 什么是: 专门绑定HTML内容的特殊指令:
(4). 如何: <元素 v-html="变量"> </元素>

(5). 原理: new Vue()扫描到v-html后,会先获得变量中的HTML片段,再将HTML片段解析后,放入元素的内容中。——相当于DOM中的innerHTML。
(6). 示例: 绑定HTML片段内容:
2_v-html.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <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>
</body>
</html>

运行结果

3. v-cloak和v-text:

(1). 问题: 在网络有延迟的情况下,new Vue()执行稍微晚。导致用户短暂看到界面上的{{}}
(2). 解决: 只要希望在网络有延迟的情况下,防止用户短暂看到{{}},都可用:

  1. v-cloak:
    1). 什么是: 能够在new Vue()加载出来之前短暂隐藏元素的一个特殊指令。

2). 如何:

  1. <元素 v-cloak> //放在元素上即可,不用写=
  2. 在当前页面中添加一段css代码与v-cloak配合
    //复习第二阶段的属性选择器

[v-cloak]{ display:none }
//凡是带有v-cloak的元素,都暂时隐藏
3). 原理:

  1. v-cloak+css属性选择器会在new Vue()加载出来之前暂时隐藏所有带有v-cloak属性的元素。
  2. 当new Vue()加载完之后,new Vue()会自动找到页面中所有v-cloak属性,自动移除!
    4). 示例: 使用v-cloak防止用户短暂看到{{}}

3_v-cloak.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
  <style>
    [v-cloak]{
      display:none
    }
  </style>
</head>
<body>
  <div id="app">
    <h3 v-cloak>用户名:{{uname}}</h3>
    <h3 v-cloak>积分:{{score}}</h3>
  </div>
  <script>
    setTimeout(function(){
      new Vue({
        el:"#app",
        data:{
          uname:"dingding",
          score:1000
        }
      })
    },6000)
  </script>
</body>
</html>

运行

b. v-text:

1). 什么是: 专门代替{{}}绑定元素内容的特殊指令
2). 如何: <元素 v-text="变量或js表达式"> </元素>
3). 原理:

  1. 因为元素内容中就没有使用{{}},所以即使new Vue()延迟,用户也不会看到{{}}
  2. new Vue()扫描到v-text时,会先获得""中的变量值或js表达式的返回值。然后将返回值自动填入元素的内容中显示给用户
    4). v-text 和 v-html:
  3. v-text代替的是{{}},底层也相当于textContent,只能获取或修改纯文本内容。无法获取或修改HTML片段内容
  4. v-html底层是innerHTML,可以获取或修改HTML片段内容。
    5). 简写: 但不建议使用: 如果v-text绑定的内容是使用模板字符串拼接获得的,可以省略反引号``外围的""

6). 示例: 使用v-text防止用户短暂看到{{}}语法
4_v-text.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
  <style>
    [v-cloak]{
      display:none
    }
  </style>
</head>
<body>
  <div id="app">
    <h3 v-cloak>用户名:{{uname}}</h3>
    <h3 v-cloak>积分:{{score}}</h3>
  </div>
  <script>
    setTimeout(function(){
      new Vue({
        el:"#app",
        data:{
          uname:"dingding",
          score:1000
        }
      })
    },6000)
  </script>
</body>
</html>

运行

4. v-once:

(1). 什么是: 限制只在首次加载时动态绑定一次内容,之后即使变量更新,也不会更新页面 的特殊指令
(2). 何时: 如果一个元素内容只需要在首次加载时,绑定一次。之后几乎不需要修改,都应该v-once
(3). 如何: <元素 v-once>{{变量}}</元素>
(4). 问题: 每次变量修改时,都要遍历虚拟DOM树。虚拟DOM树中的受监控的元素个数越多,遍历就会越慢。如果可以减少虚拟DOM树中的受监控的元素个数,则遍历就会加快,就会提高页面加载的效率。
(5). 解决: 将那些只在首次加载时绑定一次,之后操作过程中几乎不会改变的元素,都标记上v-once。——优化
(6). 原理: 凡是加了v-once的元素,都不会被加入虚拟DOM树。结果,只会在首次加载时更新一次内容。今后即使变量变化,也不会通知到带有v-once的不在虚拟DOM树上的元素。
(7). 示例:使用v-once限制元素只在首次加载时绑定一次
5_v-once.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <div id="app">
    <h3 v-pre>Vue框架中都是使用"{{变量名}}"方式标记页面中可能发生变化的位置</h3>
  </div>
  <script>
    new Vue({
      el:"#app"
    })
  </script>
</body>
</html>

运行结果

  1. v-pre:
    (1). 什么是:专门保护元素内容中的{{}}不被new Vue()编译

(2). 何时:如果今后凑巧在内容正文中有一对儿{{}},不是用作绑定语法。仅仅是希望原样显示。
(3). 如何: <元素 v-pre>....{{...}}...</元素>
(4). 示例: 使用v-pre保护内容中的{{}}不被编译
6_v-pre.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <div id="app">
    <h3 v-pre>Vue框架中都是使用"{{变量名}}"方式标记页面中可能发生变化的位置</h3>
  </div>
  <script>
    new Vue({
      el:"#app"
    })
  </script>
</body>
</html>

运行结果

双向绑定

二. 双向绑定:

对应小程序视频: 小程序->在线->VUE->day02 3. 双向绑定 v-model 绑定文本框...

  1. 问题: 使用传统的绑定方式,比如":",用户在界面上即使输入了新内容,程序中的变量也会保持不变!无法获得用户输入的新值!
  2. 原因: 其实,之前学的12种指令和绑定语法都只是单向绑定:
    (1). 只能将程序中的变化,自动更新到页面上

(从Model->View)
(2). 但是,页面上发生了变化,无法更新到程序中的变量中
(不能从View->Model)

  1. 解决: 今后只要希望自动获得用户在界面上修改的新内容时,都用双向绑定!
    (1). 既能将程序中的变化,自动更新到页面上

(从Model->View)
(2). 又能将页面上发生的变化,更新回程序中的变量中
(从View->Model)

  1. 如何: <表单元素 v-model:value="变量">
  2. 原理: 只要表单元素的value属性一改变,new Vue()立刻将新的内容自动更新回""中的变量中。
  3. 示例: 点按钮搜索用户输入的关键词相关的内容
    7_v-model.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <!--1. 做界面
    1.1 找界面中哪里可能发生变化
    //本例中: input元素的内容会随着用户的输入发生变化
    //但是,input是表单元素,所以应该绑定input元素的value属性
    //又因为value是属性,所以应该用:绑定
    1.2 找界面中哪里可能触发事件
    //本例中: 单击按钮执行查找
  -->
  <div id="app">
    <!--单向绑定: (Model->View 不能View->Model)-->
    <!-- <input :value="keyword"> -->
    <!--双向绑定: (Model->View 又能View->Model)-->
    <input v-model:value="keyword">
    <button @click="search">百度一下</button>
  </div>
  <script>
    //2. 创建new Vue()对象
    var vm=new Vue({
      el:"#app",
      //3. 创建模型对象
      //因为界面上只需要一个变量keyword
      data:{
        keyword:"" //开局用户没有输入任何关键词
      },
      //又因为界面上需要1个事件处理函数
      methods:{
        search(){
          //点击search时,
          //如果用户输入了有意义的关键词
          //if(this.keyword.trim()!==""){
            //获得用户输入的关键词,执行查找操作
            console.log(`查找 ${this.keyword} 相关的内容...`)
          //}
        }
      }
    })
  </script>
</body>
</html>

运行

  1. 双向绑定原理: v-model其实就是自动给元素绑定oninput或onchange事件。
    (1). oninput事件是用户只要在文本框中输入新内容就会立刻触发

(2). onchange事件是用户切换选择select元素或单选按钮或复选框时自动触发!
(3). 示例: 使用@input事件模拟实现双向绑定:
8_v-model2.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <!--1. 做界面
    1.1 找界面中哪里可能发生变化
    //本例中: input元素的内容会随着用户的输入发生变化
    //但是,input是表单元素,所以应该绑定input元素的value属性
    //又因为value是属性,所以应该用:绑定
    1.2 找界面中哪里可能触发事件
    //本例中: 单击按钮执行查找
  -->
  <div id="app">
    <!--<input v-model:value="keyword">-->
    <!--v-model相当于为文本框指定绑定input事件-->
    <input :value="keyword" @input="input">
    <button @click="search">百度一下</button>
  </div>
  <script>
    //2. 创建new Vue()对象
    var vm=new Vue({
      el:"#app",
      //3. 创建模型对象
      //因为界面上只需要一个变量keyword
      data:{
        keyword:"" //开局用户没有输入任何关键词
      },
      //又因为界面上需要1个事件处理函数
      methods:{
        //当文本框内容改变时,input 处理函数可自动获得当前文本框的内容,保存到data中对应的变量里
        input(e){
                    //复习DOM第四天
          var value=e.target.value;
          this.keyword=value;
        },
        search(){
          //点击search时,
          //如果用户输入了有意义的关键词
          //if(this.keyword.trim()!==""){
            //获得用户输入的关键词,执行查找操作
            console.log(`查找 ${this.keyword} 相关的内容...`)
          //}
        }
      }
    })
  </script>
</body>
</html>

运行结果

  1. 不同类型的表单元素,双向绑定原理不同:
    (1). 文本框或文本域:

    1. 特点: 都是一个框,用户在框内输入文字。每次用户修改框内的文字时,都会修改元素的value属性。
    2. 双向绑定时:
      <input v-model:value="变量">

<textarea v-model:value="变量"></textarea>
(2). 单选按钮
对应小程序视频: 小程序->在线->VUE->day02 4. 双向绑定 v-mode radio ...

  1. 特点: value是写死的固定的备选值!用户在不同radio之前切换选中状态时,其实改变的是radio的checked属性值!
  2. 所以,想用双向绑定获得当前选中的radio的值,应该绑定checked属性:
    <input type="radio" value="固定值" v-model:checked="变量">

1). 从Model->View时: v-model会用当前变量的值和当前input的value属性值做比较。

  1. 如果变量的值==当前input的value属性值,则当前radio选中!。
  2. 如果变量的值!=当前input的value属性值,则当前radio不选中!
    2). 从View->Model时: 如果当前radio被选中,v-model才将input的value属性值自动更新回data中的变量里。
  3. 示例: 使用v-model实现选择性别:
    9_v-model_radio.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <!--1. 做界面
    1.1 找可能发生变化的地方
    //本例中: 用户切换选中不同的radio,修改的是不同radio的checked状态,所以要绑定每个radio的checked属性。
    //又因为希望将用户的更改,反向更新回程序中,所以,应该用双向绑定v-model
  -->
  <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>
</body>
</html>


(3). select元素
对应小程序视频: 小程序->在线->VUE->day02 5. 双向绑定 v-model select ...

  1. 特点: 一个select下包含多个option元素。所有备选值value,都分布在每个option上。但是每个备选值value也是写死的。用户每次选择不同的option时,其实select元素会将选中的option的value值,修改到select的value属性上!
  2. 所以,双向绑定时,应该绑定父元素select的value属性
    <select v-model:value="变量">

<option value="值1">xxx</option>
... ...
... ...

  1. 原理:
    1). 首屏加载时,Model->View,先获得v-model绑定的变量的值。用变量的值和每个option的value值做比较。哪个option的value值等于变量的值,则选中哪个option。

2). 当用户切换选择了不同的option时,option先将自己的value交给select的value。v-model再把select的新value,自动更新回data中的变量中。

  1. 示例: 选择城市图片:
    10_v-model_select.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <!--1. 做界面
    1.1 找可能发生变化的位置
    //本例中: 用户切换选择select中的选项,会导致两处变化
    //1. select中选中项会改变
    //因为在select中选择不同的option,会修改select元素的value属性,且希望将新的value属性自动更新回程序中的变量里,所以应该用双向绑定绑定select的value属性
    //2. img的src会改变
    //因为src是属性,所以应该用:绑定。
    //又因为select选中的option的value就是img的新的src,所以,img的src应该和select的value绑定同一个变量!
  -->
  <div id="app">
    <select v-model:value="src">
      <option value="img/bj.jpg">北京</option>
      <option value="img/sh.jpg">上海</option>
      <option value="img/hz.jpg">杭州</option>
    </select><br/>
    <img :src="src">
  </div>
  <script>
    //2. 创建new Vue()对象
    new Vue({
      el:"#app",
      //3. 创建模型对象: 
      //因为界面中两处变化,使用的是同一个变量,所以data中只需要一个变量即可
      data:{
        src:"img/sh.jpg"
      }
    })
  </script>
</body>
</html>


(4). 复选框单用
对应小程序视频列表: 小程序->在线->VUE->day02 6. 双向绑定 v-model checkbox ...

  1. 特点: 没有value属性。用户选与不选这个复选框,修改的是checked属性。而且,checked属性在表示是否选中时,是bool类型的true或false。
  2. 所以,双向绑定时,应该用v-model绑定checked属性,且变量值应该为bool类型。
  3. 如何:
    <input type="checkbox" v-model:checked="bool类型变量"
  4. 原理:
    1). Model->View: 如果变量值为true,则当前checkbox为选中。否则如果变量值为false,则当前checkbox不选中

2). View->Model: 只要用户改变了checkbox的选中状态,v-model都会自动将当前checkbox的选中状态更新到data中的变量中。

  1. 示例: 点是否同意,控制其他表单元素的启用和禁用状态
    11_v-model_checkbox.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <!--1. 做界面
    1.1 整个界面中共有几处变化: 
    //本例中: 4处变化:
    //两个文本框和一个按钮的启用禁用状态会改变
    //但是,他们是被动改变,应该用单向绑定,绑定disabled属性
    //checkbox的选中状态也会改变,但是是用户主动点击改变选中状态,所以用双向绑定
    //因为"是否选中"和其它三个元素"是否禁用"其实都是由"是否同意"控制的,所以虽然后四处变化,但是只需要一个变量即可
    //isAgree=true,表示同意
    //isAgree=false,表示不同意
  -->
  <div id="app">
    用户名:<input :disabled="isAgree==false"><br/>
    密码:<input type="password" :disabled="isAgree==false"><br/>
    <input type="checkbox" v-model:checked="isAgree">同意<br/>
    <button :disabled="isAgree==false">注册</button>
  </div>
  <script>
    //2. 创建new Vue()
    new Vue({
      el:"#app",
      //3. 创建模型对象
      //因为整个界面只需要一个变量isAgree标记是否同意
      data:{
        isAgree:false //开局默认不同意
      }
    })
  </script>
</body>
</html>


  1. 简写: 所有v-model:属性=""中的":属性"都可省略
    <表单元素 v-model="变量">

v-model自己就会根据当前所在的表单元素的不同选择对应属性绑定。

三. 绑定样式:
对应小程序视频: 小程序->在线->VUE->day02 8. 绑定样式 style ...

  1. 绑定内联样式:
    (1). 不好的做法: 将整个style属性,看做一个大的字符串,用一个变量绑定。

问题: 很难只修改其中某一个css属性值。只能整体替换!
(2). 好的做法: 2种:

  1. 将style属性看成一个对象来绑定,每个css属性都是对象中的一个属性。css属性值就是对象中的属性值
    1). 如何:

<元素 :style="{ css属性名1: 变量1, css属性名2:变量2,... }">
data:{
变量1: 属性值1,
变量2: 属性值2
}
2). 原理: data中的变量值会成为css属性值,style后的{}会被编译为HTML规范的style字符串。
3). 强调: 属性值要加单位!!!
4). 好处: 非常便于修改其中某一个css属性的值!
5). 问题: 如果刚好别的元素也想修改这几个css属性,但是属性值各不相同,变量名就会发生冲突!
6). 示例: 通过修改style修改飞机的的位置:
12_style.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
  <style>
    img{
      position:fixed;
      left:50%;
    }
  </style>
</head>
<body>
  <div id="app">
    <!--本例中控制飞机两个css属性会发生变化-->
    <!--         js对象的天下-->
    <!-- <img :style="{ 
      marginLeft:marginLeft, 
      bottom:bottom 
    }" src="img/p3.png"> -->
    <img :style="{ marginLeft, bottom }" src="img/p3.png">
  </div>
  <script>
    var vm=new Vue({
      el:"#app",
      data:{
        marginLeft:"-100px",
        bottom:"50px"
      }
    })

    
  </script>
</body>
</html>


  1. 更好的做法: :style="一个变量",在data中将变量定义为一个对象
    1). 如何:

<元素1 :style="变量名1">
<元素2 :style="变量名2">
data:{
变量名1:{
css属性:属性值,
... : ...
},
变量名2:{
css属性:属性值,
... : ...
},
}
2). 优点: 即使多个元素刚好都要修改同一个css属性值时,因为不同元素绑定的对象不同,所以不同的对象内,是可以包含相同属性名的!就可以避免多个元素之间的css属性互相干扰.
3). 示例: 使用对象方式板顶style,并控制飞机移动
13_style2.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
  <style>
    img{
      position:fixed;
      left:50%;
    }
  </style>
</head>
<body>
  <div id="app">
    <!--本例中控制飞机两个css属性会发生变化-->
    <img :style="imgStyle" src="img/p3.png">
  </div>
  <script>
    var vm=new Vue({
      el:"#app",
      data:{
        imgStyle:{
          marginLeft:"-100px",
          bottom:"50px"
        }
      }
    })
    //当用户在网页中按下键盘时,自动执行
    window.onkeydown=function(e){
      //console.log(e.keyCode)
      if(e.keyCode==37){//左
        //获得当前飞机的marginLeft值
        var ml=parseInt(vm.imgStyle.marginLeft);
        //将当前值-10px
        ml-=10;
        //将新值再设置回marginLeft中
        vm.imgStyle.marginLeft=ml+"px";
      }else if(e.keyCode==38){//上
        //获得当前飞机的bottom值
        var bt=parseInt(vm.imgStyle.bottom);
        //将当前值+10px
        bt+=10;
        //将新值再设置回bottom中
        vm.imgStyle.bottom=bt+"px";
      }else if(e.keyCode==39){//右
        //获得当前飞机的marginLeft值
        var ml=parseInt(vm.imgStyle.marginLeft);
        //将当前值+10px
        ml+=10;
        //将新值再设置回marginLeft中
        vm.imgStyle.marginLeft=ml+"px";
      }else if(e.keyCode==40){//下
        //获得当前飞机的bottom值
        var bt=parseInt(vm.imgStyle.bottom);
        //将当前值-10px
        bt-=10;
        //将新值再设置回bottom中
        vm.imgStyle.bottom=bt+"px";
      }
    }
  </script>
</body>
</html>

运行结果

总结

总结: this 8种: 判断this,一定不要看定义在哪儿!只看调用时!

  1. obj.fun() this->obj
  2. fun() 或 (function(){ ... })() 或 多数回调函数 或 定时器函数 this->window
  3. new Fun() this->new正在创建的新对象
  4. 类型名.prototype.共有方法=function(){ ... } this->将来谁调用指谁,同第一种情况
  5. DOM或jq中事件处理函数中的this->当前正在触发事件的DOM元素对象
  6. 箭头函数中的this->箭头函数外部作用域中的this
  7. jQuery.fn.自定义函数=function(){ ... } this->将来调用这个自定义函数的.前的jQuery子对象,不用再$(this)
  8. new Vue()中methods中的函数中的this->当前new Vue()对象

总结:

  1. MVVM: 界面View+模型Model+视图模型ViewModel
  2. Vue绑定原理: 访问器属性+虚拟DOM树
    变量被修改时: 访问器属性发出通知,虚拟DOM树扫描并仅更新受影响的元素
  3. 虚拟DOM树优点:
    (1). 小: 只包含可能变化的元素。

(2). 遍历查找快
(3). 修改效率高: 只修改受影响的元素。
(4). 避免重复编码: 已封装DOM增删改查代码

  1. Vue功能3步:
    (1). 先创建增强版的界面:

    1. 整个界面必须包含在一个唯一的父元素下:
      通常是<div id="app">
    2. 可能变化的元素内容用{{自定义变量名}}标记
    3. 触发事件的元素用@click="自定义处理函数名"标记
      (2). 再创建new Vue()对象,其中el:指向new Vue()要监控的页面区域

(3). 在new Vue()对象内定义模型对象data和methods
a.界面所需的所有变量都放在data中
b.界面所需的所有事件处理函数都放在methods中

  1. 总结: 绑定语法+13种指令
    (1). 如果元素的内容需要随变量自动变化: {{}}

(2). 如果元素的属性值需要随变量自动变化: :
(3). 控制一个元素显示隐藏: v-show
(4). 控制两个元素二选一显示: v-if v-else
(5). 多个元素多选一显示: v-if v-else-if v-else
(6). 只要反复生成多个相同结构的元素组成列表时: v-for :key="唯一标识"
(7). 只要绑定事件: @ $event
(8). 防止用户短暂看到{{}}: v-cloak和v-text
(9). 只要绑定原始HTML代码片段内容: v-html
(10). 如果元素的内容只在首次加载时绑定一次,之后都不会改变: v-once
(11). 保护内容中的{{}}不被编译: v-pre
(12). 今后只要想获得表单元素的值或状态: v-model

  1. 绑定样式:
    (1). 需要精确修改某一个css属性,就绑定style:

    1. <元素 style="固定样式" :style="{css属性:变量名, ...}"
      data:{

变量名:css属性值
... : ...
}

  1. <元素 style="固定样式" :style="变量名"
    data:{

变量名:{
css属性名: 属性值,
... : ...
}
}
(2). 只要批量修改一个元素的多个css属性就绑定class

  1. <元素 class="固定class" :class="{class名:变量名, ...}"
    data:{

变量名:true或false,
... : ...
}

  1. <元素 class="固定class" :class="变量名"
    data:{

变量名:{
class名:true或false,
... : ...
}
}

  1. 只要希望在页面加载时自动对元素执行一些初始化操作时就用自定义指令:
    (1). 添加自定义指令:

Vue.directive("自定义指令名",{
inserted(domElem){
对domElem执行DOM操作
}
})
(2). 使用自定义指令:
<元素 v-自定义指令名>

今日对应小程序视频列表:
小程序->在线->VUE->day02

  1. 绑定事件
  2. 其它指令 绑定HTML内容 v-html
  3. 双向绑定 v-model 绑定文本框...
  4. 双向绑定 v-mode radio ...
  5. 双向绑定 v-model select ...
  6. 双向绑定 v-model checkbox ...
  7. 绑定样式 style ...

作业:

  1. 复习今日小程序问题清单: 小程序->首页->VUE->day02
  2. 使用vue完成带样式的手机号验证:
    小程序->在线->VUE->day02 8. 绑定样式
  3. 预习: 小程序->在线->VUE->day03
  4. (学有余力)看小程序视频用vue实现学子商城首页和详情页部分功能: (持续到周四)
    小程序->在线->VUE->day01 作业: 使用vue绑定学子商城首页 ...

下载网盘中public_start文件夹
将今日上课素材day01中js文件夹里vue.js,拷贝到public_start下的js文件夹下
在public_start/js文件夹下新建index.js文件
在public_start/js文件夹下新建details.js文件
然后, 在index.html页面body内,底部,引入vue.js和index.js
然后, 在product_details.html页面body内,底部,引入vue.js和details.js
然后,看视频,在index.js和details.js中添加自定义代码
使用ajax请求的接口改为: http://xzserver.applinzi.com/index
http://xzserver.applinzi.com/details
网盘中public压缩包是最终结果,如果发现错误,可以参考

正文结束
本文作者:
文章标题:Vue day02
本文地址:https://rickyduan.ink/index.php/archives/149.html
版权说明:若无注明,本文皆学习日记原创,转载请保留文章出处。
最后修改:2020 年 09 月 25 日 08 : 13 PM
如果觉得我的文章对你有用,请随意赞赏