VUE —— 1、指令

爱被打了一巴掌 2022-10-19 05:44 202阅读 0赞

**目录**

43、VUE

（1）什么是MVVM

（2）Vue.Js的核心

（3）Vue-CLi是啥

（4）Vue.js与Webpack有什么关系？

（5）指令

1.v-for

2.v-text、v-html

3.v-if、v-else（不经常切换的用v-if，频繁切换的用v-show）

4.v-on

5.v-bind等同于 ：冒号

6.v-model

--------------------

# 43、VUE #

# （1）什么是MVVM #

M model 模型

V view 视图

C controller 控制器

viewModel 监控者

# （2）Vue.Js的核心 #

Vue官网对它的描述：通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

> **1****、Vue****的数据驱动：**
> 
> 数据改变驱动了视图的自动更新，传统的做法你得手动改变DOM来改变视图，vuejs只需要改变数据，
> 
> 就会自动改变视图，一个字：爽。再也不用你去操心DOM的更新了，这就是MVVM思想的实现
> 
> **2****、视图组件化：**
> 
> 把整一个网页的拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套

组成

# （3）Vue-CLi是啥 #

它是一个vueJs的脚手架工具。说白了就是一个自动帮你生成好项目目录，配置好Webpack，以及各种

依赖包的工具;

**为啥要用？**

可以帮助你快速开始一个vue项目，给你一套文件结构，包含基础的依赖库，你只需要npm install一下

就可以安装，让你不需要为编译或其他琐碎的事情而浪费时间，而且不会限制到你的发挥；

# （4）Vue.js与Webpack有什么关系？ #

Webpack是一个前端打包和构建工具。如果你之前一直是手写HTML，CSS，JavaScript，并且通过link标签将CSS引入你的HTML文件，以及通过Script标签的src属性引入外部的JS脚本，那么你肯定会对这个工具感到陌生。

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的

一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

1、热加载Webpack不止这点功能，它还可以通过安装各种插件来扩展，比如说热加载技术，就是解放键盘的F5键。让我们修改代码，并且按Ctrl+S保存之后，浏览器页面自动刷新变化，不需要我们去手动刷新

2、模块化，让我们可以把复杂的程序细化为小的文件;

3、scss，less等CSS预处理器

# （5）指令 #

指令：是带有v-前缀的特殊属性，通过属性来操作元素

## 1.v-for ##

定义：根据变量的值来循环渲染元素

>     data: {
>             arr: ['a', 'b', 'c'],			//数组
>             obj: {id: 1, name: 'abc'},	//字符串
>             lists: [						//数组+字符串
>                 { name: 'A', id: '0'},
>                 { name: 'B', id: '1'},
>             ],
>     		n: 5
>         }
>     -----------------------------------------------------------------------------------
>     <ul>	 
>         
>         <li v-for="(v,i) in arr">{
>         {v}}---{
>         {i}}</li>
>     </ul>
> 
> arr![20210710004722933.png][]//v value， i index
> 
>  arr换成obj![2021071000473483.png][]//v value, k key键
> 
>  arr换成lists![20210710004744752.png][]//v value， i index 
> 
> arr换成n或者8、上面的n:5换成n:'5'
> 
>  ![20210710004817846.png][] ![20210710004819900.png][] ![20210710004826264.png][]

## 2.v-text、v-html ##

data: {
            msg: 'Hello World',
            html: '<span>123</span>'
        }
    -----------------------------------------------------------------------------------
        
        <div v-cloak>{
       {msg}}</div>
        <div v-text="msg"></div>		//在元素中插入值
        <div v-html="html"></div>		//在元素中不仅可以插入文本，还可以插入标签
        <style>
            [v-cloak] {	/*必须配置CSS样式，否则不生效*/
                display: none;
            }
        </style>

## 3.v-if、v-else（不经常切换的用v-if，频繁切换的用v-show） ##

定义：根据表达式的真假值来动态插入和移除元素

> ![20210710004911755.png][]![20210710004913375.png][]//隐藏   v-show
> 
> ![2021071000492586.png][]![20210710004927166.png][]//显示
> 
>  
> 
>     data:{
>             age:21,
>             flag:true
>         }
>     //-----------------------------------------------------------------------------------
>         <div v-if="age>=30">已经30岁喽</div>		 
>         <div v-else-if="age>=20">已经20岁喽</div>	 
>         <div v-else>{
>         {age}}</div>					 
>     <div v-if="flag?age=18:age=20">{
>         {age}}</div> 
>     //===================================================================================
>     <input type="checkbox" v-model="flag"/>	//双向绑定
>     <button>{
>         {flag?'选中':'未选中'}}</button>
> 
>  ![2021071000500574.png][]/点击勾选![20210710005012709.png][]//取消勾选
> 
>  //添加disabled，当未勾选时，就不能点击![20210710005019714.png][]
> 
>  ![20210710005023638.png][]
> 
>  
> 
>     ===================================================================================
>             <input type="text" v-model="age"/>	//双向绑定
>             <h2 v-if="age>=30">已经30岁喽</h2>
>             <h2 v-else-if="age>=20">已经20岁喽</h2>
>             <h2 v-else>{
>         {age}}</h2>
> 
>  ![20210710005037346.png][]![20210710005038810.png][]![20210710005040415.png][]
> 
>     <h2 v-if="flag?age=20:age=30">{
>         {age}}</h2>
> 
>  ![20210710005059195.png][]

##  4.v-on ##

定义：监听元素事件，并执行相应的操作

data: {
            age: 21,
                flag: true
        }
        methods: {		//方法
            play: function() {
                this.age = 40;
            },
            play2: function(i) {
                this.age = i;
            }
        }
    -----------------------------------------------------------------------------------
            <button @click="age=30">{
       {age}}</button>	//单击显示30
            <button @click="play">{
       {age}}</button>		//单击显示40
            <button @click="play2(10)">{
       {age}}</button>//单击显示10
            //鼠标移入显示10、移出显示20
            <button @mouseover="play2(10)" @mouseout="play2(20)">{
       {age}}</button>
            <button @dblclick="play2(50)">{
       {age}}</button>	//双击显示50
            
            <button @keydown.enter="play2(13)">{
       {age}}</button>	//按回车，显示13
            <button @keydown.esc="play2(65)">{
       {age}}</button>	//按Esc，显示65
            <button @keydown.up="play2(65)">{
       {age}}</button>	//按↑，显示65
            <button @keydown.a="play2(65)">{
       {age}}</button>		//按a，显示65

## 5.v-bind等同于 ：冒号 ##

>     data: {   
>     	red: 'red',
>     		flag: true,
>     		d2: 'd2'
>     	},
>         <style>
>             .red {color: red;}
>             .blue {color: blue;}
>             .d1 {border: 1px solid #666;}	//边框
>             .d2 {background: #999;}		//背景颜色
>         </style>
>     
>     <body>
>         <div id="my">
>     -----------------------------------------------------------------------------------
>         
>         <div class="red">这是什么颜色</div>		//执行的是style标签内的red
>       	    <div :class="red">这是什么颜色</div>	//执行的是data{}内的red，red为变量
>       	    <div :class="'blue'">这是什么颜色</div>	//执行的是style标签内的red，注意引号
> 
> ![20210710005304238.png][]
> 
>     
>             <input type="checkbox" v-model="flag"/>//双向绑定（取消勾选时,flag为false？）
>             <div :class="flag? red :'blue'">红色</div>
> 
> ![20210710005318198.png][]![20210710005320713.png][]    //勾选显示红色，取消勾选显示蓝色
> 
>     <div :class="{'blue':flag}">这是什么颜色</div>	//键值对 {样式名:判断变量}
> 
>  ![20210710005339734.png][]![20210710005341176.png][]
> 
>     
>             <div :class="[red,'d1']">多个引用</div>			//注意引号
> 
>  ![20210710005353639.png][]
> 
>     <div :class="[red,flag?'d1':d2]">多个引用</div>	//注意引号
> 
> ![20210710005406887.png][]  ![20210710005408976.png][]//勾选与取消勾选
> 
>     
>             <div :class="action(2)">这是什么颜色</div>
> 
>          //VUE中：
> 
> ![20210710005438530.png][] ![20210710005500391.png][]
> 
>     </div>
>     </body>

定义：绑定元素的属性并执行相应的操作

data: {
            d1: 'd1',
            d2: 'd2',
            check: true, //复选框
            red: 'red',
    
            d3: { background: 'red' },		//红色
            green: { background: 'green' },	//绿色
            blue: { background: 'blue' },		//蓝色
            url: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
        }
    -----------------------------------------------------------------------------------
        <style>
            .d1 {color: #f00;}			//红色
            .d2 {border: 1px solid #666;}	//灰色
            .green {color: green;}		//绿色
            .blue {color: blue;}			//蓝色
        </style>
    ===================================================================================
    
    <div style="color: red">红色</div>  
    <div style="color: #f00">红色</div>
    -----------------------------------------------------------------------------------
    
    <div :style="d3">红色</div> 		 
    <div :style="{color:'blue'}">红色</div>		  
    <div :style="{background:red}">红色</div>		 
    <div :style="{background:'blue'}">红色</div>	 
    <div :style="{background:'#f60',fontSize:'30px',marginTop:'20px'}">红色</div>
    //中括号
    <div :style="[blue]">红色</div>							 上面写过
    <div :style="[blue,flag?d3:{background:'blue'}]">红色</div>	 勾选时红，取消勾选时蓝
    -----------------------------------------------------------------------------------
    
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />
    <img :src="url" />

## 6.v-model ##

定义：把input的值和变量绑定，实现数据和视图的双向绑定

面试：

双向绑定的原理：Object.defineProperty()与Proxy为2.0与3.0版区别（自己看下）

>     new Vue({
>             el: '#my',   
>             data: {   
>                 text: 'hello world!!!',
>                 flag: true,
>                 flag1: ['vue'],
>                 flag2: ['1'],
>                 box: [
>                     { name: '北京', id: 1 },
>                     { name: '上海', id: 2 },
>                     { name: '广东', id: 3 },
>                     { name: '湖北', id: 4 }
>                 ],
>                 flag3: [2],
>                 radio: '0',
>                 selected: '打游戏',
>                 selected1: '1',
>                 text2: ''
>             },
>             methods: { 　
>             }
>         })
> 
>     ===================================== 输入框 =======================================
>         <input type="text" v-model="text"/> 
>         <input type="text" v-model="text"/>{
>         {text}}
> 
> ![20210710005631916.png][] ![202107100056352.png][]
> 
>     //输入内容为a时，禁用
>         <input type="text" :disabled="value=='a'" v-model="text"/>{
>         {text}}	
>         <input type="text" :disabled="flag" v-model="text"/>	//勾选时，禁用
> 
>     ===================================== 复选框 =======================================
>     //data{}中添加 
>     <input type="checkbox" v-model="flag" />{
>         {flag}}
> 
> ![20210710005703456.png][] ![20210710005705692.png][]
> 
>     //展示的是什么，显示的就是什么
>             <div>
>                 <input type="checkbox" v-model="flag1" value="html" />html
>                 <input type="checkbox" v-model="flag1" value="css" />css
>                 <input type="checkbox" v-model="flag1" value="vue" />vue
>                 <h2>{
>         {flag1}}</h2> 	
>             </div>
> 
>  //data\{\}中添加![20210710005752855.png][] （开始默认选中）![20210710005755143.png][]//多选
> 
>     <div> 
>                 <input type="checkbox" v-model="flag2" value="0" />html
>                 <input type="checkbox" v-model="flag2" value="1" />css
>                 <input type="checkbox" v-model="flag2" value="2" />vue
>                 <h2>{
>         {flag2}}</h2> 
>             </div>
> 
>     -------------------------------- 复选框 动态数据 ------------------------------------
>      
>             <div v-for="(v,i) in box" :key="v.id">
>                 <input type="checkbox" v-model="flag3" :value="v.id" />{
>         {v.name}}
>             </div>									//变量，注意加冒号
>             <h2>{
>         {flag3}}</h2>
> 
>         //data\{\}中添加![2021071001001984.png][]![20210710010021585.png][] ![20210710010023732.png][]
> 
>     ===================================== 单选框 =======================================
>             <div> 
>                 <input type="radio" v-model="radio" value="0" />男
>             </div>
> 
>  ![20210710010052901.png][]
> 
>     ----------------------------------- 单选框 组 --------------------------------------
>             <div>   
>                 <input type="radio" v-model="radio" name="test" value="0" />男
>                 <input type="radio" v-model="radio" name="test" value="1" />女
>                 <h2>{
>         {radio}}</h2>				//name="test"是防止同一个组都被选
>             </div>
> 
>  ![20210710010110598.png][]  ![2021071001011275.png][]
> 
>     =================================== 下拉选框 =======================================
>             <div>  
>                 <select v-model="selected">
>                     <option>唱歌</option>
>                     <option>跳舞</option>
>                     <option>打游戏</option>
>                 </select>
>                 <h1>{
>         {selected}}</h1>
>             </div>
> 
> //data\{\}中添加![20210710010142512.png][]![20210710010145553.png][]![20210710010148558.png][]
> 
>     <div>   
>                 <select v-model="selected1">
>                     <option value="0">唱歌</option>
>                     <option value="1">跳舞</option>
>                     <option value="2">打游戏</option>
>                 </select>
>                 <h1>{
>         {selected1}}</h1>
>             </div>
> 
>  //data\{\}中添加![20210710010224788.png][]![20210710010226596.png][] ![20210710010228147.png][]
> 
>     <div>  
>                 <select v-model="selected1">
>                     <option v-for="(v,i) in box" :key="v.id" :value="v.id">
>                     {
>         {v.name}}
>                     </option>
>                 </select>
>                 <h1>{
>         {selected1}}</h1>
>             </div>
> 
>  ![20210710010237177.png][]
> 
>     ===================================== 修饰符 =======================================
>             //data{}中添加text2: ''
>             lay：光标离开时改变（也就是说只有光标离开input输入框的时候值才会改变）
>             <input type="text" v-model.lazy="text2" />{
>         {text2}}
> 
> ![20210710010314760.png][] 鼠标在框内时，![20210710010314762.png][] 鼠标离开框时
> 
>     ------------------------------------------------------------------------------------------
>             trim：自动过滤用户输入的首尾空格（自动清除首尾空格）
>             <input type="text" v-model.trim="text2" />{
>         {text2}}
>     ------------------------------------------------------------------------------------------
>             number：将输出字符串转为Number类型
>             <input type="number" v-model.number='text2'/>
>         </div>
>     </body>
> 
>  ![20210710010341539.png][] 手动加减一

[20210710004722933.png]: /images/20221005/e42c60d2c68249729e860e6ca407989a.png
[2021071000473483.png]: /images/20221005/90c79de5c157435484a5c35b992dbdfc.png
[20210710004744752.png]: /images/20221005/f0fd146fa8094e2bb7d5c4c9a77f2c44.png
[20210710004817846.png]: https://img-blog.csdnimg.cn/20210710004817846.png
[20210710004819900.png]: https://img-blog.csdnimg.cn/20210710004819900.png
[20210710004826264.png]: /images/20221005/7846e818e9d84342ad995ff3ef24ce23.png
[20210710004911755.png]: https://img-blog.csdnimg.cn/20210710004911755.png
[20210710004913375.png]: /images/20221005/116b5a4bbf99449ba19cceaf4a59a73e.png
[2021071000492586.png]: https://img-blog.csdnimg.cn/2021071000492586.png
[20210710004927166.png]: /images/20221005/6113b5a7bec44c878e3f4270db3a3628.png
[2021071000500574.png]: https://img-blog.csdnimg.cn/2021071000500574.png
[20210710005012709.png]: /images/20221005/800243c0b91044fb99f71cfeaf5929e4.png
[20210710005019714.png]: /images/20221005/580db7d770134cc0ade2b863cd2468fc.png
[20210710005023638.png]: /images/20221005/f7a44376e8ce4dc79bcfe79ba2fd0435.png
[20210710005037346.png]: https://img-blog.csdnimg.cn/20210710005037346.png
[20210710005038810.png]: https://img-blog.csdnimg.cn/20210710005038810.png
[20210710005040415.png]: /images/20221005/16d1599aae4c4c4ca0ba4d29e6420505.png
[20210710005059195.png]: /images/20221005/31da77bb8355473598aa800bedb34713.png
[20210710005304238.png]: /images/20221005/1694e6abe1044e40a3bcc85904680d36.png
[20210710005318198.png]: https://img-blog.csdnimg.cn/20210710005318198.png
[20210710005320713.png]: /images/20221005/11d161e6c4ab45e7a66030b64502e007.png
[20210710005339734.png]: https://img-blog.csdnimg.cn/20210710005339734.png
[20210710005341176.png]: /images/20221005/10acd2cbc00c446e90ae18b47130f66d.png
[20210710005353639.png]: /images/20221005/dacec5925bfc473681e40c7681fd85e0.png
[20210710005406887.png]: https://img-blog.csdnimg.cn/20210710005406887.png
[20210710005408976.png]: /images/20221005/3996e939935944ad83dac7c08ecf5a3f.png
[20210710005438530.png]: https://img-blog.csdnimg.cn/20210710005438530.png
[20210710005500391.png]: /images/20221005/3de81cc63ef54898a4120b0e69a0cc7c.png
[20210710005631916.png]: https://img-blog.csdnimg.cn/20210710005631916.png
[202107100056352.png]: /images/20221005/67186e783b8a413ea87d498a189a2e57.png
[20210710005703456.png]: https://img-blog.csdnimg.cn/20210710005703456.png
[20210710005705692.png]: /images/20221005/09acd1b2033c409bb2886b791464c949.png
[20210710005752855.png]: https://img-blog.csdnimg.cn/20210710005752855.png
[20210710005755143.png]: /images/20221005/ef61984e3ef348d19d650954422b523d.png
[2021071001001984.png]: https://img-blog.csdnimg.cn/2021071001001984.png
[20210710010021585.png]: https://img-blog.csdnimg.cn/20210710010021585.png
[20210710010023732.png]: /images/20221005/e2646f268d404a01a737d76de0bfab8f.png
[20210710010052901.png]: /images/20221005/e489917bc24c449fb6ed1c1c464c35e0.png
[20210710010110598.png]: https://img-blog.csdnimg.cn/20210710010110598.png
[2021071001011275.png]: /images/20221005/3d5d2d9f051240219162b774b1dc634b.png
[20210710010142512.png]: https://img-blog.csdnimg.cn/20210710010142512.png
[20210710010145553.png]: https://img-blog.csdnimg.cn/20210710010145553.png
[20210710010148558.png]: /images/20221005/32c002b09c2b4f28902fd4d760dc83da.png
[20210710010224788.png]: https://img-blog.csdnimg.cn/20210710010224788.png
[20210710010226596.png]: https://img-blog.csdnimg.cn/20210710010226596.png
[20210710010228147.png]: /images/20221005/57ee35e0a0344957a7fb02a055be2cad.png
[20210710010237177.png]: /images/20221005/ff35d3a54fc0460abe3a026adc4e4382.png
[20210710010314760.png]: https://img-blog.csdnimg.cn/20210710010314760.png
[20210710010314762.png]: /images/20221005/76637f8bee1941edbd60477b0c695cc7.png
[20210710010341539.png]: /images/20221005/6f8d1f9da82141d9abcd2ea8c4a1d709.png