vue 学习笔记（一）

最新推荐文章于 2023-04-07 17:45:18 发布

罗罗诺亚丶索隆

最新推荐文章于 2023-04-07 17:45:18 发布

阅读量195

点赞数

分类专栏： vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/qq_36802214/article/details/119815513

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、模板语法

1、插值

1.1、文本

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：

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

1.2、html

使用 v-html 指令用于输出 html 代码：

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>菜鸟教程</h1>'
  }
})
</script>

2、指令

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。eg: v-bind, v-on

<a v-bind:href="url">aaa</a>
<a v-on:click="doSomething">bbb</a>

3、修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">...</form>

4、表达式

Vue.js 都提供了完全的 JavaScript 表达式支持。

<div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    ok: true,
    message: 'RUNOOB',
    id : 1
  }
})
</script>

5、缩写

对 v-bind 和 v-on 的简写为 : 和 @

<a v-bind:href="url">aaa</a>
<a :href="url">aaa</a>

<a v-on:click="do">bbb</a>
<a @click="do">bbb</a>

二、条件语句

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

1、v-show

始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

<h1 v-show="ok">Hello!</h1>

2、v-if

会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-else 、v-else-if 必须跟在 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>

三、循环语句 v-for

v-for 指令需要使用 "item in items "形式的特殊语法，

可以用 v-for 遍历对象。可以有三个参数 (value, key, index);

公共参数：

stars:['蔡徐坤',"苏有朋","范冰冰","李晨"],
students:[
	{
		studentName:"小明",
		age:16,
		school:"清华",
		imgheader:"http://b-ssl.duitang.com/20151024160112_uYtPB.jpeg"
	},
	{
		studentName:"小黑",
		age:17,
		school:"北大"
	},
	{
		studentName:"小红",
		age:18,
		school:"浙大"
	},
	{
		studentName:"小红",
		age:15,
		school:"浙大"
	}
],

1、通过一个对象的属性来迭代数据

<li v-for="item in stars">{{item}}</li>
蔡徐坤
苏有朋
范冰冰
李晨

2、第二个的参数为键名

<li v-for="(item,key) in students">
	<h4>索引值：{{key}}---学生名字：{{item.studentName}}</h4>
	
	<p>年龄：{{item.age}}---学校：{{item.school}}</p>
</li>
索引值：0---学生名字：小明
年龄：16---学校：清华

索引值：1---学生名字：小黑
年龄：17---学校：北大

索引值：2---学生名字：小红
年龄：18---学校：浙大

索引值：3---学生名字：小红
年龄：15---学校：浙大

3、第三个的参数为键名

<li v-for="item,key,index in students[0]">{{index}}:key:{{key}}---value:{{item}}</li>
0:key:studentName---value:小明
1:key:age---value:16
2:key:school---value:清华
3:key:imgheader---value:http://b-ssl.duitang.com/20151024160112_uYtPB.jpeg

4、循环对象

<li v-for="item in students[0]">value:{{item}}</li>
value:小明
value:16
value:清华
value:http://b-ssl.duitang.com/20151024160112_uYtPB.jpeg

5、循环整数

<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>

四、计算属性

计算属性关键词: computed。

计算属性在处理一些复杂逻辑时是很有用的。一般需要计算修改的参数一般都写在这里

<div id="app">
	<!-- 一般情况下写法 -->
	<h1>{{firstname+lastname}}</h1>
	<!-- 计算属性 -->
	<h1>{{fullname}}</h1>
	<!--逆序显示1个单词 -->
	<h1>{{ word.split("").reverse().join("") }}</h1>
	<h1>{{reverseWord}}</h1>
	<h1>循环偶数年龄</h1>
	<ul>
		<li v-for="item,index in oddStudents">
			<h3>{{item.studentName}}</h3>
			<h4>{{item.age}}----{{item.school}}</h4>
		</li>
	</ul>
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			firstname:"张",
			lastname:"三",
			word:"music",
			students:[
				{
					studentName:"小明",
					age:16,
					school:"清华",
					imgheader:"http://b-ssl.duitang.com/uploads"
				},
				{
					studentName:"小黑",
					age:17,
					school:"北大"
				},
				{
					studentName:"小红",
					age:18,
					school:"浙大"
				},
				{
					studentName:"小红",
					age:15,
					school:"浙大"
				}
			]
		},
		computed:{
			fullname:function(){
				console.log(this)
				//会将计算的结果进行缓存，只要this.firstname和lastname变量的内容不改变
                //，就不会重新计算
				return this.firstname+this.lastname
			},
			reverseWord:function(){
				return this.word.split("").reverse().join("")
			},
			oddStudents:function(){
				let results = this.students.filter((item,i)=>{
					return item.age%2==0
				})
				return results
			}
		}
	})
</script>

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

reverseMsg:{
	get:function(){
		return this.msg.split("").reverse().join("")
	},
	set:function(value){
		this.msg = value.split("").reverse().join("")
	}
}

五、监听属性

监听属性 watch，我们可以通过 watch 来响应数据的变化。

<div id = "computed_props">
    千米 : <input type = "text" v-model = "kilometers">
    米 : <input type = "text" v-model = "meters">
</div>
<p id="info"></p>
<script type = "text/javascript">
    var vm = new Vue({
    el: '#computed_props',
    data: {
        kilometers : 0,
        meters:0
    },
    watch : {
        kilometers:function(val) {
            this.kilometers = val;
            this.meters = this.kilometers * 1000
        },
        meters : function (val) {
            this.kilometers = val/ 1000;
            this.meters = val;
        }
    }
    });
})
</script>

六、class与style绑定

class属性绑定

<!-- <div class="page"></div> -->
<!-- 通过对象的方式决定是否存在某个类 -->
<div class="page" :class="{active:isTrue}"></div>
<!-- 直接放置对象 -->
<div class="page" :class="styleObj"></div>
<!-- 放置数组 -->
<div class="page" :class="styleArr"></div>
<!-- 放置字符串 -->
<div class="page" :class="styleStr"></div>
<!-- 数组和对象混合和使用 -->
<div class="page" :class="styleArrObj"></div>

var app = new Vue({
	el:"#app",
	data:{
		isTrue:true,
		styleObj:{active:true,laochen:true,"col-lg-6":true},
		// 可直接用数组的方式进行添加和删除
		styleArr:['col-xs-12','red-bg'],
		styleStr:"abc cba qwer",
		styleArrObj:['abc',{active:false}]
	},
})

style属性绑定

<div style="width: 100px;height: 100px;background: skyblue;"></div>
<!-- CSS内联样式变量拼接 -->
<div style="width: 100px;height: 100px;background: skyblue;" 
	:style="{ border: borderWidth+'px solid red',padding:paddingWidth+'px' }"></div>
<!-- CSS内联样式放置对象 -->
<div :style="styleObj"></div>
<!-- CSS数组的方式拼接 -->
<div :style="styleArr"></div>

let app =  new Vue({
	el:"#app",
	data:{
		borderWidth:50,
		paddingWidth:30,
		styleObj:{
			width:"200px",
			height:"300px",
			padding:"50px",
			'background-color':'skyblue'
		},
		styleArr:[
			{
				width:"200px",
				height:"300px",
				padding:"50px",
				'background-color':'skyblue'
			},{
				border:"30px solid yellow"
			}
		]
	}
})

罗罗诺亚丶索隆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 学习笔记（一）

一、模板语法1、插值1.1、文本数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：<div id="app"> <p>{{ message }}</p></div>1.2、html使用 v-html 指令用于输出 html 代码：<div id="app"> <div v-html="message"></div></div> <s
复制链接

扫一扫

专栏目录