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的文件

大型项目都是单文件组件

# vue.js # 学习 # 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue