vue学习笔记

最新推荐文章于 2024-10-26 19:45:34 发布

Daisy_____

最新推荐文章于 2024-10-26 19:45:34 发布

阅读量624

点赞数

CC 4.0 BY-SA版权

分类专栏：知识点总结文章标签： Vue

本文链接：https://blog.youkuaiyun.com/Daisy__xu/article/details/71082946

知识点总结专栏收录该内容

14 篇文章

订阅专栏

Vue学习笔记总结

一入前端深似海，在前端的工作过程中我们只有不断的学习新技术，才能不被淘汰，之前学习Vue的时候做了一些总结，现在把它整理出来，希望能帮助一些还没有上手的同学迅速上手。

下面我们就进入正题了。

首先，了解软件的人人都知道，了解一门语言，或者学习一门新技术，编写Hello World是最基础的。

下面就来看个例子。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>

<body>

<div id="app">
{{ message }}
</div>
</body>
<script>

var vue = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})

</script>
</html>

提到Vue不得不说的双向绑定。

双向绑定示例

HTML代码：

<div id="app">
<p>{{ message }}</p>
<input type="text" v-model="message"/>
</div>

Vue代码：

var vue = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})

下面介绍Vue常用指令：

v-if指令
v-show指令
v-else指令
v-for指令
v-bind指令
v-on指令

v-if指令

<div id="app">
<h1 v-if="see">Hello, Vue.js!</h1>
</div>

var vm = new Vue({
el: '#app',
data: {
//see为true显示，为false不显示
see:false
}

})

v-show指令

<div id="app">
<h1 v-show="see">Hello, Vue.js!</h1>
</div>

var vm = new Vue({
el: '#app',
data: {
//see为true显示，为false不显示
see:false
}
})

这里不得不说一下：v-if指令和v-show指令的区别：

v-if是条件渲染指令，它根据表达式的真假来删除和插入元素

v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。

注意：v-if指令是根据条件表达式的值来执行元素的插入或者删除行为。

总结：v-if会根据表达式的真假来决定是否创建HTML，而v-show是不管真假都会创建HTML，只是根据表达式真假来隐藏或者显示元素。

v-else指令

可以用v-else指令为v-if或v-show添加一个“else块”，v-else元素必须立即跟在v-if或v-show元素的后面，否则它不能被识别。

<div id="app">
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-else>Name: {{ name }}</h1>
<h1>---------------------分割线---------------------</h1>
<h1 v-show="name.indexOf('keep') >= 0">Name: {{ name }}</h1>
<h1 v-else>Sex: {{ sex }}</h1>
</div>

var vm = new Vue({
el: '#app',
data: {
age: 26,
name: 'daisy',
sex: 'women'
}
})

注意：和前面的v-if指令和v-show指令一样，在v-if后的v-else，如果v-if为true，v-else不会渲染到HTML中，v-show为tue，但是后面的v-else仍然渲染到HTML了。

v-for指令

<div id="app">
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
</tr>
</thead>
<tbody>
<tr v-for="person in people">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ person.sex }}</td>
</tr>
</tbody>
</table>
</div>

var vm = new Vue({
el: '#app',
data: {
people: [{
name: 'daisy',
age:22,
sex: 'Male'
}, {
name: 'petter',
age: 26,
sex: 'Male'
}, {
name: 'Tracy',
age: 24,
sex: 'women'
}, {
name: 'Chris',
age: 38,
sex: 'Male'
}]
}
})

v-bind指令

<div id="app">
<ul class="pagination">
<li v-for="n in pageCount">
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
</li>
</ul>
</div>

var vm = new Vue({
el: '#app',
data: {
activeNumber: 1,
pageCount: 10
}
})

v-on指令

<button v-on:click="say('Hello vue')">Hi</button>

var vm = new Vue({
el: '#app',
// 在 `methods` 对象中定义方法
methods: {
say: function(msg) {
alert(msg)
}
}
})

v-bind和v-on的缩写

v-bind缩写:

v-on缩写@