• web学习---Vue---笔记（一）

    Vue

    终于要开始看Vue了！！！

    Vue是一个渐进式的框架
    渐进式的好处：可以将Vue作为应用的一部分嵌入其中

    • Vue.js可以提高开发效率
    • Vue可以减少不必要的DOM操作
    • Vue，双向数据绑定概念，使得程序员只关心数据的业务逻辑，不再关系DOM是如何渲染的

    框架和库的区别

    框架：是一套完整的解决方案；对项目的侵入性比较大，如果项目需要更换框架，则需要重新架构整个项目
    库：提供某一个小功能，对项目的侵入性比较小，如果某个库不满足某些要求，可以更换其他库实现需求

    Hello World例子

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/v2.6.10/vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			{{message}}
		</div>
		
		<script type="text/javascript">
			var vueName = new Vue({
				el:"#app",//element，元素
				data:{
					message:"Hello world！！！"
				}
			})
		</script>
	</body>
</html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    解析

    let变量
const常量

    • 1
    • 2

    swift、java中let修饰常量
    差别有点大

    const app = new Vue({})创建一个Vue对象

    注意Vue，而不是vue

    在创建Vue的时候，传入了一个option对象
    option对象里面，可以包含这些对象：el、data

    el:

    类型：string | HTMLElement
    作用：决定之后Vue实例会管理哪一个DOM

    就是，vue对象如何知道操作哪一个DOM对象？需要绑定。跟JS类似，你想操作元素，起码先找到元素吧

    el的作用范围：只要在被命中的元素内，子孙都可以被找到替换

    		{{message}}
		<div id="app">
			{{message}}
			<span>
				{{message}}
			</span>
		</div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    第一个message的值，不会被替换，因为在命中元素的外部；
    后面两个message的值，都会被替换

    除了id选择器，也可以使用其他选择器，建议使用id选择器

    只支持双标签（HTML、BODY标签除外）
    不支持单标签，因为单标签没法写{{}}

    data:

    类型：Object | Function()组件当中，data必须是一个函数
    作用：Vue实例对应的数据对象。

    Vue中，用到的数据定义在data中

    data除了使用上面那种简单的基本数据类型外，也可以使用数组、对象等复杂类型的数据，比如：

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <script src="../js/v2.6.10/vue.js"></script> -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{message}}<br/>
			
			{{array}}<br/>
			
			{{objectName}}<br/>
			
			<h1>名字：{{objectName.name}} 年龄：{{objectName.age}}</h1>
			
			<ul>
				<li>{{array[0]}}</li>
				<li>{{array[1]}}</li>
			</ul>
		</div>
		
		<script type="text/javascript">
			var vueName = new Vue({
				el:"#app",
				data:{
					message:"Hsssello world！！！",
					array: ['1', '2', '3'],
					objectName: {
						name: "小二",
						age: 10
					}
				}
			})
		</script>
	</body>
</html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    渲染复杂类型数据的时候，遵循JS语法即可

    methods:

    类型：{[key: string]: Function}
    作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用

    在这里插入图片描述首先，创建一个Vue对象
    div标签，有一个id=“app”，然后Vue下有一个el，值为"#app"，这样，div标签就与Vue对象关联起来了
    然后，el命中的元素(#app)内部，由两个大括号括起来的内容，就会被Vue里面data里面的同名的数据所替换

    使用步骤：
    1. 导入Vue.js
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    • 1
    • 2
    • 3
    • 4
    • 5
    1. 创建Vue实例对象，设置el属性和data属性
    2. 使用简洁的模板语法把数据渲染到页面上

    一个计算机的小例子：

    在这里插入图片描述

    v-on:click="xxx"按钮绑定
    @click语法糖

    <body>
		<div id = "box">
			<h2>当前数值：{{message}}</h2>
			<button type="button" v-on:click="addNum">加</button>
			<!-- @click是上面的语法糖 -->
			<button type="button" @click="deleteNum">减</button>
		</div>
		
		
		<script>
			const app = new Vue({
				el: '#box',//绑定元素
				data: {
					message: 0
				},
				methods: {
					addNum() {
						this.message = this.message + 1;
					},
					deleteNum() {
						app.message = app.message - 1;
					}
				}
			})
		</script>
	</body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    Vue的生命周期

    基本语法

    Mustache（胡子）

    Mustache，中文：胡子
    ？？？胡子？？？

    {{message}}，就是简单地Mustache语法
    Mustache语法，应用在元素中间
    Mustache语法，除了放message变量，还可以放表达式，比如{{firstName + secondName}}

    <h2>{{firstName + secondName}}</h2>

data: {
	firstName: 's',
	secondName: 'yz'
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    Vue指令

    Vue有很多指令：

    1. 内容绑定，事件绑定：v-text v-html v-on基础
    2. 显示切换，属性绑定：v-show v-if v-bind
    3. 列表循环，表单元素绑定：v-for v-on补充 v-model

    1.1 V-text

    数据设置给标签的文本值(textContent)

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <script src="../js/v2.6.10/vue.js"></script> -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2 v-text="message+'9'">这是原来的内容</h2> 
			<h2>这是原来的内容{{message+"9"}}</h2> 
		</div>
		
		<script type="text/javascript">
			var vueName = new Vue({
				el:"#app",
				data:{
					message:"Hello world！！！",
				}
			})
		</script>
	</body>
</html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    从例子可以看出：

    使用v-text的方式，会把h2里面原有的内容替换掉
    而{{}}方式只会替换括号内部的内容

    v-text拼接的时候，由于外部是双引号，里面只能使用单引号
    使用{{}}方式，双引号、单引号都可以

    1.2 v-html

    设置标签的innerHTML
    有时候服务端直接返回的不是具体的url地址，而是url: '<a href="https://www.baidu.com">百度一下</a>'

    这时，直接使用之前的方法，显示的字符串，而不是链接
    可以使用<h2 v-html="url"></h2>，就可以正常显示

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <script src="../js/v2.6.10/vue.js"></script> -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p v-text="url">123</p>
			
			<p v-html="message">123</p>
			<p v-html="url">123</p>
		</div>
		
		<script type="text/javascript">
			var vueName = new Vue({
				el:"#app",
				data:{
					message:"Hello world！！！",
					url:'<a href="https://www.baidu.com">百度一下</a>'
				}
			})
		</script>
	</body>
</html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    在这里插入图片描述

    v-text只能被解析成文本
    内容中有html结构的，v-html可以解析成标签

    1.3 v-on基础

    为元素绑定事件
    JS绑定事件一般使用onclick或者监听click
    Vue中，使用v-on，或者v-on:简写为@

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <script src="../js/v2.6.10/vue.js"></script> -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button type="button" v-on:click="someMethod">按钮</button>
			<button type="button" v-on:click="someMethod()">按钮</button>
			<button type="button" v-on:mousemove="someMethod">按钮</button>
			<!-- 可以简写 -->
			<button type="button" @mousemove="someMethod">按钮</button>
			
			<h2 @click="showFood()"> {{food}} </h2>
		</div>
		
		<script type="text/javascript">
			var vueName = new Vue({
				el:"#app",
				data:{
					message:"Hello world！！！",
					food: "西兰花炒蛋"
				},
				methods:{
					someMethod: function(){
						alert("233");
					},
					showFood: function(){
						this.food += '没吃过';
					}
				}
			})
		</script>
	</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    2.1 v-show

    根据表达式值得真假，切换元素的显示与隐藏

    v-show="true"显示
    v-show="false"隐藏

    其本质是切换display: none

    举例：

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/v2.6.10/vue.js"></script>
		
		<style type="text/css">
			img {
				width: 200px;
				height: 200px;
			}
		</style>
		
	</head>
	<body>
		<div id="app">
			<img src="../img/写轮眼.png" v-show=isShow>
		</div>
		
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					isShow: true
				}
			})
		</script>
	</body>
</html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    2.2 v-if

    根据表达值的真假，切换元素的显示和隐藏（操作DOM元素）

    v-if与v-show的功能、使用方法都一样

    区别：
    v-show，其本质是操作display: none，主要用频繁切换的元素
    v-if，其本质是直接将被修饰的隐藏元素从DOM树中移除了

    2.3 v-bind

    专门操作元素的属性（比如：src、title、class）的

    用法：
    v-bind:属性名=表达式
    简写：
    :属性名=表达式

    作用：动态绑定属性

    <img v-bind:src="imgUrl" style="width: 100px; height: 200px;" >
或者，语法糖的写法：
<img :src="imgUrl" style="width: 100px; height: 200px;" >

data: {
	message: 0,
	imgUrl: '图片地址'
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    例子1：v-bind用于class
    		<div id = "app">
			<h2 class="active">{{message}}</h2>
			<h2 :class="active">{{message}}</h2>
			<!-- class后面跟的，是一个对象，里面跟key和value
			注意，是单{}括号 -->
			<h2 :class="{key1: value1, key2: value2}">{{message}}</h2>
			<!-- 一般，value是boolean值，其代表含义是：true就用，false就不用 -->
			<h2 :class="{类名1: boolean, 类名2: boolean}">{{message}}</h2>
			<!-- 举个栗子：下面栗子表面，class绑定的是active，而没有绑定line -->
			<h2 :class="{active: true, line: false}">{{message}}</h2>
			<!-- 结合v-bind，绑定class，可以这样使用： -->
			<h2 :class="{active: isActive, line: isLine}">{{message}}</h2>
		</div>
		
		
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					message: '你好啊',
					active: 'active',
					isActive: true,
					isLine: true
				}
			})
		</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    在这里插入图片描述点击按钮，可以切换文字颜色：

    		<div id = "app">
			<!-- 结合v-bind，绑定class，可以这样使用： -->
			<h2 :class="{active: isActive, line: isLine}">{{message}}</h2>
			<button type="button" v-on:click ="onClick">按钮</button>
		</div>
		
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					message: '你好啊',
					active: 'active',
					isActive: true,
					isLine: true
				},
				
				methods: {
					onClick: function(){
						this.isActive = !this.isActive;
					},
					<!-- 两种写法都可以 -->
					onClick() {
						this.isActive = !this.isActive;
					}
				}
			})
		</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    例子2：v-bind动态绑定style
    	<body>
		<div id = "app">
			<h2>1{{message}}</h2> 
			
			<!-- <h2 :style="{key(属性名): value(属性值)}">{{message}}</h2> -->
			
			<!-- 50px不加单引号，被解析为变量
			50px加单引号，被解析真正的50px大小 -->
			
			<h2 :style="{fontSize:'50px'}">2{{message}}</h2>
			
			<h2 :style="{'font-size':'50px'}">3{{message}}</h2>
			
			<h2 :style="{'font-size': finalSize}">4{{message}}</h2>
			
			<h2 :style="{'font-size': finalSize2 + 'px'}">5{{message}}</h2>
			
			<h2 :style="getStyles()">6{{message}}</h2>
		</div>
		
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					message: '你好啊',
					finalSize: '50px',
					finalSize2: 50,
					finalColor: 'yellow'
				},
				methods: {
					getStyles(){
						return {'font-size': this.finalSize, color: this.finalColor}
					}
				}
			})
		</script>
	</body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    3.1 v-for

    根据数据生成列表结构

    例子：
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/v2.6.10/vue.js"></script>
		
		
		<style type="text/css">
			img {
				width: 200px;
				height: 200px;
			}
		</style>
		
	</head>
	<body>
		<div id="app">
			<ul>
				<!-- 谁多个，v-for作用在谁身上 -->
				<!-- arr，是要循环的数组名，是跟data里面的arr对应的
				in是关键字，不能修改
				item是遍历的每一项，可以修改名字 -->
				
				
				<li v-for="item in arr">- {{item}} -</li>
			</ul>
			
			<ul>
				<!-- 如果想使用索引，则需要小括号括起来，index即为索引 -->
				<li v-for="(item, index) in arr">+ {{arr[index]}} +</li>
			</ul>
			
			<ul>
				<!-- 对象的获取，使用点语法 -->
				<li v-for="item in objArr">+ {{item.n}} +</li>
			</ul>
			
			<ul>
				<li v-for="(item, index) in objArr">+ {{objArr[index].n}} +</li>
			</ul>
			
			<input type="button" name="" id="" value="添加数据" @click="add()"/>
			<input type="button" name="" id="" value="减少数据" @click="remove()"/>
		</div>
		
		
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					arr: [1,3,5,10,2],
					objArr:[
						{n: "jack"},
						{n: "rose"}
						]
				},
				methods:{
					add(){
						this.objArr.push({n: "Tom"})
					},
					remove(){
						this.objArr.shift()
					}
				}
			})
		</script>
	</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69

    3.2 v-on补充

    传递自定义参数，事件修饰符

    这次我们学习，当绑定的时候，如何传参？

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/v2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="button" @click="doIt(2, 3)" value="点击"/>
			<!-- keyup，键盘点击完抬起的时候
			keyup.enter为键盘抬起，并输入enter时触发 -->
			<input type="text" @keyup.enter="sayHi"/>
			<span>{{num}}{{num2}}</span>
		</div>
		
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					num: 0,
					num2: 0
				},
				methods:{
					// 使用形参接收参数
					doIt(p1, p2) {
						this.num = p1,
						this.num2 = p2
					},
					sayHi(){
						alert("吃了没？")
					}
				}
			})
		</script>
	</body>
</html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    v-model

    获取和设置表单元素的值 （双向数据绑定）

    便捷的 获取和设置表单元素(input)的值
    绑定的数据会和表单元素 值 相关联
    绑定的数据 与 表单元素的值 相关关联，双向绑定，一改都改

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/v2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" name="" id="" value="" v-model="message" @keyup.enter="test()"/>
			<h1>{{message}}</h1>
		</div>
		
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					message: "你好"
				},
				methods:{
					test(){
						console.log(this.message);
					}
				}
			})
		</script>
	</body>
</html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    其他Vue指令

    • v-once

    加上后，再不能改变
    <h2 v-once> {{message}} </h2>

    • v-pre
      内容原封不动的显示

    例子：记事本

    网络应用

    axios 网络请求库
    axios+vue结合在一起

    axios的使用

    首先，在使用的时候，要导入axios。也就是，必须先导入才可以使用
    <script src="https://unpkg.com/axios/dist/axios.min.js"> </script>

    then方法中的回调函数，会在请求成功或者失败时触发

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/v2.6.10/vue.js"></script>
	</head>
	<body>
		
		<input type="button" value="get请求" class="get"/>
		<input type="button" value="post请求" class="post"/>
		
		<script src="https://unpkg.com/axios/dist/axios.min.js"> </script>
		<script>
			// get方法
			document.querySelector(".get").onclick = function(){
				axios.get("https://autumnfish.cn/api/joke/list?num=3").then(function(response){
					console.log(response);
				}, function(err){
					console.log(err);
				})
			}
			
			// post方法
			document.querySelector(".post").onclick = function(){
				// 参数是以字典形式，写在后面
				axios.post("https://autumnfish.cn/api/user/reg", {username:'rose'}).then(function(response){
					console.log(response);
				}, function(err){
					console.log(err);
				})
			}
		</script>
	</body>
</html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    axios+vue

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/v2.6.10/vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<input type="button" value="随机笑话" @click="changeMessage()"/>
			<p> {{message}} </p>
		</div>
		
		<script src="https://unpkg.com/axios/dist/axios.min.js"> </script>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					message: "给你讲个笑话吧"
				},
				methods: {
					changeMessage(){
						console.log(this);//该this是vue对象
						
						var that = this;//因此，把this存下来
						axios.get("https://autumnfish.cn/api/joke").then(function(response){
							// console.log(response);
							// console.log(response.data);
							console.log(this);//该this是window对象
							that.message = response.data;
						}, function(err){
							console.log(err);
						})
					}
				}
			})
		</script>
	</body>
</html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    计算属性

    	<body>
		<!-- 计算属性，不需要加() -->
		<div id = "app">{{fullName}}</div>
		
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					message: 0,
					firstName: 's',
					secondName: 'yz'
				},
				// 计算属性
				computed:{
					fullName() {
						return this.firstName + ' ' + this.secondName
					}
				}
			})
		</script>
	</body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    参考视频：
    4个小时带你快速入门vue

  • 相关阅读:
    Springboot美得商城的设计与实现860t0计算机毕业设计-课程设计-期末作业-毕设程序代做
    第11章 数据库的设计规范【2.索引及调优篇】【MySQL高级】
    std::make_shared和new初始化智能指针的区别
    ElasticSearch之分布式模型介绍，选主，脑裂
    type.Dict 和 Dict 之间的区别及其在 Python 中的用途
    Miniconda创建paddlepaddle环境
    多继承&vs查看类结构
    【消息中间件】为什么选择RocketMQ及SpringBoot整合使用案例
    ros之乌龟做圆周运动and订阅乌龟的位姿信息
    博途1200PLC轴控功能块(脉冲轴)
  • 原文地址：https://blog.csdn.net/IOSSHAN/article/details/125121314