0%

Vue学习笔记(1)

个人学习用代码仓库:vue-learn

我使用vue.js写的小例子都会存在这里,可以关注下。

简介

摘自Vue.js官网教材的介绍

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。

Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

需要学习的直接去官网就好了,官方教程挺好的 -> Vue.js

废话不多说,直接贴自己的笔记。

引入Vue

去github下载或者直接引用cdn

1
2
<!-- 开发环境版本,包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
1
2
<!-- 生产环境版本,优化了尺寸和速度 --> 
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

文本插值

Vue允许采用简洁的模板语法来声明式地将数据渲染进 DOM

HTML部分:

1
2
3
<div id="app">
{{ message }}
</div>

新建应用并绑定:

1
2
3
4
5
6
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})

输出:

Hello Vue!

此时数据与DOM建立了关联,而且相应式的,只要用JavaScrip修改app.message的值,那么应用app绑定的DOM就会改变其值。

绑定元素_v-bind:arrtibute

HTML部分:

1
2
3
4
5
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>

新建应用并绑定:

1
2
3
4
5
6
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})

输出:

鼠标悬停几秒钟查看此处动态绑定的提示信息!

悬停title:页面加载于 2020/3/15 上午1:51:14

Vue的指令都带有前缀v-,用来表示它们是Vue提供的特殊attribute。

v-bind:title="message"的意思是:”使span的title属性与message的值保持一致“

如果修改了app.message的值,那么span的title值也会随之改变。

元素显示_v-if

Vue提供简易的控制元素显示方法 v-if

HTML部分:

1
2
3
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>

新建应用并绑定:

1
2
3
4
5
6
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})

输出:

现在你看到我了

在控制台输入app3.seen = false即可使#app-3内的p标签隐藏。

因此Vue不仅可以把数据绑定到 DOM 文本或 attribute,还可以绑定到 DOM 结构

循环输出_v-for

v-for指令可以绑定数组的数据渲染一个项目列表

HTML部分:

1
2
3
4
5
6
7
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>

新建应用并绑定:

1
2
3
4
5
6
7
8
9
10
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个大项目' }
]
}
})

输出:

1
2
3
1.学习 JavaScript
2.学习 Vue
3.整个大项目

在控制台里,输入 app4.todos.push({ text: '新项目' }),列表最后会添加一个新项目。

事件监视器_v-on

v-on指令可以添加一个事件监视器,便于交互。

HTML部分:

1
2
3
4
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>

新建应用并绑定:

1
2
3
4
5
6
7
8
9
10
11
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})

输出:

点击反转消息按钮可以使app-5中p标签的内容反转

表单输入绑定_v-model

v-model指令可以实现表单输入和应用状态间的绑定。

HTML部分:

1
2
3
4
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>

新建应用并绑定:

1
2
3
4
5
6
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})

输出:

修改文本框同步改变app-6中p标签的内容

组件化应用构建

在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例。

组件注册的方式如下:

1
2
3
4
5
6
7
8
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
template: '<li>这是个待办项</li>'
})

var app = new Vue({
el: '#app-7'
})

可以使用该组件构建另一个组件模板:

1
2
3
4
5
6
<div>
<ol>
<!-- 创建一个 todo-item 组件的实例 -->
<todo-item></todo-item>
</ol>
</div>

输出:

1.这是个待办项

这样会为每个待办项渲染同样的文本,我们可以修改组件定义使之接受一个prop,实现从父作用域将数据传到子组件。

1
2
3
4
5
6
7
Vue.component('todo-item', {
// todo-item 组件现在接受一个
// "prop",类似于一个自定义 attribute。
// 这个 prop 名为 todo。
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})

这样可以使用v-bind将内容传到循环输出的每个组件。

HTML部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app-7">
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量,即其内容可以是动态的。
我们也需要为每个组件提供一个“key”,详细解释之后再说。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>

组件与应用部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西(鲱鱼罐头' }
]
}
})

输出:

1
2
3
1.蔬菜
2.奶酪
3.随便其它什么人吃的东西(鲱鱼罐头

尽管这只是一个刻意设计的例子,但是我们已经设法将应用分割成了两个更小的单元。子单元通过 prop 接口与父单元进行了良好的解耦。我们现在可以进一步改进 组件,提供更为复杂的模板和逻辑,而不会影响到父单元。

vue教程上有个(假想的)例子,展示了使用组件的应用模板是什么样的:

1
2
3
4
5
6
7
<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>

拓展:vue组件与自定义元素的关系

本文结束,感谢您的阅读(*/ω\*)