Vue day02

最新推荐文章于 2022-04-22 16:42:48 发布

轩轩990218

最新推荐文章于 2022-04-22 16:42:48 发布

阅读量92

点赞数

分类专栏： VUE系列文章标签： vue

本文链接：https://blog.csdn.net/weixin_50883365/article/details/117689374

版权

VUE系列专栏收录该内容

8 篇文章 0 订阅

订阅专栏

正课:

指令
双向绑定
绑定样式

一. 指令: 13种:

v-on:
对应小程序视频：小程序->在线->VUE->day02 1. 绑定事件
(1). 什么是: 专门绑定事件的指令
(2). 何时: 今后只要一个元素可能触发事件，都用v-on来绑定事件.
(3). 如何:
a. 标准: <元素 v-on:事件名="处理函数名(实参值列表)">
b. 简写: <元素 @事件名="处理函数名(实参值列表)">
c. 更简写: 如果事件处理函数不需要传参，则可以省略()

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

(4). 只要界面中定义了几个事件绑定，`new Vue()`中`methods`里，就要定义几个同名的方法支持:

new Vue({
		el:"#app",
		data:{ ... },
		methods:{
			处理函数(形参列表){
				... this.变量名 ... 
			}
		}
	})

(5). 示例: 绑定事件处理函数，并传参 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(dname){
          console.log(`${dname} - 疼！`)
        }
      }
    })
  </script>
</body>
</html>

(6). 获得事件对象:

a. 和DOM中完全一样： 
		1). DOM中: 给事件处理函数添加第一个形参。事件发生时，浏览器就会自动将事件对象传递给事件处理函数的第一个形参:
                            event对象
						      ↓
		元素.on事件名=function( e ){ ... e ...}
		或
		元素.addEventListener("事件名", function(e){ ... e ... })
		2). vue中: 
		i. 界面中: 绑定时千万不要加()
		<元素 @事件名="处理函数">
		因为加上空的()，表示什么参数都不传！浏览器一旦看到空的()，就不会自动传事件对象了！
		ii. methods: {
			处理函数(e){
				... e和DOM中的e，完全一样！...
			}
		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的哪个位置，就喊哪个位置疼！-->
    <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>

	4). 问题: 矛盾: 
	a. 本来vue的事件处理函数，是可以传实参值的
	b. 但是，要想获得事件对象e，又必须不能加()
b. 即获得事件对象，又可传实参值:
	1). 界面中: 绑定事件处理函数时，要用$event代替事件对象。
	a. 凡是$开头的都是vue中的关键字，有特殊功能！不能改变！
	b. 什么是$event: 提前获得浏览器自动创建的事件对象！
	c. 如何: 
				提前接住浏览器的event对象

		<元素 @事件名="处理函数($event, 其它实参值)"
	2). new Vue()中:

methods:{
				处理函数(e, 其它形参){
					
				}
			}

3). 示例: 即获得事件对象，又传入其它实参值: 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>
    #d1,#d2{
      width:200px; height:100px;
    }
    #d1{
      background-color:#afa
    }
    #d2{
      background-color:#aaf
    }
  </style>
</head>
<body>
  <div id="app">
    <!--点在div的哪个位置，就喊哪个位置疼！-->
    <div id="d1" @click="say($event, '亮哥')">亮哥</div>
    <div id="d2" @click="say($event, '然哥')">然哥</div>
  </div>
  <script>
    new Vue({
      el:"#app",
      methods:{
        //因为界面上需要一个事件处理函数
        say(e,dname){
          console.log(`${dname}的x:${e.offsetX},y:${e.offsetY}位置 - 疼！`)
        }
      }
    })
  </script>
</body>
</html>

2. v-html:

(1). 问题: 使用{{}}绑定一段HTML内容时，显示在页面上的结果是未解析的原始的HTML内容。
(2). 解决: 今后只要绑定的是一段HTML内容，都要用v-html代替{{}}

(3). 如何: `<元素 v-html="变量或js表达式">     </元素>`

(4). 示例: 使用v-html绑定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:`来自<a href="javascript:;">&lt;&lt;新华社&gt;&gt;</a>的消息`
      }
    })
  </script>
</body>
</html>

运行结果：

来自<a href="javascript:;">&lt;&lt;新华社&gt;&gt;</a>的消息
来自<<新华社>>的消息

3. v-cloak和v-text:

(1). 问题: 当网速慢时，new Vue()下载和运行有些延迟，对界面的解析也有些延迟。导致用户短暂看到{{}}语法！
(2). 解决: 
a. v-cloak: 
	斗篷
	1). 什么是: 专门在new Vue()加载之前，临时隐藏元素的特殊指令
	2). 何时: 今后只要希望即使new Vue()加载之前，也不希望用户看到{{}}时，都用v-cloak隐藏
	3). 如何: 2步
	a. 因为v-cloak本身不带任何样式！所以，必须靠我们自己定义v-cloak属性选择器，添加隐藏的样式！
		css中:  `[v-cloak]{ display:none }`
	b. <元素 v-cloak>
	4). 原理: 
	i. 开局: v-cloak在元素上，发挥作用，元素隐藏
	ii. 当new Vue()加载完之后，会自动扫描页面中所有v-cloak属性，并自动删除所有v-cloak属性。v-cloak不再发挥作用。元素就显示出来了。
b. v-text: 
	1). 什么是: 专门代替{{}}绑定元素内容的特殊指令
	2). 为什么: 因为{{}}出现在元素的内容中，一旦解析延迟，用户就会短暂看到{{}}。而v-text是写在元素的开始标签中的属性，即使new Vue()加载延迟，用户也不可能看到元素的属性！
	3). 何时: 今后只要想避免用户短暂看到{{}}，都可以用v-text代替{{}}绑定元素的内容.
	4). 如何: <元素 v-text="变量或表达式">     </元素>
	5). v-text vs v-html
	i. v-text和{{}}性质是一样的，如果绑定的内容是一段HTML片段，则也不会解析，而是原样显示在界面上。所以，不能用v-text来绑定html片段内容.
	ii. v-html可以将原始的HTML片段先解析后，再显示给人看。所以，今后，只要绑定的内容是HTML片段内容，都用v-html。
c. 示例: 防止用户短暂看到{{}}

3_v-cloak_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>
            <!--js程序的底盘    -->
    <h3 v-text="`积分:${score}`"></h3>
  </div>
  <script>
    setTimeout(function(){
      new Vue({
        el:"#app",
        data:{
          uname:"dingding",
          score:3000
        }
      })
    },3000)
  </script>
</body>
</html>

4. v-once:

(1). 什么是: 专门控制一个元素只在首次加载时，动态绑定一次内容。今后，即使变量发生变化，该元素也不更新。
(2). 何时: 今后只要一个元素的内容，只需要在首次加载时，动态绑定一次，今后，不再改变，都用v-once来修饰。
(3). 如何: <元素 v-once>
(4). 原理: 凡是带有v-once的元素，只在首次加载时更新内容。并不会被保存到虚拟DOM树。所以，即使将来变量变化，也无法通知到该元素。自然，内容不会再改变。
(5). 优化: 凡是只在首次加载时更新，今后不更新的元素，如果用v-once标记，就不会被加入到虚拟DOM树中。减小了虚拟DOM树的大小，跟提高了遍历和查找的效率。

(6). 示例: 页面显示上线时间和当前系统时间 4_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-once>上线时间: {{time}}</h3>
    <h3>当前系统时间: {{time}}</h3>
  </div>
  <script>
    var vm=new Vue({
      el:"#app",
      data:{
        time:new Date().toLocaleString()
      }
    });
    //每隔1秒，重新获得系统时间，显示在网页上
    setInterval(function(){
      vm.time=new Date().toLocaleString();
    },1000)
  </script>
</body>
</html>
运行结果:
上线时间: 2020/10/26 下午2:16:42
当前系统时间: 2020/10/26 下午2:16:58

5. v-pre:

(1). 什么是: 专门保护元素内容中的{{}}不被vue编译！
(2). 何时: 如果内容正文中，刚好有{{}}，又不想被vue编译时，就可用v-pre来保护.
(3). 如何: <元素 v-pre>
(4). 结果: 内容中的{{}}会原样显示在网页中。

(5). 示例: 使用v-pre保护内容中的{{}}不被new Vue()编译 5_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中都是用{{变量名}}语法来标记页面中可能发生变化的位置

二. 双向绑定:

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

问题：用传统的:绑定表单元素的value属性，无法自动获得界面上用户输入的新内容。
原因: 其实在vue中有两种绑定方式:
(1). 单向绑定:
a. 可自动将程序中的变化，更新到界面上显示(Model->View)
b. 但是，如果界面中用户修改了内容，则无法将新内容自动更新到程序中的变量中(View ×-> Model)
(2). 双向绑定:
a. 即可以自动将程序中的变化，更新到界面上显示(Model->View)
b. 又可以自动将界面上用户修改的新内容自动更新回程序中的变量中(View -> Model)
何时: 今后，只要在vue中，想获得表单元素的新内容，都用双向绑定！
如何: （普通文本框）

<input v-model:value="变量">
   View<-Model
   View->Model

结果:
(1). 程序中变量值发生了变化，则自动将程序中的变量值更新到界面上显示
(2). 用户在界面中输入了新内容，则自动将界面上的新内容，更新回data中的变量里保存。

6. 示例: 文本框输入搜索关键词，点按钮执行搜索
6_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. 做界面-->
  <div id="app">
    <!--1.1 找可能发生变化的位置
      本例中: 文本框的内容可能发生变化-->
    <input type="text" v-model:value="keywords">
    <!--1.2 找触发事件的元素
      本例中: button触发事件-->
    <button @click="search">百度一下</button>
  </div>
  <script>
    //2. 创建new Vue()对象
    var vm=new Vue({
      el:"#app",
      //3. 创建模型对象
      //3.1 因为界面上只需要一个变量，所以
      data:{
        keywords:"" //保存用户在文本框中输入的内容，开局，用户什么都没输入，默认""
      },
      //3.2 因为界面上需要一个函数
      methods:{
        search(){
          console.log(`查找 ${this.keywords} 相关的内容...`);
        }
      }
    })
  </script>
</body>
</html>

原理: v-model会自动为当前表单元素绑定: @input或@change。当当前表单元素的value值发生变化时，自动触发事件，调用事件处理函数，自动修改data中的变量。

8. 示例: 使用事件模拟v-model的原理: 7_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. 做界面-->
  <div id="app">
    <!--1.1 找可能发生变化的位置
      本例中: 文本框的内容可能发生变化-->
    <input type="text" @input="myInput" :value="keywords">
    <!--1.2 找触发事件的元素
      本例中: button触发事件-->
    <button @click="search">百度一下</button>
  </div>
  <script>
    //2. 创建new Vue()对象
    var vm=new Vue({
      el:"#app",
      //3. 创建模型对象
      //3.1 因为界面上只需要一个变量，所以
      data:{
        keywords:"" //保存用户在文本框中输入的内容，开局，用户什么都没输入，默认""
      },
      //3.2 因为界面上需要一个函数
      methods:{
        search(){
          console.log(`查找 ${this.keywords} 相关的内容...`);
        },
        myInput(e){
          //this不指当前触发事件的元素了
          //vue中所有的this都指向当前new Vue()对象本身！
          //获得当前文本框的内容
          var value=e.target.value;
          //        当前文本框 内容
          //将文本框的内容自动修改到data中的keywords变量上
          this.keywords=value;
        }
      }
    })
  </script>
</body>
</html>

实现按回车搜索，边输入边搜索:
(1). 按回车搜索:
a. <input @keyup="事件处理函数">
b. 问题: 虽然可以实现边输入边搜索，但是，按任意键都执行搜索，不是我们想要的。我们希望只有按回车才执行搜索
c. 解决: vue中提供了一套事件修饰符:
1). 什么是: 对触发事件的条件或默认行为加以限制
2). 比如: @keyup.13，表示只有13号回车键才能触发事件
3). :
.stop -> e.stopPropagation 停止冒泡
.prevent -> e.preventDefault 阻止默认行为
d. 问题: 如果只有13号键可以触发事件，那么，如何实现边输入边搜索呢？
e. 解决: 利用vue提供的"监听函数"
(2). 实现边输入边搜索:
a. 什么是"监听函数": 当data中某个变量一改变，就会立刻自动触发的特殊函数。
b. 何时: 今后，只要希望data中的一个变量一变，立刻自动执行一个操作时，都要用监听函数！
c. 如何:

new Vue({
		el:"#app",
		data:{ ... 变量: 值, ... },
		methods:{
			事件处理函数(){

			}
		},
		watch:{ //专门包含所有监听函数的区域
			变量名(){
				//只有data中同名变量的值发生变化时自动触发！
			}
		}
	})

(3). 示例: 实现边输入边搜索，按回车也能搜索 8_v-model3.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. 做界面-->
  <div id="app">
    <!--1.1 找可能发生变化的位置
      本例中: 文本框的内容可能发生变化-->
    <!--1.2 找触发事件的元素
      本例中: 
      button触发单击事件
      input还可触发键盘抬起事件，但是，只允许13号键触发事件-->
    <input type="text" v-model:value="keywords" @keyup.13="search">
    <button @click="search">百度一下</button>
  </div>
  <script>
    //2. 创建new Vue()对象
    var vm=new Vue({
      el:"#app",
      //3. 创建模型对象
      //3.1 因为界面上只需要一个变量，所以
      data:{
        keywords:"" //保存用户在文本框中输入的内容，开局，用户什么都没输入，默认""
      },
      //3.2 因为界面上需要一个函数
      methods:{
        search(){
          console.log(`查找 ${this.keywords} 相关的内容...`);
        }
      },
      watch:{//专门保存所有监听函数的区域
        keywords(){//专门监听data中keywords变量的函数
          //希望只要keywords变量发生改变，就自动搜索
          this.search();
        }
      }
    })
  </script>
</body>
</html>

不同表单元素，绑定原理不同:
(1). radio:
对应小程序视频: 小程序->在线->VUE->day02 4. 双向绑定 v-mode radio …
a. 特点:
1). 提前准备好一批写死的value，让用户多选一。
2). 选中哪个radio或不选中哪个radio改变的是checked
b. 如何: 所以v-model应该绑定在checked属性上:

<input type="radio" value="1" name="sex" v-model:checked="变量">男
<input type="radio" value="0" name="sex" v-model:checked="变量">女

c. 原理: 
	1). Model变->View跟着变: v-model会拿变量的新值和当前的radio写死的value值做比较。如果变量的新值==当前radio的value值，则当前radio选中。否则如果变量的新值!=当前radio的value值，则当前radio不选中
	2). View变->Model跟着变: v-model会将当前选中的radio的value自动更新到变量中。
d. 示例: 选择性别:

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>
  <div id="app">
    <label><input type="radio" value="1" name="sex" v-model:checked="sex">男</label>
    <label><input type="radio" value="0" name="sex" v-model:checked="sex">女</label>
    <h3>我是{{sex==1?"男生♂":"女生♀"}}</h3>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
        sex:1
      }
    })
  </script>
</body>
</html>

(2). select: 
对应小程序视频: 小程序->在线->VUE->day02 5. 双向绑定 v-model select ... 
a. 特点: 
	1). 先准备好一批写死的option和value值，备选
	2). 用户每选择一个option，就会将当前选中的option的value值交给整个select的value属性
	3). 所以，应该将v-model绑定在每次都会被改变的select的value属性上
b. 如何:

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

c. 原理:
	1). Model变->View跟着变: v-model会用=右边的变量值和select下每个option的value值做比较。哪个option的value值==变量值，这个option就被选中
	2). View变->Model跟着变: 用户选择了哪个option。select就会把选中的option的value交给select的value。然后v-model就将select的新value，自动更新到=右边的变量中保存
d. 示例: 选择订单状态:

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>
  <div id="app">
    <select v-model:value="orderStatus">
      <option value="0">未付款</option>
      <option value="10">已付款</option>
      <option value="20">已发货</option>
      <option value="30">已签收</option>
    </select>
    <h3>当前订单状态为: {{orderStatus==0?"未付款":orderStatus==10?"已付款":orderStatus==20?"已发货":"已签收"}}</h3>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
        orderStatus:0 //保存当前订单状态，开局是未付款
      }
    })
  </script>
</body>
</html>

(3). checkbox: 单独使用
对应小程序视频列表: 小程序->在线->VUE->day02 6. 双向绑定 v-model checkbox ... 
a. 特点: 不需要value属性，单纯修改checked属性，就可切换两种状态，所以，v-model应该绑定在checked属性上。且绑定的变量只有两种值: true或false.
b. 如何: <input type="checkbox" v-model:checked="变量">
	且变量值为bool值
c. 原理: 
	1). Model变->View跟着变: 变量值为true，则选中;变量值为false,则未选中。
	2). View变->Model跟着变: 将当前checkbox的选中状态(checked属性值)自动更新回程序中的变量里。
d. 示例: 点同意，启用元素; 不同意，禁用元素

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. 先做界面-->
  <div id="app">
    <!--1.1 找可能发生变化的位置: 
      两个文本框+按钮的disabled只需要一个变量控制即可——是否同意——isAgree
      用户选中checkbox修改isAgree的同意状态-->
    用户名:<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>
    new Vue({
      el:"#app",
      data:{
        isAgree:false //保存是否同意的状态，开局，默认不同意。
      }
    })
  </script>
</body>
</html>

简写: 以上案例中， v-model后的":value"或":checked"，都可省略。v-model可自动根据自己所在的元素判断绑定哪种元素。但是，虽然简写，原理是不变的！

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

总结: 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增删改查代码
4. Vue功能3步:
(1). 先创建增强版的界面: 
a. 整个界面必须包含在一个唯一的父元素下: 
  通常是<div id="app">
b. 可能变化的元素内容用{{自定义变量名}}标记
c. 触发事件的元素用@click="自定义处理函数名"标记
(2). 再创建new Vue()对象,其中el:指向new Vue()要监控的页面区域
(3). 在new Vue()对象内定义模型对象data和methods
a.界面所需的所有变量都放在data中
b.界面所需的所有事件处理函数都放在methods中

5. 总结: 绑定语法+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

6. 绑定样式:

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

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

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

(2). 只要批量修改一个元素的多个css属性就绑定class
a.

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

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

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

(1). 添加自定义指令:

Vue.directive("自定义指令名",{
  inserted(domElem){
    对domElem执行DOM操作
  }
})

(2). 使用自定义指令:

<元素 v-自定义指令名>

轩轩990218

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue day02

正课:指令双向绑定绑定样式一. 指令: 13种:v-on:对应小程序视频：小程序->在线->VUE->day02 1. 绑定事件(1). 什么是: 专门绑定事件的指令(2). 何时: 今后只要一个元素可能触发事件，都用v-on来绑定事件.(3). 如何:a. 标准: <元素 v-on:事件名="处理函数名(实参值列表)">b. 简写: <元素 @事件名="处理函数名(实参值列表)">c. 更简写: 如果事件处理函数不需要传参，则可以省
复制链接

扫一扫