Vue学习记录

初识VUE

  1. 想让vue工作,必须创建一个vue实例,并且传入配置对象
  2. 容器内的代码符合html规范,只不过有一些特殊的vue语法,类似Django
  3. root容器内的代码称为vue模板
  4. vue实例和容器是一一对应的
  5. 真实开发中只有一个vue实例,并且会配合组件一起使用
  6. {{xxx}}表达式中的xxx要写js表达式,能自动读取到data中的所有属性,注意区分js表达式和js代码
<!DOCTYPE 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>初识vue</title>
    <script src="../js/vue.js" type="text/javascript"></script>
</head>
<body>
    <div id="root">
        <h1>hello {{ name }}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        new Vue(
            {
                el: '#root',
                data: {name:'黄12'},
            }
        );
    </script>
</body>
</html>

模板语法

  1. 插值语法
    • 用于解析标签体内容
    • 写法:{{}}
  2. 指令语法,v-bind:
    • 用于解析标签(标签属性、标签体内容、绑定事件等)
    • vue中有很多指令,形式都是v-???
      • 语法v-xxx:属性名(事件名)=‘vue变量或函数’
      • 简写:属性名(事件名)=‘vue变量或函数’
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h1>插值语法</h1>
    <h3>welcome, {{name}}</h3>
    <hr/>
    <h1>指令语法</h1>
    <a v-bind:href="url">点我去{{school.name}}学习1</a>
    <a v-bind:href="url">点我去{{school.address}}学习2</a>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false;
    new Vue(
        {
            el: '#root',
            data: {
                name: 'jack',
                url: 'http://www.w3.org',
                school: {
                    name: 'zhuhe',
                    address: 'jianli',
                }
            },

        }
    )
</script>
</body>
</html>

数据绑定

vue中的两种数据绑定方式

  1. 单向绑定v-bind,绑定的是属性名,比如value、name、class等等数据只能从data流向页面,可简写成:value
  2. 双向绑定v-model,data和页面双向流动
    • 双向绑定只能用于表单类元素中,如input select textarea等
    • v-model:value可简写成v-model,因为v-model就是为value而生
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据绑定</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <p>
        单向数据绑定:<input type="text" name="dan" :value="name">
    </p>
    <p>
        双向数据绑定:<input type="text" name="dan" v-model:value="name">
    </p>

<!--    下面代码是错的,v-mode只能用在表单类元素中-->
    <h2 v-model:xhr="name">hello</h2>
</div>
<script type="text/javascript">
    Vue.productionTip = false;
    new Vue(
        {
            el: document.getElementById('root'),
            data: {
                name: 'huangg&zhuli',
            }
        }
    )
</script>
</body>
</html>

el与data的两种写法

el的写法

  1. 在vue对象中写一个键值对
  2. 实例化一个vue对象v,然后修改v的原型对象属性值$mount,将属性挂载到标签上去

data的两种写法

  1. 对象式
  2. 函数式,必须要return

以后学习组件,只能用函数式,否则报错

另外,由vue管理的函数,不能写成箭头函数,写成箭头函数,this指向的是Windows对象实例

理解MVVM

M-模型,即数据

V-视图,即模板代码

VM-视图模型,即vue实例

和Django中的MTV几乎一样,数据-模板-视图

数据代理

Object.defineProperty()方法

先要理解一下Object.defineProperty()方法,用于定义对象的属性,有三个参数

  • obj,要修改的对象
  • ‘x’,要定义的属性
  • {}定义的内容,通常要写的属性就在这里,通常会在这里定义两个方法,即get()和set(),get必须返回一个值,也就是定义的属性值,set是修改属性值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    let age = 19;
    let person = {
        name: 'hg',
        gender: 'female'
    };
    Object.defineProperty(person, 'age', {
        // value: 18,
        // enumerable: true, // 控制属性是否可以枚举,默认false
        // writable:true,  // 控制属性是否可以修改,默认false
        // configurable: true,  // 控制属性是否可以删除,默认false

        get() {
            console.log('someone call the get!!!')
            return age
        },
        set(value){
            console.log('someone correct the age, and value is ' + value +'!!!');
            age = value;
        }
    });
    console.log(person);
</script>
</body>
</html>

数据代理

定义:通过一个对象代理对另一个对象中的属性的操作,主要是读和写

使用Object.defineProperty()方法,通过get和set方法来实现

vue中的数据代理

  1. Vue中的数据代理:
    通过vm对象来代理data对象中属性的操作(读/写)
  2. Vue中数据代理的好处:
    更加方便的操作data中的数据
  3. 基本原理:
    通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性,都指定一个getter/setter。在getter/setter内部去操作(读/写)data中对应的属性。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1hlTK4hq-1652958943839)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220516150109912.png)]

事件处理

事件基本处理

事件的基本使用:

  1. 使用v-on:xxx或 @xxx绑定事件,其中xxx是事件名;
  2. 事件的回调需要配置在methods对象中,最终会在vm上:
  3. methods中配置的函数,不要用箭头函数!否则this就不是vm了;
  4. methods中心置的函数,都是被Vue所管理的再数,this的指向是vm 或 组件实例对象
  5. @click="demo"和 @click="demo($event)”效果一致,但后者可以传参;

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
    <script src="../js/vue.js" type="text/javascript"></script>
</head>
<body>
    <div id="root">
        <h2>welcome to {{name}} for learning</h2>
        <p>
            <button v-on:click="showInfo">点我一下</button>
        </p>
        <p>
            <button onclick="alert('~~~')">点我一下2</button>
        </p>
        <p>
            <button @click="showInfo2($event, 666)">点我一下3</button>
        </p>
    </div>
    <script>
        Vue.config.productionTip = false;
        let vm = new Vue({
            el: '#root',
            data: {
                name: 'hg',
                },
            methods: {
                showInfo() {alert('hello my classmate')},
                showInfo2(event, number) {alert('hello my classmate ~~~')},
            },
        });
        // let btn = document.getElementById('btn');
        // btn.onclick = function (){alert('hello classmate~')};
    </script>
</body>
</html>

事件修饰符

写在@click之后的函数(简写的函数)

vue中的事件修饰符有以下几种:

  1. prevent:阻止默认事件(常用)
  2. stop:阻止事件冒泡(常用);
  3. once:事件只触发一次(常用);
  4. capture:使用事件的捕获模式;
  5. self:只有event.target是当前操作的元素是才触发事件;
  6. passive:事件的默认行为立即执行,无需等待事件回调执行完毕;

做个示例

<body>
<div id="root">
    <h2>welcome to {{name}} for learning</h2>
    <a href="http://www.baidu.com" @click.prevent="showInfo">click to get imformation</a>
</div>
<script>
    Vue.config.productionTip = false;
    let vm = new Vue(
        {
            el:'#root',
            data: {name:'zhuhe'},
            methods:{
                showInfo(){alert('将跳转至百度首页')},
            }
        }
    )
</script>
</body>

在不添加修饰符prevent时,点击后先alert,然后再跳转,添加修饰符后,默认事件跳转不再执行

键盘事件

  1. Vue中常用的按键别名:

    回车 => enter

    删除 => delete(捕获“删除”和“退格”键)

    退出 => esc

    空格 => space

    换行 => tab(特殊,配合keydown)

    上=> up

    下 => down

    左 => left

    右 => right

  2. Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)

  3. 系统修饰键(用法特殊):ctrl、alt、shift、meta

    (1).配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。

    (2).配合keydown使用:正常触发事件。

  4. 也可以使用keyCode去指定具体的按键(不推荐)

  5. Vue.config.keyCodes.自定义键名=键码,可以去定制按键别名

一个示例

<body>
<div id="root">
  <h2>welcome to {{name}} for learning</h2>
  <p>
    <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
  </p>
</div>
<script>
  Vue.config.productionTip = false;
  let vm = new Vue(
          {
            el:'#root',
            data: {name:'zhuhe'},
            methods:{
              showInfo(e){
                // if(e.keyCode != 13)return
                console.log(e.target.value)
              },
            }
          }
  )
</script>

回车键调用函数

JavaScript中注释起来的那句代码是通过keycode来识别enter键的

计算属性

以实现姓名联动为例,介绍分别使用插值语法、methods方法和计算属性来实现

最终效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pmDJiq2T-1652958943840)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220517090436860.png)]

插值语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="root">
    <p>
        姓:<input id="fn" type="text" v-model="firstname">
    </p>
    <p>
        名:<input id="ln" type="text" v-model="lastname">
    </p>
    <p>姓名:{{firstname}} - {{lastname}}</p>
<!--    <p>姓名:{{fullName}}</p>-->

</div>
<script>
    Vue.config.productionTip = false;
    let fn = document.getElementById('fn').value;
    let ln = document.getElementById('ln').value;
    console.log(fn);
    let vm = new Vue(
        {
            el: '#root',
            data:{
                firstname: fn,
                lastname: ln,
            },
            // methods写法
            // methods:{
            //     fullName(){
            //         console.log('fullName has been called')
            //         return this.firstname + '-' + this.lastname;
            //     }
            // },
            // computed:{
            //     // 完整写法,写get和set
            //     // fullName:{
            //     //     get(){
            //     //         return this.firstname + '-' + this.lastname;
            //     //     }
            //     // }
            //
            //     // 简单写法,不用写get
            //     fullName(){
            //         return this.firstname + '-' + this.lastname;
            //     }
            // }
        }
    );
</script>

</body>
</html>

methods方法

methods方法在上面的代码中已经给出,只是注释起来了

首先,把模板中的<p>姓名:{{firstname}} - {{lastname}}</p>改成 <p>姓名:{{fullName()}}</p>,然后在vue中添加methods属性,属性中添加一个fullName方法,模板中调用这个方法,注意是fullName()

计算属性

同样在上面的代码中给出,即在vue中添加computed属性,完整写法是把get方法写出来,模板中调用的时候写成<p>姓名:{{fullName}}</p>注意,这里是fullName属性,而非方法,是不用写括号的

还可以简写,当计算属性中只有get方法没有set方法时,可以把fullName属性改写成fullName方法,但是模板中调用的时候还是属性,而非方法,也就是模板中仍然保持不变

监视事件

天气案例

点击按钮,切换天气

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>切换天气</title>
    <script src="../js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="root">
    <h3>今天天气很{{info}}</h3>
    <button @click="changeWeather">切换天气</button>
</div>
</body>
<script>
    Vue.config.productionTip = false;
    let vm = new Vue({
        el:'#root',
        data:{isHot: true},
        computed:{
            info(){
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods:{
            changeWeather(){
                this.isHot = !this.isHot
            }
        }
    })
</script>

</html>

这个简单的案例中,前面很多的知识点都用到了,methods方法,计算属性等等

再次强调:vue中的this一直指向的是实例化的vue对象,也就是代码中的VM,但是如果用箭头函数的话,就会指向外面的window

监视属性

监视属性watch:

1.当被监视的属性变化时,回调函数自动调用,进行相关操作

2.监视的属性必须存在,才能进行监视!!

3.监视的两种写法:

(1).newVue时传入watch配置

(2).通过vm.$watch监视

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>切换天气—监视对象</title>
    <script src="../js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="root">
    <h3>今天天气很{{info}}</h3>
    <button @click="changeWeather">切换天气—监视对象</button>
</div>
</body>
<script>
    Vue.config.productionTip = false;
    let vm = new Vue({
        el: '#root',
        data: {isHot: true},
        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot
            }
        },
        // watch: {
        //     isHot: {
        //         handler(newVal, oldVal) {
        //             console.log("isHot has been updated", newVal, oldVal)
        //         }
        //     },
        //
        // },
    });
    vm.$watch('isHot', {
        handler(newVal, oldVal) {
            console.log("isHot has been updated", newVal, oldVal)
        }
    })
</script>

</html>

监视的对象是vm的属性isHot,也可以监视info方法

vue中的$符号是所有实例中都可用的一个简单约定,这样做会避免和已被定义的数据,方法,计算属性产生冲突,必须要写,否则报错

vm.$watch('info', {
        handler(newVal, oldVal) {
            console.log("info has been updated", newVal, oldVal)
        }

上面这段代码是info的监视方法,注意,原始代码中info写的是一个方法,但要说明的是,这是被简写后的写法,完整写法应该是

computed:{
// 完整写法,写get和set
	info:{
    	get(){
            return this.this.isHot ? '炎热' : '凉爽';
        }
   }

本质上,info还是一个属性,所以用引号监视

深度监视

(1).Vue中的watch默认不监测对象内部值的改变(一层)。

(2).配置deep:true可以监测对象内部值改变(多层)。

备注:

(1).Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!

(2).使用watch时根据数据的具体结构,决定是否采用深度监视。

监视简写

  1. watch属性中简写

            watch: {
                // 完整写法
                // isHot: {
                //     handler(newVal, oldVal) {
                //         console.log("isHot has been updated", newVal, oldVal)
                //     }
                // },
    
                // 简写,不需要配置其他属性,比如immediate、deep等属性
                isHot(newVal, oldVal){
                    console.log("isHot has been updated", newVal, oldVal)
                }
    
            }
    
  2. vm.$watch中简写

    	// vm.$watch('isHot', {
        //     handler(newVal, oldVal) {
        //         console.log("isHot has been updated", newVal, oldVal)
        //     }
        // });
        vm.$watch('isHot',function(newVal, oldVal){
        	console.log("isHot has been updated", newVal, oldVal)
        })
    

注意:只有在不需要配置其他属性,比如immediate、deep等属性,才能使用简写,这个和之前的监视属性一样,简写的方法也一样

计算属性和监视属性的差别

computed和watch之间的区别:

  1. computed能完成的功能,watch都可以完成。
  2. watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。两个重要的小原则:
    1. 所被Vue管理的两数,最好写成普通函数,不要写成箭头函数,这样this的指向才是vm或组件实例对象。
    2. 所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等),最好写成箭头函数,这样this的指向才是vm或组件实例对象。

条件渲染

  1. v-if

    写法:

    1. v-if=“表达式”

    2. v-else-if=“表达式”

    3. v-else=“表达式”

      适用于:切换频率较低的场景。

      特点:不展示的DOM元素直接被移除。

      注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script src="../vue.js"></script>
    	</head>
    	<body>
    		
    		<div id="box">
    			
    			<!--实例1  vue 2.1.0以上版本支持 v-if  v-else-if -->
    			<div v-if="type === 'A'">
    			  A
    			</div>
    			<div v-else-if="type === 'B'">
    			  B
    			</div>
    			<div v-else-if="type === 'C'">
    			  C
    			</div>
    			<div v-else>
    			  Not A/B/C
    			</div>
    			<hr />
    			
    			<!--实例2  v-if / v-else-->
    			<div v-if="type==='A'">ok!!!</div>
    			<div v-else>no!!!</div>
    			<hr />
    			
    			<!--实例3    模板中使用v-if / v-else-->
    			<my-form :login-type="loginType"></my-form>
    			<button @click="toggleFun">toggle loginType</button>
    			
    			
    		</div>
    		
    		<script>
    		
    			var MyForm = {
    				//template:"#myForm"
    				props:['loginType'],
    				template:`
    					  <div v-if="loginType === 'username'">
    					  	<label>Username</label>
    					  	<input placeholder="Enter your username" key="username-input"/>
    					  </div>
    					  <div v-else>
    					  	<label>Email</label>
    					  	<input placeholder="Enter your email address" key="email-input"/>
    					  </div>
    				`
    			}
    			
    			var app = new Vue({
    				el:'#box',// ().$mount("#box");
    				data:{
    					type:'C',
    					loginType:'username'
    				},
    				components:{
    					"my-form":MyForm
    				},
    				methods:{
    					toggleFun: function() {
    						this.loginType = this.loginType === 'username'? 'email':'username';
    					}
    				},
    				created:function (){
    				}
    			});
    		</script>
    	</body>
    </html>
    
  2. v-show

    写法:v-show=“表达式”

    适用于:切换频率较高的场景。

    特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉

  3. 备注:使用v-if的时,元素可能无法获取到,而使用v-show一定可以获取到。

列表渲染

学的好痛苦,直接上代码吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
    <script src="../js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="root">
    <ul>
        <li v-for="person in persons" :key="person.id">
            {{person.name}} - {{ person.age}}
        </li>
    </ul>
</div>
<script>
    Vue.config.productionTip = false;
    let vm = new Vue(
        {
            el: '#root',
            data: {
                persons: [
                    {id: '001', name: 'zs', age: 18},
                    {id: '002', name: 'ls', age: 19},
                    {id: '003', name: 'ww', age: 20},
                ]
            },
        }
    )
</script>
</body>
</html>

使用v-for循环,:key动态赋值,且必须是唯一值

key是给节点唯一的标识

key的作用和原理

react、vue中的key有什么作用?(key的内部原理)

  1. 虚拟DOM中key的作用:
    key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下:

  2. 对比规则:
    (1)旧虚拟DOM中找到了与新虚拟DOM相同的key:

    ​ ①若虚拟DOM中内容没变,直接使用之前的真实DOM!
    ​ ②若虚拟DOM中内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM。

    (2)旧虚拟DOM中未找到与新虚拟DOM相同的key,创建新的真实DOM,随后渲染到到页面。

  3. 用index作为key可能会引发的问题:

    1. 若对数据进行:逆序添加、逆序删除等破坏顺序操作,会产生没有必要的真实DOM更新==>界面效果没问题,但效率低。
    2. 如果结构中还包含输入类的DOM:会产生错误DOM更新==> 界面有问题。
  4. 开发中如何选择key?

    1. 最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值。
    2. 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key是没有问题的。

列表过滤

实现一个模糊搜索功能

界面如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KEBC6Yhb-1652958943840)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220518103721656.png)]

通过关键字搜索,页面上展示有关键字的人员信息

上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表筛选</title>
    <script src="../js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="root">
    <h2>人员列表</h2>
    <!--    <button @click.once="add">添加一个老刘</button>-->
    <p>
        <input type="text" placeholder="请输入名字" v-model="keyword">
    </p>
    <ul>
        <li v-for="(person, index) in filPersons" :key="person.id">
            {{person.name}} - {{ person.age}} - {{person.sex}}
            <!--            <input type="text">-->
        </li>
    </ul>
</div>
<script>
    Vue.config.productionTip = false;
    let vm = new Vue(
        {
            el: '#root',
            data: {
                keyword: '',
                persons: [
                    {id: '001', name: '马冬梅', age: 18, sex: '女'},
                    {id: '002', name: '周冬雨', age: 19, sex: '女'},
                    {id: '003', name: '周杰伦', age: 20, sex: '男'},
                    {id: '004', name: '温兆伦', age: 21, sex: '男'},
                ],
                filPersons: [],
            },
            methods: {},
            watch: {
                keyword: {
                    immediate:true,
                    handler(value) {
                        this.filPersons = this.persons.filter((p) => {
                            return p.name.indexOf(value) !== -1
                        })
                    }
                }
            }
        }
    )
</script>
</body>
</html>

注意使用的是监听方法,监听用在属性发生变化时执行,实现的逻辑过程如下:

  1. 后台传过来persons数据,这里是前端写好了,需要从这些数据中模糊筛选

  2. 创建一个搜索的关键字keyword

  3. 创建一个空的filPersons对象,用来存放模糊筛选结果

  4. 编写监听方法:

    1. 搜索框中用v-mode双向绑定属性keyword,只要搜索框中的内容变化,那么keyword也变化

    2. 监视事件中,监听的是属性keyword,也就是说keyword发生变化的话,将会执行监听方法

    3. 监听方法可以简写,简写应该写成如下代码:

      		watch: {
                      keyword(value) {
                              this.filPersons = this.persons.filter((p) => {
                                  return p.name.indexOf(value) !== -1
                              })
                          }
                      }
      

      这里有几个注意事项

      • persons是一个数组,数组的筛选用到了filter()方法

      • indexOf(value)方法用来获取字符value在p.name中的索引,如果不在索引中,则返回-1,所以p.name.indexOf(value) !== -1实际上返回的是一个布尔值

      • 回到filter()方法,filter的参数array.filter(function(currentValue, index, arr), thisValue),解释如下:

        • array是需要筛选的数组
        • function(currentValue, index, arr)是执行筛选的函数,只有currentValue是必须写的值,示例中也只写了这个值,currentValue是当前元素的值
        • filter返回数组中满足条件的数据
      • 监听方法将返回到的值写入到filPersons数组中,前端模板中遍历这个数组,然后展示关键字搜索结果

      这种写法有个明显的缺陷,就是刚开始的时候,filPersons数组是个空数组,所以前端页面不显示任何列表标签。

      有两种解决方法:

      (1)将persons中的数据复制给filPersons

      (2)不使用简写的监听方法,写完整的监视事件,就是上面写的完整代码,但是添加了一个immediate:true,它的作用是让监听立即执行,为啥立即执行就能正常呢,因为立即执行的时候,搜索框里面是空值,空值它是在任何字符串中的,使用indexOf返回0,所以就可以了

    总体来说,非常麻烦,老师提供了一种使用计算属性来实现的方法,相对来说更简单一点,但是我并没有完全理解,就不记录了,上一下代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表筛选</title>
        <script src="../js/vue.js" type="text/javascript"></script>
    </head>
    <body>
    <div id="root">
        <h2>人员列表</h2>
        <!--    <button @click.once="add">添加一个老刘</button>-->
        <p>
            <input type="text" placeholder="请输入名字" v-model="keyword">
        </p>
        <ul>
            <li v-for="(person, index) in filPersons" :key="person.id">
                {{person.name}} - {{ person.age}} - {{person.sex}}
                <!--            <input type="text">-->
            </li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false;
        let vm = new Vue(
            {
                el: '#root',
                data: {
                    keyword: '',
                    persons: [
                        {id: '001', name: '马冬梅', age: 18, sex: '女'},
                        {id: '002', name: '周冬雨', age: 19, sex: '女'},
                        {id: '003', name: '周杰伦', age: 20, sex: '男'},
                        {id: '004', name: '温兆伦', age: 21, sex: '男'},
                    ],
                    // filPersons: [],
                },
                methods: {},
                // watch: {
                //     keyword: {
                //         immediate:true,
                //         handler(value) {
                //             this.filPersons = this.persons.filter((p) => {
                //                 return p.name.indexOf(value) !== -1
                //             })
                //         }
                //     }
                // }
                computed: {
                    filPersons() {
                        return this.persons.filter((p) => {
                            return p.name.indexOf(this.keyword) !== -1
                        })
    
                    }
                },
            }
        )
    </script>
    </body>
    </html>
    

    ps:后面应该理解了用计算属性,计算属性就是通过计算生成filPersons这个列表,它的get方法就是获取筛选的结果,直接return筛选结果就是把数组对象赋值给了filPersons

列表排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表排序</title>
    <script src="../js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="root">
    <h2>人员列表</h2>
    <!--    <button @click.once="add">添加一个老刘</button>-->
    <p>
        <input type="text" placeholder="请输入名字" v-model="keyword">
        <button @click="sortType = 2">年龄升序</button>
        <button @click="sortType = 1">年龄降序</button>
        <button @click="sortType = 0">原始顺序</button>
    </p>
    <ul>
        <li v-for="(person, index) in filPersons" :key="person.id">
            {{person.name}} - {{ person.age}} - {{person.sex}}
            <!--            <input type="text">-->
        </li>
    </ul>
</div>
<script>
    Vue.config.productionTip = false;
    let vm = new Vue(
        {
            el: '#root',
            data: {
                sortType:0, // 排序类型, 0--原顺序, 1--降序, 2--升序
                keyword: '',
                persons: [
                    {id: '001', name: '马冬梅', age: 30, sex: '女'},
                    {id: '002', name: '周冬雨', age: 38, sex: '女'},
                    {id: '003', name: '周杰伦', age: 19, sex: '男'},
                    {id: '004', name: '温兆伦', age: 17, sex: '男'},
                ],
                // filPersons: [],
            },
            
            computed: {
                filPersons() {
                    const arr =  this.persons.filter((p) => {
                        return p.name.indexOf(this.keyword) !== -1
                    })
                    if(this.sortType){
                        arr.sort((p1, p2) =>{
                            return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
                        })
                    }
                    return arr

                }
            },
        }
    )
</script>
</body>
</html>

复习几个知识点:

  1. vue中的事件处理@click="sortType = 2"表达的意思是点击处理sortType = 2这个事件
  2. JavaScript中的sort排序方法,参数是排序函数,传参a,b,返回a-b是升序,返回b-a是降序

vue监视数据

Vue监视数据的原理:

1.vue会监视data中所有层次的数据。

2.如何监测对象中的数据?

通过setter实现监视,且要在new Vue时就传入要监测的数据。

(1).对象中后追加的属性,Vue默认不做响应式处理

(2).如需给后添加的属性做响应式,请使用如下API:

Vue.set(target,propertyName/index,value)或 vm.$set(target,propertyName/index,value)

3.如何监测数组中的数据?

通过包裹数组更新元素的方法实现,本质就是做了两件事:

(1).调用原生对应的方法对数组进行更新。

(2).重新解析模板,进而更新页面。

4.在Vue修改数组中的某个元素一定要用如下方法:

1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

2.Vue.set()或vm.$set()

特别注意:Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性!!!

收集表单数据

先上前端界面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E8pbvMkJ-1652958943841)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220518163422469.png)]

上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>收集表单数据</title><script src="../js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="root">
   <form>
       <label for="demo">账号:</label>
       <input type="text" id="demo" v-model.trim="account">
       <p>
           密码:
           <input type="password" v-model="password">
       </p>
       <p>
           性别:
           男<input type="radio" name="sex" value="male" v-model="sex"><input type="radio" name="sex" value="female" v-model="sex">
       </p>
       <p>
           年龄:
           <input type="number" v-model.number="age">
       </p>
       <p>
           爱好:
           学习<input type="checkbox" v-model="hobby" value="study" >
           打球<input type="checkbox" v-model="hobby" value="sport">
           游戏<input type="checkbox" v-model="hobby" value="play">
       </p>
       <p>
           所属校区
           <select v-model="city">
               <option value="">请选择校区</option>
               <option value="bj">北京</option>
               <option value="sh">上海</option>
               <option value="sz">深圳</option>
               <option value="wh">武汉</option>
           </select>
       </p>
       <p>
           其他信息:
           <textarea name="" id="" cols="30" rows="10" v-model="other" placeholder="请在此输入需要补充的内容"></textarea>
       </p>
       <p>
           <input type="checkbox" checked="true" v-model="agree">阅读并接受用户协议
           <a href="">《用户协议》</a>
       </p>
       <button @click.prevent="print">提交</button>
   </form>
</div>
<script>
    Vue.config.productionTip = false;
    let vm = new Vue(
        {
            el:"#root",
            data:{
                account:'',
                password:'',
                sex: 'male',
                age: 18,
                hobby: [],
                city:'sh',
                other:'',
                agree:''
            },
            methods:{
                print(){
                    console.log(this.$data)
                }
            }
        }
    )
</script>
</body>
</html>

总结:

  1. 若:<input type="text"/>,则v-model收集的是value值,用户输入的就是value值。

  2. 若:<input type="radio"/>,则v-model收集的是value值,且要给标签配置value值。

  3. 若:<ipput type="checkbox"/>

    • 没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值)

    • 配置input的value属性:

      (1)v-model的初始值是非数组,那么收集的就是checked(勾选 or 未勾选,是布尔值)

      (2)v-model的初始值是数组,那么收集的的就是value组成的数组

  4. 备注——v-model的三个修饰符:

    • lazy:失去焦点再收集数据

    • number:输入字符串转为有效的数字

    • trim:输入首尾空格过滤

其他内置指令

现阶段学习过的指令:

  • v-bind :单向绑定解析表达式,可简写为:xxx
  • v-model :双向数据绑定
  • v-for :遍历数组/对象/字符串
  • v-on :绑定事件监听,可简写为@
  • v-if :条件渲染(动态控制节点是否存存在)
  • v-else :条件渲染(动态控制节点是否存存在)
  • v-show:条件渲染(动态控制节点是否展示)

v-text

  1. 作用:向其所在的节点中渲染文本内容。
  2. 与插值语法的区别:v-text会替换掉节点中的内容,{{xx}}则不会
<div id="root">
<div>你好,{{name}}</div>
<div v-text="name"></div>
<div v-text="str"></div>
</div>

str:

hello

h3>

v-text输出的就是上面完整的字符串,不支持DOM文档结构解析

少用v-text,都用插值语法

v-html

支持结构解析

如果把<div v-text="str"></div>换成<div v-html="str"></div>则直接输出解析后的hello

1.作用:向指定节点中渲染包含html结构的内容
2.与插值语法的区别:
(1).v-html会替换掉节点中所有的内容,{{xx}}则不会。(2).v-html可以识别html结构。
3.严重注意:v-html有安全性问题!!!
(1).在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html,永不要用在用户提交的内容上!

v-cloak

v-cloak指令没有值

本质是一个特殊属性,vue实例创建完毕并接管容器后,会删除v-cloak属性

使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

html代码

<div>
<h2 v-cloak>{{name}}</h2>
</div>
<script></script>

css样式

[v-cloak]{display:none}

v-once

指令没有值,保持原始值不更新,初次动态渲染后,视为静态内容,后续的数据改变不影响数据的变化

v-pre

添加后不解析任何vue语法,不加也行

自定义指令

函数式指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
    <script src="../js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="root">
    <h2>当前n值是:{{n}}</h2>
    <h2>n放大10倍:<span v-big="n"></span></h2>
    <button @click="n++">点我n+1</button>
</div>
<script>
    Vue.config.productionTip = false;
    let vm = new Vue(
        {
            el:'#root',
            data: {n: 1},
            directives:{
                big(element, binding){
                    
                    element.innerHTML = binding.value * 10
                    
                }
            }
        }
    )
</script>
</body>
</html>

依然是vm中的属性,添加directives属性,在属性中添加方法,方法的参数有两个

element是绑定的标签元素

binding是一个对象,是绑定的对象,并非n这么简单,有函数名,有调用方式,有值

对象式

上面的函数式只写了一个big函数,写法是不完整的,简单的功能能实现,复杂的会有问题

应该把directives属性中的三个属性写成对象式,分别是

  • bind
  • inserted
  • update

自定义指令总结

需求1:定义一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍。
需求2:定义一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input元素默认获取焦点。自定义指令总结:
一、定义语法:
(1).局部指令: I
new Vue({ new Vue({
directives:{指令名:配置对象} 或 directives(){}
}) })
(2).全局指令:
Vue.directive(指令名,配置对象)或 Vue.directive(指令名,回调函数)
二、配置对象中常用的3个回调:
(1).bind:指令与元素成功绑定时调用。
(2).inserted:指令所在元素被插入页面时调用。

(3).update:指令所在模板结构被重新解析时调用。
三、备注:
1.指令定义时不加v-,但使用时要加v-;
2.指令名如果是多个单词,要使用kebab-case命名方式,不要用camelCase命名。

生命周期

生命周期定义
1.又名:生命周期回调函数、生命周期函数、生命周期钩子。
2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的的数。
3.生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。
4.生命周期雨数中的this指向是vm或 组件实例对象。

生命周期钩子

总共4对

常用的生命周期钩子:
1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例
1.销毁后借助Vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效,但原生DOM事件依然有效。
3.一般不会在beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程了。

代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
    <script src="../js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="root">
<!--    <h3 v-if="a">hello vue</h3>-->
    <h3 :style="{opacity}">欢迎学习vue</h3>
    <button @click="stop">点我停止切换</button>
</div>
<script>
    Vue.config.productionTip = false;
    let vm = new Vue(
        {
            el:'#root',
            data: {opacity: 1},
            methods: {
                stop(){
                    // clearInterval(this.timer)
                    this.$destroy()
                }
            },
            mounted(){
                this.timer = setInterval(()=>{
                    console.log('setInterval')
                    this.opacity -= 0.01
                    if(this.opacity <=0){this.opacity = 1}
                }, 20)
            },
            beforeDestroy(){
                console.log('vm即将终止')
                clearInterval(this.timer)
            },
        }
    )
</script>
</body>
</html>

组件化编程

组件的理解

组件——实现应用中局部功能代码和资源的集合

非单文件组件

一个文件中包含了多个组件

Vue中使用组件的三大步骤:
一、定义组件(创建组件)
二、注册组件
三、使用组件(写组件标签)
如何定义一个组件?
使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样,但区别如下:
1.el不要写,为什么? -最终所有的组件都要经过一个vm的管理。由vm中的e1决定服务哪个容器
2.data必须写成函数,为什么? – 避免组件被复用时,数据存在引用关系。备注:使用template可以配置组件结构。
如何注册组件?
1.局部注册:靠new Vue的时候传入components选项
2.全局注册:靠Vue.component(组件名’,组件)
三、编写组件标签:
<school></school>

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="root">

    <school></school>
    <hr>
    <student></student>

    <hello></hello>
</div>
<div id="root2">
<hello></hello>
</div>
<script>
    Vue.config.productionTip = false;
    // 创建school组件
    const school = Vue.extend(
        {
            data() {
                return {
                    schoolName: 'soochoow universty',
                    address: 'suzhou'
                }
            },
            template: `
              <div>
              <h3>学校名称:{{ schoolName }}</h3>
              <h3>学校地址:{{ address }}</h3>
              </div>
            `
        }
    )

    // 创建student组件
    const student = Vue.extend(
        {
            data() {
                return {
                    studentName: 'hg',
                    age: 18
                }
            },
            template: `
              <div>
              <h3>学生姓名:{{studentName}}</h3>
              <h3>学校年龄:{{age}}</h3>
              </div>
            `
        }
    )

    // 创建hello组件用于全局注册
    const hello = Vue.extend({
        template:`
        <div>
        <h2>hello, {{name}}全局注册</h2>
        </div>
        `,
        data(){
            return {
                name: 'zl'
            }
        }
    })
    // 全局注册
    Vue.component('hello', hello)

    new Vue(
        {
            el: '#root',
            // 注册组件--局部注册
            components: {
                school: school,
                student: student
            },
        }
    )
</script>
</body>
</html>

前端页面展示效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R0E5dUou-1652958943841)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220519123917542.png)]

组件标签和命名的几个注意点

1.关于组件名:

  • 一个单词组成:

    第一种写法(首字母小写):school

    第二种写法(首字母大写):School

  • 多个单词组成:
    第一种写法(kebab-case命名):my-school
    第二种写法(CamelCase命名):MySchool(需要Vue脚手架支持)

  • 备注:
    (1)组件名尽可能回避HTML中已有的元素名称,例如:h2、H2都不行。

    (2)可以使用name配置项指定组件在开发者工具中呈现的名字。

  1. 关于组件标签:
    第一种写法:<school></school>

    第二种写法:<schoo1/>
    备注:不用使用脚手架时,<schoo1/>会导致后续组件不能渲染

  2. 一个简写方式:
    const school =Vue.extend(options)可简写为:constschool=options

组件的嵌套

先上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件嵌套</title>
    <script src="../js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="root">
<!--    <app></app>-->
</div>
<div id="root2">
    <hello></hello>
</div>
<script>
    Vue.config.productionTip = false;
    // 创建student组件
    const student = Vue.extend(
        {
            data() {
                return {
                    studentName: 'hg',
                    age: 18
                }
            },
            template: `
              <div>
              <h3>学生姓名:{{ studentName }}</h3>
              <h3>学校年龄:{{ age }}</h3>

              </div>
            `
        }
    )

    // 创建school组件
    const school = Vue.extend(
        {
            data() {
                return {
                    schoolName: 'soochoow universty',
                    address: 'suzhou'
                }
            },
            template: `
              <div>
              <h3>学校名称:{{ schoolName }}</h3>
              <h3>学校地址:{{ address }}</h3>
              <student></student>
              </div>
            `,
            // 注册组件(局部)
            components: {student}
        }
    )


    // 创建hello组件用于全局注册
    const hello = Vue.extend({
        template: `
          <div>
          <h2>hello, {{ name }}全局注册</h2>
          </div>
        `,
        data() {
            return {
                name: 'zl'
            }
        }
    })

    // 定义APP组件
    const app = Vue.extend({
        template: `
          <div>
          <hello></hello>
          <school></school>
          </div>

        `,
        components: {
            school,
            hello,
            // student,
        }
    })
    // 全局注册
    Vue.component('hello', hello)

    // 创建vm
    new Vue(
        {
            template:`<app></app>`,
            el: '#root',
            // 注册组件--局部注册
            components: {
                app,
            },
        }
    )
</script>
</body>
</html>

嵌套组件的写法:

  1. 首先创建一个子组件student:

        const student = Vue.extend(
            {
                data() {
                    return {
                        studentName: 'hg',
                        age: 18
                    }
                },
                template: `
                  <div>
                  <h3>学生姓名:{{ studentName }}</h3>
                  <h3>学校年龄:{{ age }}</h3>
    
                  </div>
                `
            }
        )
    
  2. 再创建一个父组件school

        const school = Vue.extend(
            {
                data() {
                    return {
                        schoolName: 'soochoow universty',
                        address: 'suzhou'
                    }
                },
                template: `
                  <div>
                  <h3>学校名称:{{ schoolName }}</h3>
                  <h3>学校地址:{{ address }}</h3>
                  <student></student>
                  </div>
                `,
                // 注册组件(局部)
                components: {student}
            }
        )
    

    注意,父组件中通过components添加子组件,并在父组件的模板中添加子组件标签

    与此同时,再创建一个hello组件,地位是与school平级的,只是其中没有子组件了

  3. 创建一个app,统领所有组件,也就是hello和school

        const app = Vue.extend({
            template: `
              <div>
              <hello></hello>
              <school></school>
              </div>
    
            `,
            components: {
                school,
                hello,
                // student,
            }
        })
    

    注意,app的子组件中不能再包括其子组件的组件,也就是不能包括school中的student

  4. 创建vm实例,并注册app

        new Vue(
            {
                template:`<app></app>`,
                el: '#root',
                // 注册组件--局部注册
                components: {
                    app,
                },
            }
        )
    

    这里有一点值得注意,就是可以直接在vm对象中添加模板,这样就不用在原来的模板中去写app标签了

    但是有个问题我没搞明白,就是注意看,我的hello组件是全局注册的,在原始模板中我添加了一个div#root2的域,其中添加了hello组件,但网页上并没有显示这个hello标签,很纳闷,看以后能不能搞明白吧

组件的小结

关于VueComponent:

1.school组件本质是一个名为VueComponent的构造两数,且不是程序员定义的,是Vue.extend生成的。

2.我们只需要写<schoo1/><school></school>,Vue解析时会帮我们创建schoo1组件的实例对象,即Vue帮我们执行的:new VueComponent(options)。

3.特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent!!!

4.关于this指向:

(1)组件配置中:data两数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】。

(2).new Vue(options)配置中:data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

5.VueComponent的实例对象,以后简称vc(也可称之为:组件实例对象)。 Vue的实例对象,以后简称vm

记录到这里,还讲了一个非常重要的内置关系,没有听懂,涉及到原型对象,结论是这么一句话:

组件实例对象的显示原型对象的隐式原型对象等于vm的原型对象

VueComponent.prototype.__proto__===Vue.prototype

单文件组件

一个文件中只包含1个组件,及后缀为vue的文件

大型项目都是单文件组件

Logo

前往低代码交流专区

更多推荐