Vue.js 基础

简单认识 Vuejs


  1. Vue (读音 /vju:/ ,类似于 view)。
  2. Vue是一个渐进式的框架,什么是渐进式的呢?
    • 渐进式意味着你可以将 Vue 作为你应用的一部分嵌入其中,带来更丰富的交互体验。
    • 或者如果你希望将更多的业务逻辑使用 Vue 实现,那么 Vue 的核心库以及其生态系统。
    • 比如 Core+Vue-router+Vuex ,也可以满足你各种各样的需求。
  3. Vue 有很多特点和 Web 开发中常见的高级功能。
    • 解耦试图和数据。
    • 可复用的组件。
    • 前端路由技术。
    • 状态管理。
    • 虚拟 DOM 。
  4. 学习 Vue 的前提:
    • 从零学习 Vue 开发,不需要具备其他类似于 Angular 、 React , 甚至是 jQuery 的经验。
    • 但是一定要具备一定的 HTML 、 CSS 、 JavaScript 基础。
    • ES6 语法特别重要。

Vuejs 安装


Vue 安装方式有很多:

  1. 直接 CDN 引入:
    • 可以选择引入开发环境版本还是生产环境版本
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
  1. 下载和引入
  2. NPM 安装
    • 后续通过 webpack 和 CLI 的使用,我们使用该方式。

Hellow Vuejs


<div id="app">
        <h2>{{message}}</h2>
        <h1>{{name}}</h1>
</div>
<div>{{message}}</div>
<script src="./vue源码/vue.js"></script>
<script>
    // let(变量)/const(常量)。
    // 编程范式:声明式编程。
    let app = new Vue({
        el: '#app', // 用于挂载要管理的元素。
        data: { //  定义数据。
            message: '你好啊,李银河!',
            name: 'coderwhy'
        },
    })

    // 原生 js 的做法(编程范式:命令式编程)。
    // 1. 创建div元素。
    // 2。 定义一个变量叫 message。
    // 3. 将 message 变量放在前面的 div 元素中显示。
    // 4. 修改 message 的数据:今天的天气不错!
    // 5. 将修改后的数据再次替换到 div 元素。
</script>
  1. 创建 Vue 对象的时候,传入了一些 options:{}
    • {} 中包含了 el 属性:该属性决定了这个 Vue 对象挂载到哪一个元素上,很明显,我们这是挂载到了 id 为 app 的元素上。
    • {} 中包含了 data 属性:该属性中通常会存储一些数据。
      1. 这些数据可以是我们直接定义出来的,比如像上面这样。
      2. 也可以是来自网络,从服务器加载的。

Vue 实例的作用范围是什么呢?

  • 挂载点选择的标签内部。
    是否可以使用其他的选择器?
  • 可以(建议使用 id 选择器)。
    是否可以设置其他的 DOM 元素呢?
  • 只支持双标签,但是也有例外,比如 html 标签和 body 标签。

数据类型

  • Vue 中用到的数据定义在 data 中。
  • data 中可以写复杂类型的数据。
  • 渲染复杂类型数据时,遵守 js 的语法即可。

内容绑定,事件绑定


v-text 指令

  1. v-text 会设置标签内所有的内容。
  2. v-text 通常情况下,接收一个 string 类型。
<div class="app" v-text="message">

</div>
<script src="./vue源码/vue.js"></script>
<script>
	var app = new Vue({
		el: '.app',
		data: {
			message: '你好孟钊'
		}
	})
</script>

<!-- 拼接:<h2class="app" v-text="message+'!'"></h2> --/>
<!-- 拼接:<h2>深圳{{message+"!"}}</h2> --/>
  1. 设置部分内容可以使用<h2>深圳{{message}}</h2>,这种方法叫差值表达式。

v-html 指令

  1. 如果我们直接通过 {{}} 来输出,会将 HTML 代码一起输出。

  2. 但是我们可能希望按照 HTML 的格式进行解析,并且显示对应的内容。

    • 可以使用 v-html 指令:

      1)该指令后面往往会跟上一个 string 类型。

      2)会将 string 的 HTML 解析出来并且进行渲染。

<div class="app">
	<span v-html="message"></span>
</div>
<script src="./vue源码/vue.js"></script>
<script>
	var app = new Vue({
		el: '.app',
		data: {
			message: '<h1>你好</h1>'
		}
	})
</script>

v-on 指令

为元素绑定事件

  • 语法:<input type="button" value="事件绑定" v-on:click="methods 中的方法"></input>
  • v-on: 可以简写成@。
  • 计数器案例
<div id="app">
    <h2>当前计数:{{counter}}</h2>
    <!-- <button v-on:click="counter--">-</button> -->
    <!-- <button v-on:click="counter++">+</button> -->
    <button v-on:click="sub">-</button>
    <button v-on:click="add">+</button>
</div>
<script src="./vue源码/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data:{
            counter: '0',
        },
        methods: {
            add: function(){
            	if(this.counter<10){
            		this.counter++
            	}else{
            		alert('别加了,最大了!')
            	}
            },
            sub: function(){
            	if(this.counter>0){
            		this.counter--
            	}else{
            		alert('别减了,已经没了!')
            	}
            }
		}
    })
</script>
v-on 补充
  • 传递自定义参数,事件修饰符。

  • 事件绑定的方法写成函数调用的形式,可以传入自定义参数。

  • 定义方法时需要定义形参来接收传入的实参。

  • 事件的后面跟上.修饰符 可以对事件进行限制。

  • .enter 可以限制触发的按键为回车。

总结

  1. methods 属性:该属性用于在 Vue 对象中定义方法。
  2. @click 指令:该指令用于监听某个元素的点击事件,并且需要指定当发生点击时,执行的方法(方法通常是 methods 中定义的方法)。
  3. 语法糖:简写。
    |名称|作用|
    |:|:|
    |click|点击事件|
    |mouseenter|鼠标移入|
    |dblclick|鼠标双击事件|

v-model 指令

  • 获取和设置表单元素的值(双向数据绑定).
  • 绑定的数据会和表单元素相关。
  • 绑定的元素⬅➡表单元素的值。
  • v-model 原理:
    • v-model 其实是一个语法糖,他的背后本质上是包含两个操作。
      • v-bind 绑定一个 value 值。
      • v-on 指令给当前元素绑定 input 事件。
<div id="app">
	<input type="text" v-model="message" @keyup.enter="getM">
	<h2>{{message}}</h2>
</div>
<script src="./vue源码/vue.js"></script>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			message:'黑马程序员'
		},
		methods: {
			getM:function(){
				alert(this.message)
			}
		}
	})
</script>
v-model: radio
  1. 当存在多个单选框时。

    <div id="app">
    	<label for="male">
    		<input type="radio" id="male" value="" v-model="message"></label>
    	<label for="famale">
    		<input type="radio" id="famale" value="" v-model="message"></label>
    	<h2>你的选择是:{{message}}</h2>
    </div>
    <script src="./vuecode/vue.js"></script>
    <script>
    	const app = new Vue({
    		el: '#app',
    		data: {
    			message: '男'
    		}
    	})
    </script>
    
v-model: checkbox
  1. 单选框

    • v-model 即为布尔值。
    • 此时 input 的 value 值并不影响 v-model 的值。
    <div id="app">
    	<label for="agreement">
    		<input type="checkbox" id="agreement" v-model="agreement">我已阅读并同意以上协议
    	</label>
    	<button :disabled="!agreement">注册</button>
    </div>
    <script src="./vuecode/vue.js"></script>
    <script>
    	const app = new Vue({
    		el: '#app',
    		data: {
    			agreement: false
    		}
    	})
    </script>
    
  2. 多选框

    • 多个复选框因为要选择多个,所以对应的 data 中属性是一个数组。
    • 当选中某一个时,就会将 input 的 value 值添加到数组中。
    <div id="app">
    	<input type="checkbox" value="篮球" v-model="hobbies">篮球
    	<input type="checkbox" value="足球" v-model="hobbies">足球
    	<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
    	<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
    	<h2>你的爱好是:{{hobbies}}</h2>
    </div>
    <script src="./vuecode/vue.js"></script>
    <script>
    	const app = new Vue({
    		el: '#app',
    		data: {
    			hobbies: []
    		}
    	})
    </script>
    
v-model: select
  1. 和 checkbox 一样,select 也分单选和多选两种情况。

  2. 单选:只能选中一个值。

    • v-model 绑定的是一个值。
    • 当我们选中 option 中的一个时,会将它对应的 value 赋值到 mySelect 中。
    <div id="app">
    	<select name="" id=""  v-model="fruit">
    		<option value="李子">李子</option>
    		<option value="火龙果">火龙果</option>
    		<option value="葡萄">葡萄</option>
    		<option value="哈密瓜">哈密瓜</option>
    	</select>
    	<h2>你选择的水果是:{{fruit}}</h2>
    </div>
    <script src="./vuecode/vue.js"></script>
    <script>
    	const app = new Vue({
    		el: '#app',
    		data: {
    			fruit: '火龙果'
    		}
    	})
    </script>
    
  3. 多选:可以选中多个值。

    • v-model 绑定的是一个数组。
    • 当选中多个值时,就会将选中的 option 对应的 value 添加到数组 mySelects 中。
    <div id="app">
    	<select name="" id=""  v-model="fruits" multiple>
    		<option value="李子">李子</option>
    		<option value="火龙果">火龙果</option>
    		<option value="葡萄">葡萄</option>
    		<option value="哈密瓜">哈密瓜</option>
    	</select>
    	<h2>你选择的水果是:{{fruits}}</h2>
    </div>
    <script src="./vuecode/vue.js"></script>
    <script>
    	const app = new Vue({
    		el: '#app',
    		data: {
    			fruits: []
    		}
    	})
    </script>
    
值绑定
  • 用来给所要操作的元素动态绑定 value 值。
<div id="app">
	<select name="" id="" :value="fruits" v-model="fruit" multiple>
		<option>李子</option>
		<option>火龙果</option>
		<option>葡萄</option>
		<option>哈密瓜</option>
	</select>
	<h2>你选择的水果是:{{fruit}}</h2>
</div>
<script src="./vuecode/vue.js"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			fruit: [],
			fruits: [ "李子", "火龙果", "葡萄", "哈密瓜" ]
		}
	})
</script>
v-model 修饰符
  1. lazy 修饰符
    • 默认情况下,v-model 默认是在 input 事件中同步输入框的数据的。
    • 也就是说,一旦有数据发生改变对应的 data 中的数据就会自动发生。
    • lazy 修饰符可以让数据在失去焦点或者回车时才会更新。
  2. number 修饰符
    • 默认情况下,在输入框中,无论我们输入的是字母还是数字,都会被当作字符串类型进行处理。
    • 但是如果我们希望处理的是数字类型,那么最好是直接将内容当作数字处理。
    • number 修饰符可以让在输入框中输入的内容自动转成数字类型。
  3. trim 修饰符
    • 如果输入的内容首尾有很多空格,通常我们希望将其去除。
    • trim 修饰符可以过滤内容两边的空格。

v-show 指令

  • 根据表达值的真假,切换元素的显示和隐藏。
  • 原理是修改元素的 display 值,实现显示隐藏。
  • 指令后面的内容,最终都会解析为布尔值
  • 值为 true 元素显示,值为 false 元素隐藏。
<div id="app">
	<input type="button" v-on:click="changeIsShow" value="切换"></input>
	<img v-show="isShow" src="./images/1.jpg" alt="">
</div>
<script src="./vue源码/vue.js"></script>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			isShow: true,
		},
		methods: {
			changeIsShow: function () {
				this.isShow = !this.isShow
			}
		}
	})
</script>

v-if 指令

  • 根据表达值的真假,切换元素的显示和隐藏(操纵 DOM 元素)。
  • 本质是操纵 DOM 元素来切换显示状态。
  • 表达式的值为 true ,元素存在于 DOM 树中,为 false ,从 DOM 树中移除
  <div id="app">
  	<input type="button" value="点击" @click="toggleIsShow">
  	<p v-if="isShow">黑马程序员</p>
  </div>
  <script src="./vue源码/vue.js"></script>
  <script>
  	var app = new Vue({
  		el: '#app',
  		data: {
  			isShow: false
  		},
  		methods: {
  			toggleIsShow: function () {
  				this.isShow = !this.isShow
  			}
  		}
  	})
  </script>

v-bind 指令

v-bind 绑定class
  • 设置元素的属性(比如:srctitleclass)。
  • 语法:v-bing:属性名=表达式
  • 简写::属性名
  • 需要动态的增删 class 建议使用对象的方式。
  • 语法:
<!-- 用法一:直接通过 {} 绑定一个类。 -->
<h2 :class="{'active': isActive}">Hello World</h2>
<!-- 用法二:也可以通过判断,传入多个值。 -->
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
<!-- 用法三:和普通的类同时存在,并不冲突。 -->
<!-- 注:如果 isActive 和 isLine 都为 true ,那么会有 title/active/line 三个类 -->
<h2 class="title" :class="{'active': isActive , 'line':isLine}">Hello World</h2>
<!-- 用法四:如果过于复杂,可以放在一个 methods 或者 computed 中。 -->
<!-- 注:classes 是一个计算属性 -->
<h2 class="title" :class="classes">Hello World</h2>
<!-- 用法五:数组语法。(用的次数较少) -->
<h2 class="title" :class="['active','line']">Hello World</h2>
  • 案例:
  <div id="app">
  	<img v-bind:src="imgSrc" alt="">
  	<img :src="imgSrc" alt="">
  	<img :src="imgSrc" alt="" :title="imgtitle+'!!!!'">
  	<img :src="imgSrc" alt="" :class="isActive?'active':''" @click="toggleActive">
  	<img :src="imgSrc" alt="" :class="{active:isActive}" @click="toggleActive">
  </div>
  <script src="./vue源码/vue.js"></script>
  <script>
  	var app = new Vue({
  		el: '#app',
  		data: {
  			imgSrc: "https://www.itheima.com/images/logo.png",
  			imgtitle: "黑马程序员",
  			isActive: false
  		},
  		methods: {
  			toggleActive: function () {
  				this.isActive = !this.isActive
  			}
  		}
  	})
  </script>
v-bind 绑定style
  1. v-bind:style:可以绑定一些 CSS 内联样式。
  2. 在写 CSS 属性名的时候,比如 font-size
    • 采用驼峰式:fontSize
    • 或者短横线分隔(记得用单引号括起来)'font-size'
  3. 绑定 class 有两种方式:
    • 对象语法::style="{key(属性名): 'value(属性值)'}"

      1)对象的 key 是 CSS 属性名称。

      2)对象的 value 是具体赋的值,值可以来自于 data 中的属性。

    • 数组语法::style="[baseStyles,overridingStyles]"

      1)多个值以 , 分隔即可。

v-for 指令

v-for 遍历数组
  • 根据数据生成列表结构。
  • 数组经常和 v-for 结合使用。
  • 语法是:(item,index) in 数据
  • item 和 index 可以结合其他指令一起使用。
  • 数组长度的更新会同步到页面上,是响应式的。
<div id="app">
    <ul>
        <li v-for="item in movies">{{item}}</li>
        <!-- v-for:循环遍历 movies 这个数组,给它展示出来 -->
    </ul>
</div>
<script src="./vue源码/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
            movies: ['星际穿越','大话西游','你的婚礼','我要我们在一起','我在时间尽头等你']
        },
    }) 
</script>
v-for 遍历对象
<div id="app">
	<ul>
		<li v-for="item in info">{{item}}</li>
        <!-- 也可以同时获取 key 和 value :格式:(value,key) -->
	</ul>
</div>
<script src="./vuecode/vue.js"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			info:{
				name: 'mengzhao',
				age: 20,
				height: 1.75
			}
		},
	})
</script>
  • 运行结果:

在这里插入图片描述

组件的 key 属性
  1. 官方推荐我们在使用 v-for 时,给对应的元素或组件添加上一个 key 属性。
  2. key 的作用**主要是为了高效的更新虚拟 DOM ** 。
  3. 了解内容:
    • 为什么需要这个 key 属性呢?
      • 这其实和 Vue 的虚拟 DOM 的 Diff 算法有关系。
      • 这里我们借用 React’ s diff algorithm 中的一张图来简单说明一下
    • 当某一层有很多相同的节点时,也就是列表节点时,我们希望插入一个新的节点。
      • 我们希望可以在 B 和 C 之间加一个 F ,Diff 算法默认执行起来是这样的。
      • 即把 C 更新成 F , D 更新成 C , E 更新成 D ,最后再插入 E ,是不是很没有效率?
    • 所以我们需要使用 key 来给每个节点做一个唯一标识。
      • Diff 算法就可以正确的识别此节点。
      • 找到正确的位置插入新的节点。

检测数组更新

  1. 因为 Vue 是响应式的,所以当数据发生变化时,Vue 会自动监测数据变化,视图会发生对应的更新。
  2. Vue 中包含了一组观察数组编译的方法,使用它们改变数据也会触发视图的更新。
    • push():在数组最后添加元素。
    • pop():在数组后面删除最后一个元素,并返回数组。
    • shift():在数组后面删除第一个元素,并返回数组。
    • unshift():将一个或多个元素添加到数组的开头,并返回新数组的长度。
    • splice():删除元素/修改元素/添加元素。
    • sort():按升序排列数组项——即最小的值位于最前面,最大的值排在最后面。
    • reverse():反转数组项的顺序。

作业的回顾

  • 数组中包括几个电影,以列表的形式展示在页面上,点击哪个哪个变成红色。
<div id="app">
	<ul>
		<li v-for="(item,index) in movies" :class="{active: currentIndex === index}" @click="liclick(index)">{{item}}</li>
	</ul>
</div>
<script src="./vuecode/vue.js"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			movies: ['我在时间尽头等你','我要我们在一起','你的婚礼','当男人恋爱时'],
			currentIndex: 0
		},
		methods: {
			liclick(index){
				this.currentIndex = index
			}
		}
	})
</script>

v-once 指令

  1. v-once 指令:
    • 该指令后面不需要跟任何表达式(比如之前的 v-for 后面是跟表达式的)。
    • 该指令表示元素和组件只渲染一次,不会随着数据的改变而改变。

v-pre 指令

  1. 在特定情境下才会使用 v-pre 指令。
    • 如果需要展示{{message}}的时候。
<div id="app">
    <h2 v-pre>{{message}}</h2>
</div>
<script src="./vue源码/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
        },
    }) 
</script>

<!-- 在页面展示效果是{{message}},而不是你好啊 -->

v-cloak

  1. 在 Vue 解析之前,div 中有一个属性 v-cloak。
  2. 在 Vue 解析之后,div 中没有一个属性 v-cloak。
<style>
    [v-cloak] {
        display: none;
    }
</style>
<div id="app">
    <h2 v-cloak>{{message}}</h2>
</div>
<script src="./vue源码/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
        },
    }) 
</script>

v-show

<div id="app">
	<!-- v-if:当条件为 false 时,包含 v-if 指令的元素,根本不存在 DOM 中。 -->
	<h2 v-if="isShow">{{message}}</h2>

	<!-- v-show:当条件为 false 时,v-show 只是给元素添加了一个行内样式:display: none -->
	<h2 v-show="isShow">{{message}}</h2>
</div>
<script src="./vuecode/vue.js"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			message: '你好啊',
			isShow: true
		},
	})
</script>

在开发中如何选择 v-if 和 v-show 呢?

  • 当需要在显示与隐藏之间切换很频繁时,用 v-show 。
  • 当只有一次切换时,通过 v-if 。

记事本案例


功能

  1. 新增
    • 生成列表结构(v-for 数组)。
    • 获取用户输入(v-model)。
    • 回车,新增数据(v-on .enter 添加数据)。
  2. 删除
    • 点击删除指定内容(v-on splice 索引)。
  3. 统计
    • 统计信息个数(v-text length)。
    • 基于数据的开发方式。
  4. 清空
    • 点击清除所有信息(v-on)。
  5. 隐藏
    • 没有数据时,隐藏元素(v-show v-if 数组非空)。
<!-- 主体区域 -->
<section id="todoapp">
	<!-- 输入框 -->
	<header class="header">
		<h1>记事本</h1>
		<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo">
	</header>
	<!-- 列表区域 -->
	<section class="main">
		<ul class="todo-list">
			<li class="todo" v-for="(item,index) in list">
				<div class="view">
					<span class="index">{{ index+1 }}</span>
					<label>{{ item }}</label>
					<button class="destroy" @click="remove(index)">x</button>
				</div>
			</li>
		</ul>
	</section>
	<!-- 统计和清空 -->
	<footer class="footer">
		<span class="todo-count" v-if="list.length!=0"><strong>{{list.length}}</strong>items left</span>
		<button class="clear-completed" @click="clear" v-show="list.length!=0">Clear</button>
	</footer>
</section>
<script src="./vue源码/vue.js"></script>
<script>
	var app = new Vue({
		el: '#todoapp',
		data: {
			list: ['写代码', '吃饭饭', '玩游戏'],
			inputValue: ""
		},
		methods: {
			add: function () {
				this.list.push(this.inputValue)
				this.inputValue = ''
				},
			remove: function (index) {
				this.list.splice(index, 1)
			},
			clear: function () {
				this.list = []
			}
		}
	})
</script>

图书购物车案例

过滤器

  1. 在实例的 options 里面定义过滤器。
// 使用过滤器的方法:
// {{item.price | 过滤器}}

// 定义过滤器的方法:
const app = new Vue({
    el: '',
    data: ' ',
    // 过滤器
    filters:{
        函数名(需要过滤的参数){
            函数体
        }
    }
})

案例源码

<div id="app">
	<div v-if="this.books.length">
		<table>
			<thead>
				<th></th>
				<th>书籍名称</th>
				<th>出版日期</th>
				<th>价格</th>
				<th>购买数量</th>
				<th>操作</th>
			</thead>
			<tbody>
				<tr v-for="(item,index) in books">
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{item.date}}</td>
					<td>{{item.price | finalPrice}}</td>
					<td>
						<button @click="decresement(index)" v-bind:disabled="item.count <= 1">-</button>
						{{item.count}}
						<button @click="incresement(index)">+</button>
					</td>
					<td>
						<button @click="clearClick(index)">操作</button>
					</td>
				</tr>
			</tbody>
		</table>
		<h2>总价格:{{totalPrice | finalPrice}}</h2>
	</div>
	<h2 v-else>购物车为空!</h2>
</div>
<script src="./vuecode/vue.js"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			books: [{
				id: 1,
				name: '《算法导论》',
				date: '2020-12-02',
				price: 128.00,
				count: 1
			}, {
				id: 2,
				name: '《C语言程序设计》',
				date: '2002-2-02',
				price: 88.00,
				count: 1
			}, {
				id: 3,
				name: '《Vuejs从入门到基础》',
				date: '2020-3-02',
				price: 48.00,
				count: 1
			}, {
				id: 4,
				name: '《Java程序设计》',
				date: '2004-1-28',
				price: 64.00,
				count: 1
			}, {
				id: 5,
				name: '《JavaScript权威指南》',
				date: '2000-8-05',
				price: 108.00,
				count: 1
			}],
		},

		computed: {
			totalPrice(){
				let totalprice = 0
				for(let i=0;i<this.books.length;i++){
					totalprice += this.books[i].price * this.books[i].count
				}
				return totalprice
			}
		},
		methods: {
			decresement(index) {
				this.books[index].count--
			},
			incresement(index) {
				this.books[index].count++
			},
			clearClick(index) {
				this.books.splice(index, 1)
			}
		},
        // 过滤器
		filters: {
			finalPrice(price) {
				return '¥' + price.toFixed(2)
			}
		}
	})
</script>

Vue 中的MVVM


  1. MVVM:Model View ViewModel。学习概念的最好的方式是维基百科
  2. MVVM
  3. Vue 中的 MVVM:
    在这里插入图片描述

在这里插入图片描述

计数器中的 MVVM

在这里插入图片描述


在这里插入图片描述

创建 Vue 实例传入的 options


  1. 在创建 Vue 实例的时候,传入了一个对象 options。
  2. options 可以包括的选项:
  3. 目前掌握的选项:
    • el
      1. 类型:string | HTMLElement
      2. 作用:决定之后 Vue 实例会管理哪一个 DOM 。
    • data
      1. 类型:Object | Function
      2. 作用:Vue 实例化对应的数据对象。
    • methods
      1. 类型:{[key: string]: Function}
      2. 作用:定义属于 Vue 的一些方法,可以在其他地方调用,也可以在指令中使用。

Vue 的生命周期


在这里插入图片描述

Vue 语法基础


代码规范

  1. 缩进:(大部分大型的开源项目一般都是)缩进 2 个空格,一般编译器缩进四个空格。
  2. 符号旁边要加空格。

Vue 的生命周期函数


等待后期补充知识点

插值操作


Mustache

Mustache 语法中,不仅仅可以直接写变量,也可以写简单的表达式。

计算属性


什么是计算属性?

  1. 在模板中我们可以通过插值语法显示一些 data 中的数据,但是在某些特殊情况下,需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示:
    • 比如有 firstName 和 lastName 两个变量,在多个地方显示完整的名称时,就需要写成:{{firstName}} {{lastName}}
  2. 我们可以将上面的代码换成计算属性:
    • 计算属性是写在实例的 computed 选项中的。
    • 计算属性在使用的时候是不需要加括号的。
<div id="app">
	<!-- 第一种方法:通过定义方法让他们结合在一起 -->
	<h2>{{getFullName()}}</h2>
	<!-- 第二种方法:计算属性(计算属性在定义的时候一般不加动词,如:FullName 和 getFullName) -->
	<h2>{{FullName}}</h2>
</div>
<script src="./vuecode/vue.js"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			firstName: 'meng',
			lastName: 'zhao'
		},
		computed: {
			FullName: function(){
				return this.firstName + ' ' + this.lastName
			}
		},
		methods: {
			getFullName: function () {
				return this.firstName + ' ' + this.lastName
			}
		}
	})
</script>

计算属性的复杂操作

<div id="app">
	<h2>总价格:{{totalprice}}</h2>
</div>
<script src="./vuecode/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			books: [
				{ id: 110, name: 'c语言', price: 119 },
				{ id: 111, name: 'linux', price: 100 },
				{ id: 112, name: 'java', price: 125 },
				{ id: 113, name: 'javascript', price: 149 }
			]
		},
		computed: {
			totalprice: function () {
				// return this.books.reduce()
				let result = 0  
				for (let i = 0; i < this.books.length; i++) {
					result += this.books[i].price
				}
				return result
			}
		},
	})
</script>

计算属性的 setter 和 getter


  1. 每个计算属性都包括一个 getter 和一个 setter(不常用) 。
  2. set() 方法一般不设置,只读属性。
<!-- 计算属性的完整写法 -->
<div id="app">
	<h2>{{fullName}}</h2>
</div>
<script src="./vuecode/vue.js"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			firstName: 'kobe',
			lastName: 'Bryant'
		},
		computed: {
			fullName: {
                // 如果不设置 set 函数,则这个是只读属性,不可以进行修改。
				set: function (newValue) {
					const names = newValue.split(' ')
					this.firstName = names[0]
					this.lastName = names[1]
				},
				get: function () {
					return this.firstName + ' ' + this.lastName
				}
			}
		},
	})
</script>

计算属性和 methods 的对比


  1. 计算属性是有缓存的,所以在执行的时候它只会调用一次,因此它的性能比 methods 高。

ES6 补充


let/var

  1. 事实上 var 的设计可以看成 JavaScript 语言设计上的错误,但是这种错误多半不能修复和移除,以为需要向后兼容。

    • 十年前,Brendan Eich 就决定修复这个问题,于是他添加了一个新的关键字:let 。
    • let 就是更完美的 var 。
  2. 块级作用域:

    • JS 中使用 var 来声明的一个变量时,变量的作用域主要是和函数的定义有关。
    • 针对于其他块定义来说是没有作用域的,比如 if/for 等,这在我们开发中往往会引起一些问题。
  3. 变量作用域:变量在什么范围内是可用的。

    • 没有块级作用域引起的问题:if 的块级
    var func;
    if(true){
        var name = 'why'
        func = function(){
            console.log(name)
        }
        // func()
    }
    name = 'kobe'
    func()
    // console.log(name)
    
    • 没有块级作用域引起的问题:for 的块级
    
    

const 的使用

  1. 在很多语言中都存在 const ,主要作用是将某个变量修饰为常量。

  2. 在 JavaScript 中也是如此,使用 const 修饰的标识符为常量,不可以再次赋值。

  3. 当修饰的标识符不会被再次赋值时,就可以使用 const 来保证数据的安全性。

  4. 注意点:

    • const a = 20
      a = 30
      
      // 错误:a不可以被修改。
      
    • const name
      
      // 错误:const 修饰的标识符必须赋值。
      
    • const obj = {
          name: 'why',
          age: 18,
          height: 1.88
      }
      
      obj.name = 'kobe'
      obj.age = 20
      obj.height = 1.87
      
      // 常量的含义是指向的对象不能修改,但是可以改变对象内部的属性。
      
  5. 建议:在开发中优先使用 const 。只需要改变某一个标识符的时候才使用let。

对象增强写法

  1. 在 ES6 中,对对象字面量进行了很多增强。

  2. 属性初始化简写和方法的简写:

    • 属性的简写:
    // ES6 之前
    let name = 'why'
    let age = 18
    let obj1 = {
        name: name,
        age: age
    }
    console.log(obj1)
    // ES6 之后
    let obj2 = {
        name,age
    }
    console.log(obj2)
    
    • 方法的简写:
    // ES6 之前
    let obj1 = {
        test: function(){
            console.log('obj1的test函数')
        }
    }
    obj1.test()
    // ES6 之后
    let obj2 = {
        test(){
            console.log('obj2的test函数')
        }
    }
    obj2.test()
    
      ## 事件监听
    
    

  1. 在前端开发中,需要经常用于交互。
    • 这时,我们就必须监听用户发生的事件,比如点击、拖拽、键盘事件等等。
    • 在 Vue 中使用 v-on 指令来监听事件。
  2. v-on 介绍:
    • 作用:绑定事件监听器。
    • 缩写:@
    • 预期:Function | Inline Statement | Object
    • 参数:event

v-on 参数


  1. 当通过 methods 中定义方法,以供 @click 调用时,需要注意参数问题

    • 情况一:如果该方法不需要额外参数,那么方法后的 () 可以不添加。
      • 但是注意:如果方法本身中有一个参数,那么会默认将原生事件 event 参数传递进去。
    • 情况二:如果需要同时传入某个参数,同时需要 event 时,可以通过 $event 传入事件。
  2. 案例讲解:

    <div id="app">
    	<!-- 时间调用的方法没有参数 -->
    	<button @click="btn1Click()">按钮</button>
    	<button @click="btn1Click">按钮1</button>
    
    	<!-- 在事件定义时,方法本身是需要一个参数的,那此时未传入参数,那么此时的形参为 undefined -->
    	<!-- 在事件定义时,写函数时省略了小括号,但是方法本身是需要一个参数的,那浏览器此时会生成一个 event 对象并作为一个参数传入方法中 -->
    	<button @click="btn2Click">按钮2</button>
    
    	<!-- 方法定义时,我们需要 event 对象,同时又需要其他参数 -->
    	<!-- 在调用方式,如何手动的获取到浏览器参数的 event 对象:$event -->
    	<button @click="btn3Click(123,$event)">按钮3</button>
    </div>
    <script src="./vuecode/vue.js"></script>
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
    <script>
    	const app = new Vue({
    		el: '#app',
    		methods: {
    			btn1Click(){
    				console.log('btn1Click');
    			},
    			btn2Click(event){
    				console.log('--------',event) ;
    			},
    			btn3Click(abc){
    				console.log('+++++++',abc,event) ;
    			}
    		}
    	})
    </script>
    

v-on 修饰符

  1. .stop:阻止冒泡。

    <div id="app" @click="divClick">
    	<!-- .stop 修饰符的使用。 -->
    	<button @click.stop="btnClick">按钮</button>
    </div>
    <script src="./vuecode/vue.js"></script>
    <script>
    	const app = new Vue({
    		el: '#app',
    		methods: {
    			btnClick(){
    				console.log('btnClick');
    			},
    			divClick(){
    				console.log('divClick');
    			}
    		}
    	})
    </script>
    
  2. .prevent:阻止默认行为。

    <div id="app">
        <!-- form 默认会自动搜集表单中的数据进行提交 -->
    	<form action="baidu">
    		<input type="submit" value="提交" @click.prevent="submitClick">
    	</form>
    </div>
    <script src="./vuecode/vue.js"></script>
    <script>
    	const app = new Vue({
    		methods: {
    			submitClick(){
    				console.log('submitClick');
    			}
    		}
    	})
    </script>
    
  3. .{keyCode | keyAlias}:只当事件是从特定键触发时才触发回调。

    <div id="app">
    	<input type="text" @keyup.enter="keyClick">
    </div>
    <script src="./vuecode/vue.js"></script>
    <script>
    	const app = new Vue({
    		el: '#app',
    		methods: {
    			keyClick(){
    				console.log('keyClick');
    			}
    		}
    	})
    </script>
    
  4. .native:监听组件根元素的原生事件。

  5. .once:只触发一次回调。

    <div id="app">
    	<button @click.once="btnClick">按钮</button>
    </div>
    <script src="./vuecode/vue.js"></script>
    <script>
    	const app = new Vue({
    		el: '#app',
    		methods: {
    			btnClick(){
    				console.log('btnClick');
    			}
    		}
    	})
    </script>
    

条件判断


v-if、v-else、v-else-if

  1. 这三个指令与 JavaScript 的条件语句 if、else、else if 类似。

  2. Vue 的条件指令可以根据表达式的值在 DOM 中渲染或销毁元素或组件。

    <div id="app">
    	<p v-if="score>90">优秀</p>
    	<p v-else-if="score>80">良好</p>
    	<p v-else-if="score>60">及格</p>
    	<p v-else>不及格</p>
    </div>
    <script src="./vuecode/vue.js"></script>
    <script>
    	const app = new Vue({
    		el: '#app',
    		data: {
    			score: 90
    		},
    	})
    </script>
    
    • 在逻辑比较多的时候不建议使用这样的方法,可以在计算属性中定义一个属性来进行逻辑判断。

v-if 的原理

  1. v-if 后面的条件为 false 时,对应的元素以及其子元素不会渲染。
  2. 也就是根本没有不会有对应的标签出现在 DOM 中。

条件案例

<div id="app">
	<span v-if="isUser">
		<label for="username">用户账号</label>
		<input type="text" id="username" placeholder="用户账号">
	</span>
	<span v-else="">
		<label for="email">用户邮箱</label>
		<input type="text" id="email" placeholder="用户邮箱">
	</span>
	<button @click="isUser = !isUser">切换类型</button>
</div>
<script src="./vuecode/vue.js"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			isUser: true
		},
	})
</script>
条件案例中存在的问题
  1. 问题描述:
    • 如果我们在有输入内容的情况下,切换了类型,就会发现文字依然显示之前输入的内容。
    • 但是应该实现的内容是:切换到另一个 input 元素中了。
    • 在另一个 input 元素中,并没有输入内容。
  2. 问题解答:
    • 这是因为 Vue 在进行 DOM 渲染时,出于性能考虑,会尽可能的复用已经存在的元素,而不是重新创建新的元素。
    • 在上面的案例中,Vue 内部会发现原来的 input 元素不再使用,直接作为 else 中的 input 来使用了。
  3. 解决方案:
    • 如果要解决 Vue 中重复利用的问题,可以给对应的 input 加一个 key 。
    • 并且我们要保证 key 是不相同的。

高阶函数


filter()

  • 过滤器,可以遍历数组,返回想要拿到的值。

  • filter 中的回调函数有一个要求:必须返回一个 Boolean 值。

  • 当返回 true 时,函数内部会自动将这次回调的 n 加入到新的数组中。

  • 当返回 false 时,函数内部会过滤掉这次的 n 。

  • 用法:

    let nums = [10,20,111,245,40,77,543,50,]
    let newNums = nums.filter(function(n){
        return n < 100
        // 把数组里面满足条件的数添加到新的数组里面
    })
    
    // 返回的新数组为[10,20,40,50]
    

map()

  • map() 函数会对产生的新数组做一次操作。

    // 此时的 newNums 为[10,20,40,50]
    
    let new2Nums = newNums.map(function(n){
        return n*2
        // 遍历数组,将数组中的所有值都乘以2,并返回一个新数组。
    })
    
    // 返回的新数组为[20,40,80,100]
    

reduce()

  • 对数组中所有的内容进行汇总。

    // 此时的 new2Nums 为[20,40,80,100]
    
    let total = new2Nums.reduce(function(preValue,n){
        return preValue +n
    },0)
    
    // preValue 的初始值为 0 。
    // total 的结果为为 240 。
    

结合使用

// 数组内容为[10,20,111,245,40,77,543,50,]

let total = nums.filter(function(n){
    return n < 100
}).map(function(n){
    return n * 2
}).reduce(function(preValue,n){
    return preValue +n
},0)

// 输出结果不变,依然是 240 。

// 简洁写法:
let total = nums.filter(n => n < 100).map(n => n * 2).reduce((pre,n)) => pre + n)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值